bank20baht-ui 0.5.7 → 0.6.0

package/README.md

@@ -296,6 +296,31 @@ Styling API: `.baht-form`, `.baht-field`, `.baht-field--w-1-2`, `.baht-field--hi
 `.baht-control`, `.baht-error`, `.baht-button`, `.baht-badge` (+ the token list in `tokens.css`).
 Full reference: [docs/theming.md](./docs/theming.md).
 
+## Import only what you use
+
+`import 'bank20baht-ui'` registers every element (~230 KB min). Three lighter routes:
+
+```ts
+// 1. per-element subpath — one module per tag, plus only what it imports
+import 'bank20baht-ui/components/button'; // <baht-button>
+import { BahtTable } from 'bank20baht-ui/components/table';
+import 'bank20baht-ui/components/form'; // <baht-form> + the 14 field primitives
+import 'bank20baht-ui/components/workflow';
+
+// 2. by tag list — each tag is a dynamic import, fetched on demand
+import { registerElements } from 'bank20baht-ui/register';
+await registerElements(['baht-button', 'baht-avatar']);
+```
+
+```css
+/* 3. split stylesheets instead of the all-in-one tokens.css (139 KB) */
+@import 'bank20baht-ui/css/tokens.css'; /* custom properties only, 18 KB */
+@import 'bank20baht-ui/css/components.css'; /* .baht-* classes */
+@import 'bank20baht-ui/css/datepicker.css'; /* flatpickr base + re-skin — only with <baht-datepicker> / date fields */
+```
+
+`bank20baht-ui/tokens.css` stays the one-import sheet (all three, flatpickr included).
+
 ## One install, typed everywhere
 
 `npm i bank20baht-ui` ships the runtime **and** the metadata every editor/framework needs —

package/dist/components/baht-form.js

@@ -0,0 +1,472 @@
+import { nothing as b, html as p } from "lit";
+import { property as u, state as m, customElement as T } from "lit/decorators.js";
+import { repeat as P } from "lit/directives/repeat.js";
+import { html as w, unsafeStatic as I } from "lit/static-html.js";
+import { BahtElement as B, hasDom as D } from "./base.js";
+import { TAG_FOR_TYPE as A } from "./primitives/tag-map.js";
+import { defaultValue as C } from "../core/defaults.js";
+import { t as _ } from "../core/i18n.js";
+import { validateField as M } from "../core/validators.js";
+import { resolveViewFields as q } from "../core/views.js";
+import { applyFlags as j } from "../core/flags.js";
+import { hasScripts as k, runScripts as F, createScriptContext as L, MAX_SCRIPT_DEPTH as E } from "../core/engine/scripts.js";
+import { displayValue as R } from "../core/display.js";
+import "./primitives/baht-input.js";
+import "./primitives/baht-textarea.js";
+import "./primitives/baht-number.js";
+import "./primitives/baht-currency.js";
+import "./primitives/baht-select.js";
+import "./primitives/baht-multiselect.js";
+import "./primitives/baht-checkbox.js";
+import "./primitives/baht-radio.js";
+import "./primitives/baht-toggle.js";
+import "./primitives/baht-datepicker.js";
+import "./primitives/baht-file.js";
+import "./primitives/baht-text.js";
+import "./primitives/baht-section.js";
+import "./primitives/baht-repeater.js";
+var U = Object.defineProperty, G = Object.getOwnPropertyDescriptor, h = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? G(e, s) : e, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (r = (i ? a(e, s, r) : a(r)) || r);
+  return i && r && U(e, s, r), r;
+};
+const H = {
+  "1/4": "baht-field--w-1-4",
+  "1/2": "baht-field--w-1-2",
+  "3/4": "baht-field--w-3-4",
+  full: "baht-field--w-full"
+}, x = /* @__PURE__ */ new Map();
+function W(t) {
+  let e = x.get(t);
+  return e || (e = I(t), x.set(t, e)), e;
+}
+let n = class extends B {
+  constructor() {
+    super(...arguments), this.value = {}, this.registry = {}, this.showOptional = !1, this.options = {}, this.fieldStates = {}, this.flags = {}, this.readonly = !1, this.edits = {}, this.errors = [], this.scriptStates = {}, this.fieldMessages = {}, this.formMessages = [], this.scriptContext = null, this.scriptContextForm = null, this.scriptDepth = 0, this.loadedForm = null, this.dynamicOptions = /* @__PURE__ */ new Map(), this.optionsSnapshots = /* @__PURE__ */ new Map(), this.optionsEpoch = /* @__PURE__ */ new Map(), this.warnedViews = /* @__PURE__ */ new Set(), this.flagCache = {};
+  }
+  get effectiveForm() {
+    return this.form ? ((this.flagCache.form !== this.form || this.flagCache.flags !== this.flags) && (this.flagCache = {
+      form: this.form,
+      flags: this.flags,
+      out: j(this.form, this.flags)
+    }), this.flagCache.out) : this.form;
+  }
+  willUpdate(t) {
+    t.has("value") && (this.edits = {}), (t.has("form") || t.has("flags")) && (this.dynamicOptions.clear(), this.optionsSnapshots.clear(), this.optionsEpoch.clear()), t.has("form") && (this.scriptStates = {}, this.fieldMessages = {}, this.formMessages = [], this.scriptContext = null), (t.has("form") || t.has("flags") || t.has("value") || t.has("registry")) && this.syncDynamicOptions();
+  }
+  /**
+   * Refetch `options_from` options whose dep snapshot changed. Sync fetchers
+   * land immediately; async ones re-render on resolve (stale responses are
+   * dropped by epoch).
+   */
+  syncDynamicOptions() {
+    var e, s;
+    const t = this.getData();
+    for (const i of ((e = this.effectiveForm) == null ? void 0 : e.fields) ?? []) {
+      if (!i.options_from) continue;
+      const r = JSON.stringify((i.options_deps ?? []).map((c) => t[c] ?? null));
+      if (this.optionsSnapshots.get(i.key) === r) continue;
+      this.optionsSnapshots.set(i.key, r);
+      const o = (this.optionsEpoch.get(i.key) ?? 0) + 1;
+      this.optionsEpoch.set(i.key, o);
+      const a = (s = this.registry.options) == null ? void 0 : s[i.options_from];
+      if (!a) {
+        console.warn(`[bahtui] unknown options fetcher "${i.options_from}" — skipped`), this.dynamicOptions.set(i.key, []);
+        continue;
+      }
+      const l = a(t);
+      l instanceof Promise ? l.then((c) => {
+        this.optionsEpoch.get(i.key) === o && (this.dynamicOptions.set(i.key, c), this.requestUpdate());
+      }).catch((c) => {
+        console.warn(`[bahtui] options fetcher "${i.options_from}" failed`, c), this.optionsEpoch.get(i.key) === o && this.optionsSnapshots.delete(i.key);
+      }) : this.dynamicOptions.set(i.key, l);
+    }
+  }
+  /**
+   * A user edit invalidates every field whose options_deps include the edited
+   * key — their values reset to defaults, cascading down chains
+   * (province -> district -> subdistrict).
+   */
+  clearDependents(t) {
+    var i, r;
+    const e = [t], s = /* @__PURE__ */ new Set();
+    for (; e.length > 0; ) {
+      const o = e.shift();
+      for (const a of ((i = this.effectiveForm) == null ? void 0 : i.fields) ?? [])
+        !((r = a.options_deps) != null && r.includes(o)) || s.has(a.key) || (s.add(a.key), this.edits = { ...this.edits, [a.key]: C(a) }, e.push(a.key));
+    }
+  }
+  get sortedFields() {
+    if (!this.form) return [];
+    const t = q(this.effectiveForm, this.view);
+    return t || (this.view !== void 0 && !this.warnedViews.has(this.view) && (this.warnedViews.add(this.view), console.warn(`[bahtui] unknown view "${this.view}" — showing the full form`)), q(this.effectiveForm) ?? []);
+  }
+  stateFor(t) {
+    const e = this.fieldStates[t.key] ?? {
+      visible: !0,
+      enabled: !t.disabled,
+      readonly: !!t.readonly,
+      required: !!t.required,
+      computed: !1
+    }, s = this.scriptStates[t.key];
+    return s ? { ...e, ...s } : e;
+  }
+  valueFor(t) {
+    return Object.hasOwn(this.edits, t.key) ? this.edits[t.key] : Object.hasOwn(this.value, t.key) ? this.value[t.key] : C(t);
+  }
+  // ---- public API (spec 01 §6) ----
+  /** Debounced keystrokes still in a control land in `edits` before anyone reads them. */
+  flushTyped() {
+    var t;
+    if (D())
+      for (const e of this.querySelectorAll(":scope > .baht-form > .baht-field > *"))
+        (t = e.flushTyped) == null || t.call(e);
+  }
+  getData() {
+    var e;
+    this.flushTyped();
+    const t = {};
+    for (const s of ((e = this.effectiveForm) == null ? void 0 : e.fields) ?? [])
+      s.type === "label" || s.type === "section" || (t[s.key] = this.valueFor(s));
+    return t;
+  }
+  /**
+   * Merge values programmatically. Runs each key's `change` scripts (like
+   * ServiceNow's g_form.setValue) but emits no `baht-change` — the host
+   * already knows, and a store adapter would otherwise loop.
+   */
+  setValue(t) {
+    const e = this.getData();
+    this.edits = { ...this.edits, ...t }, this.requestUpdate();
+    for (const s of Object.keys(t))
+      this.runChangeScripts(s, e[s], t[s], !1);
+  }
+  /** Declarative + registry validators over the visible fields (no scripts). */
+  runValidators() {
+    const t = [], e = this.getData();
+    for (const s of this.sortedFields) {
+      if (s.type === "label" || s.type === "section") continue;
+      const i = this.stateFor(s);
+      if (!i.visible) continue;
+      const r = i.required === !!s.required ? s : { ...s, required: i.required };
+      t.push(...M(r, this.valueFor(s), this.registry, e));
+    }
+    return t;
+  }
+  /**
+   * Full validation pass: validators, then `submit` scripts (spec 01 §14). A
+   * script returning `false` blocks; its `addErrorMessage()` calls become
+   * `{ key: '$' }` errors so hosts see why.
+   */
+  validate() {
+    const t = this.runValidators(), e = this.effectiveForm;
+    if (e && k(e, "submit")) {
+      this.formMessages = [];
+      const i = F({
+        form: e,
+        registry: this.registry,
+        g: this.g(e),
+        on: "submit",
+        detail: { isLoading: !1, data: this.getData() }
+      }), r = this.formMessages.filter((o) => o.type === "error").map((o) => ({ key: "$", message: o.message }));
+      !i && r.length === 0 && r.push({ key: "$", message: _("scriptBlocked") }), t.push(...r);
+    }
+    this.errors = t;
+    const s = { valid: t.length === 0, errors: t };
+    return this.dispatchEvent(
+      new CustomEvent("baht-validity", { detail: s, bubbles: !0, composed: !0 })
+    ), s;
+  }
+  reset() {
+    this.edits = {}, this.value = {}, this.errors = [], this.scriptStates = {}, this.fieldMessages = {}, this.formMessages = [], this.requestUpdate();
+  }
+  // ---- client scripts (spec 01 §14) ----
+  /** The `g` (g_form) for the current form — built lazily over this component's state. */
+  g(t) {
+    return this.scriptContext && this.scriptContextForm === t ? this.scriptContext : (this.scriptContextForm = t, this.scriptContext = L(t, {
+      getData: () => this.getData(),
+      setValue: (e, s) => this.applyScriptValue(e, s),
+      setState: (e, s) => {
+        this.scriptStates = {
+          ...this.scriptStates,
+          [e]: { ...this.scriptStates[e], ...s }
+        };
+      },
+      resetState: (e) => {
+        if (e === void 0) {
+          this.scriptStates = {};
+          return;
+        }
+        const s = { ...this.scriptStates };
+        delete s[e], this.scriptStates = s;
+      },
+      setFieldMessage: (e, s) => {
+        const i = { ...this.fieldMessages };
+        s ? i[e] = s : delete i[e], this.fieldMessages = i;
+      },
+      addFormMessage: (e) => {
+        this.formMessages = [...this.formMessages, e];
+      },
+      clearFormMessages: () => {
+        this.formMessages = [];
+      }
+    }), this.scriptContext);
+  }
+  /** A script wrote a value: same path as a user edit (emit + cascade), minus the formatter. */
+  applyScriptValue(t, e) {
+    const s = this.getData()[t];
+    this.edits = { ...this.edits, [t]: e }, this.clearDependents(t), this.syncDynamicOptions(), this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { form_name: this.form.form_name, key: t, value: e, data: this.getData() },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.runChangeScripts(t, s, e, !1);
+  }
+  runChangeScripts(t, e, s, i) {
+    const r = this.effectiveForm;
+    if (!(!r || !k(r, "change", t))) {
+      if (this.scriptDepth >= E) {
+        console.warn(
+          `[bahtui] script cascade on "${r.form_name}.${t}" exceeded ${E} levels — stopped (setValue ping-pong between change scripts?)`
+        );
+        return;
+      }
+      this.scriptDepth++;
+      try {
+        F({
+          form: r,
+          registry: this.registry,
+          g: this.g(r),
+          on: "change",
+          key: t,
+          detail: { oldValue: e, newValue: s, isLoading: i, data: this.getData() }
+        });
+      } finally {
+        this.scriptDepth--;
+      }
+    }
+  }
+  /**
+   * Form load (ServiceNow order): every field's `change` scripts with
+   * isLoading=true, then the `load` scripts. Once per `form` identity — a
+   * workflow reuses this element across steps, so each step loads.
+   */
+  runLoadScripts() {
+    var s;
+    const t = this.effectiveForm;
+    if (!((s = t == null ? void 0 : t.scripts) != null && s.length)) return;
+    const e = this.getData();
+    for (const i of t.fields)
+      i.type === "label" || i.type === "section" || this.runChangeScripts(i.key, void 0, e[i.key], !0);
+    k(t, "load") && F({
+      form: t,
+      registry: this.registry,
+      g: this.g(t),
+      on: "load",
+      detail: { isLoading: !0, data: this.getData() }
+    });
+  }
+  updated(t) {
+    super.updated(t), D() && this.form && this.loadedForm !== this.form && (this.loadedForm = this.form, this.runLoadScripts());
+  }
+  // ---- internal ----
+  onFieldInput(t, e) {
+    var o;
+    e.stopPropagation();
+    let { value: s } = e.detail;
+    const i = t.formatter ? (o = this.registry.formatters) == null ? void 0 : o[t.formatter] : void 0;
+    t.formatter && !i && console.warn(`[bahtui] unknown formatter "${t.formatter}" — skipped`), i && (s = i(s));
+    const r = this.valueFor(t);
+    this.edits = { ...this.edits, [t.key]: s }, this.clearDependents(t.key), this.syncDynamicOptions(), (this.options.validateOn ?? "change") === "change" && this.errors.length > 0 && (this.errors = this.runValidators()), this.dispatchEvent(
+      new CustomEvent("baht-change", {
+        detail: { form_name: this.form.form_name, key: t.key, value: s, data: this.getData() },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.runChangeScripts(t.key, r, s, !1);
+  }
+  /** Validate a single field against current form data (siblings included). */
+  validateOneField(t) {
+    const e = this.stateFor(t);
+    if (!e.visible) return [];
+    const s = this.getData(), i = e.required === !!t.required ? t : { ...t, required: e.required };
+    return M(i, this.valueFor(t), this.registry, s);
+  }
+  /** `validateOn: 'blur'` — validate just the field the user left, same as
+   * how errors are shown elsewhere (merged into `this.errors`, painted by
+   * `renderField`/`.baht-error`). No-op for 'change'/'submit' modes. */
+  onFieldBlur(t) {
+    if ((this.options.validateOn ?? "change") !== "blur") return;
+    const e = this.validateOneField(t), s = this.errors.filter((i) => i.key !== t.key);
+    this.errors = [...s, ...e];
+  }
+  renderField(t) {
+    var S, O;
+    const e = A[t.type];
+    if (!e)
+      return console.warn(`[bahtui] unknown field type "${t.type}" — skipped`), b;
+    const s = this.stateFor(t), i = H[t.width ?? "full"] ?? "baht-field--w-full", r = ((S = this.errors.find((d) => d.key === t.key)) == null ? void 0 : S.message) ?? null;
+    if (this.readonly && t.type !== "label" && t.type !== "section")
+      return this.renderReadonlyField(t, i, s.visible);
+    const o = t.options_from ? { ...t, options: this.dynamicOptions.get(t.key) ?? t.options ?? [] } : t, a = this.valueFor(t), l = !s.enabled, c = this.readonly || s.readonly, v = this.options.inputDebounce, $ = (d) => this.onControlInput(t.key, d), f = W(e);
+    let y;
+    if (t.type === "repeater") {
+      const d = this.errors.filter((V) => V.key.startsWith(`${t.key}[`));
+      y = w`<${f}
+        .field=${o}
+        .value=${a}
+        .disabled=${l}
+        .readonly=${c}
+        .required=${s.required}
+        .showOptional=${this.showOptional}
+        .error=${r}
+        .debounce=${v}
+        .rowErrors=${d}
+        @baht-input=${$}
+      ></${f}>`;
+    } else if (t.type === "file") {
+      let d;
+      t.uploader && (d = (O = this.registry.uploaders) == null ? void 0 : O[t.uploader], d || console.warn(`[bahtui] unknown uploader "${t.uploader}" — capture only`)), y = w`<${f}
+        .field=${o}
+        .value=${a}
+        .disabled=${l}
+        .readonly=${c}
+        .required=${s.required}
+        .showOptional=${this.showOptional}
+        .error=${r}
+        .debounce=${v}
+        .uploader=${d}
+        @baht-input=${$}
+      ></${f}>`;
+    } else
+      y = w`<${f}
+        .field=${o}
+        .value=${a}
+        .disabled=${l}
+        .readonly=${c}
+        .required=${s.required}
+        .showOptional=${this.showOptional}
+        .error=${r}
+        .debounce=${v}
+        @baht-input=${$}
+      ></${f}>`;
+    const g = this.fieldMessages[t.key];
+    return p`<div
+      class="baht-field ${i} ${s.visible ? "" : "baht-field--hidden"}"
+      data-key=${t.key}
+      data-type=${t.type}
+      data-testid="${this.form.form_id}.${t.key}"
+      @focusout=${() => this.onFieldBlur(t)}
+    >
+      ${y}
+      ${g ? p`<div
+              class="baht-field-msg baht-field-msg--${g.type}"
+              role=${g.type === "error" ? "alert" : "status"}
+            >
+              ${g.message}
+            </div>` : b}
+    </div>`;
+  }
+  /**
+   * Resolve the descriptor at event time — it may have changed since the control
+   * was first rendered (the same node is reused across renders, see render()).
+   */
+  onControlInput(t, e) {
+    var i;
+    const s = (i = this.effectiveForm) == null ? void 0 : i.fields.find((r) => r.key === t);
+    s && this.onFieldInput(s, e);
+  }
+  renderReadonlyField(t, e, s) {
+    const i = t.options_from ? this.dynamicOptions.get(t.key) ?? t.options ?? [] : t.options, r = R(t, this.valueFor(t), i), o = r.kind === "empty" ? p`<span class="baht-readonly-value baht-readonly-value--empty">${_("emptyValue")}</span>` : r.kind === "text" ? p`<span class="baht-readonly-value">${r.text}</span>` : r.kind === "chips" ? p`<span class="baht-readonly-value baht-readonly-chips"
+                >${r.items.map((a) => p`<span class="baht-readonly-chip">${a}</span>`)}</span
+              >` : p`<div class="baht-readonly-rows">
+                ${r.rows.map(
+      (a) => p`<div class="baht-readonly-row">
+                    ${a.map(
+        (l) => p`<span class="baht-readonly-cell"
+                        ><span class="baht-readonly-cell-label">${l.label}</span
+                        ><span class="baht-readonly-cell-value">${l.text}</span></span
+                      >`
+      )}
+                  </div>`
+    )}
+              </div>`;
+    return p`<div
+      class="baht-field ${e} baht-field--readonly ${s ? "" : "baht-field--hidden"}"
+      data-key=${t.key}
+      data-type=${t.type}
+      data-testid="${this.form.form_id}.${t.key}"
+    >
+      ${t.label ? p`<span class="baht-label">${t.label}</span>` : b}
+      ${o}
+    </div>`;
+  }
+  render() {
+    return p`<div class="baht-form ${this.readonly ? "baht-form--readonly" : ""}">
+      ${this.formMessages.length > 0 ? p`<div class="baht-form-messages">
+              ${this.formMessages.map(
+      (t) => p`<div
+                  class="baht-form-msg baht-form-msg--${t.type}"
+                  role=${t.type === "error" ? "alert" : "status"}
+                >
+                  ${t.message}
+                </div>`
+    )}
+            </div>` : b}
+      ${P(
+      this.sortedFields,
+      (t) => t.key,
+      (t) => this.renderField(t)
+    )}
+    </div>`;
+  }
+};
+h([
+  u({ attribute: !1 })
+], n.prototype, "form", 2);
+h([
+  u({ attribute: !1 })
+], n.prototype, "value", 2);
+h([
+  u({ attribute: !1 })
+], n.prototype, "registry", 2);
+h([
+  u({ type: Boolean, attribute: "show-optional" })
+], n.prototype, "showOptional", 2);
+h([
+  u({ attribute: !1 })
+], n.prototype, "options", 2);
+h([
+  u({ attribute: !1 })
+], n.prototype, "fieldStates", 2);
+h([
+  u({ type: String })
+], n.prototype, "view", 2);
+h([
+  u({ attribute: !1 })
+], n.prototype, "flags", 2);
+h([
+  u({ type: Boolean })
+], n.prototype, "readonly", 2);
+h([
+  m()
+], n.prototype, "edits", 2);
+h([
+  m()
+], n.prototype, "errors", 2);
+h([
+  m()
+], n.prototype, "scriptStates", 2);
+h([
+  m()
+], n.prototype, "fieldMessages", 2);
+h([
+  m()
+], n.prototype, "formMessages", 2);
+n = h([
+  T("baht-form")
+], n);
+export {
+  n as BahtForm
+};