@neovici/cosmoz-omnitable 8.0.0-beta.2 → 8.0.0-beta.6

package/README.md

@@ -28,3 +28,5 @@ views/administration/periods/list.js
 BUGS:
 * when navigating the queue, filters are not reset when view-core is reused
 * autocomplete columns without valueProperty might not work
+* treenode cells have show-max-nodes="undefined"
+* treenode source has empty texts

package/cosmoz-omnitable-column-amount.js

@@ -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) {

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,8 +63,8 @@ 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) {

package/cosmoz-omnitable-column-date.js

@@ -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) {

package/cosmoz-omnitable-column-datetime.js

@@ -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) {

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;

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

@@ -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) {

package/cosmoz-omnitable-column-time.js

@@ -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) {

package/cosmoz-omnitable-styles.js

@@ -22,7 +22,7 @@ const checkbox = `
 	}
 
 	.checkbox:checked {
-		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+		background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 		box-shadow: none;
 	}
 
@@ -63,7 +63,7 @@ const checkbox = `
 		height: 2px;
 		left: 4px;
 		top: 8px;
-	    background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+	  background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 	}
 `;
 
@@ -282,7 +282,7 @@ export default `<style>
 		display: flex;
 		align-items: center;
 		border-top: solid 1px #e8e8e8;
-		background-color: #f5f5f5;
+		background-color: var(--cosmoz-omnitable-footer-bg-color, #f5f5f5);
 		min-height: 25px;
 		height: 63px;
 		margin-bottom: 1px; /* Chrome overflow rendering bug? When only component in a view */

package/cosmoz-omnitable.js

@@ -3,7 +3,6 @@ import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
 import '@polymer/iron-label/iron-label';
 import '@polymer/paper-button/paper-button';
-import '@polymer/paper-checkbox/paper-checkbox';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-item/paper-item';
@@ -24,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';
@@ -276,8 +275,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 
 	static get observers() {
 		return [
-			'_selectedItemsChanged(selectedItems.*)',
-			'renderFastLayoutCss(layoutCss, $.layoutStyle)'
+			'_selectedItemsChanged(selectedItems.*)'
 		];
 	}
 
@@ -517,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/cosmoz-omnitable-settings.js

@@ -232,7 +232,7 @@ const settingsStyles = `
 					position: absolute;
 					top: 1px;
 					right: -4px;
- 					background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+ 					background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 					width: 8px;
 					height: 8px;
 					border-radius: 100%;

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-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.2",
+	"version": "8.0.0-beta.6",
 	"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,6 @@
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/iron-label": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
-		"@polymer/paper-checkbox": "^3.0.0",
 		"@polymer/paper-dropdown-menu": "^3.2.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",