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

package/dist/DataGridHeader.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { component, Component, css, html, ifDefined, property, event, style, join, queryAll } from '@a11d/lit';
+import { component, Component, css, html, ifDefined, property, event, style } from '@a11d/lit';
 import { KeyboardController } from '@3mo/keyboard-controller';
 import { tooltip } from '@3mo/tooltip';
 import { observeResize } from '@3mo/resize-observer';
@@ -34,9 +34,9 @@ let DataGridHeader = class DataGridHeader extends Component {
             });
             return html `
 			<mo-flex class='cell' alignItems='center' direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'}
-				data-sticky=${ifDefined(this.dataGrid.isUsingSubgrid ? column.sticky : undefined)}
+				data-sticky=${ifDefined(column.sticky)}
 				data-sticking=${column.intersecting === false}
-				${!column.sticky || column.intersecting || this.dataGrid.isUsingSubgrid ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
+				${!column.sticky || column.intersecting ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
 				${observeResizeDeferred(([entry]) => column.widthInPixels = entry?.contentRect.width ?? 0)}
 			>
 				<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
@@ -53,13 +53,11 @@ let DataGridHeader = class DataGridHeader extends Component {
 						<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
 					`}
 				</mo-flex>
-				${!this.dataGrid.isUsingSubgrid ? html.nothing : html `
-					<mo-data-grid-header-separator
-						?data-last=${columns.length - 1 === index}
-						.dataGrid=${this.dataGrid}
-						.column=${this.dataGrid.visibleColumns[index]}
-					></mo-data-grid-header-separator>
-				`}
+				<mo-data-grid-header-separator
+					?data-last=${columns.length - 1 === index}
+					.dataGrid=${this.dataGrid}
+					.column=${this.dataGrid.visibleColumns[index]}
+				></mo-data-grid-header-separator>
 			</mo-flex>
 		`;
         };
@@ -76,8 +74,6 @@ let DataGridHeader = class DataGridHeader extends Component {
     connected() {
         this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
         this.dataGrid.selectionChange.subscribe(this.handleDataGridSelectionChange);
-        this.toggleAttribute('subgrid', this.dataGrid.isUsingSubgrid);
-        this.toggleAttribute('details', this.dataGrid.hasDetails);
     }
     disconnected() {
         this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
@@ -88,73 +84,22 @@ let DataGridHeader = class DataGridHeader extends Component {
 			:host {
 				--mo-data-grid-header-separator-height: 15px;
 				--mo-data-grid-header-separator-width: 2px;
-				display: inherit;
-				font-size: small;
-			}
-
-			:host([subgrid]) {
-				position: sticky;
 				display: grid;
 				grid-template-columns: subgrid;
 				grid-column: -1 / 1;
 				background: var(--mo-data-grid-sticky-part-color);
+				position: sticky;
 				top: 0;
 				z-index: 4;
-
-				.details, .selection, .more {
-					position: sticky;
-					background: var(--mo-data-grid-sticky-part-color);
-					z-index: 10;
-				}
-
-				.cell {
-					position: relative;
-				}
-
-				.cell[data-sticky] {
-					position: sticky;
-				}
-
-				.cell[data-sticky] /*[data-sticking]*/ {
-					z-index: 6;
-					background: var(--mo-data-grid-sticky-part-color);
-				}
-
-				mo-data-grid-header-separator {
-					z-index: 5;
-				}
-
-				.cell[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
-					z-index: 7;
-				}
-
-				.details {
-					inset-inline-start: 0px;
-				}
-
-				.selection {
-					inset-inline-start: 0px;
-				}
-
-				.more {
-					cursor: pointer;
-					inset-inline-end: 0px;
-				}
-			}
-
-			:host([subgrid][details]) .selection {
-				inset-inline-start: 20px;
+				font-size: small;
 			}
 
-			:host([subgrid]), #header {
+			#header {
 				border-top: var(--mo-data-grid-border);
 				border-bottom: var(--mo-data-grid-border);
-			}
-
-			#header {
 				position: relative;
 				height: var(--mo-data-grid-header-height);
-				background-color: var(--mo-data-grid-sticky-part-color);
+				background: var(--mo-data-grid-header-background);
 			}
 
 			.headerContent {
@@ -180,29 +125,49 @@ let DataGridHeader = class DataGridHeader extends Component {
 				align-items: center;
 				justify-content: center;
 			}
+
+			.cell {
+				position: relative;
+			}
+
+			.cell[data-sticky] {
+				position: sticky;
+			}
+
+			.cell[data-sticky] /*[data-sticking]*/ {
+				z-index: 6;
+				background: var(--mo-data-grid-sticky-part-color);
+			}
+
+			mo-data-grid-header-separator {
+				z-index: 5;
+			}
+
+			.cell[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
+				z-index: 7;
+			}
+
+			.details, .selection, .more {
+				position: sticky;
+				background: var(--mo-data-grid-sticky-part-color);
+				z-index: 5;
+			}
+
+			.details {
+				inset-inline-start: 0px;
+			}
+
+			.selection {
+				inset-inline-start: 0px;
+			}
+
+			.more {
+				cursor: pointer;
+				inset-inline-end: 0px;
+			}
 		`;
     }
-    get skeletonColumns() {
-        return [
-            this.dataGrid.detailsColumnWidth,
-            this.dataGrid.selectionColumnWidth,
-            '1fr'
-        ].filter((c) => c !== undefined).join(' ');
-    }
-    get separatorAdjustedColumns() {
-        return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap, 2px) ');
-    }
     get template() {
-        if (!this.dataGrid.isUsingSubgrid) {
-            return html `
-				<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap, 2px)'>
-					${this.detailsExpanderTemplate}
-					${this.selectionTemplate}
-					${this.contentTemplate}
-					${this.moreTemplate}
-				</mo-grid>
-			`;
-        }
         return html `
 			${this.detailsExpanderTemplate}
 			${this.selectionTemplate}
@@ -234,19 +199,6 @@ let DataGridHeader = class DataGridHeader extends Component {
 		`;
     }
     get contentTemplate() {
-        if (!this.dataGrid.isUsingSubgrid) {
-            return html `
-				<mo-grid columns=${this.separatorAdjustedColumns}>
-					${join(this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate), index => html `
-						<mo-data-grid-header-separator
-							.dataGrid=${this.dataGrid}
-							.column=${this.dataGrid.visibleColumns[index]}
-							@columnUpdate=${() => this.dataGrid.requestUpdate()}
-						></mo-data-grid-header-separator>
-					`)}
-				</mo-grid>
-			`;
-        }
         return html `
 			${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
 		`;
@@ -322,9 +274,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DataGridHeader.prototype, "overlayOpen", void 0);
-__decorate([
-    queryAll('.headerContent')
-], DataGridHeader.prototype, "cells", void 0);
 DataGridHeader = __decorate([
     component('mo-data-grid-header')
 ], DataGridHeader);

package/dist/DataGridHeaderSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+D,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE/D,qBACa,uBAAwB,SAAQ,SAAS;IAQlD,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACH,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAI;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAkDzB;IAED,cAAuB,QAAQ,0CAU9B;IAGD,SAAS,CAAC,eAAe;IAczB,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU;IAmBxD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAYjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
+{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+D,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE/D,qBACa,uBAAwB,SAAQ,SAAS;IACzB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAI;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAiDzB;IAED,cAAuB,QAAQ,0CAU9B;IAGD,SAAS,CAAC,eAAe;IAczB,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU;IAmBxD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}

package/dist/DataGridHeaderSeparator.js

@@ -12,23 +12,16 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
             this.updatePointerPosition(e);
         };
         this.handleDoubleClick = () => {
-            this.column.width = 'max-content';
-            if (!this.dataGrid.isUsingSubgrid) {
-                const columns = this.dataGrid.rows.map(row => row.cells.filter(cell => cell.column === this.column)).flat();
-                const headerCell = this.dataGrid?.header?.cells.find(cell => cell.dataset.selector === this.column.dataSelector);
-                const width = Math.max(...columns.map(c => c.scrollWidth), headerCell?.scrollWidth ?? 0);
-                this.column.width = `${width}px`;
-            }
             this.isResizing = false;
+            this.column.width = 'max-content';
             this.dataGrid.setColumns(this.dataGrid.columns);
         };
     }
     static get styles() {
         return css `
-			:host([subgrid]) {
+			:host {
 				position: absolute;
 				inset-inline-end: -2px;
-				z-index: 2;
 			}
 
 			:host([data-last]) {
@@ -117,14 +110,7 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
     }
 };
 __decorate([
-    property({
-        type: Object,
-        updated(dataGrid) {
-            if (dataGrid) {
-                this.toggleAttribute('subgrid', dataGrid.isUsingSubgrid);
-            }
-        }
-    })
+    property({ type: Object })
 ], DataGridHeaderSeparator.prototype, "dataGrid", void 0);
 __decorate([
     property({ type: Object })

package/dist/columns/DataGridColumnComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IAQ1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAElC,KAAK,EAAG,MAAM,CAAA;IACY,MAAM,UAAQ;IACxC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IACZ,OAAO,SAAK;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAU;IAC5C,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACpB,WAAW,UAAQ;IAO5D,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAElD,IAAI,MAAM,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAgB1C;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;CAI1B"}
+{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAgB;IACK,MAAM,UAAQ;IACxC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IACZ,OAAO,SAAK;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAU;IAC5C,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACpB,WAAW,UAAQ;IAO5D,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAElD,IAAI,MAAM,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAgB1C;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;CAI1B"}

package/dist/columns/DataGridColumnComponent.js

@@ -17,6 +17,7 @@ import { DataGridColumn } from '../DataGridColumn.js';
 export class DataGridColumnComponent extends Component {
     constructor() {
         super(...arguments);
+        this.width = 'max-content';
         this.hidden = false;
         this.heading = '';
         this.textAlign = 'start';
@@ -55,14 +56,7 @@ export class DataGridColumnComponent extends Component {
     }
 }
 __decorate([
-    property({
-        type: Object,
-        updated(dataGrid) {
-            if (dataGrid) {
-                this.width = dataGrid.isUsingSubgrid ? 'max-content' : 'minmax(100px, 1fr)';
-            }
-        }
-    })
+    property({ type: Object })
 ], DataGridColumnComponent.prototype, "dataGrid", void 0);
 __decorate([
     property()