bank20baht-ui 0.4.3 → 0.5.1

package/README.md

@@ -224,6 +224,35 @@ el.registry = {
 // JSON side: { formatter: 'uppercase', validators: [{ type: 'custom', fn: 'idCardTH' }] }
 ```
 
+### Client scripts — ServiceNow-style `load` / `change` / `submit`
+
+When rules JSON isn't enough, register imperative hooks the same way — by name:
+
+```js
+// JSON side
+form.scripts = [
+  { on: 'change', field: 'type', handler: 'typeChanged' },
+  { on: 'submit', handler: 'checkQuota' },
+];
+// host side — `g` is the g_form equivalent, scoped to this form
+el.registry.scripts = {
+  typeChanged: (g, { newValue, isLoading }) => {
+    if (isLoading) return;
+    g.setRequired('doc', newValue === 'sick');
+    g.showFieldMsg('doc', 'แนบใบรับรองแพทย์', 'info');
+  },
+  checkQuota: (g) => {
+    if (g.getValue('days') > 10) { g.addErrorMessage('เกินโควตา'); return false; } // blocks submit
+  },
+};
+```
+
+`g` reads (`getValue`, `getData`), writes (`setValue` — cascades to that field's `change`
+script, depth-guarded), overrides UI state (`setVisible` / `setReadOnly` / `setRequired` /
+`setDisabled`, on top of rule-derived states) and shows messages. `bank20baht-validator`
+re-runs `submit` scripts on the server; `load`/`change` are UI-only. See
+`docs/components/baht-form.md` and spec 01 §14.
+
 ## Design system — 20baht
 
 Ships themed as the **20baht design system**: olive intaglio (`#5C7A33`), rose

package/dist/chunks/{baht-toast-CD1WrOYr.js → baht-toast-CUujRj20.js}

@@ -1,19 +1,27 @@
-import { svg as c, html as p, nothing as d } from "lit";
-import { property as r, query as $, customElement as f, state as w } from "lit/decorators.js";
-import { B as v, b as C, h as g } from "./base-CajA2aCO.js";
-import { t as E } from "./i18n-BcPL9_Jh.js";
-const O = {
-  copy: c`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
-  check: c`<path d="M3.5 8.5 6.5 11.5 12.5 4.5"/>`,
-  download: c`<path d="M8 3v7m0 0 3-3m-3 3L5 7"/><path d="M3 12h10"/>`,
-  upload: c`<path d="M8 12V5m0 0 3 3M8 5 5 8"/><path d="M3 4h10"/>`,
-  plus: c`<path d="M8 3.5v9M3.5 8h9"/>`,
-  external: c`<path d="M6 3H3.5v9.5h9.5V10"/><path d="M9 3h4v4"/><path d="M13 3 7.5 8.5"/>`,
-  close: c`<path d="M4 4l8 8M12 4l-8 8"/>`,
-  play: c`<path d="M5 3.5v9l7-4.5z"/>`,
-  search: c`<circle cx="7" cy="7" r="4"/><path d="m13 13-3.2-3.2"/>`
+import { svg as r, html as p, nothing as d } from "lit";
+import { property as l, query as $, customElement as f, state as w } from "lit/decorators.js";
+import { B as v, b as C, h as g } from "./base-CGS8ov6z.js";
+import { t as O } from "./i18n-Cnr3OLiz.js";
+const M = {
+  copy: r`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
+  check: r`<path d="M3.5 8.5 6.5 11.5 12.5 4.5"/>`,
+  download: r`<path d="M8 3v7m0 0 3-3m-3 3L5 7"/><path d="M3 12h10"/>`,
+  upload: r`<path d="M8 12V5m0 0 3 3M8 5 5 8"/><path d="M3 4h10"/>`,
+  plus: r`<path d="M8 3.5v9M3.5 8h9"/>`,
+  external: r`<path d="M6 3H3.5v9.5h9.5V10"/><path d="M9 3h4v4"/><path d="M13 3 7.5 8.5"/>`,
+  close: r`<path d="M4 4l8 8M12 4l-8 8"/>`,
+  play: r`<path d="M5 3.5v9l7-4.5z"/>`,
+  search: r`<circle cx="7" cy="7" r="4"/><path d="m13 13-3.2-3.2"/>`,
+  // table headers: unsorted (both chevrons), ascending, descending
+  sort: r`<path d="m5 6.5 3-3 3 3"/><path d="m5 9.5 3 3 3-3"/>`,
+  "chevron-up": r`<path d="m4.5 10 3.5-3.5L11.5 10"/>`,
+  "chevron-down": r`<path d="m4.5 6 3.5 3.5L11.5 6"/>`,
+  // row actions trigger
+  more: r`<circle cx="3.5" cy="8" r="1" fill="currentColor"/><circle cx="8" cy="8" r="1" fill="currentColor"/><circle cx="12.5" cy="8" r="1" fill="currentColor"/>`,
+  // column picker trigger (sliders)
+  columns: r`<path d="M3 5h10M3 11h10"/><circle cx="6" cy="5" r="1.5" fill="var(--baht-color-surface, #fff)"/><circle cx="10" cy="11" r="1.5" fill="var(--baht-color-surface, #fff)"/>`
 };
-function S(t) {
+function x(t) {
   return p`<svg
     class="baht-icon"
     width="16"
@@ -25,15 +33,15 @@ function S(t) {
     stroke-linecap="round"
     stroke-linejoin="round"
     aria-hidden="true"
-  >${O[t]}</svg>`;
+  >${M[t]}</svg>`;
 }
-function M(t) {
-  return t in O;
+function S(t) {
+  return t in M;
 }
-var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, u = (t, s, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? x(s, o) : s, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (e = (i ? l(s, o, e) : l(e)) || e);
-  return i && e && k(s, o, e), e;
+var E = Object.defineProperty, k = Object.getOwnPropertyDescriptor, u = (t, s, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? k(s, o) : s, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (e = (i ? c(s, o, e) : c(e)) || e);
+  return i && e && E(s, o, e), e;
 };
 let h = class extends v {
   constructor() {
@@ -43,7 +51,7 @@ let h = class extends v {
     this.iconOnly || C(this, this.buttonEl);
   }
   render() {
-    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, s = this.size === "md" ? "" : ` baht-button--${this.size}`, o = this.iconOnly ? " baht-button--icon" : "", i = this.icon && M(this.icon) ? S(this.icon) : d;
+    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, s = this.size === "md" ? "" : ` baht-button--${this.size}`, o = this.iconOnly ? " baht-button--icon" : "", i = this.icon && S(this.icon) ? x(this.icon) : d;
     return p`<button
       class="baht-button${t}${s}${o}"
       type=${this.type}
@@ -53,25 +61,25 @@ let h = class extends v {
   }
 };
 u([
-  r()
+  l()
 ], h.prototype, "variant", 2);
 u([
-  r()
+  l()
 ], h.prototype, "size", 2);
 u([
-  r({ type: Boolean })
+  l({ type: Boolean })
 ], h.prototype, "disabled", 2);
 u([
-  r()
+  l()
 ], h.prototype, "type", 2);
 u([
-  r()
+  l()
 ], h.prototype, "label", 2);
 u([
-  r()
+  l()
 ], h.prototype, "icon", 2);
 u([
-  r({ type: Boolean, attribute: "icon-only" })
+  l({ type: Boolean, attribute: "icon-only" })
 ], h.prototype, "iconOnly", 2);
 u([
   $("button")
@@ -93,9 +101,9 @@ function _(t, s) {
   Promise.all(o.map((a) => a.finished.catch(() => {
   }))).then(e, e), setTimeout(e, P);
 }
-var B = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (t, s, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? T(s, o) : s, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (e = (i ? l(s, o, e) : l(e)) || e);
+var B = Object.defineProperty, T = Object.getOwnPropertyDescriptor, m = (t, s, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? T(s, o) : s, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (e = (i ? c(s, o, e) : c(e)) || e);
   return i && e && B(s, o, e), e;
 };
 let n = class extends v {
@@ -156,9 +164,7 @@ let n = class extends v {
   }
   /** Ask the host to close (the host owns `open`). */
   requestClose(t = "button") {
-    this.dispatchEvent(
-      new CustomEvent("baht-close", { detail: { reason: t }, bubbles: !0, composed: !0 })
-    );
+    this.emit("baht-close", { reason: t });
   }
   render() {
     return p`<div
@@ -176,7 +182,7 @@ let n = class extends v {
       >
         ${this.heading || this.showClose ? p`<header class="baht-modal-header">
               <div class="baht-modal-title" id=${this.titleId}>${this.heading}</div>
-              ${this.showClose ? p`<button type="button" class="baht-modal-close" aria-label=${E("close")} @click=${() => this.requestClose("button")}>×</button>` : d}
+              ${this.showClose ? p`<button type="button" class="baht-modal-close" aria-label=${O("close")} @click=${() => this.requestClose("button")}>×</button>` : d}
             </header>` : d}
         <div class="baht-modal-body"></div>
       </div>
@@ -184,39 +190,39 @@ let n = class extends v {
   }
 };
 n.openStack = [];
-b([
-  r({ type: Boolean, reflect: !0 })
+m([
+  l({ type: Boolean, reflect: !0 })
 ], n.prototype, "open", 2);
-b([
-  r()
+m([
+  l()
 ], n.prototype, "heading", 2);
-b([
-  r({ type: Boolean, attribute: "show-close" })
+m([
+  l({ type: Boolean, attribute: "show-close" })
 ], n.prototype, "showClose", 2);
-b([
-  r({ type: Boolean, attribute: "close-on-scrim" })
+m([
+  l({ type: Boolean, attribute: "close-on-scrim" })
 ], n.prototype, "closeOnScrim", 2);
-b([
+m([
   $(".baht-modal-body")
 ], n.prototype, "bodyEl", 2);
-b([
+m([
   w()
 ], n.prototype, "closing", 2);
-n = b([
+n = m([
   f("baht-modal")
 ], n);
 var D = Object.defineProperty, q = Object.getOwnPropertyDescriptor, y = (t, s, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? q(s, o) : s, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (e = (i ? l(s, o, e) : l(e)) || e);
+  for (var e = i > 1 ? void 0 : i ? q(s, o) : s, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (e = (i ? c(s, o, e) : c(e)) || e);
   return i && e && D(s, o, e), e;
 };
-let m = class extends v {
+let b = class extends v {
   constructor() {
     super(...arguments), this.duration = 4e3, this.entries = [], this.timers = /* @__PURE__ */ new Map();
   }
   show(t) {
     const s = {
-      id: ++m.counter,
+      id: ++b.counter,
       message: t.message,
       tone: t.tone ?? "neutral",
       duration: t.duration ?? this.duration
@@ -229,13 +235,7 @@ let m = class extends v {
   dismiss(t) {
     const s = this.entries.find((e) => e.id === t);
     if (!s || s.leaving) return;
-    clearTimeout(this.timers.get(t)), this.timers.delete(t), this.entries = this.entries.map((e) => e.id === t ? { ...e, leaving: !0 } : e), this.dispatchEvent(
-      new CustomEvent("baht-dismiss", {
-        detail: { id: t, message: s.message },
-        bubbles: !0,
-        composed: !0
-      })
-    );
+    clearTimeout(this.timers.get(t)), this.timers.delete(t), this.entries = this.entries.map((e) => e.id === t ? { ...e, leaving: !0 } : e), this.emit("baht-dismiss", { id: t, message: s.message });
     const o = () => {
       this.entries = this.entries.filter((e) => e.id !== t);
     }, i = this.querySelector(`.baht-toast[data-toast="${t}"]`);
@@ -258,27 +258,27 @@ let m = class extends v {
           role=${t.tone === "danger" || t.tone === "warning" ? "alert" : d}
         >
           <span class="baht-toast-message">${t.message}</span>
-          <button type="button" class="baht-toast-dismiss" aria-label=${E("dismiss")} @click=${() => this.dismiss(t.id)}>×</button>
+          <button type="button" class="baht-toast-dismiss" aria-label=${O("dismiss")} @click=${() => this.dismiss(t.id)}>×</button>
         </div>`
     )}
     </div>`;
   }
 };
-m.counter = 0;
+b.counter = 0;
 y([
-  r({ type: Number })
-], m.prototype, "duration", 2);
+  l({ type: Number })
+], b.prototype, "duration", 2);
 y([
   w()
-], m.prototype, "entries", 2);
-m = y([
+], b.prototype, "entries", 2);
+b = y([
   f("baht-toast")
-], m);
+], b);
 export {
   h as B,
   n as a,
-  m as b,
+  b,
   _ as c,
-  M as i,
-  S as r
+  S as i,
+  x as r
 };