From 32a9afe6716c16455a9824ccb92b61d84456ebbb Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 25 Jan 2020 00:02:40 +0100
Subject: [PATCH] form elements

---
 pages/_includes/forms/form-elements-1.html | 82 +++++++++++-----------
 pages/_includes/forms/form-elements-2.html | 15 ++--
 pages/_includes/ui/form/input-group.html   | 34 ++++++---
 3 files changed, 74 insertions(+), 57 deletions(-)

diff --git a/pages/_includes/forms/form-elements-1.html b/pages/_includes/forms/form-elements-1.html
index ab803a231..089d5ce5c 100644
--- a/pages/_includes/forms/form-elements-1.html
+++ b/pages/_includes/forms/form-elements-1.html
@@ -1,67 +1,69 @@
 <div class="mb-3">
-   <label class="form-label">Static</label>
-   <div class="form-control-plaintext">Username</div>
+	<label class="form-label">Static</label>
+	<div class="form-control-plaintext">Username</div>
 </div>
 <div class="mb-3">
-   <label class="form-label">Text</label>
-   <div class="form-hint">Here's some more info.</div>
-   <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
+	<label class="form-label">Text</label>
+	<div class="form-hint">Here's some more info.</div>
+	<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
 </div>
 <div class="mb-3">
-   <label class="form-label">Password</label>
-   <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
+	<label class="form-label">Password</label>
+	<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
 </div>
 <div class="mb-3">
-   <label class="form-label">Disabled</label>
-   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled>
+	<label class="form-label">Disabled</label>
+	<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
+	       value="Well, she turned me into a newt." disabled>
 </div>
 <div class="mb-3">
-   <label class="form-label">Readonly</label>
-   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
-          value="Well, how'd you become king, then?" readonly>
+	<label class="form-label">Readonly</label>
+	<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
+	       value="Well, how'd you become king, then?" readonly>
 </div>
 <div class="mb-3">
-   <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
-   <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
+	<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
+	<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
 </div>
 
 {% include parts/select.html %}
 {% include parts/select.html label="Select multiple" multiple=true %}
 
 <div class="mb-3">
-   <label class="form-label">Input group</label>
-   <div class="input-group">
-      <input type="text" class="form-control" placeholder="Search for…">
-      <span class="input-group-append">
-							<button class="btn btn-primary" type="button">Go!</button>
-						</span>
-   </div>
+	<label class="form-label">Input group</label>
+	<div class="input-group">
+		<input type="text" class="form-control" placeholder="Search for…">
+		<span class="input-group-append">
+			<button class="btn btn-secondary" type="button">Go!</button>
+		</span>
+	</div>
 </div>
 <div class="mb-3">
-   <label class="form-label">Input group buttons</label>
-   <div class="input-group">
-      <input type="text" class="form-control">
-      <div class="input-group-append">
-         <button type="button" class="btn btn-primary">Action</button>
-         <button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
-	      {% include ui/dropdown-menu.html right=true %}
-      </div>
-   </div>
+	<label class="form-label">Input group buttons</label>
+	<div class="input-group">
+		<input type="text" class="form-control">
+		<div class="input-group-append">
+			<button type="button" class="btn btn-secondary">Action</button>
+			<button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
+			{% include ui/dropdown-menu.html right=true %}
+		</div>
+	</div>
 </div>
 
 {% include parts/input-icon.html %}
 {% include parts/input-icon-separated.html %}
 
 
-
 <div class="mb-3">
-   <label class="form-label">ZIP Code</label>
-   <div class="row row-sm">
-      <div class="col">
-         <input type="text" class="form-control" placeholder="Search for…">
-      </div>
-      <div class="col-auto align-self-center">
-         <span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>" data-html="true">?</span>
-      </div>
-   </div>
+	<label class="form-label">Input with help icon</label>
+	<div class="row row-sm">
+		<div class="col">
+			<input type="text" class="form-control" placeholder="Search for…">
+		</div>
+		<div class="col-auto align-self-center">
+			<span class="form-help" data-toggle="popover" data-placement="top"
+			      data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
+			      data-html="true">?</span>
+		</div>
+	</div>
 </div>
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index bb7c97442..85c9f42b8 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/pages/_includes/forms/form-elements-2.html
@@ -1,21 +1,24 @@
 <div class="mb-3">
-   <label class="form-label">Username</label>
-   {% include ui/form/input-group.html prepend="@" placeholder="username" %}
+   <label class="form-label">Input group</label>
+   {% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
+   {% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
+   {% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Subdomain</label>
-   {% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
+	<label class="form-label">Input with checkbox or radios</label>
+	{% include ui/form/input-group.html prepend="checkbox" class="mb-2" %}
+	{% include ui/form/input-group.html append="radio" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Input with prepended text</label>
-   {% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
+   {% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" value="yourfancyusername" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Input with appended text</label>
-   {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
+   {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" value="yourfancydomain" %}
 </div>
 
 <div class="mb-3">
diff --git a/pages/_includes/ui/form/input-group.html b/pages/_includes/ui/form/input-group.html
index 51d29f358..bd91a825b 100644
--- a/pages/_includes/ui/form/input-group.html
+++ b/pages/_includes/ui/form/input-group.html
@@ -1,13 +1,25 @@
 <div class="input-group{% if include.class %} {{ include.class }}{% endif %}">
-  {% if include.prepend %}
-  <div class="input-group-prepend">
-    <span class="input-group-text">{{ include.prepend }}</span>
-  </div>
-  {% endif %}
-  <input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
-  {% if include.append %}
-  <div class="input-group-append">
-    <span class="input-group-text">{{ include.append }}</span>
-  </div>
-  {% endif %}
+	{% if include.prepend %}
+	<div class="input-group-prepend">
+		<span class="input-group-text">
+			{% if include.prepend == "checkbox" or include.prepend == "radio" %}
+				<input class="form-check-input m-0" type="{{ include.prepend }}" checked>
+			{% else %}
+				{{ include.prepend }}
+			{% endif %}
+		</span>
+	</div>
+	{% endif %}
+	<input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %}>
+	{% if include.append %}
+	<div class="input-group-append">
+		<span class="input-group-text">
+			{% if include.append == "checkbox" or include.append == "radio" %}
+				<input class="form-check-input m-0" type="{{ include.append }}" checked>
+			{% else %}
+				{{ include.append }}
+			{% endif %}
+		</span>
+	</div>
+	{% endif %}
 </div>