added optgroup form examples (#1108)

* added optgroup form examples

* added missing ts-dropdown class

src/pages/_data/selects.yml

@@ -69,3 +69,25 @@ labels:
 people:
   value: 4
   data: people
+
+optgroups:
+  value: Optgroups
+  data: optgroup
+  options:
+    -
+      title: Tags
+      options:
+        - HTML
+        - JavaScript
+        - CSS
+        - jQuery
+        - Bootstrap
+        - Ruby
+        - Python
+    -
+      title: People
+      options:
+        - Chuck Tesla
+        - Elon Musk
+        - Paweł Kuna
+        - Nikola Tesla

src/pages/_includes/cards/form/layout.html

@@ -29,6 +29,21 @@ <h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<select class="form-select">
 						<option>Option 1</option>
+						<optgroup label="Optgroup 1">
+							<option>Option 1</option>
+							<option>Option 2</option>
+						</optgroup>
+					  <option>Option 2</option>
+						<optgroup label="Optgroup 2">
+							<option>Option 1</option>
+							<option>Option 2</option>
+						</optgroup>
+						<optgroup label="Optgroup 3">
+							<option>Option 1</option>
+							<option>Option 2</option>
+						</optgroup>
+					  <option>Option 3</option>
+					  <option>Option 4</option>
 					</select>
 				</div>
 			</div>

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

@@ -46,6 +46,11 @@
 	{% include ui/select.html key="users" %}
 </div>
 
+<div class="mb-3">
+	 <label class="form-label">Advanced select with optgroup</label>
+	 {% include ui/select.html key="optgroups" %}
+</div>
+
 <div class="mb-3">
 	<label class="form-label">Select with avatars</label>
 	{% include ui/select.html key="people" indicator="avatar" %}
@@ -65,4 +70,4 @@
 	<label class="form-label">Advanced select with validation state</label>
 	{% include ui/select.html id="countries-valid" key="countries" state="valid" class="mb-3" %}
 	{% include ui/select.html id="countries-invalid" key="countries" state="invalid" %}
-</div>
+</div>

src/pages/_includes/ui/select.html

@@ -20,6 +20,15 @@
 				<option value="{{ person.id }}"{% if include.indicator == 'avatar' %} data-custom-properties="{% capture indicator %}{% include ui/avatar.html size='xs' person=person %}{% endcapture %}{{ indicator | strip | escape }}"{% endif %}>{{ person.full_name }}</option>
 			{% endfor %}
 
+		{% elsif data.data == 'optgroup' %}
+			{% for group in options %}
+	 			<optgroup label="{{ group.title }}">
+					{% for option in group.options %}
+					<option value="{{ option }}">{{ option }}</option>
+					{% endfor %}
+				</optgroup>
+			{% endfor %}
+
 		{% else %}
 			{% for option in options %}
 				{% if option.first %}
@@ -56,7 +65,7 @@
 		var el;
 		window.TomSelect && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), {
 			copyClassesToDropdown: false,
-			dropdownClass: 'dropdown-menu',
+			dropdownClass: 'dropdown-menu ts-dropdown',
 			optionClass:'dropdown-item',
 
 			{% unless include.show-search %}