@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/forms.html

@@ -0,0 +1,477 @@
+<!-- ================================
+     FORM SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- BASIC FORM ELEMENTS -->
+
+<!-- Text Input -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="username">Username</label>
+  <input type="text" class="pa-input" id="username" placeholder="Enter username">
+</div>
+
+<!-- Email Input -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="email">Email</label>
+  <input type="email" class="pa-input" id="email" placeholder="your@email.com">
+</div>
+
+<!-- Password Input -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="password">Password</label>
+  <input type="password" class="pa-input" id="password" placeholder="Enter password">
+</div>
+
+<!-- Textarea -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="message">Message</label>
+  <textarea class="pa-textarea" id="message" rows="4" placeholder="Enter your message"></textarea>
+</div>
+
+<!-- Select -->
+<div class="pa-form-group">
+  <label class="pa-form-label" for="country">Country</label>
+  <select class="pa-select" id="country">
+    <option>United States</option>
+    <option>United Kingdom</option>
+    <option>Canada</option>
+  </select>
+</div>
+
+
+<!-- INPUT SIZES -->
+
+<!-- Extra Small Input -->
+<input type="text" class="pa-input pa-input--xs" placeholder="Extra small">
+
+<!-- Small Input -->
+<input type="text" class="pa-input pa-input--sm" placeholder="Small">
+
+<!-- Default Input -->
+<input type="text" class="pa-input" placeholder="Default">
+
+<!-- Large Input -->
+<input type="text" class="pa-input pa-input--lg" placeholder="Large">
+
+<!-- Extra Large Input -->
+<input type="text" class="pa-input pa-input--xl" placeholder="Extra large">
+
+
+<!-- INPUT STATES -->
+
+<!-- Disabled Input -->
+<input type="text" class="pa-input" disabled value="Disabled input">
+
+<!-- Readonly Input -->
+<input type="text" class="pa-input" readonly value="Readonly input">
+
+<!-- Required Input -->
+<div class="pa-form-group pa-form-group--required">
+  <label class="pa-form-label" for="required-field">Required Field</label>
+  <input type="text" class="pa-input" id="required-field" required>
+</div>
+
+
+<!-- VALIDATION STATES -->
+
+<!-- Success State -->
+<div class="pa-form-group pa-form-group--success">
+  <label class="pa-form-label" for="valid-input">Valid Input</label>
+  <input type="text" class="pa-input pa-input--success" id="valid-input" value="Valid value">
+  <small class="pa-form-text pa-form-text--success">Looks good!</small>
+</div>
+
+<!-- Error State -->
+<div class="pa-form-group pa-form-group--error">
+  <label class="pa-form-label" for="invalid-input">Invalid Input</label>
+  <input type="text" class="pa-input pa-input--error" id="invalid-input" value="Invalid value">
+  <small class="pa-form-text pa-form-text--error">Please provide a valid value.</small>
+</div>
+
+
+<!-- CUSTOM TRI-STATE CHECKBOXES -->
+<!-- States: unchecked, checked, indeterminate (set via JS: checkbox.indeterminate = true) -->
+
+<!-- Basic Checkbox -->
+<label class="pa-checkbox">
+  <input type="checkbox">
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Unchecked option</span>
+</label>
+
+<!-- Checked Checkbox -->
+<label class="pa-checkbox">
+  <input type="checkbox" checked>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Checked option</span>
+</label>
+
+<!-- Indeterminate Checkbox (set via JavaScript) -->
+<label class="pa-checkbox">
+  <input type="checkbox" id="my-indeterminate-checkbox">
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Indeterminate (partial selection)</span>
+</label>
+<script>document.getElementById('my-indeterminate-checkbox').indeterminate = true;</script>
+
+<!-- Disabled Checkbox -->
+<label class="pa-checkbox pa-checkbox--disabled">
+  <input type="checkbox" disabled>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Disabled unchecked</span>
+</label>
+
+<label class="pa-checkbox pa-checkbox--disabled">
+  <input type="checkbox" checked disabled>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Disabled checked</span>
+</label>
+
+<!-- Checkbox Sizes -->
+<label class="pa-checkbox pa-checkbox--xs">
+  <input type="checkbox" checked>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Extra Small (xs)</span>
+</label>
+
+<label class="pa-checkbox pa-checkbox--sm">
+  <input type="checkbox" checked>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Small (sm)</span>
+</label>
+
+<label class="pa-checkbox">
+  <input type="checkbox" checked>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Default</span>
+</label>
+
+<label class="pa-checkbox pa-checkbox--lg">
+  <input type="checkbox" checked>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Large (lg)</span>
+</label>
+
+<label class="pa-checkbox pa-checkbox--xl">
+  <input type="checkbox" checked>
+  <span class="pa-checkbox__box"></span>
+  <span class="pa-checkbox__label">Extra Large (xl)</span>
+</label>
+
+<!-- Checkbox Group (vertical stack) -->
+<div class="pa-checkbox-group">
+  <label class="pa-checkbox">
+    <input type="checkbox" checked>
+    <span class="pa-checkbox__box"></span>
+    <span class="pa-checkbox__label">Option A</span>
+  </label>
+  <label class="pa-checkbox">
+    <input type="checkbox">
+    <span class="pa-checkbox__box"></span>
+    <span class="pa-checkbox__label">Option B</span>
+  </label>
+  <label class="pa-checkbox">
+    <input type="checkbox">
+    <span class="pa-checkbox__box"></span>
+    <span class="pa-checkbox__label">Option C</span>
+  </label>
+</div>
+
+
+<!-- RADIO BUTTONS (native styling) -->
+
+<!-- Radio Button Group -->
+<div class="pa-radio-group">
+  <label class="pa-radio">
+    <input type="radio" name="radioGroup" checked>
+    Option 1 (selected)
+  </label>
+  <label class="pa-radio">
+    <input type="radio" name="radioGroup">
+    Option 2
+  </label>
+  <label class="pa-radio">
+    <input type="radio" name="radioGroup" disabled>
+    Option 3 (disabled)
+  </label>
+</div>
+
+
+<!-- INPUT GROUPS -->
+
+<!-- Prepend only -->
+<div class="pa-input-group">
+  <span class="pa-input-group__prepend">@</span>
+  <input type="text" class="pa-input" placeholder="Username">
+</div>
+
+<!-- Append only -->
+<div class="pa-input-group">
+  <input type="text" class="pa-input" placeholder="Amount">
+  <span class="pa-input-group__append">USD</span>
+</div>
+
+<!-- Prepend and Append -->
+<div class="pa-input-group">
+  <span class="pa-input-group__prepend">$</span>
+  <input type="text" class="pa-input" placeholder="0.00">
+  <span class="pa-input-group__append">.00</span>
+</div>
+
+<!-- Input with Button -->
+<div class="pa-input-group">
+  <input type="text" class="pa-input" placeholder="Search...">
+  <button class="pa-input-group__button pa-btn pa-btn--primary">Search</button>
+</div>
+
+<!-- Prepend + Input + Button -->
+<div class="pa-input-group">
+  <span class="pa-input-group__prepend">🔍</span>
+  <input type="text" class="pa-input" placeholder="Search...">
+  <button class="pa-input-group__button pa-btn pa-btn--primary">Go</button>
+</div>
+
+<!-- Input + Append + Button -->
+<div class="pa-input-group">
+  <input type="text" class="pa-input" placeholder="Enter amount">
+  <span class="pa-input-group__append">USD</span>
+  <button class="pa-input-group__button pa-btn pa-btn--success">Convert</button>
+</div>
+
+<!-- Button + Input + Append -->
+<div class="pa-input-group">
+  <button class="pa-input-group__button pa-btn pa-btn--secondary">-</button>
+  <input type="number" class="pa-input" value="1">
+  <span class="pa-input-group__append">items</span>
+</div>
+
+<!-- Prepend + Input + Append + Button -->
+<div class="pa-input-group">
+  <span class="pa-input-group__prepend">https://</span>
+  <input type="text" class="pa-input" placeholder="example.com">
+  <span class="pa-input-group__append">.com</span>
+  <button class="pa-input-group__button pa-btn pa-btn--primary">Visit</button>
+</div>
+
+<!-- Button + Input + Button (quantity controls) -->
+<div class="pa-input-group">
+  <button class="pa-input-group__button pa-btn pa-btn--secondary">-</button>
+  <input type="number" class="pa-input text-center" value="1">
+  <button class="pa-input-group__button pa-btn pa-btn--secondary">+</button>
+</div>
+
+
+<!-- FORM LAYOUTS -->
+
+<!-- Inline Form -->
+<form class="pa-form pa-form--inline">
+  <input type="text" class="pa-input" placeholder="Username">
+  <input type="password" class="pa-input" placeholder="Password">
+  <button class="pa-btn pa-btn--primary">Sign in</button>
+</form>
+
+<!-- Horizontal Form Groups (label left, input right) -->
+
+<!-- Single Horizontal Field -->
+<div class="pa-form-group pa-form-group--horizontal">
+  <label for="email">Email</label>
+  <input type="email" id="email" class="pa-input" placeholder="your@email.com">
+</div>
+
+<!-- Horizontal Field with Select -->
+<div class="pa-form-group pa-form-group--horizontal">
+  <label for="department">Department</label>
+  <select id="department" class="pa-select">
+    <option>Engineering</option>
+    <option>Marketing</option>
+    <option>Sales</option>
+  </select>
+</div>
+
+<!-- Horizontal Field with Textarea -->
+<div class="pa-form-group pa-form-group--horizontal">
+  <label for="notes">Notes</label>
+  <textarea id="notes" class="pa-textarea" rows="3" placeholder="Additional notes..."></textarea>
+</div>
+
+
+<!-- HORIZONTAL FORM LAYOUTS WITH GRIDS -->
+
+<!-- Multi-Column Horizontal Form (3 equal columns) -->
+<form class="pa-form">
+  <div class="pa-row">
+    <div class="pa-col-100 pa-col-md-1-3">
+      <div class="pa-form-group pa-form-group--horizontal">
+        <label for="fname">First Name</label>
+        <input type="text" id="fname" class="pa-input" placeholder="John">
+      </div>
+    </div>
+
+    <div class="pa-col-100 pa-col-md-1-3">
+      <div class="pa-form-group pa-form-group--horizontal">
+        <label for="lname">Last Name</label>
+        <input type="text" id="lname" class="pa-input" placeholder="Doe">
+      </div>
+    </div>
+
+    <div class="pa-col-100 pa-col-md-1-3">
+      <div class="pa-form-group pa-form-group--horizontal">
+        <label for="email">Email</label>
+        <input type="email" id="email" class="pa-input" placeholder="john@example.com">
+      </div>
+    </div>
+  </div>
+</form>
+
+<!-- Multi-Column Horizontal Form (varying widths) -->
+<form class="pa-form">
+  <div class="pa-row">
+    <!-- Phone (smaller - 25%) -->
+    <div class="pa-col-100 pa-col-md-25">
+      <div class="pa-form-group pa-form-group--horizontal">
+        <label for="phone">Phone</label>
+        <input type="tel" id="phone" class="pa-input" placeholder="+1 555-0123">
+      </div>
+    </div>
+
+    <!-- Department (larger - 50%) -->
+    <div class="pa-col-100 pa-col-md-50">
+      <div class="pa-form-group pa-form-group--horizontal">
+        <label for="dept">Department</label>
+        <select id="dept" class="pa-select">
+          <option>Select...</option>
+          <option>Engineering</option>
+          <option>Marketing</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Job Title (medium - 25%) -->
+    <div class="pa-col-100 pa-col-md-25">
+      <div class="pa-form-group pa-form-group--horizontal">
+        <label for="title">Job Title</label>
+        <input type="text" id="title" class="pa-input" placeholder="Senior Developer">
+      </div>
+    </div>
+  </div>
+</form>
+
+
+<!-- COMPLETE HORIZONTAL FORM EXAMPLE -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Employee Information</h3>
+  </div>
+  <div class="pa-card__body">
+    <form class="pa-form">
+      <!-- Line 1: Personal Info -->
+      <div class="pa-row">
+        <div class="pa-col-100 pa-col-md-1-3">
+          <div class="pa-form-group pa-form-group--horizontal">
+            <label for="first">First Name</label>
+            <input type="text" id="first" class="pa-input" placeholder="John">
+          </div>
+        </div>
+        <div class="pa-col-100 pa-col-md-1-3">
+          <div class="pa-form-group pa-form-group--horizontal">
+            <label for="last">Last Name</label>
+            <input type="text" id="last" class="pa-input" placeholder="Doe">
+          </div>
+        </div>
+        <div class="pa-col-100 pa-col-md-1-3">
+          <div class="pa-form-group pa-form-group--horizontal">
+            <label for="mail">Email</label>
+            <input type="email" id="mail" class="pa-input" placeholder="john.doe@company.com">
+          </div>
+        </div>
+      </div>
+
+      <!-- Line 2: Address -->
+      <div class="pa-row">
+        <div class="pa-col-100 pa-col-md-50">
+          <div class="pa-form-group pa-form-group--horizontal">
+            <label for="address">Address</label>
+            <input type="text" id="address" class="pa-input" placeholder="123 Main Street">
+          </div>
+        </div>
+        <div class="pa-col-100 pa-col-md-1-3">
+          <div class="pa-form-group pa-form-group--horizontal">
+            <label for="city">City</label>
+            <input type="text" id="city" class="pa-input" placeholder="San Francisco">
+          </div>
+        </div>
+        <div class="pa-col-100 pa-col-md-20">
+          <div class="pa-form-group pa-form-group--horizontal">
+            <label for="zip">Zip</label>
+            <input type="text" id="zip" class="pa-input" placeholder="94102">
+          </div>
+        </div>
+      </div>
+
+      <!-- Submit Buttons -->
+      <div class="pa-row">
+        <div class="pa-col-100 text-right">
+          <button type="button" class="pa-btn pa-btn--secondary">Cancel</button>
+          <button type="submit" class="pa-btn pa-btn--primary">Submit</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+FORM ELEMENTS:
+- .pa-form: Form container
+- .pa-form--inline: Inline form layout
+- .pa-form-group: Form group wrapper
+- .pa-form-group--required: Shows required indicator
+- .pa-form-group--horizontal: Label-left, input-right layout
+- .pa-form-group--success: Success validation state
+- .pa-form-group--error: Error validation state
+- .pa-form-label: Form label
+
+INPUTS:
+- .pa-input: Text input base class
+- .pa-input--xs, --sm, --lg, --xl: Size variants
+- .pa-input--success, --error: Validation states
+
+TEXTAREA:
+- .pa-textarea: Textarea element
+
+SELECT:
+- .pa-select: Select dropdown
+
+CHECKBOXES (custom tri-state):
+- .pa-checkbox: Checkbox wrapper label
+- .pa-checkbox__box: Custom checkbox visual
+- .pa-checkbox__label: Checkbox label text
+- .pa-checkbox--xs, --sm, --lg, --xl: Size variants
+- .pa-checkbox--disabled: Disabled state
+- .pa-checkbox-group: Vertical checkbox group
+
+RADIO BUTTONS:
+- .pa-radio: Radio wrapper label
+- .pa-radio-group: Vertical radio group
+
+INPUT GROUPS:
+- .pa-input-group: Input group container
+- .pa-input-group__prepend: Left addon
+- .pa-input-group__append: Right addon
+- .pa-input-group__button: Button addon
+
+HELP TEXT:
+- .pa-form-text: Help/hint text below inputs
+- .pa-form-text--success: Success message
+- .pa-form-text--error: Error message
+
+GRID LAYOUT (for multi-column forms):
+- .pa-row: Row container (flexbox)
+- .pa-col-100: Full width on mobile
+- .pa-col-md-25, .pa-col-md-50, .pa-col-md-1-3, etc.: Responsive column widths
+-->