Merge pull request #1 from erimicel/gh-pages

Move gh-pages to main branch
erimicel · Jan 5, 2025 · 4684038 · 4684038
2 parents e217884 + c61fa3b
commit 4684038
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 NPM Links
 
-[Select2](https://github.com/select2/select2) v4 theme for TailwindCSS v3.4
+[Select2](https://github.com/select2/select2) v4 theme for TailwindCSS v3.4, inspired by [select2-bootstrap4-theme](https://github.com/ttskch/select2-bootstrap4-theme)
 
 ## Live demo
 

diff --git a/docs/.DS_Store b/docs/.DS_Store
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,3 @@
+# Live demo
+
+https://erimicel.github.io/select2-tailwindcss-theme/
diff --git a/docs/css/tailwind.css b/docs/css/tailwind.css
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Select2 Tailwindcss Theme</title>
+  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com"></script>
+
+  <link href="css/tailwind.css" rel="stylesheet">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+</head>
+
+<body class="bg-gray-100 font-sans antialiased">
+
+  <header class="bg-blue-600 text-white py-4 shadow">
+    <h1 class="text-center text-xl font-bold">Select2 Tailwindcss Theme Demo</h1>
+  </header>
+
+  <main class="max-w-4xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-lg">
+    <h2 class="text-2xl font-semibold text-gray-800 mb-6">
+      Examples of
+      <a href="https://github.com/erimicel/select2-tailwindcss-theme" target="_blank" class="text-blue-600">
+        @erimicel/select2-tailwindcss-theme
+      </a>
+  </h2>
+
+    <form class="space-y-4">
+      <!-- Single Select -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of single select</label>
+        <select data-placeholder="Choose one thing" data-allow-clear="1">
+          <option></option>
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </div>
+
+      <!-- Tags Select -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of dynamic option creation</label>
+        <select multiple data-placeholder="Type anything" data-allow-clear="1" data-tags="1">
+          <option>Alaska</option>
+          <option>Hawaii</option>
+          <!-- Additional options omitted for brevity -->
+        </select>
+      </div>
+
+      <!-- Multiple Select -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of multiple select</label>
+        <select multiple data-placeholder="Choose anything" data-allow-clear="1">
+          <option>Alaska</option>
+          <option>Hawaii</option>
+          <!-- Additional options omitted for brevity -->
+        </select>
+      </div>
+
+      <!-- Disabled Select -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of disabled select</label>
+        <select disabled data-placeholder="Cannot choose" data-allow-clear="1"></select>
+      </div>
+
+      <!-- Multiple Disabled Select -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of disabled multiple select with selected items</label>
+        <select disabled multiple>
+          <option selected>Alaska</option>
+          <option selected>Hawaii</option>
+        </select>
+      </div>
+
+      <!-- Select with Optgroup -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of select with optgroup</label>
+        <select data-placeholder="Choose one thing" data-allow-clear="1">
+          <option></option>
+          <optgroup label="Group A">
+            <option>A1</option>
+            <option>A2</option>
+            <option>A3</option>
+          </optgroup>
+          <optgroup label="Group B">
+            <option>B1</option>
+            <option>B2</option>
+            <option>B3</option>
+          </optgroup>
+        </select>
+      </div>
+
+      <!-- Input Group -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of input group</label>
+        <div class="flex">
+          <span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Prepend</span>
+          <select data-placeholder="Choose one thing" data-allow-clear="1">
+            <option></option>
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+        </div>
+
+        <div class="flex">
+          <select data-placeholder="Choose one thing" data-allow-clear="1">
+            <option></option>
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          <span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Append</span>
+        </div>
+
+        <div class="flex">
+          <span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Prepend</span>
+          <select data-placeholder="Choose one thing" data-allow-clear="1">
+            <option></option>
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          <span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Append</span>
+        </div>
+      </div>
+
+      <!-- Validated Select -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">Example of validated select</label>
+        <select data-placeholder="Invalid example" data-allow-clear="1">
+          <option></option>
+        </select>
+        <p class="text-sm text-red-500 mt-2">Something is wrong.</p>
+      </div>
+    </form>
+  </main>
+
+  <footer class="my-12 text-center text-gray-600">
+    <p class="text-sm">Select2 4.1.0-rc.0, TailwindCSS 3.4.17, jQuery 3.7.1</p>
+  </footer>
+
+  <script>
+    $(function () {
+        $('select').each(function () {
+          $(this).select2({
+            theme: 'tailwindcss-3',
+            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
+            placeholder: $(this).data('placeholder') || 'Select an option',
+            allowClear: Boolean($(this).data('allow-clear')),
+            closeOnSelect: !$(this).attr('multiple'),
+            tags: Boolean($(this).data('tags')),
+          });
+        });
+      });
+  </script>
+
+</body>
+
+</html>
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './**/*.{html,js}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/docs/tailwind.css b/docs/tailwind.css
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "build": "sass src/select2-tailwindcss-theme.scss dist/select2-tailwindcss-theme.css",
     "build:min": "MINIFY=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme.min.css --verbose",
     "build:plain": "VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.css --verbose",
-    "build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose"
+    "build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose",
+    "build:demo": "npx tailwindcss -i ./demo/tailwind.css -o ./demo/css/tailwind.css --minify"
   },
   "repository": {
     "type": "git",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Live demo

		https://erimicel.github.io/select2-tailwindcss-theme/