@rozie-ui/data-table-lit 0.7.1 → 0.7.2

package/dist/index.d.mts

@@ -1,6 +1,107 @@
 import * as _$lit from "lit";
 import { LitElement } from "lit";
+import { Column as Column$1, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/table-core";
+
 //#region src/DataTable.d.ts
+/** A cell position as integers over the visible (display-order) model. */
+interface DataTableCellPosition {
+  rowIndex: number;
+  colIndex: number;
+}
+/** The active (roving-focus) cell. A header cell reports `rowIndex: null` and `isHeader: true`. */
+interface DataTableActiveCell {
+  rowIndex: number | null;
+  colIndex: number;
+  isHeader: boolean;
+}
+/** The rectangular cell-range selection. Both corners are `null` when there is no range. */
+interface DataTableRange {
+  anchor: DataTableCellPosition | null;
+  focus: DataTableCellPosition | null;
+}
+/** One data column offered to the `#groupBar` slot. */
+interface DataTableGroupableColumn {
+  id: string;
+  label: string;
+}
+/** One changed cell inside a row edit commit. */
+interface DataTableCellChange {
+  columnId: string;
+  oldValue: any;
+  newValue: any;
+}
+/** The `activecell-change` payload. `isHeader` is set when the move landed on or left a header cell. */
+interface DataTableActiveCellChangePayload {
+  rowIndex: number | null;
+  colIndex: number;
+  isHeader?: boolean;
+}
+/** The `cell-edit-commit` payload: one committed cell. */
+interface DataTableCellEditCommitPayload {
+  rowId: string;
+  columnId: string;
+  oldValue: any;
+  newValue: any;
+}
+/** The `row-edit-commit` payload: the row and every cell the save changed. */
+interface DataTableRowEditCommitPayload {
+  rowId: string;
+  changes: DataTableCellChange[];
+}
+/** The `filter-change` payload: `globalFilter` for the search box, `columnFilters` for a per-column filter. Exactly one key is set. */
+interface DataTableFilterChangePayload {
+  globalFilter?: string;
+  columnFilters?: ColumnFiltersState;
+}
+/** The `history-change` payload: undo/redo availability. */
+interface DataTableHistoryChangePayload {
+  canUndo: boolean;
+  canRedo: boolean;
+}
+/** The `range-change` payload: the new range corners (both `null` when the range cleared). */
+type DataTableRangeChangePayload = DataTableRange;
+/** The `row-activate` payload. `row` is the original data object and `index` its position in the rendered model. */
+interface DataTableRowActivatePayload {
+  row: any;
+  index: number;
+  trigger: 'keyboard' | 'click';
+}
+/** The `visible-range-change` payload: the rendered row window, `end` exclusive. */
+interface DataTableVisibleRangeChangePayload {
+  start: number;
+  end: number;
+}
+interface RozieDataTableEventMap extends Omit<HTMLElementEventMap, 'activecell-change' | 'cell-edit-commit' | 'expand-change' | 'filter-change' | 'group-change' | 'history-change' | 'page-change' | 'pin-change' | 'range-change' | 'reorder-change' | 'resize-change' | 'row-activate' | 'row-edit-commit' | 'selection-change' | 'sort-change' | 'visibility-change' | 'visible-range-change' | 'data-change' | 'sorting-change' | 'global-filter-change' | 'column-filters-change' | 'pagination-change' | 'expanded-change' | 'grouping-change' | 'row-selection-change' | 'column-visibility-change' | 'column-sizing-change' | 'column-order-change' | 'column-pinning-change'> {
+  'activecell-change': CustomEvent<DataTableActiveCellChangePayload>;
+  'cell-edit-commit': CustomEvent<DataTableCellEditCommitPayload>;
+  'expand-change': CustomEvent<ExpandedState>;
+  'filter-change': CustomEvent<DataTableFilterChangePayload>;
+  'group-change': CustomEvent<GroupingState>;
+  'history-change': CustomEvent<DataTableHistoryChangePayload>;
+  'page-change': CustomEvent<PaginationState>;
+  'pin-change': CustomEvent<ColumnPinningState>;
+  'range-change': CustomEvent<DataTableRangeChangePayload>;
+  'reorder-change': CustomEvent<ColumnOrderState>;
+  'resize-change': CustomEvent<ColumnSizingState>;
+  'row-activate': CustomEvent<DataTableRowActivatePayload>;
+  'row-edit-commit': CustomEvent<DataTableRowEditCommitPayload>;
+  'selection-change': CustomEvent<RowSelectionState>;
+  'sort-change': CustomEvent<SortingState>;
+  'visibility-change': CustomEvent<VisibilityState>;
+  'visible-range-change': CustomEvent<DataTableVisibleRangeChangePayload>;
+  'data-change': CustomEvent<any[]>;
+  'sorting-change': CustomEvent<any[]>;
+  'global-filter-change': CustomEvent<string>;
+  'column-filters-change': CustomEvent<any[]>;
+  'pagination-change': CustomEvent<any>;
+  'expanded-change': CustomEvent<any | boolean>;
+  'grouping-change': CustomEvent<any[]>;
+  'row-selection-change': CustomEvent<any>;
+  'column-visibility-change': CustomEvent<any>;
+  'column-sizing-change': CustomEvent<any>;
+  'column-order-change': CustomEvent<any[]>;
+  'column-pinning-change': CustomEvent<any>;
+}
 declare const DataTable_base: typeof LitElement;
 declare class DataTable extends DataTable_base {
   static shadowRootOptions: ShadowRootInit;
@@ -186,17 +287,17 @@ declare class DataTable extends DataTable_base {
   private _hasSlotGroupBar;
   private _slotGroupBarElements;
   groupBar?: (scope: {
-    grouping: any;
-    groupableColumns: any;
-    applyGrouping: any;
-    clearGrouping: any;
+    grouping: string[];
+    groupableColumns: DataTableGroupableColumn[];
+    applyGrouping: (cols: string[]) => void;
+    clearGrouping: () => void;
   }) => unknown;
   private _hasSlotSelectAll;
   private _slotSelectAllElements;
   selectAll?: (scope: {
-    checked: any;
-    indeterminate: any;
-    toggle: any;
+    checked: boolean;
+    indeterminate: boolean;
+    toggle: (event: any) => void;
   }) => unknown;
   private _hasSlotDynamicColHeader;
   private _slotDynamicColHeaderElements;
@@ -205,15 +306,15 @@ declare class DataTable extends DataTable_base {
   private _hasSlotPlaceholder;
   private _slotPlaceholderElements;
   placeholder?: (scope: {
-    index: any;
-    columnId: any;
+    index: number;
+    columnId: string;
   }) => unknown;
   private _hasSlotSelectCell;
   private _slotSelectCellElements;
   selectCell?: (scope: {
     row: any;
-    checked: any;
-    toggle: any;
+    checked: boolean;
+    toggle: (event: any) => void;
   }) => unknown;
   private _hasSlotDynamicCell;
   private _slotDynamicCellElements;
@@ -227,69 +328,69 @@ declare class DataTable extends DataTable_base {
   private _hasSlotColHeader;
   private _slotColHeaderElements;
   colHeader?: (scope: {
-    columnId: any;
-    column: any;
-    label: any;
+    columnId: string;
+    column: Column$1<any, unknown>;
+    label: string;
   }) => unknown;
   private _hasSlotFilter;
   private _slotFilterElements;
   filter?: (scope: {
-    columnId: any;
+    columnId: string;
     value: any;
-    uniqueValues: any;
-    minMax: any;
-    columnLabel: any;
-    setFilter: any;
+    uniqueValues: any[];
+    minMax: [number, number] | null;
+    columnLabel: string;
+    setFilter: (columnId: string, value: any) => void;
   }) => unknown;
   private _hasSlotCell;
   private _slotCellElements;
   cell?: (scope: {
-    columnId: any;
-    column: any;
+    columnId: string;
+    column: Column$1<any, unknown>;
     row: any;
     value: any;
   }) => unknown;
   private _hasSlotEditor;
   private _slotEditorElements;
   editor?: (scope: {
-    columnId: any;
-    column: any;
+    columnId: string;
+    column: Column$1<any, unknown>;
     row: any;
     value: any;
-    commit: any;
-    cancel: any;
-    columnLabel: any;
-    autofocus: any;
+    commit: (value: any) => void;
+    cancel: () => void;
+    columnLabel: string;
+    autofocus: boolean;
   }) => unknown;
   rozieSlots?: {
     [key: `colHeader-${string}`]: (scope: {
-      columnId: any;
-      column: any;
-      label: any;
+      columnId: string;
+      column: Column$1<any, unknown>;
+      label: string;
     }) => unknown;
     [key: `filter-${string}`]: (scope: {
-      columnId: any;
+      columnId: string;
       value: any;
-      uniqueValues: any;
-      minMax: any;
-      columnLabel: any;
-      setFilter: any;
+      uniqueValues: any[];
+      minMax: [number, number] | null;
+      columnLabel: string;
+      setFilter: (columnId: string, value: any) => void;
     }) => unknown;
     [key: `cell-${string}`]: (scope: {
-      columnId: any;
-      column: any;
+      columnId: string;
+      column: Column$1<any, unknown>;
       row: any;
       value: any;
     }) => unknown;
     [key: `editor-${string}`]: (scope: {
-      columnId: any;
-      column: any;
+      columnId: string;
+      column: Column$1<any, unknown>;
       row: any;
       value: any;
-      commit: any;
-      cancel: any;
-      columnLabel: any;
-      autofocus: any;
+      commit: (value: any) => void;
+      cancel: () => void;
+      columnLabel: string;
+      autofocus: boolean;
     }) => unknown;
   } & Record<string, (scope: any) => unknown>;
   private _disconnectCleanups;
@@ -451,7 +552,7 @@ declare class DataTable extends DataTable_base {
     align?: "start" | "center" | "end" | "auto";
     behavior?: "auto" | "smooth" | "instant";
   }) => void;
-  getScrollElement: () => any;
+  getScrollElement: () => HTMLElement | null;
   virtualItemKey: (i: any) => any;
   COL_OVERSCAN: number;
   colRtlObserver: any;
@@ -567,19 +668,19 @@ declare class DataTable extends DataTable_base {
   hasAnyFilterableColumn: () => boolean;
   selectAllBox: any;
   syncIndeterminate: () => void;
-  sortColumn: (colId: any, desc: any) => void;
+  sortColumn: (colId: string, desc?: boolean) => void;
   clearSorting: () => void;
-  getColumnDefs: () => any[];
-  toggleAllRows: (value: any) => void;
+  getColumnDefs: () => ColumnDef<any, any>[];
+  toggleAllRows: (value?: boolean) => void;
   clearSelection: () => void;
-  getSelectedRows: () => any;
-  setPage: (idx: any) => void;
-  setRowsPerPage: (size: any) => void;
-  toggleColumnVisibility: (colId: any) => void;
-  applyColumnOrder: (order: any) => void;
+  getSelectedRows: () => any[];
+  setPage: (idx: number) => void;
+  setRowsPerPage: (size: number) => void;
+  toggleColumnVisibility: (colId: string) => void;
+  applyColumnOrder: (order: string[]) => void;
   resetColumnSizing: () => void;
-  pinColumn: (colId: any, side: any) => void;
-  getRowIndexRelativeToPage: (absRow: any) => any;
+  pinColumn: (colId: string, side: 'left' | 'right' | false) => void;
+  getRowIndexRelativeToPage: (absRow?: number) => number;
   cut: () => void;
   isGrid: () => boolean;
   tableRole: () => "grid" | "table";
@@ -650,16 +751,7 @@ declare class DataTable extends DataTable_base {
   rangeClickPending: any;
   rangeActive: boolean;
   inRange: (rIdx: any, cIdx: any) => boolean;
-  getSelectedRange: () => {
-    anchor: {
-      rowIndex: any;
-      colIndex: any;
-    };
-    focus: {
-      rowIndex: any;
-      colIndex: any;
-    };
-  };
+  getSelectedRange: () => DataTableRange;
   isFillHandleCell: (rIdx: any, cIdx: any) => boolean;
   rangeSummary: (anchor: any, focus: any) => string;
   emitRangeChange: (anchor: any, focus: any) => void;
@@ -781,25 +873,21 @@ declare class DataTable extends DataTable_base {
   onEditorKeyDown: (e: any) => void;
   onEditorDropinKeyDown: (e: any) => void;
   onEditorBlur: (e: any) => void;
-  editCell: (rowIndex: any, colIndex: any) => void;
+  editCell: (rowIndex: number, colIndex: number) => void;
   commitEditing: () => void;
-  editRow: (rowIndex: any) => void;
+  editRow: (rowIndex: number) => void;
   focusAbsCellWhenReady: (absRow: any, localRow: any, col: any) => void;
-  focusCell: (rowIndex: any, colIndex: any) => void;
-  getActiveCell: () => {
-    rowIndex: any;
-    colIndex: number;
-    isHeader: boolean;
-  };
+  focusCell: (rowIndex: number, colIndex: number) => void;
+  getActiveCell: () => DataTableActiveCell;
   clearActiveCell: () => void;
-  toggleRowExpanded: (rowId: any) => void;
+  toggleRowExpanded: (rowId: string | number) => void;
   expandAll: () => void;
   collapseAll: () => void;
   getExpandedRows: () => any[];
-  applyGrouping: (cols: any) => void;
+  applyGrouping: (cols: string[]) => void;
   clearGrouping: () => void;
-  getFacetedUniqueValues: (colId: any) => unknown[];
-  getFacetedMinMaxValues: (colId: any) => any;
+  getFacetedUniqueValues: (colId: string) => any[];
+  getFacetedMinMaxValues: (colId: string) => [number, number] | null;
   get data(): any[];
   set data(v: any[]);
   get sorting(): any[];
@@ -824,6 +912,10 @@ declare class DataTable extends DataTable_base {
   set columnOrder(v: any[]);
   get columnPinning(): any;
   set columnPinning(v: any);
+  addEventListener<K extends keyof RozieDataTableEventMap>(type: K, listener: (this: DataTable, ev: RozieDataTableEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof RozieDataTableEventMap>(type: K, listener: (this: DataTable, ev: RozieDataTableEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
 }
 //#endregion
 //#region src/Column.d.ts
@@ -1381,4 +1473,4 @@ declare class DetailPanel extends DetailPanel_base {
   }[];
 }
 //#endregion
-export { Column, DataTable, DataTable as default, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };
+export { Column, DataTable, DataTable as default, DataTableActiveCell, DataTableActiveCellChangePayload, DataTableCellChange, DataTableCellEditCommitPayload, DataTableCellPosition, DataTableFilterChangePayload, DataTableGroupableColumn, DataTableHistoryChangePayload, DataTableRange, DataTableRangeChangePayload, DataTableRowActivatePayload, DataTableRowEditCommitPayload, DataTableVisibleRangeChangePayload, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar, type RozieDataTableEventMap };

package/dist/index.mjs

@@ -5890,6 +5890,12 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 	set columnPinning(v) {
 		this._columnPinningControllable.notifyPropertyWrite(v);
 	}
+	addEventListener(type, listener, options) {
+		super.addEventListener(type, listener, options);
+	}
+	removeEventListener(type, listener, options) {
+		super.removeEventListener(type, listener, options);
+	}
 };
 __decorate([property({
 	type: Array,
@@ -6086,7 +6092,7 @@ var DataTable_default = DataTable;
 //#endregion
 //#region src/Column.ts
 const __rozieCtx_data_table_columns = createContext(Symbol.for("rozie:data-table:columns"));
-let Column = class Column extends SignalWatcher(LitElement) {
+let Column$1 = class Column extends SignalWatcher(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this.id = "";
@@ -6182,55 +6188,55 @@ let Column = class Column extends SignalWatcher(LitElement) {
 __decorate([property({
 	type: String,
 	reflect: true
-})], Column.prototype, "id", void 0);
+})], Column$1.prototype, "id", void 0);
 __decorate([property({
 	type: String,
 	reflect: true
-})], Column.prototype, "field", void 0);
+})], Column$1.prototype, "field", void 0);
 __decorate([property({
 	type: String,
 	reflect: true
-})], Column.prototype, "header", void 0);
+})], Column$1.prototype, "header", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], Column.prototype, "sortable", void 0);
+})], Column$1.prototype, "sortable", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], Column.prototype, "filterable", void 0);
+})], Column$1.prototype, "filterable", void 0);
 __decorate([property({
 	type: String,
 	reflect: true
-})], Column.prototype, "pinned", void 0);
-__decorate([property({ converter: { fromAttribute: rozieNumberOrStringAttr } })], Column.prototype, "width", void 0);
+})], Column$1.prototype, "pinned", void 0);
+__decorate([property({ converter: { fromAttribute: rozieNumberOrStringAttr } })], Column$1.prototype, "width", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], Column.prototype, "expandable", void 0);
+})], Column$1.prototype, "expandable", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], Column.prototype, "groupable", void 0);
+})], Column$1.prototype, "groupable", void 0);
 __decorate([property({
 	type: String,
 	attribute: "aggregation-fn"
-})], Column.prototype, "aggregationFn", void 0);
+})], Column$1.prototype, "aggregationFn", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
-})], Column.prototype, "editable", void 0);
+})], Column$1.prototype, "editable", void 0);
 __decorate([property({
 	type: String,
 	reflect: true
-})], Column.prototype, "editor", void 0);
+})], Column$1.prototype, "editor", void 0);
 __decorate([property({
 	type: Array,
 	attribute: "editor-options"
-})], Column.prototype, "editorOptions", void 0);
-__decorate([property({ type: Function })], Column.prototype, "validate", void 0);
-Column = __decorate([customElement("rozie-column")], Column);
-var Column_default = Column;
+})], Column$1.prototype, "editorOptions", void 0);
+__decorate([property({ type: Function })], Column$1.prototype, "validate", void 0);
+Column$1 = __decorate([customElement("rozie-column")], Column$1);
+var Column_default = Column$1;
 //#endregion
 //#region src/EditorText.ts
 let EditorText = class EditorText extends SignalWatcher(LitElement) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -42,10 +42,11 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "CHANGELOG.md"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "^0.8.0"
+    "@rozie/runtime-lit": "^0.9.0"
   },
   "peerDependencies": {
     "lit": "^3.2",