form select fixes

tabler · Feb 11, 2021 · c436e49 · c436e49
1 parent 65a6834
commit c436e49
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 23 deletions.
diff --git a/src/pages/_data/selects.yml b/src/pages/_data/selects.yml
@@ -53,6 +53,19 @@ countries:
       name: Brazil
       flag: br
 
+labels:
+  value: paste
+  options:
+    copy:
+      name: Copy
+      label: cmd + C
+    paste:
+      name: Paste
+      label: cmd + V
+    cut:
+      name: Cut
+      label: cmd + X
+
 people:
   value: 4
   data: people
diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html
@@ -33,30 +33,36 @@
 
 <div class="mb-3">
 	<label class="form-label">Tags input</label>
-	{% include ui/select.html id="tags" key="tags" %}
+	{% include ui/select.html key="tags" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced tags input</label>
-	{% include ui/select.html id="tags-advanced" key="tags-advanced" %}
+	{% include ui/select.html key="tags-advanced" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced select</label>
-	{% include ui/select.html id="users" key="users" %}
+	{% include ui/select.html key="users" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with avatars</label>
-	{% include ui/select.html id="people" key="people" %}
+	{% include ui/select.html key="people" indicator="avatar" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Select with flags</label>
-	{% include ui/select.html id="countries" key="countries"  %}
+	{% include ui/select.html key="countries" indicator="flag" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Select with labels</label>
+	{% include ui/select.html key="labels" indicator="label" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Advanced select with validation state</label>
-	{% include ui/select.html id="countries" key="countries" state="valid" %}
+	{% 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>
diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html
@@ -1,4 +1,5 @@
-{% assign id = include.id %}
+{% assign id = include.id | default: include.key %}
+{% assign value = include.value %}
 
 {% if id %}
 
@@ -16,19 +17,25 @@
 
 		{% if data.data == 'people' %}
 			{% for person in site.data.people limit: 20 %}
-				<option value="{{ person.id }}"{% if include.indicator == 'avatar' %} data-indicator="{% capture indicator %}{% include ui/avatar.html size='xs' person=person %}{% endcapture %}{{ indicator | strip | escape }}"{% endif %}>{{ person.full_name }}</option>
+				<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 %}
 
 		{% else %}
 			{% for option in options %}
 				{% if option.first %}
 					{% if include.indicator == 'flag' %}
 						{% capture indicator-html %}
-							{% include ui/flag.html size="xs" flag=option.flag %}
+							{% assign country = option[1].flag %}
+							{% include ui/flag.html size="xs" flag=country %}
+						{% endcapture %}
+					{% elsif include.indicator == 'label' %}
+						{% capture indicator-html %}
+							{% assign label = option[1].label %}
+							<span class="badge bg-blue-lt">{{ label }}</span>
 						{% endcapture %}
 					{% endif %}
 
-					<option value="{{ option[0] }}"{% if include.indicator %} data-indicator="{{ indicator-html | strip | escape }}"{% endif %}>{{ option[1].name }}</option>
+					<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}>{{ option[1].name }}</option>
 				{% else %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endif %}
@@ -65,21 +72,13 @@
 				var classNames = this.config.className,
 						itemSelectText = this.config.itemSelectText;
 
-				{% capture indicator-text %}
-					{% if include.indicator == 'avatar' %}
-						<span class="avatar avatar-xs"></span>
-					{% elsif include.indicator == 'flag' %}
-						<span class="flag flag-xs"></span>
-					{% endif %}
-				{% endcapture %}
-
 				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">{{ indicator-text | strip }}</span>' + String(data.label) + '</div>');
+						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">{{ indicator-text | strip }}</span>' + String(data.label) + '</div>');
+						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>');
 					},
 				};
 			},

diff --git a/src/scss/ui/_dropdowns.scss b/src/scss/ui/_dropdowns.scss
@@ -37,7 +37,7 @@
   height: 1.25rem;
   display: inline-flex;
   line-height: 1;
-  vertical-align: middle;
+  vertical-align: bottom;
   align-items: center;
 }
 

diff --git a/src/scss/ui/_flags.scss b/src/scss/ui/_flags.scss
@@ -36,7 +36,7 @@ $countries: (
 
 @each $flag-size, $size in $flag-sizes {
   .flag-#{$flag-size} {
-    width: $size * 1.33333;
-    height: $size;
+    width: $size;
+    height: $size * .75;
   }
 }