bank20baht-ui 0.2.4 → 0.2.6

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

@@ -1,6 +1,38 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { BahtFieldBase } from '../base.js';
-/** Value = ISO date string (yyyy-mm-dd). */
+/**
+ * Calendar field on top of flatpickr. The VALUE is always ISO `yyyy-mm-dd`
+ * regardless of `field.dateFormat` (display only):
+ *   - `dateMode: 'single'` (default) -> `string | null`
+ *   - `dateMode: 'range'`            -> `[start, end] | null` (inclusive)
+ *   - `dateMode: 'multiple'`         -> `string[]`
+ * `min` / `max` bound the calendar; `disabledDates` (ISO days or `a/b`
+ * intervals) and `disabledWeekdays` (0 = Sun … 6 = Sat) grey days out — and
+ * the engine re-checks them on validate, so the calendar is UX, not the gate.
+ *
+ * The calendar renders INSIDE the element (flatpickr `static`), so it lives in
+ * light DOM like every other node and picks up a theme set on any ancestor.
+ * Give a clipping ancestor (`overflow: hidden`) room, or it hides the popup.
+ */
 export declare class BahtDatepicker extends BahtFieldBase {
+    private fp;
+    /**
+     * What we last told the host. A controlled host re-feeds `value` after the
+     * event, but a slow (or absent) re-feed must not make onClose re-emit the
+     * pick onChange already sent — compare against this until `value` catches up.
+     */
+    private lastEmitted;
     protected renderControl(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private teardown;
+    /** Push the host-fed `value` into the calendar without echoing an event. */
+    private syncValue;
+    private options;
+    private emitIfChanged;
+    /** Host value (any mode) -> the Date list flatpickr works with. */
+    private datesOf;
+    /** flatpickr's selection -> the value shape of the field's mode. */
+    private toValue;
 }

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

@@ -1,6 +1,23 @@
 import { TemplateResult } from 'lit';
 import { BahtElement } from '../base.js';
 export type CellRenderer = (value: unknown, row: Record<string, unknown>) => unknown;
+/**
+ * One column: a plain label, or a reference column with its own fields that
+ * the picker can dot-walk into (`requester.department`). Fields nest.
+ */
+export type ColumnSpec = {
+    label: string;
+    fields?: ColumnMap;
+};
+export type ColumnMap = Record<string, string | ColumnSpec>;
+/** What the picker committed: dotted keys plus the labels the header shows. */
+export type ColumnsChangeDetail = {
+    visibleColumns: string[];
+    columns: Array<{
+        key: string;
+        label: string;
+    }>;
+};
 /**
  * Server-side data table. `items` is ONE page of rows — the component never
  * slices or fetches; on `baht-page-change` the host fetches the next page and
@@ -25,9 +42,24 @@ export type CellRenderer = (value: unknown, row: Record<string, unknown>) => unk
  * 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:
+ * can't express "off") to hide it. OK emits `baht-columns-change` with the
+ * chosen keys and their labels; persist that and feed it back as
+ * `visibleColumns` to remember a person's layout:
+ *
+ *   t.addEventListener('baht-columns-change', (e) => save(e.detail.visibleColumns));
  *
- *   t.addEventListener('baht-columns-change', (e) => console.log(e.detail.visibleColumns));
+ * Dot-walking (spec: reference columns). A column may declare `fields`, in
+ * which case the picker lets the person expand it and pick a sub-field —
+ * the key becomes `requester.department`, the header reads
+ * "Requested by › Department", and the cell resolves the path on the row.
+ * Rows whose values are plain objects get the same treatment automatically
+ * when no `columns` map is given.
+ *
+ *   t.columns = {
+ *     number: 'Number',
+ *     requester: { label: 'Requested by', fields: { name: 'Name', department: 'Department' } },
+ *   };
+ *   t.visibleColumns = ['number', 'requester.name'];
  *
  * `visibleColumns` still works standalone for a host-controlled subset (no
  * refetch) — pass it explicitly and the built-in picker (if also enabled)
@@ -36,8 +68,8 @@ export type CellRenderer = (value: unknown, row: Record<string, unknown>) => unk
 export declare class BahtTable extends BahtElement {
     /** Rows of the CURRENT page. */
     items: Record<string, unknown>[];
-    /** column key -> display name; omitted = derive keys from the first row. */
-    columns: Record<string, string>;
+    /** column key -> display name, or a reference column with `fields` (property); empty = derive keys from the first row (`snake_case` -> `Title Case`). */
+    columns: ColumnMap;
     loading: boolean;
     error: boolean;
     errorMessage: string;
@@ -50,9 +82,9 @@ export declare class BahtTable extends BahtElement {
     rowKey: string;
     /** Rows emit baht-row-click + get hover/keyboard affordances. */
     clickable: boolean;
-    /** Custom cell renderers by column key (functions — a property, never JSON). */
+    /** Custom cell renderers by column key, dotted keys included (functions — a property, never JSON). */
     renderers: Record<string, CellRenderer>;
-    /** Subset + order of `columns` to render; empty/omitted = show all. */
+    /** Subset + order of columns to render (dotted keys allowed); empty/omitted = show all top-level columns. */
     visibleColumns: string[];
     /** Built-in "Columns" toggle — derives its options from `columns`/rows. Set `column-picker="false"` to hide it. */
     columnPicker: boolean;
@@ -70,22 +102,44 @@ export declare class BahtTable extends BahtElement {
     /** Highlighted (not yet moved) options in each list. */
     private pickAvail;
     private pickSel;
+    /** Reference columns unfolded in the Available tree (dot-walk). */
+    private expanded;
     private readonly onPickerKeydown;
     disconnectedCallback(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** The declared map, or one derived from the first row (nested objects become reference columns). */
+    private get spec();
+    /** Walk a dotted key through the spec; undefined when no such column exists. */
+    private specAt;
+    private isReference;
+    private childrenOf;
+    /** Every pickable key, reference fields included (`requester`, `requester.name`, ...). */
+    private allPaths;
     private get allColumnKeys();
     private get columnKeys();
+    /** "Requested by › Department" for a dotted key; the plain label otherwise. */
+    private labelFor;
+    /** The row's value at a dotted key (`requester.department`). */
+    private static valueAt;
     private openPicker;
     private closePicker;
     private static selectedValues;
+    private toggleAvail;
+    private toggleExpanded;
     private addToSelected;
     private removeFromSelected;
     private moveSelected;
     private confirmPicker;
-    private labelFor;
     private emitRow;
     private cell;
     private renderBody;
     private renderColumnToggle;
+    /**
+     * One row of the Available tree. A reference column gets an expander that
+     * unfolds its fields (the dot-walk); every row is a toggle button so the
+     * list works from the keyboard without the native multi-select.
+     */
+    private renderAvailRow;
     private renderColumnModal;
     protected render(): TemplateResult;
 }

package/dist/components/primitives/index.d.ts

@@ -2,7 +2,7 @@ export { BahtButton, type ButtonVariant, type ButtonSize } from './baht-button.j
 export { renderIcon, isIconName, type IconName } from './icons.js';
 export { BahtBadge, type BadgeTone } from './baht-badge.js';
 export { BahtCode, type CodeVariant } from './baht-code.js';
-export { BahtTable, type CellRenderer } from './baht-table.js';
+export { BahtTable, type CellRenderer, type ColumnMap, type ColumnSpec, type ColumnsChangeDetail, } from './baht-table.js';
 export { BahtList, type ListItem } from './baht-list.js';
 export { BahtPagination } from './baht-pagination.js';
 export { BahtModal } from './baht-modal.js';

package/dist/core/dates.d.ts

@@ -0,0 +1,29 @@
+import { DateMode, FieldDescriptor } from './types.js';
+/** ISO day -> local Date at midnight, or null when malformed / not a real day. */
+export declare function parseIsoDate(iso: unknown): Date | null;
+/** Local Date -> ISO day. */
+export declare function formatIsoDate(date: Date): string;
+export declare const dateModeOf: (field: FieldDescriptor) => DateMode;
+/**
+ * Every ISO day a date value holds, whatever the mode: a single string, a
+ * `[start, end]` range (both ends only — the interior is implied) or a list.
+ * Non-string entries are dropped; shape errors are the validator's job.
+ */
+export declare function isoDaysOf(value: unknown): string[];
+/**
+ * One `disabledDates` entry: an ISO day or an inclusive ISO interval
+ * `start/end`. Returns `[from, to]` (from === to for a single day) or null.
+ */
+export declare function parseDisabledEntry(entry: string): [Date, Date] | null;
+/**
+ * True when `iso` falls on a disabled weekday or inside a disabled date /
+ * interval of the descriptor. Malformed entries never disable anything.
+ */
+export declare function isDateDisabled(field: FieldDescriptor, iso: string): boolean;
+/**
+ * Days between a range's ends (inclusive) that a picker would step over —
+ * so a range can be rejected when a holiday sits INSIDE it. Capped so a
+ * hostile `["1900-01-01","2999-12-31"]` submission cannot spin the server;
+ * beyond the cap only the ends are checked.
+ */
+export declare function rangeInteriorDays(start: string, end: string, cap?: number): string[];

package/dist/core/i18n.d.ts

@@ -6,6 +6,7 @@ export interface MessageCatalog {
     max: string;
     pattern: string;
     email: string;
+    dateDisabled: string;
     compareEq: string;
     compareNe: string;
     compareGt: string;

package/dist/core/index.d.ts

@@ -11,3 +11,4 @@ export { resolveNext, walkPath } from './engine/graph.js';
 export { evalCondition, readRef } from './engine/conditions.js';
 export { evalValueExpr } from './engine/expressions.js';
 export { displayValue, type DisplayValue } from './display.js';
+export { formatIsoDate, isDateDisabled, parseDisabledEntry, parseIsoDate } from './dates.js';

package/dist/core/types.d.ts

@@ -1,6 +1,8 @@
 /** Control types supported by v1 (spec 01 §2). */
 export type FieldType = 'text' | 'textarea' | 'number' | 'email' | 'password' | 'dropdown' | 'multiselect' | 'checkbox' | 'radio' | 'toggle' | 'date' | 'file' | 'label' | 'section' | 'repeater';
 export type FieldWidth = '1/4' | '1/2' | '3/4' | 'full';
+/** `date` field selection mode (spec 01 §2). */
+export type DateMode = 'single' | 'range' | 'multiple';
 export interface FieldOption {
     key: string;
     label: string;
@@ -48,6 +50,25 @@ export interface FieldDescriptor {
     minLength?: number;
     min?: number | string;
     max?: number | string;
+    /**
+     * date: selection mode. 'single' (default) -> value is one ISO string;
+     * 'range' -> value is `[start, end]` (both ISO, inclusive); 'multiple' ->
+     * value is an ISO string[] in pick order.
+     */
+    dateMode?: DateMode;
+    /**
+     * date: DISPLAY format of the typed/rendered text (flatpickr tokens, e.g.
+     * 'd/m/Y', 'j M Y'). The VALUE stays ISO yyyy-mm-dd regardless.
+     */
+    dateFormat?: string;
+    /**
+     * date: days that cannot be picked — each entry an ISO date ('2026-04-13')
+     * or an inclusive ISO interval ('2026-04-13/2026-04-15'). Enforced by the
+     * engine too, so a hand-crafted submission cannot bypass the calendar.
+     */
+    disabledDates?: string[];
+    /** date: weekdays that cannot be picked, 0 = Sunday … 6 = Saturday. */
+    disabledWeekdays?: number[];
     step?: number;
     rows?: number;
     accept?: string;