@neovici/cosmoz-omnitable 8.5.0 → 8.5.3

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

@@ -151,8 +151,7 @@ const
 		}
 
 		serializeFilter(column, filter) {
-			// TODO: drop the double-encoding
-			return filter.length === 0 ? null : encodeURIComponent(JSON.stringify(filter));
+			return filter.length === 0 ? null : JSON.stringify(filter);
 		}
 
 		deserializeFilter(column, filter) {

package/cosmoz-omnitable-header-row.js

@@ -1,31 +1,47 @@
-/* eslint-disable object-curly-newline */
 import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat';
 import './lib/cosmoz-omnitable-resize-nub';
 
-const
-	renderHeaderRow = ({ data, columns, groupOnColumn, filters, setFilterState }) => {
-		return repeat(columns, column => column.name, column => [
-			html`<div
-				class="cell ${ column.headerCellClass } header-cell"
-				?hidden=${ column === groupOnColumn }
-				title=${ column.title }
-				name=${ column.name }
-			>${ column.renderHeader(
-		column,
-		filters[column.name] ?? {},
-		state => setFilterState(column.name, state),
-		column.source(column, data)
-	) }</div>`,
-			html`<cosmoz-omnitable-resize-nub
-				.column=${ column }
-				name=${ column.name }
-			></cosmoz-omnitable-resize-nub>`
-		]);
-	},
+const renderHeaderRow = ({
+		data,
+		columns,
+		groupOnColumn,
+		filters,
+		setFilterState,
+	}) =>
+		repeat(
+			columns,
+			(column) => column.name,
+			(column) => [
+				html`<div
+					class="cell ${column.headerCellClass} header-cell"
+					?hidden=${column === groupOnColumn}
+					title=${column.title}
+					name=${column.name}
+				>
+					${column.renderHeader(
+						column,
+						filters[column.name] ?? {},
+						(state) => setFilterState(column.name, state),
+						column.source(column, data)
+					)}
+				</div>`,
+				html`<cosmoz-omnitable-resize-nub
+					.column=${column}
+					name=${column.name}
+				></cosmoz-omnitable-resize-nub>`,
+			]
+		),
+	HeaderRow = ({ content, columns, ...thru }) => [
+		columns &&
+			renderHeaderRow({
+				columns,
+				...thru,
+			}),
+		content,
+	];
 
-	HeaderRow = ({ data, columns, groupOnColumn, content, filters, setFilterState }) => {
-		return [columns && renderHeaderRow({ data, columns, groupOnColumn, filters, setFilterState }), content];
-	};
-
-customElements.define('cosmoz-omnitable-header-row', component(HeaderRow, { useShadowDOM: false }));
+customElements.define(
+	'cosmoz-omnitable-header-row',
+	component(HeaderRow, { useShadowDOM: false })
+);

package/cosmoz-omnitable.js

@@ -28,6 +28,7 @@ import './lib/cosmoz-omnitable-settings';
 import { saveAsCsvAction } from './lib/save-as-csv-action';
 import { saveAsXlsxAction } from './lib/save-as-xlsx-action';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
+import { without } from '@neovici/cosmoz-utils/lib/array';
 /**
  * @polymer
  * @customElement
@@ -134,7 +135,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 						label="[[ _('Group on', t) ]] [[ _computeSortDirection(groupOnDescending, t) ]]" placeholder="[[ _('No grouping', t) ]]"
 						source="[[ _onCompleteValues(columns, 'groupOn', groupOnColumn) ]]" value="[[ groupOnColumn ]]" limit="1" text-property="title"
 						always-float-label item-height="48" item-limit="8"
-						class="footer-control" on-change="[[ _onCompleteChange('groupOn') ]]" default-index="-1" show-single show-selection
+						class="footer-control" on-change="[[ _onCompleteChange('groupOn') ]]" on-select="[[ _onCompleteSelect ]]" default-index="-1" show-single
 					>
 						<svg slot="suffix" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" width="24" fill="currentColor"><path d="M7 10l5 5 5-5z"></path></svg>
 					</cosmoz-autocomplete>
@@ -142,7 +143,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 						label="[[ _('Sort on', t) ]] [[ _computeSortDirection(descending, t) ]]" placeholder="[[ _('No sorting', t) ]]"
 						source="[[ _onCompleteValues(columns, 'sortOn', sortOnColumn) ]]" value="[[ sortOnColumn ]]" limit="1" text-property="title"
 						always-float-label item-height="48" item-limit="8"
-						class="footer-control" on-change="[[ _onCompleteChange('sortOn') ]]" default-index="-1" show-single show-selection
+						class="footer-control" on-change="[[ _onCompleteChange('sortOn') ]]" on-select="[[ _onCompleteSelect ]]" default-index="-1" show-single
 					>
 						<svg slot="suffix" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" width="24" fill="currentColor"><path d="M7 10l5 5 5-5z"></path></svg>
 					</cosmoz-autocomplete>
@@ -520,6 +521,11 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		return columns?.filter?.(c => c[type]).sort((a, b) => ((b === value) >> 0) - ((a === value) >> 0));
 	}
 
+	_onCompleteSelect(newVal, {value, onChange, onText, limit}) {
+		onText('');
+		onChange([...without(newVal)(value), newVal].slice(-limit));
+	}
+
 	_onCompleteChange(type) {
 		return (val, close) => {
 			const value = (val[0] ?? val)?.name ?? '',

package/lib/use-hash-state.js

@@ -40,8 +40,7 @@ const
 
 export const useHashState = (initial, param, { suffix = '', read, write, multi } = {}) => {
 	const
-		link = multi ? multiLink : singleLink,
-		parseHash = multi ? multiParse : singleParse,
+		[link, parseHash] = multi ? [multiLink, multiParse] : [singleLink, singleParse],
 		[state, _setState] = useState(() => param == null
 			? initial
 			: parseHash(param + suffix, read) ?? initial),

package/lib/use-omnitable.js

@@ -14,8 +14,7 @@ export const useOmnitable = host => {
 		sortAndGroupOptions = useSortAndGroupOptions(
 			columns,
 			hashParam,
-			host.sortOn,
-			host.groupOn
+			host
 		),
 		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions,
 		{ data, resizeSpeedFactor, settingsId } = host,

package/lib/use-sort-and-group-options.js

@@ -1,18 +1,33 @@
 import { useMemo } from 'haunted';
 import { useHashState } from './use-hash-state';
 
-const
-	parseBool = bool => [true, 'true', 1, 'yes', 'on'].includes(bool),
-	boolParam = p => p === '' || parseBool(p);
+const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
+	boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p));
 
-export const useSortAndGroupOptions = (columns, hashParam, initialSortOn, initialGroupOn) => {
-	const
-		[sortOn, setSortOn] = useHashState(initialSortOn, hashParam, { suffix: '-sortOn' }),
-		[descending, setDescending] = useHashState(false, hashParam, { suffix: '-descending', read: boolParam }),
-		[groupOn, setGroupOn] = useHashState(initialGroupOn, hashParam, { suffix: '-groupOn' }),
-		[groupOnDescending, setGroupOnDescending] = useHashState(false, hashParam, { suffix: '-groupOnDescending', read: boolParam }),
-		sortOnColumn = useMemo(() => columns.find(column => column.name === sortOn), [columns, sortOn]),
-		groupOnColumn = useMemo(() => columns.find(column => column.name === groupOn), [columns, groupOn]);
+export const useSortAndGroupOptions = (columns, hashParam, initial) => {
+	const [sortOn, setSortOn] = useHashState(initial.sortOn, hashParam, {
+			suffix: '-sortOn',
+		}),
+		[descending, setDescending] = useHashState(initial.descending, hashParam, {
+			suffix: '-descending',
+			read: boolParam,
+		}),
+		[groupOn, setGroupOn] = useHashState(initial.groupOn, hashParam, {
+			suffix: '-groupOn',
+		}),
+		[groupOnDescending, setGroupOnDescending] = useHashState(
+			initial.groupOnDescending,
+			hashParam,
+			{ suffix: '-groupOnDescending', read: boolParam }
+		),
+		sortOnColumn = useMemo(
+			() => columns.find((column) => column.name === sortOn),
+			[columns, sortOn]
+		),
+		groupOnColumn = useMemo(
+			() => columns.find((column) => column.name === groupOn),
+			[columns, groupOn]
+		);
 
 	return {
 		groupOn,
@@ -25,6 +40,6 @@ export const useSortAndGroupOptions = (columns, hashParam, initialSortOn, initia
 		setSortOn,
 		sortOnColumn,
 		descending,
-		setDescending
+		setDescending,
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.5.0",
+	"version": "8.5.3",
 	"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": "^3.0.0",
+		"@neovici/cosmoz-autocomplete": "^3.1.0",
 		"@neovici/cosmoz-bottom-bar": "^5.0.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
 		"@neovici/cosmoz-dropdown": "^1.5.0",
@@ -80,8 +80,6 @@
 		"@neovici/cosmoz-viewinfo": "^3.1.3",
 		"@neovici/eslint-config": "^1.3.3",
 		"@open-wc/testing": "^2.5.28",
-		"@polymer/iron-component-page": "^4.0.0",
-		"@polymer/iron-demo-helpers": "^3.0.0",
 		"@polymer/iron-test-helpers": "^3.0.0",
 		"@polymer/paper-button": "^3.0.1",
 		"@polymer/paper-item": "^3.0.1",