@3mo/data-grid 0.5.17 → 0.6.0

package/dist/rows/DataGridRow.js

@@ -65,6 +65,7 @@ export class DataGridRow extends Component {
 			}
 
 			#contentContainer {
+				grid-column: -1 / 1;
 				cursor: pointer;
 				transition: 250ms;
 			}
@@ -120,7 +121,7 @@ export class DataGridRow extends Component {
 				display: none;
 			}
 
-			#detailsContainer > :first-child {
+			:host(:not([has-sub-data])) #detailsContainer > :first-child {
 				padding: 8px 0;
 			}
 
@@ -131,7 +132,7 @@ export class DataGridRow extends Component {
     }
     get template() {
         return html `
-			<mo-grid id='contentContainer'
+			<mo-grid id='contentContainer' columns='subgrid'
 				@click=${() => this.handleContentClick()}
 				@dblclick=${() => this.handleContentDoubleClick()}
 				@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
@@ -184,11 +185,11 @@ export class DataGridRow extends Component {
     }
     get contextMenuIconButtonTemplate() {
         return this.dataGrid.hasContextMenu === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'
-				@click=${this.openContextMenu}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-				<mo-icon-button id='contextMenuIconButton' icon='more_vert'></mo-icon-button>
+			<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()}
+				></mo-icon-button>
 			</mo-flex>
 		`;
     }
@@ -200,11 +201,10 @@ export class DataGridRow extends Component {
             return this.dataGrid.getRowDetailsTemplate(this.data);
         }
         const subData = this.dataGrid.getSubData(this.data);
+        this.toggleAttribute('has-sub-data', !!subData);
         if (subData) {
             return html `
-				<mo-flex style='width: 100%; padding: 0px'>
-					${subData.map(data => this.dataGrid.getRowTemplate(data, undefined, this.level + 1))}
-				</mo-flex>
+				${subData.map(data => this.dataGrid.getRowTemplate(data, undefined, this.level + 1))}
 			`;
         }
         return html.nothing;
@@ -236,15 +236,15 @@ export class DataGridRow extends Component {
             this.contextMenuOpen = false;
         }
     }
-    async openContextMenu(mouseEvent) {
+    async openContextMenu(event) {
         if (!this.dataGrid.hasContextMenu) {
             return;
         }
-        mouseEvent?.stopPropagation();
+        event?.stopPropagation();
         if (this.dataGrid.selectedData.includes(this.data) === false) {
             this.dataGrid.select(this.dataGrid.selectionMode !== DataGridSelectionMode.None ? [this.data] : []);
         }
-        const contextMenu = ContextMenu.open(mouseEvent || [0, 0], this.contextMenuTemplate);
+        const contextMenu = ContextMenu.open(event || [0, 0], this.contextMenuTemplate);
         this.contextMenuOpen = true;
         const handler = (open) => {
             this.contextMenuOpen = open;