sd-render 1.2.7 → 1.3.0

package/field-docs.html

@@ -99,8 +99,9 @@ td code { background: #313244; padding: 1px 6px; border-radius: 3px; font-size:
   <h2>API Reference</h2>
   <div class="search"><input type="text" id="search" placeholder="Search..." oninput="filterSearch(this.value)"></div>
   <div class="group">
-    <div class="group-title">Basic Input (18)</div>
+    <div class="group-title">Basic Input (19)</div>
     <a href="#text-input">Text Input</a>
+    <a href="#otp-input">OTP Input</a>
     <a href="#number-input">Number Input</a>
     <a href="#textarea-input">Textarea</a>
     <a href="#switch-input">Switch</a>
@@ -208,7 +209,7 @@ td code { background: #313244; padding: 1px 6px; border-radius: 3px; font-size:
   <h1>Field Components & Functions</h1>
   <p class="subtitle">SDForm / initCraft &mdash; Field options, events, and API reference</p>
 <section class="section" id="sec-basic-input">
-  <h2>Basic Input <span class="count">18</span></h2>
+  <h2>Basic Input <span class="count">19</span></h2>
   <div class="card" id="text-input">
     <div class="card-head">
       <h3>Text Input</h3>
@@ -497,6 +498,222 @@ td code { background: #313244; padding: 1px 6px; border-radius: 3px; font-size:
       </table>
     </div>
   </div>
+  <div class="card" id="otp-input">
+    <div class="card-head">
+      <h3>OTP Input</h3>
+      <div class="tags">
+        
+        <span class="tag tag-type">String</span>
+        <span class="tag tag-form">FormItem</span>
+      </div>
+    </div>
+    <div class="tab-bar">
+      <button class="tab-btn active" onclick="showTab(this,0)">COMMON <span class="tab-count">18</span></button>
+      <button class="tab-btn" onclick="showTab(this,1)">ADVANCED <span class="tab-count">6</span></button>
+      <button class="tab-btn" onclick="showTab(this,2)">EVENTS <span class="tab-count">7</span></button>
+    </div>
+    <div class="tab-panel active" data-idx="0">
+      <table>
+        <tr><th>Option</th><th>Label</th><th>Default</th><th>Description</th></tr>
+        <tr>
+    <td class="opt-key">name</td>
+    <td class="opt-label">Variable Name</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">label</td>
+    <td class="opt-label">Label</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">labelAlign</td>
+    <td class="opt-label">Label Align</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">defaultValue</td>
+    <td class="opt-label">Default Value</td>
+    <td><span class="v-null">null</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">columnSpan</td>
+    <td class="opt-label">Column Span</td>
+    <td><span class="v-num">4</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">size</td>
+    <td class="opt-label">Size</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">labelWidth</td>
+    <td class="opt-label">Width Of Label</td>
+    <td><span class="v-null">null</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">labelHidden</td>
+    <td class="opt-label">Hide Label</td>
+    <td><span class="v-bool">false</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">disabled</td>
+    <td class="opt-label">Disabled</td>
+    <td><span class="v-bool">false</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">readonly</td>
+    <td class="opt-label">Readonly</td>
+    <td><span class="v-bool">false</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">hidden</td>
+    <td class="opt-label">Hide</td>
+    <td><span class="v-bool">false</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">required</td>
+    <td class="opt-label">Required</td>
+    <td><span class="v-bool">false</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">requiredHint</td>
+    <td class="opt-label">Required Hint</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">validation</td>
+    <td class="opt-label">Validation</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">validationHint</td>
+    <td class="opt-label">Validation Hint</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">customClass</td>
+    <td class="opt-label">Custom Class</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">type</td>
+    <td class="opt-label">Type</td>
+    <td><span class="v-str">'outlined'</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">mask</td>
+    <td class="opt-label">Mask</td>
+    <td><span class="v-bool">false</span></td>
+    <td class="opt-hint">Mask pattern  * [All], # [a-zA-Z], 9 [Digit], ก [Thai alphabet], a [LowerCase], A [UpperCase]</td>
+  </tr>
+      </table>
+    </div>
+    <div class="tab-panel" data-idx="1">
+      <table>
+        <tr><th>Option</th><th>Label</th><th>Default</th><th>Description</th></tr>
+        <tr>
+    <td class="opt-key">labelIconClass</td>
+    <td class="opt-label">Icon Class</td>
+    <td><span class="v-null">null</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">labelIconPosition</td>
+    <td class="opt-label">Icon Position</td>
+    <td><span class="v-str">'rear'</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">labelTooltip</td>
+    <td class="opt-label">Tooltip</td>
+    <td><span class="v-null">null</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">labelColor</td>
+    <td class="opt-label">Label Color</td>
+    <td><span class="v-null">null</span></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">length</td>
+    <td class="opt-label">Length</td>
+    <td><span class="v-num">6</span></td>
+    <td class="opt-hint">number of OTP boxes</td>
+  </tr>
+        <tr>
+    <td class="opt-key">separator</td>
+    <td class="opt-label">Separator</td>
+    <td><span class="v-empty">''</span></td>
+    <td class="opt-hint">path separator displayed in cascader input (default: " / ")</td>
+  </tr>
+      </table>
+    </div>
+    <div class="tab-panel" data-idx="2">
+      <table>
+        <tr><th>Event</th><th>Label</th><th>Parameters</th><th>Description</th></tr>
+        <tr>
+    <td class="opt-key">onCreated</td>
+    <td class="opt-label">onCreated</td>
+    <td class="opt-params"></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">onMounted</td>
+    <td class="opt-label">onMounted</td>
+    <td class="opt-params"></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">onChange</td>
+    <td class="opt-label">onChange</td>
+    <td class="opt-params">(value, oldValue, subFormData, rowId)</td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">onFocus</td>
+    <td class="opt-label">onFocus</td>
+    <td class="opt-params">(event)</td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">onBlur</td>
+    <td class="opt-label">onBlur</td>
+    <td class="opt-params">(event)</td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">onFinish</td>
+    <td class="opt-label">onFinish</td>
+    <td class="opt-params"></td>
+    <td class="opt-hint"></td>
+  </tr>
+        <tr>
+    <td class="opt-key">onValidate</td>
+    <td class="opt-label">onValidate</td>
+    <td class="opt-params">(rule, value, callback)</td>
+    <td class="opt-hint"></td>
+  </tr>
+      </table>
+    </div>
+  </div>
   <div class="card" id="number-input">
     <div class="card-head">
       <h3>Number Input</h3>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sd-render",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "author": {
     "name": "initcraft",
     "email": "iencoded@gmail.com"