From 11344f472f40eeb81e6319ec2f525c86a6feacab Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 27 Jan 2020 23:01:12 +0100
Subject: [PATCH] form elements fixes

---
 pages/_data/selects.yml                       | 27 +++++++++++++---
 pages/_includes/forms/form-elements-2.html    | 20 ------------
 pages/_includes/forms/form-elements-3.html    |  5 ++-
 pages/_includes/forms/form-elements-4.html    |  2 --
 pages/_includes/forms/form-elements-6.html    | 25 +++++++++++++++
 pages/_includes/parts/input-range.html        |  8 ++---
 .../ui/{slider.html => form/range.html}       |  0
 pages/_includes/ui/form/selectize.html        | 32 +++++++++++--------
 scss/vendor/_selectize.scss                   |  7 ++++
 9 files changed, 82 insertions(+), 44 deletions(-)
 rename pages/_includes/ui/{slider.html => form/range.html} (100%)

diff --git a/pages/_data/selects.yml b/pages/_data/selects.yml
index 7a745bacd..9dfff9f56 100644
--- a/pages/_data/selects.yml
+++ b/pages/_data/selects.yml
@@ -12,11 +12,30 @@ users:
 
 tags:
   max-items: 15
-  value: dev, test
+  multiple: true
+  value: [HTML, JavaScript, Bootstrap]
   options:
-    - dev
-    - live
-    - test
+    - HTML
+    - JavaScript
+    - 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
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index 01af5b28f..684ac5309 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/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>
diff --git a/pages/_includes/forms/form-elements-3.html b/pages/_includes/forms/form-elements-3.html
index 43907be98..b155623d4 100644
--- a/pages/_includes/forms/form-elements-3.html
+++ b/pages/_includes/forms/form-elements-3.html
@@ -13,4 +13,7 @@
 	<label class="form-label">Subtle validation States</label>
 	<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>
\ No newline at end of file
+</div>
+
+<label class="form-label">Form fieldset</label>
+{% include parts/form-fieldset.html %}
\ No newline at end of file
diff --git a/pages/_includes/forms/form-elements-4.html b/pages/_includes/forms/form-elements-4.html
index 0e5e71e3d..daebf9c66 100644
--- a/pages/_includes/forms/form-elements-4.html
+++ b/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 %}
diff --git a/pages/_includes/forms/form-elements-6.html b/pages/_includes/forms/form-elements-6.html
index 9288a4fb0..6069c2ceb 100644
--- a/pages/_includes/forms/form-elements-6.html
+++ b/pages/_includes/forms/form-elements-6.html
@@ -25,4 +25,29 @@
 <div class="mb-3">
 	<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>
\ No newline at end of file
diff --git a/pages/_includes/parts/input-range.html b/pages/_includes/parts/input-range.html
index c5701ce12..fd6df9c39 100644
--- a/pages/_includes/parts/input-range.html
+++ b/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/slider.html value="20" id="simple" connect=true %}
-	{% include ui/slider.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 %}
+	{% include ui/form/range.html value="20" id="simple" connect=true %}
+	{% include ui/form/range.html value="60,90" id="connect" %}
+	{% include ui/form/range.html value="40" id="color" class="text-green" connect=true %}
 </div>
diff --git a/pages/_includes/ui/slider.html b/pages/_includes/ui/form/range.html
similarity index 100%
rename from pages/_includes/ui/slider.html
rename to pages/_includes/ui/form/range.html
diff --git a/pages/_includes/ui/form/selectize.html b/pages/_includes/ui/form/selectize.html
index f3f43fd48..729fc9132 100644
--- a/pages/_includes/ui/form/selectize.html
+++ b/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 name = option[1].name %}
+			{% assign current-value = option[0] %}
+			{% assign current-name = option[1].name %}
 			{% assign all-data = option[1] %}
 		{% else %}
-		{% assign value = option %}
-		{% assign name = option %}
+			{% assign current-value = 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 %}
-		{% if data.max-items %}
-			maxItems: {{ data.max-items }}
-		{% endif %}
+			{% endif %}
+			{% if data.max-items %}
+			maxItems: {{ data.max-items }},
+			{% endif %}
+
+			{% if data.removable %}
+			plugins: ['remove_button'],
+			{% endif %}
 		});
 	});
 </script>
diff --git a/scss/vendor/_selectize.scss b/scss/vendor/_selectize.scss
index c1dd1a5e4..8eeaff95c 100644
--- a/scss/vendor/_selectize.scss
+++ b/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 {