npm - bank20baht-ui - Versions diffs - 0.1.8 → 0.2.0 - Mend

bank20baht-ui 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +4 -3
package/dist/components/primitives/baht-table.d.ts +20 -8
package/dist/custom-elements.json +105 -7
package/dist/index.js +674 -609
package/dist/tokens.css +426 -91
package/dist/vscode.html-custom-data.json +1 -1
package/dist/web-types.json +2 -2
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -211,9 +211,10 @@ el.registry = {
 ## Design system — 20baht
-Ships themed as the **20baht design system**: banknote green (`#1F7A4E`), cream
-paper background, Bricolage Grotesque / Geist / Geist Mono, borders-over-shadows,
-"paper" easing. 35+ components:
+Ships themed as the **20baht design system**: olive intaglio (`#5C7A33`), rose
+underprint (`#A9645A`), foil gold on note paper (`#FBFAF3`), Bricolage Grotesque /
+Geist / Geist Mono, borders-over-shadows, "paper" easing — plus a dark theme
+(`<html data-baht-theme="dark">`, OS-following by default). 35+ components:
 ```html
 <baht-button variant="secondary" size="sm">Cancel</baht-button>

package/dist/components/primitives/baht-table.d.ts CHANGED Viewed

@@ -21,10 +21,11 @@ export type CellRenderer = (value: unknown, row: Record<string, unknown>) => unk
  *   t.cursorMode = true; t.hasNext = true; t.hasPrev = false;
  *   t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));
  *
- * A built-in "Columns" toggle is ON by default — it walks `columns` (or the
- * first row's keys, same as the header does) and lets the user show/hide
- * them client-side, no host wiring required. Set `t.columnPicker = false`
- * (JS property — a boolean attribute can't express "off") to hide it:
+ * A built-in "Columns" button is ON by default — it opens a ServiceNow-style
+ * Available/Selected dual-list modal (add/remove, reorder, Select all/Clear
+ * all) derived from `columns` (or the first row's keys), no host wiring
+ * required. Set `t.columnPicker = false` (JS property — a boolean attribute
+ * can't express "off") to hide it:
  *
  *   t.addEventListener('baht-columns-change', (e) => console.log(e.detail.visibleColumns));
  *
@@ -64,16 +65,27 @@ export declare class BahtTable extends BahtElement {
     private pickerOpen;
     /** User's picks once they've touched the picker; null = follow `visibleColumns`/all. */
     private pickedColumns;
-    private readonly onDocMousedown;
+    /** Working copy edited inside the modal; committed to `pickedColumns` on OK. */
+    private draftColumns;
+    /** Highlighted (not yet moved) options in each list. */
+    private pickAvail;
+    private pickSel;
+    private readonly onPickerKeydown;
     disconnectedCallback(): void;
     private get allColumnKeys();
     private get columnKeys();
-    private togglePicker;
-    private toggleColumn;
+    private openPicker;
+    private closePicker;
+    private static selectedValues;
+    private addToSelected;
+    private removeFromSelected;
+    private moveSelected;
+    private confirmPicker;
     private labelFor;
     private emitRow;
     private cell;
     private renderBody;
-    private renderColumnPicker;
+    private renderColumnToggle;
+    private renderColumnModal;
     protected render(): TemplateResult;
 }

package/dist/custom-elements.json CHANGED Viewed

@@ -8348,7 +8348,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n\nA built-in \"Columns\" toggle is ON by default — it walks `columns` (or the\nfirst row's keys, same as the header does) and lets the user show/hide\nthem client-side, no host wiring required. Set `t.columnPicker = false`\n(JS property — a boolean attribute can't express \"off\") to hide it:\n\n  t.addEventListener('baht-columns-change', (e) => console.log(e.detail.visibleColumns));\n\n`visibleColumns` still works standalone for a host-controlled subset (no\nrefetch) — pass it explicitly and the built-in picker (if also enabled)\nstarts from that selection and keeps emitting updates for it.",
+          "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n\nA built-in \"Columns\" button is ON by default — it opens a ServiceNow-style\nAvailable/Selected dual-list modal (add/remove, reorder, Select all/Clear\nall) derived from `columns` (or the first row's keys), no host wiring\nrequired. Set `t.columnPicker = false` (JS property — a boolean attribute\ncan't express \"off\") to hide it:\n\n  t.addEventListener('baht-columns-change', (e) => console.log(e.detail.visibleColumns));\n\n`visibleColumns` still works standalone for a host-controlled subset (no\nrefetch) — pass it explicitly and the built-in picker (if also enabled)\nstarts from that selection and keeps emitting updates for it.",
           "name": "BahtTable",
           "members": [
             {
@@ -8548,7 +8548,36 @@
             },
             {
               "kind": "field",
-              "name": "onDocMousedown",
+              "name": "draftColumns",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Working copy edited inside the modal; committed to `pickedColumns` on OK."
+            },
+            {
+              "kind": "field",
+              "name": "pickAvail",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Highlighted (not yet moved) options in each list."
+            },
+            {
+              "kind": "field",
+              "name": "pickSel",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "onPickerKeydown",
               "privacy": "private",
               "readonly": true
             },
@@ -8572,7 +8601,7 @@
             },
             {
               "kind": "method",
-              "name": "togglePicker",
+              "name": "openPicker",
               "privacy": "private",
               "return": {
                 "type": {
@@ -8582,22 +8611,81 @@
             },
             {
               "kind": "method",
-              "name": "toggleColumn",
+              "name": "closePicker",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "selectedValues",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
               },
               "parameters": [
                 {
-                  "name": "key",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "Event"
                   }
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "addToSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "removeFromSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "moveSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dir",
+                  "type": {
+                    "text": "-1 | 1"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "confirmPicker",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "labelFor",
@@ -8684,7 +8772,17 @@
             },
             {
               "kind": "method",
-              "name": "renderColumnPicker",
+              "name": "renderColumnToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderColumnModal",
               "privacy": "private",
               "return": {
                 "type": {