advanced udage of tom-select #1480

src/pages/_data/selects.yml

@@ -23,20 +23,6 @@ tags:
     - Ruby
     - Python
 
-tags-advanced:
-  max-items: 15
-  multiple: true
-  removable: true
-  value: [Ruby, Python]
-  options:
-    - HTML
-    - JavaScript
-    - CSS
-    - jQuery
-    - Bootstrap
-    - Ruby
-    - Python
-
 countries:
   value: pl
   options:
@@ -91,3 +77,114 @@ optgroups:
         - Elon Musk
         - Paweł Kuna
         - Nikola Tesla
+
+states:
+  max-items: 15
+  multiple: true
+  value: [AL, AZ]
+  options:
+    AL: 
+      name: Alabama
+    AK: 
+      name: Alaska
+    AZ: 
+      name: Arizona
+      selected: true
+    AR: 
+      name: Arkansas
+    CA: 
+      name: California
+    CO: 
+      name: Colorado
+    CT: 
+      name: Connecticut
+    DE: 
+      name: Delaware
+    DC: 
+      name: District of Columbia
+    FL: 
+      name: Florida
+    GA: 
+      name: Georgia
+    HI: 
+      name: Hawaii
+    ID: 
+      name: Idaho
+    IL: 
+      name: Illinois
+    IN: 
+      name: Indiana
+    IA: 
+      name: Iowa
+    KS: 
+      name: Kansas
+    KY: 
+      name: Kentucky
+    LA: 
+      name: Louisiana
+    ME: 
+      name: Maine
+    MD: 
+      name: Maryland
+    MA: 
+      name: Massachusetts
+    MI: 
+      name: Michigan
+    MN: 
+      name: Minnesota
+    MS: 
+      name: Mississippi
+    MO: 
+      name: Missouri
+    MT: 
+      name: Montana
+    NE: 
+      name: Nebraska
+    NV: 
+      name: Nevada
+    NH: 
+      name: New Hampshire
+    NJ: 
+      name: New Jersey
+    NM: 
+      name: New Mexico
+    NY: 
+      name: New York
+    NC: 
+      name: North Carolina
+    ND: 
+      name: North Dakota
+    OH: 
+      name: Ohio
+    OK: 
+      name: Oklahoma
+    OR: 
+      name: Oregon
+    PA: 
+      name: Pennsylvania
+    RI: 
+      name: Rhode Island
+    SC: 
+      name: South Carolina
+      selected: true
+    SD: 
+      name: South Dakota
+    TN: 
+      name: Tennessee
+    TX: 
+      name: Texas
+    UT: 
+      name: Utah
+    VT: 
+      name: Vermont
+    VA: 
+      name: Virginia
+    WA: 
+      name: Washington
+    WV: 
+      name: West Virginia
+    WI: 
+      name: Wisconsin
+    WY: 
+      name: Wyoming
+      selected: true

src/pages/_includes/forms/form-elements-1.html

@@ -24,6 +24,11 @@
 {% include parts/form/select.html %}
 {% include parts/form/select.html label="Select multiple" multiple=true %}
 
+<div class="mb-3">
+	<div class="form-label">Select multiple states</div>
+	{% include ui/select.html key="states" multiple=true %}
+</div>
+
 <div class="mb-3">
 	<label class="form-label">Input group</label>
 	<div class="input-group mb-2">

src/pages/_includes/forms/form-elements-6.html

@@ -33,12 +33,7 @@
 
 <div class="mb-3">
 	<label class="form-label">Tags input</label>
-	{% include ui/select.html key="tags" %}
-</div>
-
-<div class="mb-3">
-	<label class="form-label">Advanced tags input</label>
-	{% include ui/select.html key="tags-advanced" %}
+	{% include ui/select.html key="tags" placeholder="Select tags" %}
 </div>
 
 <div class="mb-3">

src/pages/_includes/ui/select.html

@@ -2,8 +2,10 @@
 {% assign value = include.value %}
 
 {% if id %}
+{% assign key = include.key | default: 'people' %}
+{% assign data = site.data.selects[key] %}
 
-<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}">
+<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}>
 	{% if include.values %}
 		{% assign values = include.values | split: ',' %}
 
@@ -11,8 +13,7 @@
 			<option value="{{ value }}">{{ value }}</option>
 		{% endfor %}
 	{% else %}
-		{% assign key = include.key | default: 'people' %}
-		{% assign data = site.data.selects[key] %}
+		
 		{% assign options = data.options %}
 
 		{% if data.data == 'people' %}
@@ -43,8 +44,7 @@
 							<span class="badge bg-primary-lt">{{ label }}</span>
 						{% endcapture %}
 					{% endif %}
-
-					<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}>{{ option[1].name }}</option>
+					<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}{% if option[1].selected %} selected{% endif %}>{{ option[1].name }}</option>
 				{% else %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endif %}