@neovici/cosmoz-omnitable 13.0.0 → 13.2.0

package/cosmoz-omnitable-column-list-data.js

@@ -127,7 +127,6 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
 		this._expanded = !this._expanded;
 		event.stopPropagation();
 		event.preventDefault();
-		this.dispatchEvent(new CustomEvent('expand', { bubbles: true }));
 	}
 }
 

package/cosmoz-omnitable-column-list.js

@@ -14,7 +14,6 @@ import {
 	onText,
 } from './cosmoz-omnitable-column-list-mixin';
 import '@neovici/cosmoz-autocomplete';
-import { notifyResize } from './lib/utils';
 import { columnSymbol } from './lib/use-dom-columns';
 
 /**
@@ -41,10 +40,9 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
 		};
 	}
 
-	renderCell({ valuePath, textProperty }, { item, index }) {
+	renderCell({ valuePath, textProperty }, { item }) {
 		return html`<cosmoz-omnitable-column-list-data
 			.items=${getTexts(item, valuePath, textProperty)}
-			@expand=${(event) => notifyResize(event.target, index)}
 		></cosmoz-omnitable-column-list-data>`;
 	}
 

package/cosmoz-omnitable-item-expand.js

@@ -2,7 +2,6 @@
 import { component, useEffect } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import './cosmoz-omnitable-item-expand-line';
-import { notifyResize } from './lib/utils';
 
 const renderExpandList = ({
 		columns,
@@ -24,7 +23,7 @@ const renderExpandList = ({
 			>`
 		),
 	ExpandList = (host) => {
-		const { expanded, index, columns } = host;
+		const { columns } = host;
 
 		useEffect(() => {
 			if (columns?.length > 0) {
@@ -35,11 +34,6 @@ const renderExpandList = ({
 			return () => host.removeAttribute('hidden');
 		}, [columns?.length]);
 
-		useEffect(
-			() => expanded && requestAnimationFrame(() => notifyResize(host, index)),
-			[expanded]
-		);
-
 		return Array.isArray(columns) && columns.length > 0 && host.expanded
 			? renderExpandList(host)
 			: nothing;

package/lib/use-list.js

@@ -7,20 +7,24 @@ import { onItemChange as _onItemChange } from './utils-data';
 const _getGroupRowClasses = (folded) =>
 		folded ? 'groupRow groupRow-folded' : 'groupRow',
 	_getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
-	renderItem = ({
-		columns,
-		collapsedColumns,
-		onItemClick,
-		onCheckboxChange,
-		dataIsValid,
-		groupOnColumn,
-		onItemChange,
-	}) => {
-		return (item, index, { selected, expanded, toggleCollapse }) => {
-			return html` <div class="item-row-wrapper">
+	renderItem =
+		({
+			columns,
+			collapsedColumns,
+			onItemClick,
+			onCheckboxChange,
+			dataIsValid,
+			groupOnColumn,
+			onItemChange,
+			rowPartFn,
+		}) =>
+		(item, index, { selected, expanded, toggleCollapse }) =>
+			html` <div class="item-row-wrapper">
 				<div
 					?selected=${selected}
-					part="itemRow itemRow-${item[indexSymbol]}"
+					part="${['itemRow', `itemRow-${item[indexSymbol]}`, rowPartFn?.(item, index)]
+						.filter(Boolean)
+						.join(' ')}"
 					.dataIndex=${item[indexSymbol]}
 					.dataItem=${item}
 					class="itemRow"
@@ -62,9 +66,7 @@ const _getGroupRowClasses = (folded) =>
 					part="item-expand"
 				>
 				</cosmoz-omnitable-item-expand>
-			</div>`;
-		};
-	},
+			</div>`,
 	renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => {
 		return (item, index, { selected, folded, toggleFold }) =>
 			html` <div
@@ -106,6 +108,7 @@ export const useList = ({
 	columns,
 	collapsedColumns,
 	sortAndGroupOptions,
+	rowPartFn,
 	...rest
 }) => {
 	const { loading = false, displayEmptyGroups = false, compareItemsFn } = host,
@@ -162,11 +165,6 @@ export const useList = ({
 		);
 	}, []);
 
-	useEffect(() => {
-		host.shadowRoot.querySelector('#groupedList').scrollTarget =
-			host.shadowRoot.querySelector('#scroller');
-	}, []);
-
 	const { groupOnColumn } = sortAndGroupOptions,
 		onItemChange = useCallback(
 			(column, item) => (value) => _onItemChange(host, column, item, value),
@@ -193,6 +191,7 @@ export const useList = ({
 					dataIsValid,
 					groupOnColumn,
 					onItemChange,
+					rowPartFn,
 				}),
 			[
 				columns,
@@ -202,6 +201,7 @@ export const useList = ({
 				dataIsValid,
 				groupOnColumn,
 				onItemChange,
+				rowPartFn,
 			],
 		),
 		renderGroup: useMemo(

package/lib/use-omnitable.js

@@ -18,7 +18,8 @@ export const useOmnitable = (host) => {
 			noLocal,
 			noLocalSort = noLocal,
 			noLocalFilter = noLocal,
-			error
+			error,
+			rowPartFn
 		} = host,
 		settingS = useSettings({ settingsId, host }),
 		{ settings, setSettings, columns, resetRef } = settingS,
@@ -86,6 +87,7 @@ export const useOmnitable = (host) => {
 			columns,
 			collapsedColumns,
 			sortAndGroupOptions,
+			rowPartFn
 		}),
 		footer: useFooter({
 			host,

package/lib/utils.js

@@ -1,10 +1,3 @@
-const notifyResize = (target, index) =>
-	target.dispatchEvent(
-		new CustomEvent('update-item-size', {
-			bubbles: true,
-			detail: { index },
-		})
-	),
-	indexSymbol = Symbol('index');
+const indexSymbol = Symbol('index');
 
-export { notifyResize, indexSymbol };
+export { indexSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "13.0.0",
+	"version": "13.2.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -64,7 +64,7 @@
 		"@neovici/cosmoz-collapse": "^1.1.0",
 		"@neovici/cosmoz-datetime-input": "^4.0.0",
 		"@neovici/cosmoz-dropdown": "^4.0.0",
-		"@neovici/cosmoz-grouped-list": "^7.0.0",
+		"@neovici/cosmoz-grouped-list": "^8.0.0",
 		"@neovici/cosmoz-i18next": "^3.1.1",
 		"@neovici/cosmoz-input": "^4.0.0",
 		"@neovici/cosmoz-router": "^11.0.0",