@neovici/cosmoz-omnitable 7.0.3 → 7.0.7

package/cosmoz-omnitable-styles.js

@@ -6,6 +6,7 @@ const checkbox = `
 		background: transparent;
 		border-radius: 4px;
 		appearance: none;
+		-webkit-appearance: none;
 		outline: none;
 		position: relative;
 		user-select: none;
@@ -20,8 +21,8 @@ const checkbox = `
 	}
 
 	.checkbox:checked {
-	    background-color: var(--paper-checkbox-checked-color, var(--primary-color));
-	    box-shadow: none;
+		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+		box-shadow: none;
 	}
 
 	.checkbox:checked::before {
@@ -269,6 +270,7 @@ export default `<style>
 		display: flex;
 		align-items: center;
 		flex: auto;
+		isolation: isolate;
 	}
 
 	.footer-control {
@@ -383,6 +385,7 @@ export default `<style>
 		background-color: var(--cosmoz-omnitable-bottom-bar-color, #5f5a92);
 		color: white;
 		overflow: hidden;
+		z-index: auto;
 	}
 
 	cosmoz-bottom-bar::slotted(*) {

package/cosmoz-omnitable.js

@@ -301,7 +301,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			groupOnDescending: {
 				type: Boolean,
 				value: false,
-				observer: '_debounceGroupItems'
+				observer: '_debounceProcessItems'
 			},
 			/**
 		 * The column name to group on.
@@ -327,7 +327,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		 */
 			filteredItems: {
 				type: Array,
-				observer: '_debounceGroupItems',
 				value: () => []
 			},
 
@@ -418,8 +417,8 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 
 	static get observers() {
 		return [
-			'_dataChanged(data.*)',
-			'_debounceSortItems(sortOn, descending, filteredGroupedItems)',
+			'_dataChanged(data.splices)',
+			'_debounceProcessItems(sortOn, descending)',
 			'_selectedItemsChanged(selectedItems.*)',
 			'renderFastLayoutCss(layoutCss, $.layoutStyle)'
 		];
@@ -430,7 +429,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 
 		this.debouncers = {};
 		this._updateColumns = this._updateColumns.bind(this);
-		this._filterItems = this._filterItems.bind(this);
+		this._processItems = this._processItems.bind(this);
 		this._groupItems = this._groupItems.bind(this);
 		this._sortFilteredGroupedItems = this._sortFilteredGroupedItems.bind(this);
 		this._onKey = this._onKey.bind(this);
@@ -479,16 +478,8 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			this.debouncers._updateColumnsDebouncer.flush();
 		}
 
-		if (this.debouncers._filterItemsDebouncer) {
-			this.debouncers._filterItemsDebouncer.flush();
-		}
-
-		if (this.debouncers._groupItemsDebouncer) {
-			this.debouncers._groupItemsDebouncer.flush();
-		}
-
-		if (this.debouncers._sortItemsDebouncer) {
-			this.debouncers._sortItemsDebouncer.flush();
+		if (this.debouncers._processItemsDebouncer) {
+			this.debouncers._processItemsDebouncer.flush();
 		}
 	}
 
@@ -596,70 +587,12 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		requestAnimationFrame(() => requestAnimationFrame(() => this.$.groupedList.$.list._render()));
 	}
 
-	_getItemUpdateEffects(splices) {
-		return splices.reduce((acc, splice) => {
-			if (acc.refilter) {
-				return acc;
-			}
-			const itemsReplaced = splice.type === 'splice' && splice.addedCount === splice.removed.length;
-			if (!itemsReplaced) {
-				acc.refilter = true;
-				return acc;
-			}
-			const filterFunctions = this.columns
-					.map(col => col.getFilterFn())
-					.filter(fn => fn !== undefined),
-				comparer = (oldItem, newItem, path) =>
-					this.get(path, oldItem) !== this.get(path, newItem);
-
-			splice.removed.some((oldItem, index) => {
-				const newItem = splice.object[splice.index + index];
-				if (!acc.refilter) {
-					const wasFiltered = this.filteredItems.includes(oldItem),
-						isFiltered = filterFunctions.every(filterFn => filterFn(newItem));
-					acc.refilter = wasFiltered !== isFiltered;
-					if (acc.refilter) {
-						return true;
-					}
-				}
-				acc.regroup = acc.regroup || !!this.groupOnColumn && comparer(oldItem, newItem, this.groupOnColumn.valuePath);
-				acc.resort = acc.regroup || acc.resort || !!this.sortOnColumn && comparer(oldItem, newItem, this.sortOnColumn.valuePath);
-				return false;
-			});
-			return acc;
-		}, {
-			refilter: false,
-			regroup: false,
-			resort: false
-		});
-	}
-
-	_dataChanged(notify) {
-		if (!Array.isArray(this.columns) || notify == null || notify.path === 'data.length') {
+	_dataChanged() {
+		if (!Array.isArray(this.columns)) {
 			return;
 		}
 		this._setColumnValues();
-
-		if (notify.path !== 'data.splices') {
-			this._debounceFilterItems();
-			return;
-		}
-		const effects = this._getItemUpdateEffects(notify.value.indexSplices);
-		if (effects.refilter) {
-			this._debounceFilterItems();
-		} else if (effects.regroup) {
-			this._debounceGroupItems();
-		} else if (effects.resort) {
-			this._debounceSortItems();
-		} else if (notify.value.indexSplices.length === 1 && notify.value.indexSplices[0].addedCount === 1 && notify.value.indexSplices[0].removed.length === 1) {
-			// one item was replaced, but it did not affect the filtering, grouping and sorting
-			// replace the old item in the sortedFilteredGroupedItems directly
-			const indexInVisibleData = this.sortedFilteredGroupedItems.indexOf(notify.value.indexSplices[0].removed[0]);
-			if (indexInVisibleData === -1) {
-				return;
-			}
-			this.splice('sortedFilteredGroupedItems', indexInVisibleData, 1, notify.value.indexSplices[0].object[notify.value.indexSplices[0].index]);
-		}
+		this._debounceProcessItems();
 	}
 
 	_debounceUpdateColumns() {
@@ -723,7 +656,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		this._updateParamsFromHash();
 
 		if (Array.isArray(this.data)) {
-			this._debounceFilterItems();
+			this._debounceProcessItems();
 		}
 	}
 
@@ -808,12 +741,26 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		if (!Array.isArray(this.columns) || this.columns.length < 1 || this.columns.indexOf(detail.column) < 0) {
 			return;
 		}
-		this._debounceFilterItems();
+		this._debounceProcessItems();
 		this._filterForRouteChanged(detail.column);
 	}
 
-	_debounceFilterItems() {
-		this._debounce('_filterItemsDebouncer', this._filterItems);
+	_groupOnColumnChanged(column) {
+		if (column && column.hasFilter()) {
+			column.resetFilter();
+		} else {
+			this._debounceProcessItems();
+		}
+	}
+
+	_debounceProcessItems() {
+		this._debounce('_processItemsDebouncer', this._processItems);
+	}
+
+	_processItems() {
+		this._filterItems();
+		this._groupItems();
+		this._sortFilteredGroupedItems();
 	}
 
 	_filterItems() {
@@ -838,21 +785,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		}
 	}
 
-	_groupOnColumnChanged(column) {
-		if (column && column.hasFilter()) {
-			column.resetFilter();
-		} else {
-			this._debounce('_groupItemsDebouncer', this._groupItems);
-		}
-	}
-
-	_debounceGroupItems() {
-		if (!this.isConnected || !Array.isArray(this.filteredItems)) {
-			return;
-		}
-		this._debounce('_groupItemsDebouncer', this._groupItems);
-	}
-
 	/* eslint-disable-next-line max-statements */
 	_groupItems() {
 		// do not attempt to group items if no columns are defined
@@ -912,14 +844,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		this.filteredGroupedItems = groups;
 	}
 
-	_debounceSortItems() {
-		if (!Array.isArray(this.data) || this.data.length < 1 || !Array.isArray(this.columns)) {
-			return;
-		}
-		this._debounce('_sortItemsDebouncer', this._sortFilteredGroupedItems);
-	}
-
-
 	/* eslint-disable-next-line max-statements */
 	_genericSorter(a, b) {
 		if (a === b) {
@@ -1005,7 +929,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			return;
 		}
 
-
 		// No grouping
 		this.filteredGroupedItems.sort(sorter);
 		if (this.descending) {

package/lib/compute-layout.js

@@ -1,5 +1,5 @@
 import { html } from 'haunted';
-import { FORCE_FIT, layout } from './layout';
+import { layout } from './layout';
 
 const
 	_toCss = (layout, config) =>
@@ -22,7 +22,20 @@ export const
 			return computeLayout(columnConfigs.slice(1), canvasWidth, numColumns);
 		}
 
-		const widths = layout(columnConfigs, canvasWidth, FORCE_FIT);
+		// calculate the index of the last visible column, the one that needs to flex,
+		// 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]
+		)[1];
+
+		// force the last visible column to flex
+		if (lastColumnIndex !== -1) {
+			columnConfigs[lastColumnIndex].flex = 1;
+		}
+
+		const widths = layout(columnConfigs, canvasWidth);
 
 		return widths.reduce((sorted, width, i) => {
 			sorted[columnConfigs[i].index] = width;

package/lib/cosmoz-omnitable-settings.js

@@ -20,11 +20,13 @@ const settingsStyles = `
 		display: flex;
 		flex-direction: column;
 		max-height: 42vh;
+		outline: none;
 	}
 	.list {
 		overflow-y: auto;
 		flex: 1;
 		padding-top: 2px;
+		min-width: 225px;
 	}
 	.item {
 		display: flex;
@@ -49,7 +51,6 @@ const settingsStyles = `
 		margin-right: 12px;
 	}
 	.title {
-		min-width: 160px;
 		flex: 1;
 	}
 	${ checkbox }
@@ -60,6 +61,8 @@ const settingsStyles = `
 		return isFinite(idx) ? idx : undefined;
 	},
 
+	preventDefault = e => e.preventDefault(),
+
 	// eslint-disable-next-line max-lines-per-function
 	useSettings = host => {
 		usePosition({ anchor: host.anchor, host });
@@ -190,11 +193,12 @@ const settingsStyles = `
 					background: transparent;
 					cursor: pointer;
 				}
+				.anchor * { pointer-events: none; }
 				.anchor:hover {
 					background: #eee;
 				}
 			</style>
-		    <button class="anchor" @focusin=${ onFocus } @focusout=${ onFocus } @click=${ onToggle }>
+		    <button class="anchor" @focus=${ onFocus } @blur=${ onFocus } @click=${ onToggle } @mousedown=${ preventDefault }>
 				<svg viewBox="0 0 24 24" width="24"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></svg>
 			</button>
 			${ active

package/lib/layout.js

@@ -1,14 +1,8 @@
 const finite = num => Number.isFinite(num) ? num : 0;
 export const
-	FORCE_FIT = true,
 	// eslint-disable-next-line max-lines-per-function,  max-statements
-	layout = (_columns, container, forceFit) => {
+	layout = (columns, container) => {
 		const result = [];
-		let columns = _columns;
-
-		if (forceFit) {
-			columns = _columns.map((c, index) => index === 0 ? { ...c, flex: 1 } : c);
-		}
 
 		// eslint-disable-next-line one-var
 		let [widthSum, lots] = columns.reduce(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "7.0.3",
+	"version": "7.0.7",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -52,7 +52,7 @@
 		]
 	},
 	"dependencies": {
-		"@neovici/cosmoz-autocomplete": "^2.17.0",
+		"@neovici/cosmoz-autocomplete": "^2.17.1",
 		"@neovici/cosmoz-bottom-bar": "^4.1.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
 		"@neovici/cosmoz-grouped-list": "^3.2.0",
@@ -87,14 +87,14 @@
 		"@polymer/iron-demo-helpers": "^3.0.0",
 		"@polymer/iron-test-helpers": "^3.0.0",
 		"@polymer/paper-toggle-button": "^3.0.0",
-		"@semantic-release/changelog": "^5.0.0",
-		"@semantic-release/git": "^9.0.0",
+		"@semantic-release/changelog": "^6.0.0",
+		"@semantic-release/git": "^10.0.0",
 		"@web/dev-server": "^0.1.10",
 		"@web/test-runner": "^0.13.0",
 		"@web/test-runner-selenium": "^0.5.0",
 		"eslint": "^7.0.0",
 		"husky": "^7.0.0",
-		"semantic-release": "^17.4.0",
+		"semantic-release": "^18.0.0",
 		"sinon": "^11.0.0",
 		"web-animations-js": "^2.3.2"
 	}