@neovici/cosmoz-omnitable 8.0.0-beta.3 → 8.0.0-beta.7

package/cosmoz-omnitable-column-amount.js

@@ -7,7 +7,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-amount-range-input';
 import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
 import { get } from '@polymer/polymer/lib/utils/path';
@@ -35,8 +35,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -56,8 +56,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter({ rates }, filter) {
@@ -134,8 +134,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-amount-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 

package/cosmoz-omnitable-column-autocomplete.js

@@ -14,7 +14,7 @@ import {
 import { get } from '@polymer/polymer/lib/utils/path';
 
 export const
-	getComparableValue = (item, valuePath, { textProperty, valueProperty } = {}) => {
+	getComparableValue = ({ valuePath, textProperty, valueProperty }, item) => {
 		const property = textProperty ? strProp(textProperty) : prop(valueProperty),
 			values = array(valuePath && get(item, valuePath)).map(property);
 		return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
@@ -63,12 +63,14 @@ class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerEle
 		>${ spinner }</cosmoz-autocomplete-ui>`;
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	computeSource(column, data) {
-		return computeSource(column, data);
+		return column.externalValues || typeof column.values === 'function'
+			? column.values
+			: computeSource(column, data);
 	}
 
 }

package/cosmoz-omnitable-column-date.js

@@ -9,7 +9,7 @@ import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import './lib/cosmoz-omnitable-date-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import { getString, getComparableValue, toDate, toHashString, toXlsxValue, applySingleFilter, getInputString, fromInputString } from './lib/utils-date';
 
 class OmnitableColumnDate extends columnMixin(PolymerElement) {
@@ -27,8 +27,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -48,8 +48,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -117,8 +117,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-date-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-date', OmnitableColumnDate);

package/cosmoz-omnitable-column-datetime.js

@@ -8,7 +8,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 import { fromHashString, getString, toHashString, toXlsxValue } from './lib/utils-datetime';
 import { applySingleFilter, fromInputString, getComparableValue, toDate } from './lib/utils-date';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-datetime-range-input';
 
 /**
@@ -36,8 +36,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -57,8 +57,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -123,8 +123,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-datetime-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 

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

@@ -130,7 +130,7 @@ const
 			return getString(column, item);
 		}
 
-		getComparableValue(item, valuePath, { valueProperty }) {
+		getComparableValue({ valuePath, valueProperty }, item) {
 			const value = get(item, valuePath);
 			if (valueProperty == null) {
 				return value;
@@ -160,7 +160,9 @@ const
 		}
 
 		computeSource(column, data) {
-			return computeSource(column, data);
+			return column.externalValues || typeof column.values === 'function'
+				? column.values
+				: computeSource(column, data);
 		}
 	};
 

package/cosmoz-omnitable-column-mixin.js

@@ -3,6 +3,7 @@ import { get } from '@polymer/polymer/lib/utils/path';
 export const
 	getString = ({ valuePath }, item) => get(item, valuePath),
 	toXlsxValue = getString,
+	getComparableValue = getString,
 
 	applySingleFilter = ({ valuePath }, filter) => item => {
 		const value = get(item, valuePath);
@@ -87,12 +88,12 @@ export const
 			return filter;
 		}
 
-		getComparableValue(item, valuePath) {
-			return get(item, valuePath);
+		getComparableValue(column, item) {
+			return getComparableValue(column, item);
 		}
 
-		computeSource() {
-			return null;
+		computeSource(column, data) {
+			return data;
 		}
 
 		_propertiesChanged(currentProps, changedProps, oldProps) {

package/cosmoz-omnitable-column-number.js

@@ -8,7 +8,7 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 
 import './lib/cosmoz-omnitable-number-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
 import { get } from '@polymer/polymer/lib/utils/path';
 
@@ -36,8 +36,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -57,8 +57,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -127,8 +127,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-number-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-number', OmnitableColumnNumber);

package/cosmoz-omnitable-column-time.js

@@ -10,7 +10,7 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import { getComparableValue, getString, toXlsxValue, applySingleFilter, toDate, toHashString, fromHashString } from './lib/utils-time';
 import './lib/cosmoz-omnitable-time-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 
 /**
  * @polymer
@@ -38,8 +38,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 
 	getFilterFn(column, filter) {
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		if (min == null && max == null) {
 			return;
@@ -59,8 +59,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 		return getString(column, item);
 	}
 
-	getComparableValue(item, valuePath, column) {
-		return getComparableValue(item, valuePath, column);
+	getComparableValue(column, item) {
+		return getComparableValue(column, item);
 	}
 
 	serializeFilter(column, filter) {
@@ -124,8 +124,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-time-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-time', OmnitableColumnTime);

package/cosmoz-omnitable.js

@@ -23,7 +23,7 @@ import styles from './cosmoz-omnitable-styles';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from '@polymer/polymer/lib/utils/html-tag';
-import { html as litHtml, render } from 'lit-html';
+import { html as litHtml } from 'lit-html';
 
 import { translatable } from '@neovici/cosmoz-i18next';
 import { mixin, hauntedPolymer } from '@neovici/cosmoz-utils';
@@ -275,8 +275,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 
 	static get observers() {
 		return [
-			'_selectedItemsChanged(selectedItems.*)',
-			'renderFastLayoutCss(layoutCss, $.layoutStyle)'
+			'_selectedItemsChanged(selectedItems.*)'
 		];
 	}
 
@@ -516,10 +515,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		return this.ngettext('{0} row', '{0} rows', numRows);
 	}
 
-	renderFastLayoutCss(layoutCss, outlet) {
-		render(layoutCss, outlet);
-	}
-
 	_onCompleteValues(columns, type, value) { /* eslint-disable-next-line no-bitwise */
 		return columns?.filter?.(c => c[type]).sort((a, b) => ((b === value) >> 0) - ((a === value) >> 0));
 	}

package/lib/use-dom-columns.js

@@ -41,6 +41,7 @@ const
 			?	domColumns.filter(column => enabledColumns.includes(column.name))
 			: domColumns.filter(column => !column.disabled);
 
+		// eslint-disable-next-line max-lines-per-function
 		return columns.map(column => ({
 			name: column.name,
 			title: column.title,
@@ -66,14 +67,13 @@ const
 			renderGroup: column.renderGroup,
 			cellTitleFn: column.cellTitleFn,
 			getFilterFn: column.getFilterFn,
+			headerCellClass: column.headerCellClass,
 			cellClass: column.cellClass,
 
 			editable: column.editable,
 
 			values: column.values,
-			source: memooize((column, data) => column.externalValues || typeof column.values === 'function'
-				? column.values
-				: column.computeSource(column, data)),
+			source: memooize(column.computeSource),
 
 			// @deprecated
 			loading: column.loading,
@@ -107,7 +107,6 @@ const
 
 			// treenode columns
 			ownerTree: column.ownerTree,
-			showMaxNodes: column.showMaxNodes,
 			keyProperty: column.keyProperty,
 
 			[columnSymbol]: column

package/lib/use-fast-layout.js

@@ -1,10 +1,11 @@
-import { useMemo } from 'haunted';
+import { useEffect, useLayoutEffect, useMemo } from 'haunted';
 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 { columnSymbol } from './normalize-settings';
+import { render } from 'lit-html';
 
 export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
 	const
@@ -26,8 +27,26 @@ export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resi
 
 	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
 
+	useLayoutEffect(() => render(layoutCss, host.$.layoutStyle), [layoutCss]);
+
+	// force iron-list to render when the omnitable becomes visible
+	useEffect(() => {
+		let lastWidth = 0;
+
+		const
+			onResize = ([entry]) => {
+				if (lastWidth === 0) {
+					requestAnimationFrame(() => host.$.groupedList.$.list._render());
+				}
+				lastWidth = entry.contentRect?.width;
+			},
+			observer = new ResizeObserver(onResize);
+
+		observer.observe(host);
+		return () => observer.unobserve(host);
+	}, []);
+
 	return {
-		layoutCss,
 		collapsedColumns
 	};
 };

package/lib/use-processed-items.js

@@ -14,7 +14,7 @@ const
 
 		Object.entries(changes).forEach(([key, value]) => {
 			column[columnSymbol][key] = value;
-			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, value }));
+			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, detail: { value }}));
 		});
 	};
 
@@ -78,12 +78,12 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 		// todo: extract function
 		processedItems = useMemo(() => {
 			if (!groupOnColumn && sortOnColumn != null && sortOnColumn.sortOn != null) {
-				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue(a, sortOnColumn.sortOn, sortOnColumn), descending));
+				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
 			}
 
 			if (groupOnColumn != null && groupOnColumn.groupOn != null) {
 				const groupedResults = filteredItems.reduce((acc, item) => {
-					const gval = groupOnColumn.getComparableValue(item, groupOnColumn.groupOn, groupOnColumn);
+					const gval = groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, item);
 
 					if (gval === undefined) {
 						return acc;
@@ -104,7 +104,8 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 					return acc;
 				}, []);
 
-				groupedResults.sort(sortBy(a => groupOnColumn.getComparableValue(a.items[0], groupOnColumn.groupOn, groupOnColumn), groupOnDescending));
+				groupedResults.sort(sortBy(
+					a => groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, a.items[0]), groupOnDescending));
 
 				if (!sortOnColumn) {
 					return groupedResults;
@@ -113,7 +114,7 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 				return groupedResults
 					.filter(group => Array.isArray(group.items))
 					.map(group => {
-						group.items.sort(sortBy(a => sortOnColumn.getComparableValue(a, sortOnColumn.sortOn, sortOnColumn), descending));
+						group.items.sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
 						return group;
 					});
 			}

package/lib/utils-amount.js

@@ -45,7 +45,7 @@ export const
 		return lNumber === valAmount ? amount : lAmount;
 	},
 
-	getComparableValue = (item, valuePath, { rates } = {}) => {
+	getComparableValue = ({ valuePath, rates }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -70,15 +70,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	},

package/lib/utils-data.js

@@ -8,6 +8,11 @@ export const
 			value != null && self.indexOf(value) === index
 		),
 
+	defaultComputeSource = ({ externalValues, values, valuePath }, data) =>
+		externalValues || typeof values === 'function'
+			? values
+			: valuesFrom(data, valuePath),
+
 	onItemChange = (host, column, item, value) => {
 		const
 			{ valuePath } = column,

package/lib/utils-date.js

@@ -56,11 +56,11 @@ export const
 	/**
 	 * Get comparable number from date
 	 *
-	 * @param	 {Object} item			 Item to be processed
 	 * @param	 {String} valuePath	 Property path
+	 * @param	 {Object} item			 Item to be processed
 	 * @returns {Number|void} Valid value or void
 	 */
-	getComparableValue = (item, valuePath) => {
+	getComparableValue = ({ valuePath }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -100,8 +100,8 @@ export const
 			return date;
 		}
 
-		const comparableDate = getComparableValue(date),
-			comparableLDate = getComparableValue(lDate),
+		const comparableDate = getComparableValue({}, date),
+			comparableLDate = getComparableValue({}, lDate),
 			limitedValue = limitFunc(comparableDate, comparableLDate);
 		return limitedValue === comparableDate ? date : lDate;
 	},
@@ -188,15 +188,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	};

package/lib/utils-number.js

@@ -50,7 +50,7 @@ export const
 		return string;
 	},
 
-	getComparableValue = (item, valuePath, { maximumFractionDigits } = {}) => {
+	getComparableValue = ({ valuePath, maximumFractionDigits }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -98,15 +98,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	};

package/lib/utils-time.js

@@ -67,7 +67,7 @@ export const
 		return toLocalISOString(date).slice(11, 19);
 	},
 
-	getComparableValue = (item, valuePath) => {
+	getComparableValue = ({ valuePath }, item) => {
 		if (item == null) {
 			return;
 		}
@@ -83,15 +83,15 @@ export const
 	},
 
 	applySingleFilter = (column, filter) => item => {
-		const value = getComparableValue(item, column.valuePath, column);
+		const value = getComparableValue(column, item);
 
 		if (value == null) {
 			return false;
 		}
 
 		const
-			min = getComparableValue(filter, 'min', column),
-			max = getComparableValue(filter, 'max', column);
+			min = getComparableValue({ ...column, valuePath: 'min' }, filter),
+			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
 
 		return !(value < min || value > max);
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.0.0-beta.3",
+	"version": "8.0.0-beta.7",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"