@3mo/data-grid 0.8.5-rc.8 → 0.8.5

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCA2DzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAQjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}
+{"version":3,"file":"DataGridDefaultRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridDefaultRow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,qBACa,kBAAkB,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC;IAC1I,WAAoB,MAAM,kCAsDzB;IAEQ,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAQ1F,cAAuB,WAAW,0CAQjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAChD;CACD"}

package/dist/rows/DataGridDefaultRow.js

@@ -6,27 +6,13 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
         return css `
 			${super.styles}
 
-			:host([subgrid]) {
+			:host {
 				display: grid;
 				grid-template-columns: subgrid;
 				grid-column: -1 / 1;
 				min-height: var(--mo-data-grid-row-height);
 			}
 
-			:host([subgrid][has-sub-data]) #detailsContainer {
-				display: grid;
-				grid-template-columns: subgrid;
-				grid-column: -1 / 1;
-			}
-
-			:host(:not([subgrid])) {
-				mo-grid {
-					height: var(--mo-data-grid-row-height);
-					grid-template-columns: var(--mo-data-grid-columns);
-					column-gap: var(--mo-data-grid-columns-gap, 2px);
-				}
-			}
-
 			mo-flex {
 				white-space: nowrap;
 				text-overflow: ellipsis;
@@ -34,7 +20,16 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
 			}
 
 			#selectionContainer {
-				height: 100%;
+				height: var(--mo-data-grid-row-height);
+			}
+
+			#detailsContainer {
+				grid-column: -1 / 1;
+			}
+
+			:host([has-sub-data]) #detailsContainer {
+				display: grid;
+				grid-template-columns: subgrid;
 			}
 
 			#detailsContainer [instanceof*=mo-data-grid] {

package/dist/rows/DataGridRow.d.ts

@@ -5,7 +5,6 @@ import { type DataGrid, type DataGridCell } from '../index.js';
  * @attr dataGrid
  * @attr data
  * @attr selected
- * @attr contextMenuOpen
  * @attr detailsOpen
  *
  * @fires detailsOpenChange - Dispatched when the details open state changes
@@ -14,19 +13,18 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     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;
     detailsOpen: boolean;
     level: number;
-    contextMenuOpen: boolean;
     get detailsElement(): TDetailsElement | undefined;
     getCell(column: DataGridColumn<TData, any>): DataGridCell<any, TData, TDetailsElement> | undefined;
     protected initialized(): void;
     updated(...parameters: Parameters<Component['updated']>): void;
     protected get hasDetails(): boolean;
     static get styles(): import("@a11d/lit").CSSResult;
-    private get columnsWidths();
     protected get template(): HTMLTemplateResult;
     protected abstract get rowTemplate(): HTMLTemplateResult;
     protected get detailsExpanderTemplate(): HTMLTemplateResult;
@@ -40,11 +38,11 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     protected handleContentDoubleClick(): Promise<void>;
     protected handleContentMiddleClick(): Promise<void>;
     private clickOnPrimaryContextMenuItemIfApplicable;
-    openContextMenu(event?: PointerEvent, onClose?: () => void): Promise<void>;
+    openContextMenu(event?: PointerEvent): Promise<void>;
     private get contextMenuData();
     private get contextMenuTemplate();
     closeContextMenu(): Promise<void>;
-    toggleDetails(): void;
+    protected toggleDetails(): void;
     protected setDetailsOpen(value: boolean): void;
 }
 declare global {

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,EAAyB,KAAK,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAEvH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAyD,MAAM,aAAa,CAAA;AAErH;;;;;;;;GAQG;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;IAEjE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAazD,WAAW,UAAQ;IAQnB,KAAK,SAAI;IAEgC,eAAe,UAAQ;IAEnE,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;cAIvB,WAAW;IAMrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA0IzB;IAED,OAAO,KAAK,aAAa,GAMxB;IAED,cAAuB,QAAQ,uBAY9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAc9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUhG,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,EAAE,OAAO,CAAC,EAAE,MAAM,IAAI;IAyBhE,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,aAAa;IAIb,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,EAAqB,MAAM,WAAW,CAAA;AAG9H,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;IAazD,WAAW,UAAQ;IAOnB,KAAK,SAAI;IAEZ,IAAI,cAAc,gCAEjB;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;cAIvB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCAgGzB;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;IAUhG,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"}

package/dist/rows/DataGridRow.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { css, property, Component, html, queryAll, style, LitElement, event } from '@a11d/lit';
+import { css, property, Component, html, query, queryAll, style, LitElement, event } from '@a11d/lit';
+import { popover } from '@3mo/popover';
 import { ContextMenu } from '@3mo/context-menu';
 import { DataGridPrimaryContextMenuItem, DataGridSelectionMode } from '../index.js';
 /**
  * @attr dataGrid
  * @attr data
  * @attr selected
- * @attr contextMenuOpen
  * @attr detailsOpen
  *
  * @fires detailsOpenChange - Dispatched when the details open state changes
@@ -17,7 +17,6 @@ export class DataGridRow extends Component {
         this.selected = false;
         this.detailsOpen = false;
         this.level = 0;
-        this.contextMenuOpen = false;
     }
     get detailsElement() {
         return this.renderRoot.querySelector('#detailsContainer')?.firstElementChild;
@@ -27,8 +26,6 @@ export class DataGridRow extends Component {
     }
     initialized() {
         this.toggleAttribute('mo-data-grid-row', true);
-        this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
-        this.toggleAttribute('details', this.dataGrid.hasDetails);
     }
     updated(...parameters) {
         this.cells.forEach(cell => cell.requestUpdate());
@@ -70,15 +67,11 @@ export class DataGridRow extends Component {
 			}
 
 			#contentContainer {
+				grid-column: -1 / 1;
 				cursor: pointer;
 				transition: 250ms;
 			}
 
-			:host([selected]) #contentContainer, :host([contextMenuOpen]) #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));
-			}
-
 			:host([selected]:not(:last-of-type)) #contentContainer:after {
 				content: '';
 				position: absolute;
@@ -94,54 +87,16 @@ export class DataGridRow extends Component {
 				color: var(--mo-color-gray);
 			}
 
-			:host(:not([subgrid])) #contextMenu {
-				align-items: center;
-				grid-column: -1;
-			}
-
-			:host([subgrid]) {
+			:host([selected]), :host([data-context-menu-open]) {
 				#contentContainer {
-					grid-column: -1 / 1;
-				}
-
-				[data-sticky] {
-					position: sticky;
-					z-index: 3;
-					background: var(--mo-data-grid-sticky-part-color);
+					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));
 				}
 
-				#contextMenu {
-					height: 100%;
-					place-self: end;
-					inset-inline-end: 0;
+				#contextMenuIconButton {
+					color: var(--mo-color-foreground);
+					opacity: 1;
 				}
-
-				#detailsExpander {
-					inset-inline-start: 0;
-					background-color: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
-					z-index: 5;
-				}
-
-				#selection {
-					width: var(--mo-data-grid-column-selection-width);
-					align-items: unset;
-					left: 0;
-				}
-			}
-
-
-			:host([subgrid]:not([details])) #selectionContainer {
-				inset-inline-start: 0;
-			}
-
-			:host([subgrid][details]) #selectionContainer {
-				inset-inline-start: 20px;
-				padding: 1px 0;
-			}
-
-			:host([selected]) #contextMenuIconButton, :host([contextMenuOpen]) #contextMenuIconButton {
-				color: var(--mo-color-foreground);
-				opacity: 1;
 			}
 
 			#contentContainer:hover #contextMenuIconButton {
@@ -180,20 +135,17 @@ export class DataGridRow extends Component {
 			}
 		`;
     }
-    get columnsWidths() {
-        return [
-            this.dataGrid.detailsColumnWidth,
-            this.dataGrid.selectionColumnWidth,
-            this.dataGrid.dataColumnsWidths,
-        ].flat().filter(Boolean).join(' ');
-    }
     get template() {
         return html `
-			<mo-grid id='contentContainer' columns=${this.dataGrid.isUsingSubgrid ? 'subgrid' : this.columnsWidths}
+			<mo-grid id='contentContainer' columns='subgrid'
 				@click=${() => this.handleContentClick()}
 				@dblclick=${() => this.handleContentDoubleClick()}
 				@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
-				@contextmenu=${(e) => this.openContextMenu(e)}
+				${popover(() => html `
+					<mo-context-menu @openChange=${(e) => this.toggleAttribute('data-context-menu-open', e.detail)}>
+						${this.contextMenuTemplate}
+					</mo-context-menu>
+				`)}
 			>
 				${this.rowTemplate}
 			</mo-grid>
@@ -201,8 +153,9 @@ export class DataGridRow extends Component {
 		`;
     }
     get detailsExpanderTemplate() {
-        return !this.dataGrid.hasDetails ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center' id='detailsExpander' data-sticky
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'
+				${style({ position: 'sticky', zIndex: '2', insetInlineStart: '0px', background: 'var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color))' })}
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>
@@ -218,7 +171,8 @@ export class DataGridRow extends Component {
     }
     get selectionTemplate() {
         return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
-			<mo-flex id='selectionContainer' justifyContent='center' alignItems='center' id='selection' data-sticky
+			<mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
+				${style({ width: 'var(--mo-data-grid-column-selection-width)', position: 'sticky', zIndex: '2', insetInlineStart: this.dataGrid.hasDetails ? '20px' : '0px', padding: this.dataGrid.hasDetails ? '1px 0' : undefined, background: 'var(--mo-data-grid-sticky-part-color)' })}
 				@click=${(e) => e.stopPropagation()}
 				@dblclick=${(e) => e.stopPropagation()}
 			>
@@ -244,8 +198,8 @@ export class DataGridRow extends Component {
         return html `<span></span>`;
     }
     get contextMenuIconButtonTemplate() {
-        return !this.dataGrid.hasContextMenu || !this.dataGrid.isUsingSubgrid ? html.nothing : html `
-			<mo-flex id='contextMenu' data-sticky justifyContent='center'>
+        return this.dataGrid.hasContextMenu === false ? html.nothing : html `
+			<mo-flex justifyContent='center' ${style({ height: '100%', placeSelf: 'end', position: 'sticky', insetInlineEnd: '0px', zIndex: '3', background: 'var(--mo-data-grid-sticky-part-color)' })}>
 				<mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
 					@click=${this.openContextMenu}
 					@dblclick=${(e) => e.stopPropagation()}
@@ -293,10 +247,10 @@ export class DataGridRow extends Component {
         if (this.dataGrid.hasContextMenu === true && this.dataGrid.primaryContextMenuItemOnDoubleClick === true) {
             await this.openContextMenu();
             ContextMenu.openInstance?.items.find(item => item instanceof DataGridPrimaryContextMenuItem)?.click();
-            this.contextMenuOpen = false;
+            await this.closeContextMenu();
         }
     }
-    async openContextMenu(event, onClose) {
+    async openContextMenu(event) {
         if (!this.dataGrid.hasContextMenu) {
             return;
         }
@@ -304,17 +258,8 @@ export class DataGridRow extends Component {
         if (this.dataGrid.selectedData.includes(this.data) === false) {
             this.dataGrid.select(this.dataGrid.selectionMode !== DataGridSelectionMode.None ? [this.data] : []);
         }
-        const contextMenu = ContextMenu.open(event || [0, 0], this.contextMenuTemplate);
-        this.contextMenuOpen = true;
-        const handler = (open) => {
-            this.contextMenuOpen = open;
-            if (open === false) {
-                contextMenu.openChange.unsubscribe(handler);
-                onClose?.();
-            }
-        };
-        contextMenu.openChange.subscribe(handler);
         await this.updateComplete;
+        this.content?.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, composed: true, ...(event ?? {}) }));
     }
     get contextMenuData() {
         return this.dataGrid.selectionMode === DataGridSelectionMode.None || this.dataGrid.selectedData.length === 0
@@ -325,7 +270,7 @@ export class DataGridRow extends Component {
         return this.dataGrid.getRowContextMenuTemplate?.(this.contextMenuData) ?? html.nothing;
     }
     async closeContextMenu() {
-        this.contextMenuOpen = false;
+        ContextMenu.openInstance?.close();
         await this.updateComplete;
     }
     toggleDetails() {
@@ -345,6 +290,9 @@ __decorate([
 __decorate([
     queryAll('[mo-data-grid-row]')
 ], DataGridRow.prototype, "subRows", void 0);
+__decorate([
+    query('#contentContainer')
+], DataGridRow.prototype, "content", void 0);
 __decorate([
     property({ type: Object })
 ], DataGridRow.prototype, "dataGrid", void 0);
@@ -378,6 +326,3 @@ __decorate([
         }
     })
 ], DataGridRow.prototype, "level", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], DataGridRow.prototype, "contextMenuOpen", void 0);