@3mo/data-grid 0.8.25 → 0.9.0-preview.0

package/dist/index.js

@@ -17,10 +17,12 @@ import '@3mo/tab';
 import '@3mo/slider';
 import '@3mo/focus-ring';
 import './types.js';
+export * from './DataRecord.js';
 export * from './DataGridColumn.js';
 export * from './columns/index.js';
 export * from './DataGridSelectionController.js';
 export * from './DataGridSortingController.js';
+export * from './DataGridDetailsController.js';
 export * from './DataGrid.js';
 export * from './DataGridHeader.js';
 export * from './DataGridHeaderSeparator.js';

package/dist/rows/DataGridRow.d.ts

@@ -1,26 +1,18 @@
 import { Component, type HTMLTemplateResult } from '@a11d/lit';
 import { type DataGridColumn } from '../DataGridColumn.js';
-import { type DataGrid, type DataGridCell } from '../index.js';
-/**
- * @attr dataGrid
- * @attr data
- * @attr selected
- * @attr detailsOpen
- *
- * @fires detailsOpenChange - Dispatched when the details open state changes
- */
+import { type DataGridCell, type DataRecord } from '../index.js';
 export declare abstract class DataGridRow<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
-    readonly detailsOpenChange: EventDispatcher<boolean>;
     readonly cells: Array<DataGridCell<any, TData, TDetailsElement>>;
     readonly subRows: Array<DataGridRow<TData, TDetailsElement>>;
     readonly content: HTMLElement;
-    dataGrid: DataGrid<TData, TDetailsElement>;
-    data: TData;
-    selected: boolean;
-    index?: number;
-    detailsOpen: boolean;
-    level: number;
     isIntersecting: boolean;
+    dataRecord: DataRecord<TData>;
+    get dataGrid(): import("../DataGrid.js").DataGrid<TData, any>;
+    get data(): TData;
+    get index(): number;
+    get level(): number;
+    get selected(): boolean;
+    get detailsOpen(): boolean;
     get detailsElement(): TDetailsElement | undefined;
     getCell(column: DataGridColumn<TData, any>): DataGridCell<any, TData, TDetailsElement> | undefined;
     connected(): void;
@@ -47,8 +39,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     private get contextMenuData();
     private get contextMenuTemplate();
     closeContextMenu(): Promise<void>;
-    protected toggleDetails(): void;
-    protected setDetailsOpen(value: boolean): void;
+    toggleDetails(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/rows/DataGridRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAI9H,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;GAOG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE9B,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IAavC,WAAW,UAAQ;IAOnB,KAAK,SAAI;IAST,cAAc,UAAQ;IAEzB,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAOC,WAAW;cAOX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA+FzB;IAED,cAAuB,QAAQ,uBAgB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAgBpC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAYhG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAmB5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAgB1C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO;CAIvC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
+{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,KAAK,kBAAkB,EAAoB,MAAM,WAAW,CAAA;AAI7H,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAyD,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEvH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IASvD,cAAc,UAAQ;IAEG,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAOX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCAsGzB;IAED,cAAuB,QAAQ,uBAmB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAiBpC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAYhG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAc5B;IAED,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAgB1C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}

package/dist/rows/DataGridRow.js

@@ -1,29 +1,24 @@
 import { __decorate } from "tslib";
-import { css, property, Component, html, query, queryAll, style, LitElement, event } from '@a11d/lit';
+import { css, property, Component, html, query, queryAll, style, LitElement, live } from '@a11d/lit';
 import { DirectionsByLanguage } from '@3mo/localization';
 import { popover } from '@3mo/popover';
 import { ContextMenu } from '@3mo/context-menu';
 import { DataGridPrimaryContextMenuItem, DataGridSelectionMode } from '../index.js';
-/**
- * @attr dataGrid
- * @attr data
- * @attr selected
- * @attr detailsOpen
- *
- * @fires detailsOpenChange - Dispatched when the details open state changes
- */
 export class DataGridRow extends Component {
     constructor() {
         super(...arguments);
-        this.selected = false;
-        this.detailsOpen = false;
-        this.level = 0;
         this.isIntersecting = false;
         this.delegateToCell = (method) => (e) => {
             const target = e.target;
             target?.[method]?.(e);
         };
     }
+    get dataGrid() { return this.dataRecord.dataGrid; }
+    get data() { return this.dataRecord.data; }
+    get index() { return this.dataRecord.index; }
+    get level() { return this.dataRecord.level; }
+    get selected() { return this.dataRecord.isSelected; }
+    get detailsOpen() { return this.dataRecord.detailsOpen; }
     get detailsElement() {
         return this.renderRoot.querySelector('#detailsContainer')?.firstElementChild;
     }
@@ -31,7 +26,6 @@ export class DataGridRow extends Component {
         return this.cells.find(cell => cell.column.equals(column));
     }
     connected() {
-        this.toggleAttribute('data-has-alternating-background', this.dataGrid.hasAlternatingBackground && (this.index ?? 0) % 2 === 1);
         if ((this.index ?? 0) < 25) {
             this.isIntersecting = true;
         }
@@ -54,7 +48,7 @@ export class DataGridRow extends Component {
         super.updated(...parameters);
     }
     get hasDetails() {
-        return this.dataGrid.hasDetail(this.data);
+        return this.dataRecord.hasDetails;
     }
     static get styles() {
         return css `
@@ -65,6 +59,12 @@ export class DataGridRow extends Component {
 				width: 100%;
 			}
 
+			:host(:hover), :host([data-has-alternating-background]:hover) {
+				#contentContainer {
+					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent) 25%);
+				}
+			}
+
 			:host(:hover) #contentContainer {
 				color: inherit;
 				background: var(--mo-color-accent-transparent) !important;
@@ -78,10 +78,12 @@ export class DataGridRow extends Component {
 				inset-inline-start: 0;
 				position: absolute;
 				background-color: var(--mo-color-accent);
+				z-index: 2;
 			}
 
 			:host([data-has-alternating-background]) {
 				background: var(--mo-data-grid-alternating-background);
+				--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), black var(--mo-data-grid-alternating-background-transparency));
 			}
 
 			#contentContainer {
@@ -99,7 +101,6 @@ export class DataGridRow extends Component {
 			}
 
 			#contextMenuIconButton {
-				transition: 250ms;
 				opacity: 0.5;
 				color: var(--mo-color-gray);
 			}
@@ -107,26 +108,26 @@ export class DataGridRow extends Component {
 			:host([selected]), :host([data-context-menu-open]) {
 				#contentContainer {
 					background: var(--mo-data-grid-selection-background) !important;
-					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent));
+					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent)) !important;
 				}
 
 				#contextMenuIconButton {
-					color: var(--mo-color-foreground);
+					color: currentColor;
 					opacity: 1;
 				}
 			}
 
 			#contentContainer:hover #contextMenuIconButton {
-				color: var(--mo-color-accent);
+				color: currentColor;
 				opacity: 1;
 			}
 
 			#detailsExpanderIconButton {
-				transition: 250ms;
-			}
+				transition: transform 250ms;
 
-			#detailsExpanderIconButton:hover {
-				color: var(--mo-color-accent);
+				&[data-rtl] {
+					transform: rotate(180deg);
+				}
 			}
 
 			:host([detailsOpen]) #detailsExpanderIconButton {
@@ -153,6 +154,9 @@ export class DataGridRow extends Component {
 		`;
     }
     get template() {
+        this.style.setProperty('--_level', this.level.toString());
+        this.toggleAttribute('selected', this.dataRecord.isSelected);
+        this.toggleAttribute('detailsOpen', this.dataRecord.detailsOpen);
         return !this.isIntersecting ? html.nothing : html `
 			<mo-grid id='contentContainer' columns='subgrid'
 				@click=${() => this.handleContentClick()}
@@ -176,13 +180,14 @@ export class DataGridRow extends Component {
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>
-			${this.hasDetails === false ? html.nothing : html `
-				<mo-icon-button id='detailsExpanderIconButton' ${style({ color: 'var(--mo-color-foreground)' })}
-					icon=${DirectionsByLanguage.get() === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-					?disabled=${this.dataGrid.hasDataDetail?.(this.data) === false}
-					@click=${() => this.toggleDetails()}
-				></mo-icon-button>
-			`}
+				${this.hasDetails === false ? html.nothing : html `
+					<mo-icon-button id='detailsExpanderIconButton'
+						icon='keyboard_arrow_right'
+						?data-rtl=${DirectionsByLanguage.get() === 'rtl'}
+						?disabled=${this.dataRecord.hasDetails === false}
+						@click=${() => this.toggleDetails()}
+					></mo-icon-button>
+				`}
 			</mo-flex>
 		`;
     }
@@ -195,8 +200,8 @@ export class DataGridRow extends Component {
 			>
 				<mo-checkbox
 					tabindex='-1'
-					?disabled=${this.dataGrid.selectionController.isSelectable(this.data) === false}
-					?selected=${this.selected}
+					?disabled=${this.dataRecord.isSelectable === false}
+					.selected=${live(this.selected)}
 					@change=${(e) => this.setSelection(e.detail)}
 				></mo-checkbox>
 			</mo-flex>
@@ -233,14 +238,10 @@ export class DataGridRow extends Component {
         if (this.dataGrid.getRowDetailsTemplate) {
             return this.dataGrid.getRowDetailsTemplate(this.data);
         }
-        const subData = this.dataGrid.getSubData(this.data);
-        this.toggleAttribute('has-sub-data', !!subData);
-        if (subData) {
-            return html `
-				${subData.map(data => this.dataGrid.getRowTemplate(data, undefined, this.level + 1))}
-			`;
-        }
-        return html.nothing;
+        this.toggleAttribute('has-sub-data', !!this.dataRecord.hasSubData);
+        return !this.dataRecord.hasSubData ? html.nothing : html `
+			${this.dataRecord.subData?.map(data => this.dataGrid.getRowTemplate(data))}
+		`;
     }
     setSelection(selected) {
         this.dataGrid.selectionController.setSelection(this.data, selected);
@@ -293,16 +294,15 @@ export class DataGridRow extends Component {
         await this.updateComplete;
     }
     toggleDetails() {
-        this.setDetailsOpen(!this.detailsOpen);
-    }
-    setDetailsOpen(value) {
-        this.detailsOpen = value;
-        this.detailsOpenChange.dispatch(value);
+        this.dataGrid.detailsController.toggle(this.dataRecord);
+        if (this.dataRecord.detailsOpen) {
+            this.dataGrid.rowDetailsOpen.dispatch(this);
+        }
+        else {
+            this.dataGrid.rowDetailsClose.dispatch(this);
+        }
     }
 }
-__decorate([
-    event()
-], DataGridRow.prototype, "detailsOpenChange", void 0);
 __decorate([
     queryAll('mo-data-grid-cell')
 ], DataGridRow.prototype, "cells", void 0);
@@ -312,42 +312,6 @@ __decorate([
 __decorate([
     query('#contentContainer')
 ], DataGridRow.prototype, "content", void 0);
-__decorate([
-    property({ type: Object })
-], DataGridRow.prototype, "dataGrid", void 0);
-__decorate([
-    property({ type: Object })
-], DataGridRow.prototype, "data", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], DataGridRow.prototype, "selected", void 0);
-__decorate([
-    property({ type: Number })
-], DataGridRow.prototype, "index", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        updated(detailsOpen, wasDetailsOpen) {
-            if (wasDetailsOpen !== undefined) {
-                if (detailsOpen) {
-                    this.dataGrid.rowDetailsOpen.dispatch(this);
-                }
-                else {
-                    this.dataGrid.rowDetailsClose.dispatch(this);
-                }
-            }
-        }
-    })
-], DataGridRow.prototype, "detailsOpen", void 0);
-__decorate([
-    property({
-        type: Number,
-        updated() {
-            this.style.setProperty('--_level', this.level.toString());
-        }
-    })
-], DataGridRow.prototype, "level", void 0);
 __decorate([
     property({
         type: Boolean,
@@ -358,3 +322,6 @@ __decorate([
         }
     })
 ], DataGridRow.prototype, "isIntersecting", void 0);
+__decorate([
+    property({ type: Object })
+], DataGridRow.prototype, "dataRecord", void 0);