bank20baht-ui 0.2.8 → 0.3.0

package/README.md

@@ -19,9 +19,9 @@ npm i bank20baht-ui
 <script>
   const el = document.getElementById('f');
   el.form = {
-    formId: 'f1',
-    formName: 'Person',
-    field_data: [
+    form_id: 'f1',
+    form_name: 'Person',
+    fields: [
       { order: 1, type: 'text',   key: 'firstName', label: 'First name', width: '1/2', required: true, value: '' },
       { order: 2, type: 'text',   key: 'lastName',  label: 'Last name',  width: '1/2', required: true, value: '' },
       { order: 3, type: 'number', key: 'age',       label: 'Age',        width: '1/4', min: 0, value: null }
@@ -63,7 +63,7 @@ gives you the same formatting for tables.
 ### Repeater — line items / repeating rows
 
 ```js
-{ order: 5, type: 'repeater', key: 'items', label: 'Line items', minRows: 1,
+{ order: 5, type: 'repeater', key: 'items', label: 'Line items', min_rows: 1,
   fields: [
     { order: 1, type: 'text',   key: 'name', width: '1/2', required: true },
     { order: 2, type: 'number', key: 'qty',  width: '1/4', min: 1 },
@@ -71,14 +71,14 @@ gives you the same formatting for tables.
 ```
 
 Value is an array of row objects (`getData().items → [{ name, qty }, …]`). Rows add/remove in
-the UI (`minRows`/`maxRows` bound the count), each row validates its sub-fields — errors come
+the UI (`min_rows`/`max_rows` bound the count), each row validates its sub-fields — errors come
 back as `items[0].name`, on both the client and `bank20baht-validator`. One level deep only.
 
 ### Dependent / async dropdowns
 
 ```js
 // schema — functions never live in JSON, only registry names:
-{ order: 2, type: 'dropdown', key: 'amphoe', optionsFrom: 'amphoeFor', optionsDeps: ['province'] }
+{ order: 2, type: 'dropdown', key: 'amphoe', options_from: 'amphoeFor', options_deps: ['province'] }
 
 // registry:
 el.registry = {
@@ -119,7 +119,7 @@ with the same JSON — `bank20baht-validator` re-exports `applyFlags`.
 
 ```js
 // schema:
-{ order: 6, type: 'file', key: 'doc', uploader: 'default', accept: '.pdf,image/*', maxSize: 10_485_760 }
+{ order: 6, type: 'file', key: 'doc', uploader: 'default', accept: '.pdf,image/*', max_size: 10_485_760 }
 
 // registry — File in, serializable ref out:
 el.registry = {
@@ -131,7 +131,7 @@ el.registry = {
 ```
 
 Picking a file uploads immediately; the value becomes `{ name, size, type, url }` — plain
-JSON, chips with remove buttons in the UI, `maxSize`/`accept` validated on both client and
+JSON, chips with remove buttons in the UI, `max_size`/`accept` validated on both client and
 server. Omit `uploader` for the old capture-only mode.
 
 ### Drafts / autosave (host pattern)
@@ -160,7 +160,7 @@ setLocale('th', { required: 'ห้ามว่าง' }); // locale + your own
 ```
 
 Call it once before mounting. Per-field `message` and label attributes
-(`next-label`, `approval.approveLabel`, …) still win over the catalog. The server can
+(`next-label`, `approval.approve_label`, …) still win over the catalog. The server can
 localize too: `bank20baht-validator` re-exports `setLocale`, so validation issues come
 back in the same language the client shows.
 
@@ -168,8 +168,8 @@ back in the same language the client shows.
 
 ```js
 document.querySelector('baht-workflow').workflow = {
-  workflowId: 'wf-1',
-  forms: [/* {formId, formName, order, field_data}, ... */],
+  workflow_id: 'wf-1',
+  forms: [/* {form_id, form_name, order, fields}, ... */],
   rules: [
     { id: 'skip-person',
       when: { field: 'Intro.kind', op: 'eq', value: 'company' },
@@ -234,7 +234,9 @@ Geist / Geist Mono, borders-over-shadows, "paper" easing — plus a dark theme
   `items` is one page; `baht-page-change` asks your app to fetch the next one.
 - **Feedback** — `baht-modal` · `baht-toast` · `baht-alert` · `baht-tooltip` · `baht-progress` ·
   `baht-spinner` · `baht-skeleton`
-- **Inputs** — `baht-rating` · `baht-range` · `baht-otp` (+ the 11 form field primitives)
+- **Inputs** — `baht-rating` · `baht-range` · `baht-otp` · `baht-typeahead` · `baht-reference-picker` ·
+  `baht-keyvalue-editor` (+ the 11 form field primitives). Typed fields debounce keystrokes (150 ms,
+  `debounce` / `options.inputDebounce`); `dropdown` renders its own listbox, never the OS picker.
 - **Structure & nav** — `baht-card` · `baht-fieldset` · `baht-timeline` · `baht-accordion` ·
   `baht-link` · `baht-breadcrumbs`
 
@@ -317,7 +319,7 @@ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('b
 file (capture only, no upload) · label (static)`
 
 Each field descriptor: `{ order, type, key, label, placeholder, width: '1/4'|'1/2'|'3/4'|'full',
-value, disabled, required, options, maxLength, min, max, validators[], formatter }`.
+value, disabled, required, options, max_length, min, max, validators[], formatter }`.
 
 ## Visual Builder