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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { SignalWatcher, effect, signal, untracked } from "@lit-labs/preact-signals";
-import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDisplay, rozieStyle } from "@rozie/runtime-lit";
+import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDisplay, rozieNumberOrStringAttr, rozieStyle } from "@rozie/runtime-lit";
 import { ContextConsumer, ContextProvider, createContext } from "@lit/context";
 import { repeat } from "lit/directives/repeat.js";
 import "@rozie-ui/popover-lit";
@@ -4844,6 +4844,18 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		queueMicrotask(() => {
 			if (this.isConnected || this._rozieTornDown) return;
 			this._rozieTornDown = true;
+			(() => {
+				if (this.docPointerDown && typeof document !== "undefined") {
+					document.removeEventListener("pointerdown", this.docPointerDown, true);
+					this.docPointerDown = null;
+				}
+				if (this.virtualizerCleanup) this.virtualizerCleanup();
+				if (this.colVirtualizerCleanup) this.colVirtualizerCleanup();
+				this.teardownColRtlWatch();
+				this.teardownRemeasure();
+				this.teardownFillDrag();
+				this.teardownRangeDrag();
+			})();
 			for (const fn of this._disconnectCleanups) fn();
 			this._disconnectCleanups = [];
 		});
@@ -5878,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,
@@ -5886,7 +5904,8 @@ __decorate([property({
 __decorate([property({ type: Array })], DataTable.prototype, "columns", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "selection-mode"
 })], DataTable.prototype, "selectionMode", void 0);
 __decorate([property({
 	type: Array,
@@ -5910,11 +5929,13 @@ __decorate([property({
 })], DataTable.prototype, "manual", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "row-count"
 })], DataTable.prototype, "rowCount", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "page-count"
 })], DataTable.prototype, "pageCount", void 0);
 __decorate([property({
 	type: Boolean,
@@ -5924,8 +5945,14 @@ __decorate([property({
 	type: Object,
 	attribute: "expanded"
 })], DataTable.prototype, "_expanded_attr", void 0);
-__decorate([property({ type: Function })], DataTable.prototype, "getRowId", void 0);
-__decorate([property({ type: Function })], DataTable.prototype, "getSubRows", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "get-row-id"
+})], DataTable.prototype, "getRowId", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "get-sub-rows"
+})], DataTable.prototype, "getSubRows", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -5956,15 +5983,18 @@ __decorate([property({
 })], DataTable.prototype, "_columnPinning_attr", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "sticky-header"
 })], DataTable.prototype, "stickyHeader", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "interaction-mode"
 })], DataTable.prototype, "interactionMode", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "single-click-edit"
 })], DataTable.prototype, "singleClickEdit", void 0);
 __decorate([property({
 	type: Boolean,
@@ -5972,20 +6002,24 @@ __decorate([property({
 })], DataTable.prototype, "undoable", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "undo-limit"
 })], DataTable.prototype, "undoLimit", void 0);
 __decorate([property({ converter: { fromAttribute: (v) => v === null ? false : v === "true" ? true : v === "false" ? false : v === "" ? true : v } })], DataTable.prototype, "virtual", void 0);
 __decorate([property({
 	type: Number,
-	reflect: true
+	reflect: true,
+	attribute: "estimate-row-height"
 })], DataTable.prototype, "estimateRowHeight", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
+	reflect: true,
+	attribute: "auto-measure"
 })], DataTable.prototype, "autoMeasure", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "max-height"
 })], DataTable.prototype, "maxHeight", void 0);
 __decorate([query("[data-rozie-ref=\"__rozieRoot\"]")], DataTable.prototype, "_ref__rozieRoot", void 0);
 __decorate([state()], DataTable.prototype, "_hasSlotDefault", void 0);
@@ -6058,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 = "";
@@ -6154,49 +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({ type: String })], 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);
-__decorate([property({ type: String })], Column.prototype, "aggregationFn", void 0);
+})], Column$1.prototype, "groupable", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aggregation-fn"
+})], 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);
-__decorate([property({ type: Array })], 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, "editor", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "editor-options"
+})], 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) {
@@ -6280,7 +6320,8 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorText.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorText.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorText.prototype, "row", void 0);
@@ -6293,7 +6334,8 @@ __decorate([property({
 })], EditorText.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorText.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([customElement("rozie-editor-text")], EditorText);
@@ -6388,7 +6430,8 @@ let EditorNumber = class EditorNumber extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorNumber.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorNumber.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorNumber.prototype, "row", void 0);
@@ -6401,7 +6444,8 @@ __decorate([property({
 })], EditorNumber.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorNumber.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorNumber.prototype, "_refInputEl", void 0);
 EditorNumber = __decorate([customElement("rozie-editor-number")], EditorNumber);
@@ -6492,7 +6536,8 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorSelect.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorSelect.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorSelect.prototype, "row", void 0);
@@ -6506,7 +6551,8 @@ __decorate([property({
 })], EditorSelect.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorSelect.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"selectEl\"]")], EditorSelect.prototype, "_refSelectEl", void 0);
 EditorSelect = __decorate([customElement("rozie-editor-select")], EditorSelect);
@@ -6576,7 +6622,8 @@ let EditorCheckbox = class EditorCheckbox extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorCheckbox.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorCheckbox.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorCheckbox.prototype, "row", void 0);
@@ -6589,7 +6636,8 @@ __decorate([property({
 })], EditorCheckbox.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorCheckbox.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorCheckbox.prototype, "_refInputEl", void 0);
 EditorCheckbox = __decorate([customElement("rozie-editor-checkbox")], EditorCheckbox);
@@ -6716,7 +6764,8 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], EditorDate.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], EditorDate.prototype, "column", void 0);
 __decorate([property({ type: Object })], EditorDate.prototype, "row", void 0);
@@ -6729,7 +6778,8 @@ __decorate([property({
 })], EditorDate.prototype, "autofocus", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], EditorDate.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorDate.prototype, "_refInputEl", void 0);
 EditorDate = __decorate([customElement("rozie-editor-date")], EditorDate);
@@ -6814,14 +6864,19 @@ let FilterText = class FilterText extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterText.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], FilterText.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterText.prototype, "value", void 0);
-__decorate([property({ type: Function })], FilterText.prototype, "setFilter", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "set-filter"
+})], FilterText.prototype, "setFilter", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterText.prototype, "columnLabel", void 0);
 FilterText = __decorate([customElement("rozie-filter-text")], FilterText);
 var FilterText_default = FilterText;
@@ -6921,15 +6976,23 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterNumberRange.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], FilterNumberRange.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterNumberRange.prototype, "value", void 0);
-__decorate([property({ type: Function })], FilterNumberRange.prototype, "setFilter", void 0);
-__decorate([property({ type: Object })], FilterNumberRange.prototype, "minMax", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "set-filter"
+})], FilterNumberRange.prototype, "setFilter", void 0);
+__decorate([property({
+	type: Object,
+	attribute: "min-max"
+})], FilterNumberRange.prototype, "minMax", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterNumberRange.prototype, "columnLabel", void 0);
 FilterNumberRange = __decorate([customElement("rozie-filter-number-range")], FilterNumberRange);
 var FilterNumberRange_default = FilterNumberRange;
@@ -6984,15 +7047,23 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
 };
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-id"
 })], FilterSelect.prototype, "columnId", void 0);
 __decorate([property({ type: Object })], FilterSelect.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterSelect.prototype, "value", void 0);
-__decorate([property({ type: Function })], FilterSelect.prototype, "setFilter", void 0);
-__decorate([property({ type: Array })], FilterSelect.prototype, "uniqueValues", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "set-filter"
+})], FilterSelect.prototype, "setFilter", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "unique-values"
+})], FilterSelect.prototype, "uniqueValues", void 0);
 __decorate([property({
 	type: String,
-	reflect: true
+	reflect: true,
+	attribute: "column-label"
 })], FilterSelect.prototype, "columnLabel", void 0);
 FilterSelect = __decorate([customElement("rozie-filter-select")], FilterSelect);
 var FilterSelect_default = FilterSelect;
@@ -7247,9 +7318,18 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
 	}
 };
 __decorate([property({ type: Array })], GroupBar.prototype, "grouping", void 0);
-__decorate([property({ type: Array })], GroupBar.prototype, "groupableColumns", void 0);
-__decorate([property({ type: Function })], GroupBar.prototype, "applyGrouping", void 0);
-__decorate([property({ type: Function })], GroupBar.prototype, "clearGrouping", void 0);
+__decorate([property({
+	type: Array,
+	attribute: "groupable-columns"
+})], GroupBar.prototype, "groupableColumns", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "apply-grouping"
+})], GroupBar.prototype, "applyGrouping", void 0);
+__decorate([property({
+	type: Function,
+	attribute: "clear-grouping"
+})], GroupBar.prototype, "clearGrouping", void 0);
 GroupBar = __decorate([customElement("rozie-group-bar")], GroupBar);
 var GroupBar_default = GroupBar;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.7.0",
+  "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.7.5"
+    "@rozie/runtime-lit": "^0.9.0"
   },
   "peerDependencies": {
     "lit": "^3.2",
@@ -54,7 +55,7 @@
     "@preact/signals-core": "^1.3.0",
     "@tanstack/table-core": "^8.21",
     "@tanstack/virtual-core": "^3",
-    "@rozie-ui/popover-lit": "^0.1.0 || ^0.2.0"
+    "@rozie-ui/popover-lit": "^0.1.0 || ^0.2.0 || ^0.3.0"
   },
   "peerDependenciesMeta": {
     "lit": {

package/src/Column.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SignalWatcher } from '@lit-labs/preact-signals';
+import { rozieNumberOrStringAttr } from '@rozie/runtime-lit';
 import { ContextConsumer, createContext } from '@lit/context';
 
 const __rozieCtx_data_table_columns = createContext(Symbol.for("rozie:data-table:columns"));
@@ -40,7 +41,7 @@ export default class Column extends SignalWatcher(LitElement) {
   /**
    * Optional fixed/initial column width, applied as the column's starting size — a px number (`120`) or a px string (`'120px'`). Column sizing is numeric px, so other CSS lengths (`'12rem'`, `'20%'`, `'auto'`) have no px value to apply and are ignored; the column keeps the default width. An interactive resize overrides this.
    */
-  @property({ type: String }) width: string | number = '';
+  @property({ converter: { fromAttribute: rozieNumberOrStringAttr } }) width: string | number = '';
   /**
    * Reserved per-column metadata flagging participation in the expand affordance. The expander chevron is its own auto-injected leading column on `<DataTable expandable>`, so this is forward-compat metadata, not the toggle host. Default `false`.
    */
@@ -52,7 +53,7 @@ export default class Column extends SignalWatcher(LitElement) {
   /**
    * The table-core aggregation for this column inside a group-header cell. Either a built-in name string — `'sum'` | `'min'` | `'max'` | `'extent'` | `'mean'` | `'median'` | `'unique'` | `'uniqueCount'` | `'count'` — or a custom function `(columnId, leafRows, childRows) => any` (defensively wrapped by the parent so a throw cannot crash grouping). Null → no aggregation (the group-header cell renders as a placeholder).
    */
-  @property({ type: String }) aggregationFn: string | (((...args: any[]) => any) | null) = null;
+  @property({ type: String, attribute: 'aggregation-fn' }) aggregationFn: string | (((...args: any[]) => any) | null) = null;
   /**
    * Whether this column's cells are editable (opt-in). Default `false` → the column is read-only and the display↔editor branch never mounts an editor. Bind `:editable="true"` (a bare attr only coerces on Vue+Lit).
    */
@@ -64,7 +65,7 @@ export default class Column extends SignalWatcher(LitElement) {
   /**
    * Options for `editor: 'select'` — `[{ value, label }]`. Empty for other editor types.
    */
-  @property({ type: Array }) editorOptions: any[] = [];
+  @property({ type: Array, attribute: 'editor-options' }) editorOptions: any[] = [];
   /**
    * Synchronous per-column validator `(value, row) => true | string`. A string return is the error message (the editor stays open and the aria-live region announces it). Null → no validation. The parent wraps it defensively against a thrown/non-bool/non-string return.
    */