bank20baht-ui 0.1.6 → 0.1.7

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

@@ -21,12 +21,16 @@ 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));
  *
- * `visibleColumns` picks + orders a subset of `columns` client-side (no
- * refetch) — pair it with <baht-multiselect> as the chooser UI:
+ * 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:
  *
- *   picker.field = { key: 'cols', options: Object.entries(t.columns).map(([key, label]) => ({ key, label })) };
- *   picker.value = t.visibleColumns;           // omit/empty = show all columns
- *   picker.addEventListener('baht-input', (e) => t.visibleColumns = e.detail.value);
+ *   t.columnPicker = true;
+ *   t.addEventListener('baht-columns-change', (e) => console.log(e.detail.visibleColumns));
+ *
+ * `visibleColumns` still works standalone for a host-controlled subset (no
+ * refetch) — pass it explicitly and the built-in picker (if also enabled)
+ * starts from that selection and keeps emitting updates for it.
  */
 export declare class BahtTable extends BahtElement {
     /** Rows of the CURRENT page. */
@@ -49,16 +53,27 @@ 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. */
+    columnPicker: boolean;
     page: number;
     totalPages: number;
     /** Switch the footer to Prev/Next (cursor-based API, no total count). */
     cursorMode: boolean;
     hasNext: boolean;
     hasPrev: boolean;
+    private pickerOpen;
+    /** User's picks once they've touched the picker; null = follow `visibleColumns`/all. */
+    private pickedColumns;
+    private readonly onDocMousedown;
+    disconnectedCallback(): void;
+    private get allColumnKeys();
     private get columnKeys();
+    private togglePicker;
+    private toggleColumn;
     private labelFor;
     private emitRow;
     private cell;
     private renderBody;
+    private renderColumnPicker;
     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\n`visibleColumns` picks + orders a subset of `columns` client-side (no\nrefetch) — pair it with <baht-multiselect> as the chooser UI:\n\n  picker.field = { key: 'cols', options: Object.entries(t.columns).map(([key, label]) => ({ key, label })) };\n  picker.value = t.visibleColumns;           // omit/empty = show all columns\n  picker.addEventListener('baht-input', (e) => t.visibleColumns = e.detail.value);",
+          "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.",
           "name": "BahtTable",
           "members": [
             {
@@ -8471,6 +8471,16 @@
               "default": "[]",
               "description": "Subset + order of `columns` to render; empty/omitted = show all."
             },
+            {
+              "kind": "field",
+              "name": "columnPicker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Built-in \"Columns\" toggle — derives its options from `columns`/rows.",
+              "attribute": "column-picker"
+            },
             {
               "kind": "field",
               "name": "page",
@@ -8517,6 +8527,40 @@
               "default": "false",
               "attribute": "has-prev"
             },
+            {
+              "kind": "field",
+              "name": "pickerOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "pickedColumns",
+              "type": {
+                "text": "string[] | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "User's picks once they've touched the picker; null = follow `visibleColumns`/all."
+            },
+            {
+              "kind": "field",
+              "name": "onDocMousedown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "allColumnKeys",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "columnKeys",
@@ -8526,6 +8570,34 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "togglePicker",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggleColumn",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "labelFor",
@@ -8609,9 +8681,25 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "renderColumnPicker",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             }
           ],
           "events": [
+            {
+              "name": "baht-columns-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "name": "baht-row-click",
               "type": {
@@ -8695,6 +8783,15 @@
               "description": "Rows emit baht-row-click + get hover/keyboard affordances.",
               "fieldName": "clickable"
             },
+            {
+              "name": "column-picker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Built-in \"Columns\" toggle — derives its options from `columns`/rows.",
+              "fieldName": "columnPicker"
+            },
             {
               "name": "page",
               "type": {