bank20baht-ui 0.4.2 → 0.5.0

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-DkN6tiDw.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 { 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-CajA2aCO.js";
-import { t as E } from "./i18n-BcPL9_Jh.js";
+import { t as E } from "./i18n-Cnr3OLiz.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"/>`
+  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 _(t) {
   return p`<svg
     class="baht-icon"
     width="16"
@@ -27,13 +35,13 @@ function S(t) {
     aria-hidden="true"
   >${O[t]}</svg>`;
 }
-function M(t) {
+function x(t) {
   return t in O;
 }
-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 S = 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 && S(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 && x(this.icon) ? _(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")
@@ -80,7 +88,7 @@ h = u([
   f("baht-button")
 ], h);
 const P = 600;
-function _(t, s) {
+function M(t, s) {
   const o = typeof t.getAnimations == "function" ? t.getAnimations({ subtree: !0 }) : [];
   if (o.length === 0) {
     s();
@@ -94,8 +102,8 @@ function _(t, s) {
   }))).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);
+  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 {
@@ -147,7 +155,7 @@ let n = class extends v {
       const i = ++this.closeToken, e = this.querySelector(".baht-modal-scrim"), a = () => {
         i === this.closeToken && !this.open && (this.closing = !1);
       };
-      e ? _(e, a) : a();
+      e ? M(e, a) : a();
     }
     if (t.has("open") && this.open && (this.previousFocus = document.activeElement, (s = this.querySelector(".baht-modal")) == null || s.focus()), t.has("open") && !this.open && t.get("open") === !0) {
       const i = this.previousFocus;
@@ -185,16 +193,16 @@ let n = class extends v {
 };
 n.openStack = [];
 b([
-  r({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], n.prototype, "open", 2);
 b([
-  r()
+  l()
 ], n.prototype, "heading", 2);
 b([
-  r({ type: Boolean, attribute: "show-close" })
+  l({ type: Boolean, attribute: "show-close" })
 ], n.prototype, "showClose", 2);
 b([
-  r({ type: Boolean, attribute: "close-on-scrim" })
+  l({ type: Boolean, attribute: "close-on-scrim" })
 ], n.prototype, "closeOnScrim", 2);
 b([
   $(".baht-modal-body")
@@ -206,8 +214,8 @@ n = b([
   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 {
@@ -243,7 +251,7 @@ let m = class extends v {
       o();
       return;
     }
-    i.classList.add("baht-toast--leaving"), _(i, o);
+    i.classList.add("baht-toast--leaving"), M(i, o);
   }
   disconnectedCallback() {
     this.timers.forEach((t) => clearTimeout(t)), this.timers.clear(), super.disconnectedCallback();
@@ -266,7 +274,7 @@ let m = class extends v {
 };
 m.counter = 0;
 y([
-  r({ type: Number })
+  l({ type: Number })
 ], m.prototype, "duration", 2);
 y([
   w()
@@ -278,7 +286,7 @@ export {
   h as B,
   n as a,
   m as b,
-  _ as c,
-  M as i,
-  S as r
+  M as c,
+  x as i,
+  _ as r
 };