add tom-select per tabler/tabler#625

package.json

@@ -90,7 +90,8 @@
     "flatpickr": "^4.6.9",
     "imask": "^6.0.7",
     "litepicker": "^2.0.11",
-    "nouislider": "^14.6.3"
+    "nouislider": "^14.6.3",
+    "tom-select": "^1.3.0"
   },
   "resolutions": {
     "**/**/node-gyp": "^5.0.0"

src/pages/_data/libs.json

@@ -14,7 +14,8 @@
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
     "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",
     "litepicker": "litepicker/dist/litepicker.js",
-    "choices": "choices.js/public/assets/scripts/choices.js"
+	"choices": "choices.js/public/assets/scripts/choices.js",
+	"tom-select": "tom-select/dist/js/tom-select.complete.min.js"
   },
   "css": {
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"

src/pages/_includes/ui/select.html

@@ -54,35 +54,9 @@
 		{% endif %}
 
 		var el;
-		window.Choices && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new Choices(el = document.getElementById('select-{{ id }}'), {
-			classNames: {
-				containerInner: el.className,
-				input: 'form-control',
-				inputCloned: 'form-control-sm',
-				listDropdown: 'dropdown-menu',
-				itemChoice: 'dropdown-item',
-				activeState: 'show',
-				selectedState: 'active',
-			},
-			shouldSort: false,
-			{% unless include.show-search %}searchEnabled: false,{% endunless %}
+		window.TomSelect && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), {
+			copyClassesToDropdown: false,
 
-			{% if include.indicator %}
-			callbackOnCreateTemplates: function(template) {
-				var classNames = this.config.className,
-						itemSelectText = this.config.itemSelectText;
-
-				return {
-					item: function(classNames, data) {
-						return template('<div class="' + String(classNames.item) + ' ' + String( data.highlighted ? classNames.highlightedState : classNames.itemSelectable ) + '" data-item data-id="' + String(data.id) + '" data-value="' + String(data.value) + '"' + String(data.active ? 'aria-selected="true"' : '') + '' + String(data.disabled ? 'aria-disabled="true"' : '') + '><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + String(data.label) + '</div>');
-					},
-					choice: function(classNames, data) {
-						console.log('data', data);
-						return template('<div class="' + String(classNames.item) + ' ' + String(classNames.itemChoice) + ' ' + String( data.disabled ? classNames.itemDisabled : classNames.itemSelectable ) + '" data-select-text="' + String(itemSelectText) + '" data-choice  ' + String( data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable' ) + ' data-id="' + String(data.id) + '" data-value="' + String(data.value) + '" ' + String( data.groupId > 0 ? 'role="treeitem"' : 'role="option"' ) + ' ><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + String(data.label) + '</div>');
-					},
-				};
-			},
-			{% endif %}
 		}));
 
 	});
@@ -99,4 +73,4 @@
 {% endcapture_global %}
 {% endif %}
 
-{% endif %}
+{% endif %}

src/pages/form-elements.html

@@ -2,7 +2,7 @@
 title: Form elements
 page-header: Form elements
 menu: forms
-libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, choices
+libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, choices, tom-select
 ---
 
 <div class="row row-cards">

src/scss/tabler-vendors.scss

@@ -2,4 +2,4 @@
 
 @import "vendor/nouislider";
 @import "vendor/litepicker";
-@import "vendor/choices";
+@import "vendor/tom-select";

src/scss/vendor/_tom-select.scss

@@ -0,0 +1,6 @@
+@import "~tom-select/src/scss/tom-select.bootstrap5.scss";
+
+.ts-control.form-select{
+	border:		none !important;
+	padding:	0 !important;
+}