From cf77c7f6f305c415e6332d5405a82c65de55b691 Mon Sep 17 00:00:00 2001
From: Kevin Papst <kevinpapst@users.noreply.github.com>
Date: Wed, 1 Jun 2022 14:07:12 +0200
Subject: [PATCH] added optgroup form examples (#1108)

* added optgroup form examples

* added missing ts-dropdown class
---
 src/pages/_data/selects.yml                   | 22 +++++++++++++++++++
 src/pages/_includes/cards/form/layout.html    | 15 +++++++++++++
 .../_includes/forms/form-elements-6.html      |  7 +++++-
 src/pages/_includes/ui/select.html            | 11 +++++++++-
 4 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/pages/_data/selects.yml b/src/pages/_data/selects.yml
index ffe1ac382..b9178a9a4 100644
--- a/src/pages/_data/selects.yml
+++ b/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
diff --git a/src/pages/_includes/cards/form/layout.html b/src/pages/_includes/cards/form/layout.html
index 51ba06422..d9bf77d34 100644
--- a/src/pages/_includes/cards/form/layout.html
+++ b/src/pages/_includes/cards/form/layout.html
@@ -29,6 +29,21 @@
 				<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>
diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html
index 66db532e5..a1373bf6d 100644
--- a/src/pages/_includes/forms/form-elements-6.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html
index 233420b03..ef05a07a9 100644
--- a/src/pages/_includes/ui/select.html
+++ b/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 %}