@neovici/cosmoz-omnitable 8.1.0 → 8.2.2

package/cosmoz-omnitable-column-mixin.js

@@ -85,6 +85,13 @@ export const
 		}
 
 		deserializeFilter(column, filter) {
+			if (filter == null) {
+				return null;
+			}
+
+			if (typeof filter === 'string') {
+				return window.decodeURIComponent(filter);
+			}
 			return filter;
 		}
 

package/cosmoz-omnitable-column.js

@@ -28,7 +28,7 @@ const
 		setState(state => ({ ...state, headerFocused: event.detail.value })),
 
 	resetFilter = setState => () =>
-		setState(state => ({ ...state, filter: undefined, inputValue: undefined })),
+		setState(state => ({ ...state, filter: null, inputValue: null })),
 
 	hasFilter = filter => filter != null && filter !== '';
 

package/lib/cosmoz-omnitable-settings.js

@@ -30,7 +30,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 		pointer-events: none;
 	}
 	.item.dragover {
-		box-shadow: 0 -2px 0 0 black;
+		box-shadow: 0 -2px 0 0 currentColor;
 	}
 	.sort {
 		border: none;
@@ -49,15 +49,32 @@ const placement = ['bottom-right', ...defaultPlacement],
 		font-weight: bold;
 	}
 	${ checkbox }
-	.footer {
+
+	.buttons {
 		display: flex;
 		margin-top: 10px;
+		gap: 7px;
 	}
-	.footer > button {
+	.button {
+		border: none;
+		cursor: pointer;
+		background: var(--cosmoz-button-bg-color, #101010);
+		color: var(--cosmoz-button-color, #fff);
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 500;
+		line-height: 26px;
+		height: 26px;
+		border-radius: 4px;
+		padding: 0 8px;
 		flex: 1;
 	}
-	.footer > button:first-child {
-		margin-right: 5px;
+	.button:hover {
+			background: var(--cosmoz-button-hover-bg-color, #3A3F44);
+	}
+	.button[disabled] {
+		opacity: 0.7;
+		pointer-events: none;
 	}
 	`,
 
@@ -185,9 +202,9 @@ const placement = ['bottom-right', ...defaultPlacement],
 				<div class="list">${ settings?.map(renderItem(thru)) }</div>
 			`,
 			settingsId
-				? html`<div class="footer">
-					<button @click=${ onSave } ?disabled=${ !hasChanges }>Save</button>
-					<button @click=${ onReset } ?disabled=${ !hasChanges }>Reset</button>
+				? html`<div class="buttons">
+					<button class="button" @click=${ onSave } ?disabled=${ !hasChanges }>Save</button>
+					<button class="button" @click=${ onReset } ?disabled=${ !hasChanges }>Reset</button>
 				</div>`
 				: nothing
 		];
@@ -197,6 +214,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 		<style>
 			:host {
 				display: contents;
+				color: var(--cosmoz-omnitable-settings-color, #101010);
 				--cosmoz-dropdown-box-shadow: 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 40%);
 			}
 			cosmoz-dropdown::part(button) {
@@ -204,6 +222,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 				margin-bottom: 10px;
 				padding: 0;
 				background: transparent;
+				color: inherit;
 			}
 			cosmoz-dropdown::part(anchor) {
 				display: inline-block;
@@ -222,7 +241,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 			.anchor=${ anchor } .settings=${ settings } .onSettings=${ onSettings } .collapsed=${ collapsed }
 			.settingsId=${ settingsId } .hasChanges=${ hasChanges } .onSave=${ onSave } .onReset=${ onReset }
 			.filters=${ filters }></cosmoz-omnitable-settings-ui>` } .placement=${ placement }>
-			<svg viewBox="0 0 24 24" width="24" slot="button"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></svg>
+			<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></svg>
 			${ badge ? html`<div class="badge" slot="button"></div>` : nothing }
 		</cosmoz-dropdown>
 `;

package/lib/use-hash-state.js

@@ -21,6 +21,7 @@ const
 			url = hashUrl(),
 			searchParams = new URLSearchParams(url.hash.replace('#', ''));
 
+		// TODO: make parameterize pure
 		parameterize(hashParam, value, codec, searchParams);
 
 		return '#!' + Object.assign(url, { hash: searchParams }).href.replace(location.origin, '');

package/lib/use-processed-items.js

@@ -34,7 +34,7 @@ export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescend
 			if (column == null) {
 				return [filter, undefined];
 			}
-			// TODO: add try-catch
+
 			const state = { filter: column.deserializeFilter(column, value) };
 			notifyChanges(column, state);
 			return [filter, state];

package/lib/utils-data.js

@@ -2,11 +2,12 @@ import { get, set } from '@polymer/polymer/lib/utils/path';
 import { columnSymbol } from './use-dom-columns';
 
 export const
-	valuesFrom = (data, valuePath) => data
-		?.map(item => get(item, valuePath))
-		.filter((value, index, self) =>
-			value != null && self.indexOf(value) === index
-		),
+	valuesFrom = (data, valuePath) => Array.isArray(data) ?
+		data.map(item => get(item, valuePath))
+			.filter((value, index, self) =>
+				value != null && self.indexOf(value) === index
+			)
+		: undefined,
 
 	defaultComputeSource = ({ externalValues, values, valuePath }, data) =>
 		externalValues || typeof values === 'function'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.1.0",
+	"version": "8.2.2",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -74,8 +74,8 @@
 		"lit-html": "^1.3.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^15.0.0",
-		"@commitlint/config-conventional": "^15.0.0",
+		"@commitlint/cli": "^16.0.0",
+		"@commitlint/config-conventional": "^16.0.0",
 		"@neovici/cosmoz-viewinfo": "^3.1.3",
 		"@neovici/eslint-config": "^1.3.3",
 		"@open-wc/testing": "^2.5.28",