bank20baht-ui 0.1.2 → 0.1.4

package/dist/components/baht-form.d.ts

@@ -28,6 +28,8 @@ export declare class BahtForm extends BahtElement {
      * if they were never in the schema: no render, no validation, no payload.
      */
     flags: FeatureFlags;
+    /** Force every field readonly — a display-only render of this form's own layout/widths. */
+    readonly: boolean;
     /** Edits the user made since the host last set `value` (controlled overlay). */
     private edits;
     private errors;

package/dist/components/baht-workflow.d.ts

@@ -25,6 +25,8 @@ export declare class BahtWorkflow extends BahtElement {
     flags: FeatureFlags;
     /** Render a <baht-steps> progress indicator above the current form. */
     showSteps: boolean;
+    /** 'default' horizontal markers, or 'sidebar' vertical nav list — forwarded to <baht-steps>. */
+    stepsVariant: 'default' | 'sidebar';
     private data;
     private derived;
     private current;
@@ -66,8 +68,6 @@ export declare class BahtWorkflow extends BahtElement {
     private onFormChange;
     private onCommentInput;
     private emit;
-    /** Human-readable value for the summary: option labels, Yes/No, em-dash for empty. */
-    private displayValue;
     /** Forms the approval step summarizes: configured list, else every earlier plain form. */
     private summaryForms;
     private renderApproval;

package/dist/components/primitives/baht-section.d.ts

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+import { FieldDescriptor } from '../../core/types.js';
+/** Section divider (`type: "section"`): heading + rule, no value, no emits. */
+export declare class BahtSection extends BahtElement {
+    field: FieldDescriptor;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'baht-section': BahtSection;
+    }
+}

package/dist/components/primitives/baht-steps.d.ts

@@ -11,6 +11,8 @@ export declare class BahtSteps extends BahtElement {
     steps: string[];
     /** 0-based index of the current step. */
     current: number;
+    /** 'default' = horizontal numbered markers; 'sidebar' = vertical nav list, current pilled. */
+    variant: 'default' | 'sidebar';
     protected render(): TemplateResult;
 }
 declare global {

package/dist/components/primitives/index.d.ts

@@ -33,6 +33,7 @@ export { BahtToggle } from './baht-toggle.js';
 export { BahtDatepicker } from './baht-datepicker.js';
 export { BahtFile } from './baht-file.js';
 export { BahtText } from './baht-text.js';
+export { BahtSection } from './baht-section.js';
 export { BahtStatChart } from './baht-stat-chart.js';
 export { BahtDonutChart } from './baht-donut-chart.js';
 export { BahtBarChart } from './baht-bar-chart.js';

package/dist/core/types.d.ts

@@ -1,5 +1,5 @@
 /** Control types supported by v1 (spec 01 §2). */
-export type FieldType = 'text' | 'textarea' | 'number' | 'email' | 'dropdown' | 'multiselect' | 'checkbox' | 'radio' | 'toggle' | 'date' | 'file' | 'label' | 'repeater';
+export type FieldType = 'text' | 'textarea' | 'number' | 'email' | 'dropdown' | 'multiselect' | 'checkbox' | 'radio' | 'toggle' | 'date' | 'file' | 'label' | 'section' | 'repeater';
 export type FieldWidth = '1/4' | '1/2' | '3/4' | 'full';
 export interface FieldOption {
     key: string;
@@ -33,6 +33,7 @@ export interface FieldDescriptor {
     width?: FieldWidth;
     value?: unknown;
     disabled?: boolean;
+    readonly?: boolean;
     required?: boolean;
     options?: FieldOption[];
     /** Registry name resolving this field's options from current form data. */

package/dist/custom-elements.json

@@ -69,6 +69,16 @@
               "default": "{}",
               "description": "Feature-flag values (spec 01 §12) — fields whose `flag` is off behave as\nif they were never in the schema: no render, no validation, no payload."
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force every field readonly — a display-only render of this form's own layout/widths.",
+              "attribute": "readonly"
+            },
             {
               "kind": "field",
               "name": "edits",
@@ -362,6 +372,15 @@
               },
               "description": "Name of a view from `form.views`. Display-only: when set, only that view's\nfields are rendered and validated (the user can only fix what they see),\nbut getData() still returns the FULL form — the server always validates\nthe complete schema, views never change the submit payload.",
               "fieldName": "view"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force every field readonly — a display-only render of this form's own layout/widths.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -493,6 +512,16 @@
               "description": "Render a <baht-steps> progress indicator above the current form.",
               "attribute": "show-steps"
             },
+            {
+              "kind": "field",
+              "name": "stepsVariant",
+              "type": {
+                "text": "'default' | 'sidebar'"
+              },
+              "default": "'default'",
+              "description": "'default' horizontal markers, or 'sidebar' vertical nav list — forwarded to <baht-steps>.",
+              "attribute": "steps-variant"
+            },
             {
               "kind": "field",
               "name": "data",
@@ -843,31 +872,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "displayValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "fd",
-                  "type": {
-                    "text": "FieldDescriptor"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ],
-              "description": "Human-readable value for the summary: option labels, Yes/No, em-dash for empty."
-            },
             {
               "kind": "method",
               "name": "summaryForms",
@@ -961,6 +965,15 @@
               "default": "false",
               "description": "Render a <baht-steps> progress indicator above the current form.",
               "fieldName": "showSteps"
+            },
+            {
+              "name": "steps-variant",
+              "type": {
+                "text": "'default' | 'sidebar'"
+              },
+              "default": "'default'",
+              "description": "'default' horizontal markers, or 'sidebar' vertical nav list — forwarded to <baht-steps>.",
+              "fieldName": "stepsVariant"
             }
           ],
           "superclass": {
@@ -7577,6 +7590,50 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/primitives/baht-section.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Section divider (`type: \"section\"`): heading + rule, no value, no emits.",
+          "name": "BahtSection",
+          "members": [
+            {
+              "kind": "field",
+              "name": "field",
+              "type": {
+                "text": "FieldDescriptor"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "BahtElement",
+            "module": "/src/components/base.js"
+          },
+          "tagName": "baht-section",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BahtSection",
+          "declaration": {
+            "name": "BahtSection",
+            "module": "src/components/primitives/baht-section.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "baht-section",
+          "declaration": {
+            "name": "BahtSection",
+            "module": "src/components/primitives/baht-section.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/primitives/baht-select.ts",
@@ -8166,6 +8223,16 @@
               "default": "0",
               "description": "0-based index of the current step.",
               "attribute": "current"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'sidebar'"
+              },
+              "default": "'default'",
+              "description": "'default' = horizontal numbered markers; 'sidebar' = vertical nav list, current pilled.",
+              "attribute": "variant"
             }
           ],
           "attributes": [
@@ -8177,6 +8244,15 @@
               "default": "0",
               "description": "0-based index of the current step.",
               "fieldName": "current"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'sidebar'"
+              },
+              "default": "'default'",
+              "description": "'default' = horizontal numbered markers; 'sidebar' = vertical nav list, current pilled.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
@@ -9973,6 +10049,14 @@
             "module": "./baht-text.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "BahtSection",
+          "declaration": {
+            "name": "BahtSection",
+            "module": "./baht-section.js"
+          }
+        },
         {
           "kind": "js",
           "name": "BahtStatChart",
@@ -10089,7 +10173,7 @@
           "type": {
             "text": "Record<FieldType, string>"
           },
-          "default": "{ text: 'baht-input', email: 'baht-input', textarea: 'baht-textarea', number: 'baht-number', dropdown: 'baht-select', multiselect: 'baht-multiselect', checkbox: 'baht-checkbox', radio: 'baht-radio', toggle: 'baht-toggle', date: 'baht-datepicker', file: 'baht-file', label: 'baht-text', repeater: 'baht-repeater', }",
+          "default": "{ text: 'baht-input', email: 'baht-input', textarea: 'baht-textarea', number: 'baht-number', dropdown: 'baht-select', multiselect: 'baht-multiselect', checkbox: 'baht-checkbox', radio: 'baht-radio', toggle: 'baht-toggle', date: 'baht-datepicker', file: 'baht-file', label: 'baht-text', section: 'baht-section', repeater: 'baht-repeater', }",
           "description": "field descriptor `type` -> primitive tag (used by <baht-form>, <baht-repeater>\nand the builder). Lives in its own module so baht-repeater can read it\nwithout importing the primitives barrel (which would be circular)."
         }
       ],

package/dist/engine.js

@@ -10,6 +10,7 @@ function S(e) {
     case "file":
       return e.multiple ? [] : null;
     case "label":
+    case "section":
       return;
     // static block, no value
     default:
@@ -282,11 +283,11 @@ function ee(e, t, n) {
   return o.forEach((i, u) => {
     const d = i !== null && typeof i == "object" && !Array.isArray(i) ? i : {}, p = {};
     for (const a of s)
-      a.type === "label" || a.type === "repeater" || (p[a.key] = Object.hasOwn(d, a.key) ? d[a.key] : S(a));
+      a.type === "label" || a.type === "section" || a.type === "repeater" || (p[a.key] = Object.hasOwn(d, a.key) ? d[a.key] : S(a));
     for (const a of s)
-      if (!(a.type === "label" || a.type === "repeater"))
-        for (const h of X(a, p[a.key], n, p))
-          r.push({ key: `${e.key}[${u}].${h.key}`, message: h.message });
+      if (!(a.type === "label" || a.type === "section" || a.type === "repeater"))
+        for (const y of X(a, p[a.key], n, p))
+          r.push({ key: `${e.key}[${u}].${y.key}`, message: y.message });
   }), r;
 }
 function ce(e, t) {
@@ -401,9 +402,9 @@ function oe(e, t) {
       continue;
     }
     r.push(a.formName);
-    const h = {}, v = V(t, a.formName);
+    const y = {}, v = V(t, a.formName);
     for (const f of [...a.field_data, ...P(a)]) {
-      if (f.type === "label") continue;
+      if (f.type === "label" || f.type === "section") continue;
       if (_.has(f.key)) {
         n.push({
           ref: `${a.formName}.${f.key}`,
@@ -414,35 +415,35 @@ function oe(e, t) {
       }
       o.set(`${a.formName}.${f.key}`, f);
       const l = V(v, f.key);
-      h[f.key] = l !== void 0 ? l : S(f);
+      y[f.key] = l !== void 0 ? l : S(f);
     }
-    s[a.formName] = h;
+    s[a.formName] = y;
   }
   let i = {}, u = {}, d = !1;
   for (let a = 0; a < M; a++) {
     i = {}, u = {};
     for (const l of r) u[l] = { visible: !0 };
-    for (const [l, y] of o)
+    for (const [l, h] of o)
       i[l] = {
         visible: !0,
-        enabled: !y.disabled,
-        readonly: !1,
-        required: !!y.required,
+        enabled: !h.disabled,
+        readonly: !!h.readonly,
+        required: !!h.required,
         computed: !1
       };
-    const h = /* @__PURE__ */ new Map();
-    e.rules.forEach((l, y) => {
+    const y = /* @__PURE__ */ new Map();
+    e.rules.forEach((l, h) => {
       const c = w(l.when, s) ? l.then : l.else;
       if (!c) return;
       const N = l.priority ?? 0;
       for (const g of c) {
-        const b = se(g), A = h.get(b) ?? [];
-        A.push({ action: g, priority: N, index: y }), h.set(b, A);
+        const b = se(g), A = y.get(b) ?? [];
+        A.push({ action: g, priority: N, index: h }), y.set(b, A);
       }
     });
     const v = [];
-    for (const [l, y] of h) {
-      const c = re(y);
+    for (const [l, h] of y) {
+      const c = re(h);
       if (!c) continue;
       if (c.action === "setValue") {
         v.push({ ref: `${c.target.form}.${c.target.field}`, action: c });
@@ -492,17 +493,17 @@ function oe(e, t) {
     }
     const f = {};
     for (const l of r) f[l] = { ...s[l] };
-    for (const [l, y] of o) {
+    for (const [l, h] of o) {
       const [c, N] = C(l);
-      (!u[c].visible || !i[l].visible) && (f[c][N] = S(y));
+      (!u[c].visible || !i[l].visible) && (f[c][N] = S(h));
     }
-    for (const { ref: l, action: y } of v) {
+    for (const { ref: l, action: h } of v) {
       const [c, N] = C(l), g = i[l];
       if (!g) {
         n.push({ ref: l, message: "setValue targets unknown field", kind: "schema" });
         continue;
       }
-      !u[c].visible || !g.visible || (f[c][N] = ne(y.value, f), y.lock !== !1 && (g.readonly = !0, g.computed = !0));
+      !u[c].visible || !g.visible || (f[c][N] = ne(h.value, f), h.lock !== !1 && (g.readonly = !0, g.computed = !0));
     }
     if (E(f, s)) {
       d = !0, s = f;
@@ -518,10 +519,10 @@ function oe(e, t) {
   const p = {};
   for (const a of r) {
     if (!u[a].visible) continue;
-    const h = {};
+    const y = {};
     for (const [v, f] of Object.entries(s[a]))
-      i[`${a}.${v}`].visible && (h[v] = f);
-    p[a] = h;
+      i[`${a}.${v}`].visible && (y[v] = f);
+    p[a] = y;
   }
   return { data: p, fields: i, forms: u, errors: n };
 }