@neovici/cosmoz-omnitable 13.1.0 → 13.2.1

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/cosmoz-omnitable.js

@@ -36,7 +36,6 @@ const Omnitable = (host) => {
 		<style>
 			${guard([], () => shimCSS(styles))}
 		</style>
-		<div id="layoutStyle"></div>
 
 		<div class="mainContainer">
 			${renderHeader(header)}

package/lib/compute-layout.js

@@ -1,20 +1,19 @@
-import { html } from '@pionjs/pion';
 import { layout } from './layout';
 
-const
-	_toCss = (layout, config) =>
-		config
-			.map((item, index) => {
-				const width = layout[index];
-				return width == null || width === 0
-					? `cosmoz-omnitable-resize-nub[name="${ item.name }"], .cell[name="${ item.name }"]{display:none}`
-					: `.cell[name="${ item.name }"]{width: ${ width }px;padding: 0 min(3px, ${ width / 2 }px)}`;
-			})
-			.join('\n');
+const _toCss = (layout, config) =>
+	config
+		.map((item, index) => {
+			const width = layout[index];
+			return width == null || width === 0
+				? `cosmoz-omnitable-resize-nub[name="${item.name}"], .cell[name="${item.name}"]{display:none}`
+				: `.cell[name="${item.name}"]{width: ${Math.floor(
+						width,
+					)}px;padding: 0 min(3px, ${width / 2}px)}`;
+		})
+		.join('\n');
 
-export const
-	computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
-		const columnConfigs = _columnConfigs.filter(c => !c.hidden),
+export const computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
+		const columnConfigs = _columnConfigs.filter((c) => !c.hidden),
 			totalWidths = columnConfigs.reduce((sum, { width }) => sum + width, 0);
 
 		if (columnConfigs.length > 1 && totalWidths > canvasWidth) {
@@ -26,8 +25,11 @@ export const
 		// as the column configs might now be in a different order than displayed
 		// due to priority settings
 		const lastColumnIndex = columnConfigs.reduce(
-			([max, maxIndex], column, index) => [Math.max(max, column.index), column.index > max ? index : maxIndex],
-			[-1, -1]
+			([max, maxIndex], column, index) => [
+				Math.max(max, column.index),
+				column.index > max ? index : maxIndex,
+			],
+			[-1, -1],
 		)[1];
 
 		// force the last visible column to flex
@@ -43,6 +45,4 @@ export const
 		}, new Array(numColumns).fill(undefined));
 	},
 	toCss = (layout, config) =>
-		layout.length === 0
-			? html`<style>.cell {display: none;}</style>`
-			: html`<style>${ _toCss(layout, config) }</style>`;
+		layout.length === 0 ? '.cell {display: none;}' : _toCss(layout, config);

package/lib/use-fast-layout.js

@@ -1,10 +1,10 @@
-import { useLayoutEffect, useMemo } from '@pionjs/pion';
+import { useMemo } from '@pionjs/pion';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';
 import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
-import { render } from 'lit-html';
+import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 
 export const useFastLayout = ({
 	host,
@@ -24,7 +24,7 @@ export const useFastLayout = ({
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
 		layoutCss = useMemo(
 			() => toCss(tweenedlayout, settings.columns),
-			[tweenedlayout]
+			[tweenedlayout],
 		),
 		collapsedColumns = useMemo(
 			() =>
@@ -35,9 +35,9 @@ export const useFastLayout = ({
 						column.disabled
 							? acc
 							: [...acc, columns.find((c) => c.name === column.name)],
-					[]
+					[],
 				),
-			[columns, settings, layout]
+			[columns, settings, layout],
 		);
 
 	useResizableColumns({
@@ -47,10 +47,7 @@ export const useFastLayout = ({
 		setSettings: (update) => setSettings(update(settings)),
 	});
 
-	useLayoutEffect(
-		() => render(layoutCss, host.shadowRoot.querySelector('#layoutStyle')),
-		[layoutCss]
-	);
+	useStyleSheet(layoutCss);
 
 	return { collapsedColumns };
 };

package/lib/use-list.js

@@ -165,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),

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.1.0",
+	"version": "13.2.1",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -64,11 +64,11 @@
 		"@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",
-		"@neovici/cosmoz-utils": "^6.0.0",
+		"@neovici/cosmoz-utils": "^6.5.0",
 		"@neovici/nullxlsx": "^3.0.0",
 		"@pionjs/pion": "^2.0.0",
 		"@polymer/iron-icon": "^3.0.0",