form elements fixes

pages/_data/selects.yml

@@ -12,11 +12,30 @@ users:
 
 tags:
   max-items: 15
-  value: dev, test
+  multiple: true
+  value: [HTML, JavaScript, Bootstrap]
   options:
-    - dev
+    - HTML
-    - live
+    - JavaScript
-    - test
+    - CSS
+    - jQuery
+    - Bootstrap
+    - 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

pages/_includes/forms/form-elements-2.html

@@ -30,23 +30,3 @@
 	<label class="form-label">Input with appended icon links</label>
 	{% include ui/form/input-group.html append-button="x:Clear search,sliders:Search settings,bell:Add notification" class="input-group-flat" %}
 </div>
-
-<div class="mb-3">
-   <label class="form-label">Tags</label>
-   {% include ui/form/selectize.html key="tags" %}
-</div>
-
-<div class="mb-3">
-   <label class="form-label">Top person</label>
-   {% include ui/form/selectize.html key="users" %}
-</div>
-
-<div class="mb-3">
-   <label class="form-label">Users list</label>
-   {% include ui/form/selectize.html key="people" %}
-</div>
-
-<div class="mb-3">
-   <label class="form-label">Countries</label>
-   {% include ui/form/selectize.html key="countries" %}
-</div>

pages/_includes/forms/form-elements-3.html

@@ -14,3 +14,6 @@
 	<input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
 	<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
 </div>
+
+<label class="form-label">Form fieldset</label>
+{% include parts/form-fieldset.html %}

pages/_includes/forms/form-elements-4.html

@@ -1,5 +1,3 @@
-<label class="form-label">Form fieldset</label>
-{% include parts/form-fieldset.html %}
 
 {% include parts/input-selectgroups.html %}
 {% include parts/form-payments.html %}

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

@@ -26,3 +26,28 @@
 	<label class="form-label">Form control flush</label>
 	<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
 </div>
+
+<div class="mb-3">
+	<label class="form-label">Tags input</label>
+	{% include ui/form/selectize.html key="tags" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Advanced tags input</label>
+	{% include ui/form/selectize.html key="tags-advanced" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Advanced select</label>
+	{% include ui/form/selectize.html key="users" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Select with avatars</label>
+	{% include ui/form/selectize.html key="people" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Select with flags</label>
+	{% include ui/form/selectize.html key="countries" %}
+</div>

pages/_includes/parts/input-range.html

@@ -1,8 +1,8 @@
 <div class="mb-3">
 	<label class="form-label">Range input</label>
 
-	{% include ui/slider.html value=40 %}
+	{% include ui/form/range.html value=40 %}
-	{% include ui/slider.html value="20" id="simple" connect=true %}
+	{% include ui/form/range.html value="20" id="simple" connect=true %}
-	{% include ui/slider.html value="60,90" id="connect" %}
+	{% include ui/form/range.html value="60,90" id="connect" %}
-	{% include ui/slider.html value="40" id="color" class="text-green" connect=true %}
+	{% include ui/form/range.html value="40" id="color" class="text-green" connect=true %}
 </div>

pages/_includes/ui/form/selectize.html

@@ -1,26 +1,28 @@
 {% assign key = include.key | default: 'people' %}
 {% assign data = site.data.selects[key] %}
 {% assign options = data.options %}
-<select name="{{ key }}" id="select-{{ key }}" class="form-select">
+
+<select name="{{ key }}" id="select-{{ key }}" class="form-select"{% if data.multiple %} multiple{% endif %}>
 	{% if options == 'people' %}
 		{% for person in site.data.people limit: 20 %}
 		{% capture avatar %}
 			{% include ui/avatar.html person=person class="avatar-xs rounded mr-2 ml-n1" %}
 		{% endcapture %}
-		<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip  | replace: '"', '\"' }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
+		<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip  | replace: '"', '\"' }}"}'{% if person.id == data.value %} selected{% endif %}>{{ person.full_name }}</option>
 		{% endfor %}
 
 	{% else %}
 		{% for option in options %}
 		{% if option[1] %}
-			{% assign value = option[0] %}
+			{% assign current-value = option[0] %}
-			{% assign name = option[1].name %}
+			{% assign current-name = option[1].name %}
 			{% assign all-data = option[1] %}
 		{% else %}
-		{% assign value = option %}
+			{% assign current-value = option %}
-		{% assign name = option %}
+			{% assign current-name = option %}
 		{% endif %}
-		<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
+
+		<option value="{{ current-value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == current-value or data.value contains current-value %} selected{% endif %}>{{ current-name }}</option>
 		{% endfor %}
 
 	{% endif %}
@@ -31,7 +33,7 @@
 <script>
 	$(document).ready(function () {
 		$('#select-{{ key }}').selectize({
-		{% if key == "countries" %}
+			{% if key == "countries" %}
 			render: {
 				option: function (data, escape) {
 					return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
@@ -40,7 +42,7 @@
 					return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
 				}
 			}
-		{% elsif key == "people" %}
+			{% elsif key == "people" %}
 			render: {
 				option: function (data, escape) {
 					return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
@@ -49,10 +51,14 @@
 					return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
 				}
 			}
-		{% endif %}
+			{% endif %}
-		{% if data.max-items %}
+			{% if data.max-items %}
-			maxItems: {{ data.max-items }}
+			maxItems: {{ data.max-items }},
-		{% endif %}
+			{% endif %}
+
+			{% if data.removable %}
+			plugins: ['remove_button'],
+			{% endif %}
 		});
 	});
 </script>

scss/vendor/_selectize.scss

@@ -10,6 +10,13 @@
     background-color: $gray-200;
     color: inherit;
   }
+
+  .remove {
+    font-size: inherit !important;
+    font-weight: normal !important;
+    border-left: 0 !important;
+    color: $text-muted !important;
+  }
 }
 
 .selectize-input {