feat(styling): expose more parts

Expose more header & itemRow cell parts.
Neovici · May 28, 2024 · bc29692 · bc29692
1 parent 67da2e3
commit bc29692
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/cosmoz-omnitable-header-row.js b/cosmoz-omnitable-header-row.js
@@ -18,6 +18,7 @@ const /* eslint-disable-next-line max-lines-per-function */
 			(column) => [
 				html`<div
 					class="cell ${column.headerCellClass} header-cell"
+					part="cell header-cell cell-${column.name} header-cell-${column.name}"
 					?hidden=${column === groupOnColumn}
 					title=${column.title}
 					name=${column.name}
@@ -27,7 +28,7 @@ const /* eslint-disable-next-line max-lines-per-function */
 							column,
 							filters[column.name] ?? {},
 							(state) => setFilterState(column.name, state),
-							column.source(column, data)
+							column.source(column, data),
 						),
 						html` <sort-and-group-consumer
 							style="display:contents"
@@ -52,21 +53,23 @@ const /* eslint-disable-next-line max-lines-per-function */
 					.column=${column}
 					name=${column.name}
 				></cosmoz-omnitable-resize-nub>`,
-			]
+			],
 		),
 	HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => [
 		columns &&
 			renderHeaderRow({
 				columns,
 				...thru,
 			}),
-		html`${when(!hideSelectAll, () => html`
-			<cosmoz-omnitable-settings
-			.config=${settingsConfig}>
-			</cosmoz-omnitable-settings>`)}`,
+		when(
+			!hideSelectAll,
+			() =>
+				html` <cosmoz-omnitable-settings .config=${settingsConfig}>
+				</cosmoz-omnitable-settings>`,
+		),
 	];
 
 customElements.define(
 	'cosmoz-omnitable-header-row',
-	component(HeaderRow, { useShadowDOM: false })
+	component(HeaderRow, { useShadowDOM: false }),
 );
diff --git a/cosmoz-omnitable-item-row.js b/cosmoz-omnitable-item-row.js
@@ -21,6 +21,7 @@ const ItemRow = ({
 		(column) => {
 			return html`<div
 				class="cell itemRow-cell ${column.cellClass ?? ''}"
+				part="cell itemRow-cell cell-${column.name} itemRow-cell-${column.name}"
 				?hidden="${column === groupOnColumn}"
 				?editable="${column.editable}"
 				title="${column.cellTitleFn(column, item)}"