@toolbox-web/grid 0.2.3 → 0.2.4

package/README.md

@@ -126,6 +126,30 @@ When the same property is set via multiple methods, higher precedence wins:
 <tbw-grid></tbw-grid>
 ```
 
+### HTML Attributes
+
+The grid supports configuration via HTML attributes with JSON-serialized values:
+
+| Attribute     | Type   | Description                                 |
+| ------------- | ------ | ------------------------------------------- |
+| `rows`        | JSON   | Data array (JSON-serialized)                |
+| `columns`     | JSON   | Column definitions (JSON-serialized)        |
+| `grid-config` | JSON   | Full configuration object (JSON-serialized) |
+| `fit-mode`    | string | Column sizing: `'stretch'` or `'fixed'`     |
+| `edit-on`     | string | Edit trigger: `'click'` or `'dblclick'`     |
+
+**Example with HTML attributes:**
+
+```html
+<tbw-grid
+  rows='[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]'
+  columns='[{"field":"id","header":"ID"},{"field":"name","header":"Name"}]'
+  fit-mode="stretch"
+  edit-on="dblclick"
+>
+</tbw-grid>
+```
+
 ### Properties
 
 | Property     | Type                    | Description                                        |

package/all.d.ts

@@ -2025,30 +2025,31 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
     #private;
     static readonly tagName = "tbw-grid";
     static readonly version: string;
+    static get observedAttributes(): string[];
     _rows: T[];
     get _columns(): ColumnInternal<T>[];
     set _columns(value: ColumnInternal<T>[]);
-    get visibleColumns(): ColumnInternal<T>[];
-    rowPool: HTMLElement[];
+    get _visibleColumns(): ColumnInternal<T>[];
+    _headerRowEl: HTMLElement;
+    _bodyEl: HTMLElement;
+    _rowPool: HTMLElement[];
+    _resizeController: ResizeController;
+    _virtualization: VirtualState;
+    _focusRow: number;
+    _focusCol: number;
+    _sortState: {
+        field: string;
+        direction: 1 | -1;
+    } | null;
+    _activeEditRows: number;
+    _rowEditSnapshots: Map<number, T>;
+    _changedRowIndices: Set<number>;
+    _gridTemplate: string;
     __rowRenderEpoch: number;
-    activeEditRows: number;
-    resizeController: ResizeController;
     __didInitialAutoSize: boolean;
     __lightDomColumnsCache?: ColumnInternal[];
     __originalColumnNodes?: HTMLElement[];
-    headerRowEl: HTMLElement;
-    bodyEl: HTMLElement;
-    virtualization: VirtualState;
-    sortState: {
-        field: string;
-        direction: 1 | -1;
-    } | null;
     __originalOrder: T[];
-    focusRow: number;
-    focusCol: number;
-    gridTemplate: string;
-    rowEditSnapshots: Map<number, T>;
-    _changedRowIndices: Set<number>;
     get rows(): T[];
     set rows(value: T[]);
     /**
@@ -2064,82 +2065,54 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
     set fitMode(value: FitMode | undefined);
     get editOn(): string | undefined;
     set editOn(value: string | undefined);
-    get effectiveConfig(): GridConfig<T>;
-    /**
-     * Get the disconnect signal for event listener cleanup.
-     * This signal is aborted when the grid disconnects from the DOM.
-     * Plugins and internal code can use this for automatic listener cleanup.
-     * @example
-     * element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
-     */
-    get disconnectSignal(): AbortSignal;
+    /* Excluded from this release type: effectiveConfig */
+    /* Excluded from this release type: disconnectSignal */
     constructor();
-    /**
-     * Get a plugin instance by its class.
-     * Used by plugins for inter-plugin communication.
-     */
-    getPlugin<P extends BaseGridPlugin>(PluginClass: new (...args: any[]) => P): P | undefined;
-    /**
-     * Get a plugin instance by its name.
-     * Used for loose coupling between plugins (avoids static imports).
-     */
-    getPluginByName(name: string): BaseGridPlugin | undefined;
-    /**
-     * Request a full re-render of the grid.
-     * Called by plugins when they need the grid to update.
-     * Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
-     */
-    requestRender(): void;
-    /**
-     * Request a lightweight style update without rebuilding DOM.
-     * Called by plugins when they only need to update CSS classes/styles.
-     * This runs all plugin afterRender hooks without rebuilding row/column DOM.
-     */
-    requestAfterRender(): void;
+    /* Excluded from this release type: getPlugin */
+    /* Excluded from this release type: getPluginByName */
+    /* Excluded from this release type: requestRender */
+    /* Excluded from this release type: requestAfterRender */
     connectedCallback(): void;
     disconnectedCallback(): void;
-    emitCellCommit(detail: CellCommitDetail<T>): void;
-    emitRowCommit(detail: RowCommitDetail<T>): void;
-    emitSortChange(detail: SortChangeDetail): void;
-    emitColumnResize(detail: ColumnResizeDetail): void;
-    emitActivateCell(detail: ActivateCellDetail): void;
-    findHeaderRow(): HTMLElement;
-    findRenderedRowElement(rowIndex: number): HTMLElement | null;
+    /**
+     * Handle HTML attribute changes.
+     * Only processes attribute values when SET (non-null).
+     * Removing an attribute does NOT clear JS-set properties.
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    _emitCellCommit(detail: CellCommitDetail<T>): void;
+    _emitRowCommit(detail: RowCommitDetail<T>): void;
+    _emitSortChange(detail: SortChangeDetail): void;
+    _emitColumnResize(detail: ColumnResizeDetail): void;
+    _emitActivateCell(detail: ActivateCellDetail): void;
+    /* Excluded from this release type: findHeaderRow */
+    /* Excluded from this release type: findRenderedRowElement */
     /**
      * Dispatch a cell click event to the plugin system.
      * Returns true if any plugin handled the event.
      */
-    dispatchCellClick(event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement): boolean;
+    _dispatchCellClick(event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement): boolean;
     /**
      * Dispatch a header click event to the plugin system.
      * Returns true if any plugin handled the event.
      */
-    dispatchHeaderClick(event: MouseEvent, colIndex: number, headerEl: HTMLElement): boolean;
+    _dispatchHeaderClick(event: MouseEvent, colIndex: number, headerEl: HTMLElement): boolean;
     /**
      * Dispatch a keyboard event to the plugin system.
      * Returns true if any plugin handled the event.
      */
-    dispatchKeyDown(event: KeyboardEvent): boolean;
+    _dispatchKeyDown(event: KeyboardEvent): boolean;
     /**
      * Get horizontal scroll boundary offsets from plugins.
      * Used by keyboard navigation to ensure focused cells are fully visible
      * when plugins like pinned columns obscure part of the scroll area.
      */
-    getHorizontalScrollOffsets(rowEl?: HTMLElement, focusedCell?: HTMLElement): {
+    _getHorizontalScrollOffsets(rowEl?: HTMLElement, focusedCell?: HTMLElement): {
         left: number;
         right: number;
         skipScroll?: boolean;
     };
-    /**
-     * Query all plugins with a generic query and collect responses.
-     * This enables inter-plugin communication without the core knowing plugin-specific concepts.
-     *
-     * @example
-     * // Check if any plugin vetoes moving a column
-     * const responses = grid.queryPlugins<boolean>({ type: PLUGIN_QUERIES.CAN_MOVE_COLUMN, context: column });
-     * const canMove = !responses.includes(false);
-     */
-    queryPlugins<T>(query: PluginQuery): T[];
+    /* Excluded from this release type: queryPlugins */
     get changedRows(): T[];
     get changedRowIndices(): number[];
     resetChangedRows(silent?: boolean): Promise<void>;
@@ -2209,13 +2182,7 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
      * Get the current column state.
      */
     get columnState(): GridColumnState | undefined;
-    /**
-     * Request a state change event to be emitted.
-     * Called internally after resize, reorder, visibility, or sort changes.
-     * Plugins should call this after changing their state.
-     * The event is debounced to avoid excessive events during drag operations.
-     */
-    requestStateChange(): void;
+    /* Excluded from this release type: requestStateChange */
     /**
      * Reset column state to initial configuration.
      * Clears all user modifications (order, width, visibility, sort).
@@ -2263,11 +2230,7 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
      * Call this after dynamically modifying <tbw-grid-header> children.
      */
     refreshShellHeader(): void;
-    /**
-     * Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
-     * or standard row window rendering.
-     */
-    refreshVirtualWindow(force?: boolean): void;
+    /* Excluded from this release type: refreshVirtualWindow */
 }
 
 /**
@@ -3464,12 +3427,12 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     _rows: T[];
     _columns: ColumnInternal<T>[];
     /** Visible columns only (excludes hidden). Use for rendering. */
-    visibleColumns: ColumnInternal<T>[];
-    headerRowEl: HTMLElement;
-    bodyEl: HTMLElement;
-    rowPool: HTMLElement[];
-    resizeController: ResizeController;
-    sortState: {
+    _visibleColumns: ColumnInternal<T>[];
+    _headerRowEl: HTMLElement;
+    _bodyEl: HTMLElement;
+    _rowPool: HTMLElement[];
+    _resizeController: ResizeController;
+    _sortState: {
         field: string;
         direction: 1 | -1;
     } | null;
@@ -3478,12 +3441,12 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     __didInitialAutoSize?: boolean;
     __lightDomColumnsCache?: ColumnInternal[];
     __originalColumnNodes?: HTMLElement[];
-    gridTemplate: string;
-    virtualization: VirtualState;
-    focusRow: number;
-    focusCol: number;
-    activeEditRows: number;
-    rowEditSnapshots: Map<number, T>;
+    _gridTemplate: string;
+    _virtualization: VirtualState;
+    _focusRow: number;
+    _focusCol: number;
+    _activeEditRows: number;
+    _rowEditSnapshots: Map<number, T>;
     _changedRowIndices: Set<number>;
     changedRows?: T[];
     changedRowIndices?: number[];
@@ -3495,13 +3458,13 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     beginBulkEdit?: (rowIndex: number) => void;
     commitActiveRowEdit?: () => void;
     /** Dispatch cell click to plugin system, returns true if handled */
-    dispatchCellClick?: (event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement) => boolean;
+    _dispatchCellClick?: (event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement) => boolean;
     /** Dispatch header click to plugin system, returns true if handled */
-    dispatchHeaderClick?: (event: MouseEvent, colIndex: number, headerEl: HTMLElement) => boolean;
+    _dispatchHeaderClick?: (event: MouseEvent, colIndex: number, headerEl: HTMLElement) => boolean;
     /** Dispatch keydown to plugin system, returns true if handled */
-    dispatchKeyDown?: (event: KeyboardEvent) => boolean;
+    _dispatchKeyDown?: (event: KeyboardEvent) => boolean;
     /** Get horizontal scroll boundary offsets from plugins (e.g., pinned columns) */
-    getHorizontalScrollOffsets?: (rowEl?: HTMLElement, focusedCell?: HTMLElement) => {
+    _getHorizontalScrollOffsets?: (rowEl?: HTMLElement, focusedCell?: HTMLElement) => {
         left: number;
         right: number;
         skipScroll?: boolean;

package/index.d.ts

@@ -977,30 +977,31 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
     #private;
     static readonly tagName = "tbw-grid";
     static readonly version: string;
+    static get observedAttributes(): string[];
     _rows: T[];
     get _columns(): ColumnInternal<T>[];
     set _columns(value: ColumnInternal<T>[]);
-    get visibleColumns(): ColumnInternal<T>[];
-    rowPool: HTMLElement[];
+    get _visibleColumns(): ColumnInternal<T>[];
+    _headerRowEl: HTMLElement;
+    _bodyEl: HTMLElement;
+    _rowPool: HTMLElement[];
+    _resizeController: ResizeController;
+    _virtualization: VirtualState;
+    _focusRow: number;
+    _focusCol: number;
+    _sortState: {
+        field: string;
+        direction: 1 | -1;
+    } | null;
+    _activeEditRows: number;
+    _rowEditSnapshots: Map<number, T>;
+    _changedRowIndices: Set<number>;
+    _gridTemplate: string;
     __rowRenderEpoch: number;
-    activeEditRows: number;
-    resizeController: ResizeController;
     __didInitialAutoSize: boolean;
     __lightDomColumnsCache?: ColumnInternal[];
     __originalColumnNodes?: HTMLElement[];
-    headerRowEl: HTMLElement;
-    bodyEl: HTMLElement;
-    virtualization: VirtualState;
-    sortState: {
-        field: string;
-        direction: 1 | -1;
-    } | null;
     __originalOrder: T[];
-    focusRow: number;
-    focusCol: number;
-    gridTemplate: string;
-    rowEditSnapshots: Map<number, T>;
-    _changedRowIndices: Set<number>;
     get rows(): T[];
     set rows(value: T[]);
     /**
@@ -1016,82 +1017,54 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
     set fitMode(value: FitMode | undefined);
     get editOn(): string | undefined;
     set editOn(value: string | undefined);
-    get effectiveConfig(): GridConfig<T>;
-    /**
-     * Get the disconnect signal for event listener cleanup.
-     * This signal is aborted when the grid disconnects from the DOM.
-     * Plugins and internal code can use this for automatic listener cleanup.
-     * @example
-     * element.addEventListener('click', handler, { signal: this.grid.disconnectSignal });
-     */
-    get disconnectSignal(): AbortSignal;
+    /* Excluded from this release type: effectiveConfig */
+    /* Excluded from this release type: disconnectSignal */
     constructor();
-    /**
-     * Get a plugin instance by its class.
-     * Used by plugins for inter-plugin communication.
-     */
-    getPlugin<P extends BaseGridPlugin>(PluginClass: new (...args: any[]) => P): P | undefined;
-    /**
-     * Get a plugin instance by its name.
-     * Used for loose coupling between plugins (avoids static imports).
-     */
-    getPluginByName(name: string): BaseGridPlugin | undefined;
-    /**
-     * Request a full re-render of the grid.
-     * Called by plugins when they need the grid to update.
-     * Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
-     */
-    requestRender(): void;
-    /**
-     * Request a lightweight style update without rebuilding DOM.
-     * Called by plugins when they only need to update CSS classes/styles.
-     * This runs all plugin afterRender hooks without rebuilding row/column DOM.
-     */
-    requestAfterRender(): void;
+    /* Excluded from this release type: getPlugin */
+    /* Excluded from this release type: getPluginByName */
+    /* Excluded from this release type: requestRender */
+    /* Excluded from this release type: requestAfterRender */
     connectedCallback(): void;
     disconnectedCallback(): void;
-    emitCellCommit(detail: CellCommitDetail<T>): void;
-    emitRowCommit(detail: RowCommitDetail<T>): void;
-    emitSortChange(detail: SortChangeDetail): void;
-    emitColumnResize(detail: ColumnResizeDetail): void;
-    emitActivateCell(detail: ActivateCellDetail): void;
-    findHeaderRow(): HTMLElement;
-    findRenderedRowElement(rowIndex: number): HTMLElement | null;
+    /**
+     * Handle HTML attribute changes.
+     * Only processes attribute values when SET (non-null).
+     * Removing an attribute does NOT clear JS-set properties.
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    _emitCellCommit(detail: CellCommitDetail<T>): void;
+    _emitRowCommit(detail: RowCommitDetail<T>): void;
+    _emitSortChange(detail: SortChangeDetail): void;
+    _emitColumnResize(detail: ColumnResizeDetail): void;
+    _emitActivateCell(detail: ActivateCellDetail): void;
+    /* Excluded from this release type: findHeaderRow */
+    /* Excluded from this release type: findRenderedRowElement */
     /**
      * Dispatch a cell click event to the plugin system.
      * Returns true if any plugin handled the event.
      */
-    dispatchCellClick(event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement): boolean;
+    _dispatchCellClick(event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement): boolean;
     /**
      * Dispatch a header click event to the plugin system.
      * Returns true if any plugin handled the event.
      */
-    dispatchHeaderClick(event: MouseEvent, colIndex: number, headerEl: HTMLElement): boolean;
+    _dispatchHeaderClick(event: MouseEvent, colIndex: number, headerEl: HTMLElement): boolean;
     /**
      * Dispatch a keyboard event to the plugin system.
      * Returns true if any plugin handled the event.
      */
-    dispatchKeyDown(event: KeyboardEvent): boolean;
+    _dispatchKeyDown(event: KeyboardEvent): boolean;
     /**
      * Get horizontal scroll boundary offsets from plugins.
      * Used by keyboard navigation to ensure focused cells are fully visible
      * when plugins like pinned columns obscure part of the scroll area.
      */
-    getHorizontalScrollOffsets(rowEl?: HTMLElement, focusedCell?: HTMLElement): {
+    _getHorizontalScrollOffsets(rowEl?: HTMLElement, focusedCell?: HTMLElement): {
         left: number;
         right: number;
         skipScroll?: boolean;
     };
-    /**
-     * Query all plugins with a generic query and collect responses.
-     * This enables inter-plugin communication without the core knowing plugin-specific concepts.
-     *
-     * @example
-     * // Check if any plugin vetoes moving a column
-     * const responses = grid.queryPlugins<boolean>({ type: PLUGIN_QUERIES.CAN_MOVE_COLUMN, context: column });
-     * const canMove = !responses.includes(false);
-     */
-    queryPlugins<T>(query: PluginQuery): T[];
+    /* Excluded from this release type: queryPlugins */
     get changedRows(): T[];
     get changedRowIndices(): number[];
     resetChangedRows(silent?: boolean): Promise<void>;
@@ -1161,13 +1134,7 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
      * Get the current column state.
      */
     get columnState(): GridColumnState | undefined;
-    /**
-     * Request a state change event to be emitted.
-     * Called internally after resize, reorder, visibility, or sort changes.
-     * Plugins should call this after changing their state.
-     * The event is debounced to avoid excessive events during drag operations.
-     */
-    requestStateChange(): void;
+    /* Excluded from this release type: requestStateChange */
     /**
      * Reset column state to initial configuration.
      * Clears all user modifications (order, width, visibility, sort).
@@ -1215,11 +1182,7 @@ export declare class DataGridElement<T = any> extends HTMLElement implements Int
      * Call this after dynamically modifying <tbw-grid-header> children.
      */
     refreshShellHeader(): void;
-    /**
-     * Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
-     * or standard row window rendering.
-     */
-    refreshVirtualWindow(force?: boolean): void;
+    /* Excluded from this release type: refreshVirtualWindow */
 }
 
 /**
@@ -1774,12 +1737,12 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     _rows: T[];
     _columns: ColumnInternal<T>[];
     /** Visible columns only (excludes hidden). Use for rendering. */
-    visibleColumns: ColumnInternal<T>[];
-    headerRowEl: HTMLElement;
-    bodyEl: HTMLElement;
-    rowPool: HTMLElement[];
-    resizeController: ResizeController;
-    sortState: {
+    _visibleColumns: ColumnInternal<T>[];
+    _headerRowEl: HTMLElement;
+    _bodyEl: HTMLElement;
+    _rowPool: HTMLElement[];
+    _resizeController: ResizeController;
+    _sortState: {
         field: string;
         direction: 1 | -1;
     } | null;
@@ -1788,12 +1751,12 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     __didInitialAutoSize?: boolean;
     __lightDomColumnsCache?: ColumnInternal[];
     __originalColumnNodes?: HTMLElement[];
-    gridTemplate: string;
-    virtualization: VirtualState;
-    focusRow: number;
-    focusCol: number;
-    activeEditRows: number;
-    rowEditSnapshots: Map<number, T>;
+    _gridTemplate: string;
+    _virtualization: VirtualState;
+    _focusRow: number;
+    _focusCol: number;
+    _activeEditRows: number;
+    _rowEditSnapshots: Map<number, T>;
     _changedRowIndices: Set<number>;
     changedRows?: T[];
     changedRowIndices?: number[];
@@ -1805,13 +1768,13 @@ declare interface InternalGrid<T = any> extends PublicGrid<T>, GridConfig<T> {
     beginBulkEdit?: (rowIndex: number) => void;
     commitActiveRowEdit?: () => void;
     /** Dispatch cell click to plugin system, returns true if handled */
-    dispatchCellClick?: (event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement) => boolean;
+    _dispatchCellClick?: (event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement) => boolean;
     /** Dispatch header click to plugin system, returns true if handled */
-    dispatchHeaderClick?: (event: MouseEvent, colIndex: number, headerEl: HTMLElement) => boolean;
+    _dispatchHeaderClick?: (event: MouseEvent, colIndex: number, headerEl: HTMLElement) => boolean;
     /** Dispatch keydown to plugin system, returns true if handled */
-    dispatchKeyDown?: (event: KeyboardEvent) => boolean;
+    _dispatchKeyDown?: (event: KeyboardEvent) => boolean;
     /** Get horizontal scroll boundary offsets from plugins (e.g., pinned columns) */
-    getHorizontalScrollOffsets?: (rowEl?: HTMLElement, focusedCell?: HTMLElement) => {
+    _getHorizontalScrollOffsets?: (rowEl?: HTMLElement, focusedCell?: HTMLElement) => {
         left: number;
         right: number;
         skipScroll?: boolean;