@neovici/cosmoz-omnitable 8.2.1 → 8.3.0

package/cosmoz-omnitable-column-mixin.js

@@ -27,6 +27,7 @@ export const
 				title: { type: String },
 				valuePath: { type: String, notify: true },
 				values: { type: Array, notify: true },
+				filter: { type: Object },
 				/**
 			 * If the column should be disabled until enabled with enabledColumns
 			 */
@@ -61,6 +62,21 @@ export const
 			};
 		}
 
+		static get observers() {
+			return ['notifyFilterChange(filter)'];
+		}
+
+		notifyFilterChange(filter) {
+			if (this.__ownChange) {
+				return;
+			}
+			this.dispatchEvent(new CustomEvent('legacy-filter-changed', { detail: { name: this.name, state: this.legacyFilterToState(filter) }, bubbles: true }));
+		}
+
+		legacyFilterToState(filter) {
+			return { filter };
+		}
+
 		/**
 	 * Override this in column elements if you need a different default width
 	 */
@@ -85,6 +101,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

@@ -75,5 +75,9 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
 			<cosmoz-clear-button suffix slot="suffix" ?visible=${ hasFilter(filter) } light @click=${ resetFilter(setState) }></cosmoz-clear-button>
 		</paper-input>`;
 	}
+
+	legacyFilterToState(filter) {
+		return { filter, inputValue: filter };
+	}
 }
 customElements.define('cosmoz-omnitable-column', OmnitableColumn);

package/cosmoz-omnitable-styles.js

@@ -298,7 +298,7 @@ export default `<style>
 		align-items: center;
 	}
 	.footer-control + .footer-control {
-		margin-left: 34px;
+		margin-left: 16px;
 	}
 	.footer-control::part(input-label) {
 		opacity: 0.7;
@@ -318,6 +318,7 @@ export default `<style>
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
+		white-space: nowrap;
 	}
 
 	.footer-tableStats :first-child {

package/cosmoz-omnitable.js

@@ -146,6 +146,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 					>
 						<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>
+					<slot id="controlsSlot" name="controls"></slot>
 				</div>
 				<div class="footer-tableStats">
 					<span>[[ ngettext('{0} group', '{0} groups', groupsCount, t) ]]</span>
@@ -223,7 +224,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			/**
 		 * Specific columns to enable
 		 */
-			enabledColumns: { type: Array },
+			enabledColumns: { type: Array, notify: true },
 
 			/**
 		 * Whether bottom-bar has actions.

package/lib/use-dom-columns.js

@@ -38,7 +38,7 @@ const
 		}
 
 		const columns = Array.isArray(enabledColumns)
-			?	domColumns.filter(column => enabledColumns.includes(column.name))
+			? domColumns.filter(column => enabledColumns.includes(column.name))
 			: domColumns.filter(column => !column.disabled);
 
 		// eslint-disable-next-line max-lines-per-function
@@ -133,6 +133,8 @@ const
 			};
 		}, []);
 
+		useEffect(() => setColumns(domColumnsToConfig(host, { enabledColumns })), [enabledColumns]);
+
 		return columns;
 	};
 

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-omnitable.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'haunted';
+import { useCallback, useMemo, useState, useEffect } from 'haunted';
 import { normalizeSettings } from './normalize-settings';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
@@ -74,6 +74,12 @@ export const useOmnitable = host => {
 			[filterFunctions, normalizedSettings, collapsedColumns]
 		);
 
+	useEffect(() => {
+		const handler = ev => setFilterState(ev.detail.name, state => ({ ...state, ...ev.detail.state }));
+		host.addEventListener('legacy-filter-changed', handler);
+		return () => host.removeEventListener('legacy-filter-changed', handler);
+	}, []);
+
 	return {
 		columns,
 

package/lib/use-processed-items.js

@@ -13,7 +13,9 @@ const
 		}
 
 		Object.entries(changes).forEach(([key, value]) => {
+			column[columnSymbol].__ownChange = true;
 			column[columnSymbol][key] = value;
+			column[columnSymbol].__ownChange = false;
 			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, detail: { value }}));
 		});
 	};
@@ -34,7 +36,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/package.json

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