Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-22 21:41:43 +04:00
Code Issues Projects Releases Wiki Activity

form select fixes

Browse Source
This commit is contained in:
codecalm
2021-02-11 02:35:35 +01:00
parent 65a68348dd
commit c436e490b7
5 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_data/selects.yml
+13
View File
@@ -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
src/pages/_includes/forms/form-elements-6.html
+12 -6
View File
@@ -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>
src/pages/_includes/ui/select.html
+13 -14
View File
@@ -1,4 +1,5 @@
{% assign id = include.id %}
{% assign id = include.id | default: include.key %}
{% assign value = include.value %}
{% if id %}
@@ -16,7 +17,7 @@
{% 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 %}
@@ -24,11 +25,17 @@
{% 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>');
},
};
},
src/scss/ui/_dropdowns.scss
+1 -1
View File
@@ -37,7 +37,7 @@
height: 1.25rem;
display: inline-flex;
line-height: 1;
vertical-align: middle;
vertical-align: bottom;
align-items: center;
}
src/scss/ui/_flags.scss
+2 -2
View File
@@ -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;
}
}