feat: create new form layout page (#2303)

.changeset/silent-planes-hide.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Add new form layout page

preview/pages/form-elements.html

@@ -1,7 +1,7 @@
 ---
 title: Form elements
 page-header: Form elements
-page-menu: forms
+page-menu: form.elements
 page-libs: [nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-select, imask]
 layout: default
 permalink: form-elements.html
@@ -84,10 +84,6 @@ permalink: form-elements.html
 		{% include "cards/form/layout.html" %}
 	</div>
 
-	<div class="col-md-6">
-		{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
-	</div>
-
 	<div class="col-lg-4">
 		<div class="row row-cards">
 			<div class="col-12">

preview/pages/form-layout.html

@@ -0,0 +1,322 @@
+---
+title: Form layout
+page-header: Form Layout
+page-menu: form.layout
+layout: default
+permalink: form-layout.html
+page-libs: [litepicker]
+---
+
+<div class="row row-cards row-cols-1 row-cols-md-2">
+	<div class="col">
+		<div class="row row-cards">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h3 class="card-title">
+							Basic Form
+						</h3>
+					</div>
+					<div class="card-body">
+						<form class="space-y">
+							<div class="row">
+								<div class="col-6">
+									<input type="text" placeholder="Name" class="form-control" />
+								</div>
+								
+								<div class="col-6">
+									<input type="email" placeholder="Email address" class="form-control" />
+								</div>
+							</div>
+
+							<div>
+								<input type="password" placeholder="Password" class="form-control" />
+							</div>
+
+							<div>
+								<input type="password" placeholder="Confirm Password" class="form-control" />
+							</div>
+
+							<div>
+								{% include "ui/button.html" color="primary" block text="Submit" %}
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h3 class="card-title">
+							Example Form
+						</h3>
+					</div>
+					<div class="card-body">
+						<form>
+							<div class="space-y">
+								<div>
+									<label class="form-label">
+										First Name
+									</label>
+									<input type="text" placeholder="Enter first name" class="form-control">
+								</div>
+
+								<div>
+									<label class="form-label">
+										Last Name
+									</label>
+									<input type="text" placeholder="Enter last name" class="form-control">
+								</div>
+
+								<div>
+									<label class="form-label">
+										Email
+									</label>
+									<input type="email" placeholder="Enter email address" class="form-control">
+								</div>
+
+								<div>
+									<label class="form-label">
+										Select Subject
+									</label>
+									<select class="form-select">
+										<option>
+											Option 1
+										</option>
+										<option>
+											Option 2
+										</option>
+										<option>
+											Option 3
+										</option>
+										<option>
+											Option 4
+										</option>
+									</select>
+								</div>
+
+								<div>
+									<label class="form-label">
+										Message
+									</label>
+									<textarea placeholder="Enter your message" rows="6" class="form-control"></textarea>
+								</div>
+
+								<div>
+									{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+	</div>
+
+	<div class="col">
+		<div class="row row-cards">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h3 class="card-title">
+							Example Form with Icons
+						</h3>
+					</div>
+					<div class="card-body">
+						<form class="space-y">
+							<div>
+								{% include "ui/form/input-icon.html" icon="user" placeholder="Username" prepend %}
+							</div>
+
+							<div>
+								{% include "ui/form/input-icon.html" icon="mail" placeholder="Email address" prepend type="mail" %}
+							</div>
+
+							<div>
+								{% include "ui/form/input-icon.html" icon="lock" placeholder="Password" prepend type="password" %}
+							</div>
+
+							<div>
+								{% include "ui/form/input-icon.html" icon="lock" placeholder="Confirm Password" prepend type="password" %}
+							</div>
+
+							<div>
+								<div class="row align-items-center">
+									<div class="col">
+										{% include "ui/form/check.html" title="Remember me" class="m-0" %}
+									</div>
+									<div class="col-auto">
+										{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+
+			<div class="col-12">
+				{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
+			</div>
+
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h3 class="card-title">
+							Example Form
+						</h3>
+					</div>
+					<div class="card-body">
+						<form>
+							<div class="space-y">
+								<div>
+									<h4>
+										Personal Info
+									</h4>
+								</div>
+
+								<div class="row row-cols-2 g-4">
+									<div>
+										<label class="form-label">
+											First Name
+										</label>
+										<input type="text" placeholder="Enter first name" class="form-control">
+									</div>
+
+									<div>
+										<label class="form-label">
+											Last Name
+										</label>
+										<input type="text" placeholder="Enter last name" class="form-control">
+									</div>
+
+									<div>
+										<label class="form-label">
+											Gender
+										</label>
+										<div>
+											<select class="form-select">
+												<option>
+													Male
+												</option>
+												<option>
+													Female
+												</option>
+												<option>
+													Others
+												</option>
+											</select>
+										</div>
+									</div>
+									
+									<div>
+										<label class="form-label">
+											Date of Birth
+										</label>
+									
+										<div>
+											{% include "ui/datepicker.html" layout="icon" id="birth-date" %}
+										</div>
+									</div>
+								</div>
+
+								<div>
+									<label class="form-label">
+										Category
+									</label>
+									<div>
+										<select class="form-select">
+											<option>
+												Category 1
+											</option>
+											<option>
+												Category 2
+											</option>
+											<option>
+												Category 3
+											</option>
+										</select>
+									</div>
+								</div>
+
+								<div>
+									<h4>
+										Address
+									</h4>
+								</div>
+
+								<div>
+									<label class="form-label">
+										Street
+									</label>
+									<input type="text" class="form-control">
+								</div>
+
+								<div class="row row-cols-2 g-4">
+									<div>
+										<label class="form-label">
+											City
+										</label>
+										<input type="text" class="form-control">
+									</div>
+									
+									<div>
+										<label class="form-label">
+											State
+										</label>
+										<input type="text" class="form-control">
+									</div>
+									
+									<div>
+										<label class="form-label">
+											Post Code
+										</label>
+										<input type="text" class="form-control">
+									</div>
+									
+									<div>
+										<label class="form-label">
+											Country
+										</label>
+										<div>
+											<select class="form-select">
+												<option>
+													--Select Country--
+												</option>
+												{% for country in flags %}
+												<option>
+													{{ country.name }}
+												</option>
+												{% endfor %}
+											</select>
+										</div>
+									</div>
+								</div>
+
+								<div>
+									<div>
+										<label class="form-label">
+											Membership
+										</label>
+
+										<div class="d-flex flex-row gap-4">
+											{% include "ui/form/check.html" title="Free" type="radio" name="membership" checked=true %}
+											{% include "ui/form/check.html" title="Paid" type="radio" name="membership" %}
+										</div>
+									</div>
+								</div>
+
+								<div class="text-end">
+									{% include "ui/button.html" text="Cancel" %}
+									{% include "ui/button.html" color="primary" text="Save Changes" %}
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

shared/data/menu.json

@@ -203,11 +203,20 @@
       }
     }
   },
-  "forms": {
-    "url": "form-elements.html",
+  "form": {
     "title": "Forms",
-    "title-long": "Form elements",
-    "icon": "checkbox"
+    "icon": "checkbox",
+    "children": {
+      "elements": {
+        "url": "form-elements.html",
+        "title": "Form elements"
+      },
+      "layout": {
+        "url": "form-layout.html",
+        "title": "Form layouts",
+        "badge": "New"
+      }
+    }
   },
   "extra": {
     "title": "Extra",

shared/includes/cards/form/layout.html

@@ -64,8 +64,8 @@
 				</label>
 			</div>
 		</div>
-	</div>
-	<div class="card-footer text-end">
-		<button type="submit" class="btn btn-primary">Submit</button>
+		<div class="text-end">
+			<button type="submit" class="btn btn-primary">Submit</button>
+		</div>
 	</div>
 </form>

shared/includes/ui/form/input-icon.html

@@ -16,7 +16,7 @@
 		{{ addon }}
 	{% endif %}
 
-	<input type="text" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
+	<input type="{{ include.type | default: 'text' }}" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
 
 	{% unless include.prepend %}
 		{{ addon }}

shared/includes/ui/select.html

@@ -5,7 +5,7 @@
 {% assign key = include.key | default: 'people' %}
 {% assign data = selects[key] %}
 
-<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}>
+<select class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}>
 	{% if include.values %}
 		{% assign values = include.values | split: ',' %}