Merge pull request #10 from erimicel/add-more-examples-to-demo

Add disabled option example and style update

Author: erimicel

dist/select2-tailwindcss-theme-plain.css

@@ -168,6 +168,23 @@
   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
+/* Disabled option items */
+
+.select2-container--tailwindcss-3 .select2-results__option--disabled{
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1))
+}
+
+.select2-container--tailwindcss-3 .select2-results__option--disabled:where(.dark, .dark *){
+  border-color: rgb(255 255 255 / 0.05);
+  background-color: rgb(255 255 255 / 0.1)
+}
+
 /* Hover state */
 
 .select2-container--tailwindcss-3 .select2-results__option--highlighted{

dist/select2-tailwindcss-theme-plain.min.css

@@ -33,6 +33,11 @@
   @apply relative py-2 pl-3 text-gray-900 transition-colors duration-150 ease-in-out cursor-default select-none pr-9 dark:text-white;
 }
 
+/* Disabled option items */
+.select2-container--tailwindcss-3 .select2-results__option--disabled {
+  @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/10 dark:border-white/5;
+}
+
 /* Hover state */
 .select2-container--tailwindcss-3 .select2-results__option--highlighted {
   @apply text-white bg-indigo-600;

dist/select2-tailwindcss-theme.css

@@ -74,6 +74,14 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800 dark:text-white">
         </select>
       </div>
 
+      <!-- Single Ajax Select -->
+      <div>
+        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of single ajax select</label>
+        <select data-placeholder="Search for github repos" data-allow-clear="1" data-fetch="https://api.github.com/search/repositories">
+          <option></option>
+        </select>
+      </div>
+
       <!-- Tags Select -->
       <div>
         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of dynamic option creation</label>
@@ -100,6 +108,17 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800 dark:text-white">
         <select disabled data-placeholder="Cannot choose" data-allow-clear="1"></select>
       </div>
 
+      <!-- Disabled option -->
+      <div>
+        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled option</label>
+        <select data-placeholder="Cannot anything">
+          <option></option>
+          <option value="one">First</option>
+          <option value="two" disabled="disabled">Second (disabled)</option>
+          <option value="three">Third</option>
+        </select>
+      </div>
+
       <!-- Multiple Disabled Select -->
       <div>
         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled multiple select with selected items</label>
@@ -194,15 +213,72 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800 dark:text-white">
 
       // Select2 init
       $('select').each(function () {
-        $(this).select2({
+        let options = {
           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')),
-        });
+        };
+
+        if ($(this).data('fetch')) {
+          options = {
+            ...options,
+            ajax: {
+              url: $(this).data('fetch'),
+              dataType: 'json',
+              delay: 250,
+              data: function (params) {
+                return {
+                  q: params.term, // search term
+                  page: params.page
+                };
+              },
+              processResults: function (data, params) {
+                // parse the results into the format expected by Select2
+                // since we are using custom formatting functions we do not need to
+                // alter the remote JSON data, except to indicate that infinite
+                // scrolling can be used
+                params.page = params.page || 1;
+
+                return {
+                  results: data.items,
+                  pagination: {
+                    more: (params.page * 30) < data.total_count
+                  }
+                };
+              },
+              cache: true
+            },
+            minimumInputLength: 1,
+            templateResult: formatRepo,
+            templateSelection: formatRepoSelection
+          };
+        }
+
+        $(this).select2(options);
       });
+
+      function formatRepo(repo) {
+        if (repo.loading) {
+          return repo.text;
+        }
+
+        var $container = $(
+          "<div class='flex'>" +
+          "<div class='text-base sm:text-sm/6 dark:text-white select2-result-repository__title'></div>" +
+          "</div>"
+        );
+
+        $container.find(".select2-result-repository__title").text(repo.full_name);
+
+        return $container;
+      }
+
+      function formatRepoSelection(repo) {
+        return repo.full_name || repo.text;
+      }
     });
   </script>