bank20baht-ui 0.1.7 → 0.1.9

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

@@ -21,11 +21,12 @@ 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));
  *
- * Set `column-picker` for a built-in "Columns" toggle — 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:
+ * 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.columnPicker = true;
  *   t.addEventListener('baht-columns-change', (e) => console.log(e.detail.visibleColumns));
  *
  * `visibleColumns` still works standalone for a host-controlled subset (no
@@ -53,7 +54,7 @@ export declare class BahtTable extends BahtElement {
     renderers: Record<string, CellRenderer>;
     /** Subset + order of `columns` to render; empty/omitted = show all. */
     visibleColumns: string[];
-    /** Built-in "Columns" toggle — derives its options from `columns`/rows. */
+    /** Built-in "Columns" toggle — derives its options from `columns`/rows. Set `column-picker="false"` to hide it. */
     columnPicker: boolean;
     page: number;
     totalPages: number;
@@ -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

@@ -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\nSet `column-picker` for a built-in \"Columns\" toggle — it walks `columns`\n(or the first row's keys, same as the header does) and lets the user\nshow/hide them client-side, no host wiring required:\n\n  t.columnPicker = true;\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": [
             {
@@ -8477,8 +8477,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Built-in \"Columns\" toggle — derives its options from `columns`/rows.",
+              "default": "true",
+              "description": "Built-in \"Columns\" toggle — derives its options from `columns`/rows. Set `column-picker=\"false\"` to hide it.",
               "attribute": "column-picker"
             },
             {
@@ -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": {
@@ -8788,8 +8886,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Built-in \"Columns\" toggle — derives its options from `columns`/rows.",
+              "default": "true",
+              "description": "Built-in \"Columns\" toggle — derives its options from `columns`/rows. Set `column-picker=\"false\"` to hide it.",
               "fieldName": "columnPicker"
             },
             {