@neovici/cosmoz-omnitable 14.12.1 → 14.12.2

package/README.md

@@ -1,5 +1,4 @@
-cosmoz-omnitable
-=================
+# cosmoz-omnitable
 
 [![Build Status](https://github.com/Neovici/cosmoz-omnitable/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-omnitable/actions?workflow=Github+CI)
 [![codecov](https://codecov.io/gh/Neovici/cosmoz-omnitable/branch/master/graph/badge.svg?token=j46iVMxjcs)](https://codecov.io/gh/Neovici/cosmoz-omnitable)

package/cosmoz-omnitable-column-boolean.js

@@ -4,65 +4,49 @@ import { columnMixin } from './cosmoz-omnitable-column-mixin';
 
 import '@polymer/paper-spinner/paper-spinner-lite';
 import '@neovici/cosmoz-autocomplete';
-import {
-	html, nothing
-} from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { get } from '@polymer/polymer/lib/utils/path';
 import { memooize } from '@neovici/cosmoz-utils/memoize';
 
-const
-	computeValue = (value, source) =>
+const computeValue = (value, source) =>
 		source.find(({ value: valueProp }) => value === valueProp),
-
 	computeTooltip = (title, value, source) => {
 		const val = computeValue(value, source);
 		return val ? val.text : title;
 	},
-
-	computeItemTooltip = (title, item, valuePath, source) => computeTooltip(
-		title,
-		get(item, valuePath),
-		source
-	),
-
-	computeItemValue = ({ valuePath }, item, source) => computeValue(
-		get(item, valuePath),
-		source
-	),
-
-	onChange = setState => selection => {
-		setState(state => ({ ...state, filter: selection?.[0]?.value ?? null }));
+	computeItemTooltip = (title, item, valuePath, source) =>
+		computeTooltip(title, get(item, valuePath), source),
+	computeItemValue = ({ valuePath }, item, source) =>
+		computeValue(get(item, valuePath), source),
+	onChange = (setState) => (selection) => {
+		setState((state) => ({ ...state, filter: selection?.[0]?.value ?? null }));
 	},
-
-	onFocus = setState => focused => {
-		setState(state => ({ ...state, headerFocused: focused }));
+	onFocus = (setState) => (focused) => {
+		setState((state) => ({ ...state, headerFocused: focused }));
 	},
-
-	onText = setState => text => {
-		setState(state => ({ ...state, query: text }));
+	onText = (setState) => (text) => {
+		setState((state) => ({ ...state, query: text }));
 	},
-
-	onEditableChange = onItemChange => selection => onItemChange(selection?.[0]?.value),
-
+	onEditableChange = (onItemChange) => (selection) =>
+		onItemChange(selection?.[0]?.value),
 	getString = ({ valuePath, trueLabel, falseLabel }, item) => {
 		const value = get(item, valuePath);
 		return value ? trueLabel : falseLabel;
 	},
-
-	applySingleFilter = ({ valuePath }, filter) => item => get(item, valuePath) === filter,
-
+	applySingleFilter =
+		({ valuePath }, filter) =>
+		(item) =>
+			get(item, valuePath) === filter,
 	computeSource = memooize((trueLabel, falseLabel) => [
 		{ text: trueLabel, value: true },
-		{ text: falseLabel, value: false }
+		{ text: falseLabel, value: false },
 	]),
-
 	toXlsxValue = ({ valuePath, trueLabel, falseLabel }, item) => {
 		if (!valuePath) {
 			return '';
 		}
 		return get(item, valuePath) ? trueLabel : falseLabel;
 	},
-
 	deserializeFilter = (column, filter) => {
 		try {
 			return JSON.parse(filter);
@@ -82,7 +66,7 @@ class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
 			trueLabel: { type: String, value: 'True' },
 			falseLabel: { type: String, value: 'False' },
 			flex: { type: String, value: '0' },
-			cellClass: { type: String, value: 'boolean-cell' }
+			cellClass: { type: String, value: 'boolean-cell' },
 		};
 	}
 
@@ -99,40 +83,65 @@ class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const
-			{ trueLabel, falseLabel } = column,
+		const { trueLabel, falseLabel } = column,
 			spinner = column.loading
-				? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
+				? html`<paper-spinner-lite
+						style="width: 20px; height: 20px;"
+						suffix
+						slot="suffix"
+						active
+					></paper-spinner-lite>`
 				: nothing;
 
 		return html`<cosmoz-autocomplete
-				no-label-float
-				.title=${ computeItemTooltip(column.title, item, column.valuePath, computeSource(trueLabel, falseLabel)) }
-				.source=${ computeSource(trueLabel, falseLabel) }
-				.textProperty=${ 'text' }
-				.value=${ computeItemValue(column, item, computeSource(trueLabel, falseLabel)) }
-				.onChange=${ onEditableChange(onItemChange) }
-				.limit=${ 1 }
-			>${ spinner }</cosmoz-autocomplete>`;
+			no-label-float
+			.title=${computeItemTooltip(
+				column.title,
+				item,
+				column.valuePath,
+				computeSource(trueLabel, falseLabel),
+			)}
+			.source=${computeSource(trueLabel, falseLabel)}
+			.textProperty=${'text'}
+			.value=${computeItemValue(
+				column,
+				item,
+				computeSource(trueLabel, falseLabel),
+			)}
+			.onChange=${onEditableChange(onItemChange)}
+			.limit=${1}
+			>${spinner}</cosmoz-autocomplete
+		>`;
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
 		const spinner = column.loading
-			? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
+			? html`<paper-spinner-lite
+					style="width: 20px; height: 20px;"
+					suffix
+					slot="suffix"
+					active
+				></paper-spinner-lite>`
 			: nothing;
 
 		return html`<cosmoz-autocomplete-ui
-			.label=${ column.title }
-			.title=${ computeItemTooltip(column.title, filter, column.valuePath, source) }
-			.source=${ source }
-			.textProperty=${ 'text' }
-			.value=${ computeValue(filter, source) }
-			.text=${ query }
-			.onChange=${ onChange(setState) }
-			.onFocus=${ onFocus(setState) }
-			.onText=${ onText(setState) }
-			.limit=${ 1 }
-		>${ spinner }</cosmoz-autocomplete-ui>`;
+			.label=${column.title}
+			.title=${computeItemTooltip(
+				column.title,
+				filter,
+				column.valuePath,
+				source,
+			)}
+			.source=${source}
+			.textProperty=${'text'}
+			.value=${computeValue(filter, source)}
+			.text=${query}
+			.onChange=${onChange(setState)}
+			.onFocus=${onFocus(setState)}
+			.onText=${onText(setState)}
+			.limit=${1}
+			>${spinner}</cosmoz-autocomplete-ui
+		>`;
 	}
 
 	computeSource({ trueLabel, falseLabel }) {
@@ -154,6 +163,16 @@ class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
 		return deserializeFilter(column, filter);
 	}
 }
-customElements.define('cosmoz-omnitable-column-boolean', OmnitableColumnBoolean);
-
-export { getString, computeItemValue, computeSource, toXlsxValue, onChange, deserializeFilter };
+customElements.define(
+	'cosmoz-omnitable-column-boolean',
+	OmnitableColumnBoolean,
+);
+
+export {
+	getString,
+	computeItemValue,
+	computeSource,
+	toXlsxValue,
+	onChange,
+	deserializeFilter,
+};

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

@@ -1,7 +1,5 @@
 import { translatable } from '@neovici/cosmoz-i18next';
-import {
-	mixin, Template
-} from '@neovici/cosmoz-utils';
+import { mixin, Template } from '@neovici/cosmoz-utils';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from '@polymer/polymer/lib/utils/html-tag';
@@ -12,51 +10,59 @@ window.Cosmoz = window.Cosmoz || {};
  * @customElement
  * @appliesMixin translatable
  */
-class OmnitableColumnListData extends translatable(mixin(Template, PolymerElement)) {
+class OmnitableColumnListData extends translatable(
+	mixin(Template, PolymerElement),
+) {
 	static get template() {
 		return html`
-		<style>
-			:host {
-				display: block;
-			}
-
-			:host a {
-				color: var(--primary-link-color, inherit);
-			}
-
-			[hidden] {
-				display: none;
-			}
-
-			ul {
-				list-style-type: none;
-				margin: 0.3em 0;
-				padding-left: 0;
-			}
-
-			li {
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-		</style>
-
-		<ul hidden$="[[ isEmpty(items) ]]">
-			<li>
-				<span>[[ _firstItem(items) ]]</span>
-			</li>
-			<li class="see-more" hidden$="[[_hideExpand(items, _expanded)]]">
-				<a href="#" on-tap="_toggleExpand">[[ _('and {0} more', _othersCount, t) ]]</a>
-			</li>
-			<template is="dom-repeat" items="[[ _otherItems(items, _expanded) ]]" as="item">
+			<style>
+				:host {
+					display: block;
+				}
+
+				:host a {
+					color: var(--primary-link-color, inherit);
+				}
+
+				[hidden] {
+					display: none;
+				}
+
+				ul {
+					list-style-type: none;
+					margin: 0.3em 0;
+					padding-left: 0;
+				}
+
+				li {
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+			</style>
+
+			<ul hidden$="[[ isEmpty(items) ]]">
 				<li>
-					<span class="item">[[ item ]]</span>
+					<span>[[ _firstItem(items) ]]</span>
+				</li>
+				<li class="see-more" hidden$="[[_hideExpand(items, _expanded)]]">
+					<a href="#" on-tap="_toggleExpand"
+						>[[ _('and {0} more', _othersCount, t) ]]</a
+					>
 				</li>
-			</template>
-			<li class="see-less" hidden$="[[ _hideCollapse(items, _expanded) ]]">
-				<a href="#" on-tap="_toggleExpand">[[ _('See less', t) ]]</a>
-			</li>
-		</ul>
-`;
+				<template
+					is="dom-repeat"
+					items="[[ _otherItems(items, _expanded) ]]"
+					as="item"
+				>
+					<li>
+						<span class="item">[[ item ]]</span>
+					</li>
+				</template>
+				<li class="see-less" hidden$="[[ _hideCollapse(items, _expanded) ]]">
+					<a href="#" on-tap="_toggleExpand">[[ _('See less', t) ]]</a>
+				</li>
+			</ul>
+		`;
 	}
 
 	static get is() {
@@ -71,22 +77,24 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
 
 			_expanded: {
 				type: Boolean,
-				value: false
+				value: false,
 			},
 
 			_othersCount: {
 				type: Number,
-				computed: '_computeOthersCount(items)'
-			}
+				computed: '_computeOthersCount(items)',
+			},
 		};
 	}
 
 	static get observers() {
-		return ['_itemsLengthChanged(items.length)']
+		return ['_itemsLengthChanged(items.length)'];
 	}
 
 	_itemsLengthChanged() {
-		requestAnimationFrame(() => this.dispatchEvent(new CustomEvent('expand', { bubbles: true })));
+		requestAnimationFrame(() =>
+			this.dispatchEvent(new CustomEvent('expand', { bubbles: true })),
+		);
 	}
 
 	_firstItem(items) {

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

@@ -1,12 +1,16 @@
 import '@neovici/cosmoz-autocomplete';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
-import {
-	html, nothing
-} from 'lit-html';
+import { html, nothing } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { getTexts, listColumnMixin, onChange, onFocus, onText } from './cosmoz-omnitable-column-list-mixin';
+import {
+	getTexts,
+	listColumnMixin,
+	onChange,
+	onFocus,
+	onText,
+} from './cosmoz-omnitable-column-list-mixin';
 
 /**
  * @polymer
@@ -14,9 +18,13 @@ import { getTexts, listColumnMixin, onChange, onFocus, onText } from './cosmoz-o
  * @appliesMixin listColumnMixin
  * @appliesMixin columnMixin
  */
-class OmnitableColumnListHorizontal extends listColumnMixin(columnMixin(PolymerElement)) {
+class OmnitableColumnListHorizontal extends listColumnMixin(
+	columnMixin(PolymerElement),
+) {
 	renderCell({ valuePath, textProperty }, { item }) {
-		const list = getTexts(item, valuePath, textProperty).map(item => html`<li>${ item }</li>`);
+		const list = getTexts(item, valuePath, textProperty).map(
+			(item) => html`<li>${item}</li>`,
+		);
 
 		return html`
 			<style>
@@ -29,13 +37,15 @@ class OmnitableColumnListHorizontal extends listColumnMixin(columnMixin(PolymerE
 					display: inline;
 				}
 				ul li:after {
-					content: ", ";
+					content: ', ';
 				}
 				ul li:last-child:after {
-					content: "";
+					content: '';
 				}
 			</style>
-			<ul>${ list }</ul>
+			<ul>
+				${list}
+			</ul>
 		`;
 	}
 
@@ -44,24 +54,30 @@ class OmnitableColumnListHorizontal extends listColumnMixin(columnMixin(PolymerE
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
-		const
-			spinner = column.loading
-				? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
-				: nothing;
+		const spinner = column.loading
+			? html`<paper-spinner-lite
+					style="width: 20px; height: 20px;"
+					suffix
+					slot="suffix"
+					active
+				></paper-spinner-lite>`
+			: nothing;
 		return html`<cosmoz-autocomplete-ui
-			class="external-values-${ column.externalValues }"
-			.label=${ column.title }
-			.source=${ source }
-			.textProperty=${ column.textProperty }
-			.value=${ filter }
-			.text=${ query }
-			.onChange=${ onChange(setState) }
-			.onFocus=${ onFocus(setState) }
-			.onText=${ onText(setState) }
-		>${ spinner }</cosmoz-autocomplete-ui>
-	`;
+			class="external-values-${column.externalValues}"
+			.label=${column.title}
+			.source=${source}
+			.textProperty=${column.textProperty}
+			.value=${filter}
+			.text=${query}
+			.onChange=${onChange(setState)}
+			.onFocus=${onFocus(setState)}
+			.onText=${onText(setState)}
+			>${spinner}</cosmoz-autocomplete-ui
+		> `;
 	}
-
 }
 
-customElements.define('cosmoz-omnitable-column-list-horizontal', OmnitableColumnListHorizontal);
+customElements.define(
+	'cosmoz-omnitable-column-list-horizontal',
+	OmnitableColumnListHorizontal,
+);

package/cosmoz-omnitable-group-row.js

@@ -6,7 +6,15 @@ const GroupRow = ({ column, item, selected, folded, group }) => {
 		return nothing;
 	}
 
-	return (column.renderGroup ?? column.renderCell)(column, { item, selected, folded, group });
+	return (column.renderGroup ?? column.renderCell)(column, {
+		item,
+		selected,
+		folded,
+		group,
+	});
 };
 
-customElements.define('cosmoz-omnitable-group-row', component(GroupRow, { useShadowDOM: false }));
+customElements.define(
+	'cosmoz-omnitable-group-row',
+	component(GroupRow, { useShadowDOM: false }),
+);

package/cosmoz-omnitable-item-expand-line.js

@@ -35,5 +35,5 @@ const ItemExpandLine = ({ column }) => html`
 
 customElements.define(
 	'cosmoz-omnitable-item-expand-line',
-	component(ItemExpandLine, {styleSheets: [sheet(style)]}),
+	component(ItemExpandLine, { styleSheets: [sheet(style)] }),
 );

package/grouped-list/cosmoz-grouped-list-row.js

@@ -37,5 +37,5 @@ customElements.define(
 
 			render(this._renderFn(this._item, this._index), this);
 		}
-	}
+	},
 );

package/grouped-list/use-cosmoz-grouped-list.js

@@ -30,7 +30,7 @@ const styles = {
 			// suggested fix: separate signal for item collapse and group fold
 			flatData = useMemo(
 				() => prepareData(data, displayEmptyGroups, state),
-				[data, displayEmptyGroups, signal]
+				[data, displayEmptyGroups, signal],
 			),
 			{
 				selectedItems,
@@ -60,21 +60,21 @@ const styles = {
 								toggleSelect: (selected) =>
 									toggleSelect(
 										item,
-										typeof selected === 'boolean' ? selected : undefined
+										typeof selected === 'boolean' ? selected : undefined,
 									),
 								toggleFold: () => toggleFold(item),
-						  })
+							})
 						: renderItem(item, index, {
 								selected: selectedItems.includes(item),
 								expanded: isExpanded(item, state),
 								toggleSelect: (selected) =>
 									toggleSelect(
 										item,
-										typeof selected === 'boolean' ? selected : undefined
+										typeof selected === 'boolean' ? selected : undefined,
 									),
 								toggleCollapse: () => toggleCollapse(item),
-						  }),
-				[renderItem, renderGroup, selectedItems, toggleSelect, signal]
+							}),
+				[renderItem, renderGroup, selectedItems, toggleSelect, signal],
 			);
 
 		useLayoutEffect(() => Object.assign(host.style, styles.host), []);
@@ -105,11 +105,12 @@ const styles = {
 	renderCosmozGroupedList = ({ renderRow, flatData }) =>
 		virtualize({
 			items: flatData,
-			renderItem: (item, index) => html`<cosmoz-grouped-list-row
-				.item=${item}
-				.index=${index}
-				.renderFn=${renderRow}
-			></cosmoz-grouped-list-row>`,
+			renderItem: (item, index) =>
+				html`<cosmoz-grouped-list-row
+					.item=${item}
+					.index=${index}
+					.renderFn=${renderRow}
+				></cosmoz-grouped-list-row>`,
 		});
 
 export { renderCosmozGroupedList, useCosmozGroupedList };

package/grouped-list/use-selected-items.js

@@ -6,7 +6,7 @@ export const useSelectedItems = ({
 	initial,
 	compareItemsFn,
 	data,
-	flatData
+	flatData,
 }) => {
 	const [selectedItems, setSelectedItems] = useState(initial),
 		[lastSelection, setLastSelection] = useState(),
@@ -16,8 +16,8 @@ export const useSelectedItems = ({
 		 * @returns {boolean} Whether item is selected.
 		 */
 		isItemSelected = useCallback(
-			item => selectedItems.includes(item),
-			[selectedItems]
+			(item) => selectedItems.includes(item),
+			[selectedItems],
 		),
 		/**
 		 * Check if group is selected.
@@ -25,8 +25,8 @@ export const useSelectedItems = ({
 		 * @returns {boolean} Whether group is selected.
 		 */
 		isGroupSelected = useCallback(
-			group => group?.items?.every(isItemSelected),
-			[isItemSelected]
+			(group) => group?.items?.every(isItemSelected),
+			[isItemSelected],
 		),
 		/**
 		 * Check if item.group is selected.
@@ -34,19 +34,19 @@ export const useSelectedItems = ({
 		 * @returns {boolean} Whether item is selected.
 		 */
 		isSelected = useCallback(
-			item => isItemSelected(item) || isGroupSelected(item),
-			[isItemSelected, isGroupSelected]
+			(item) => isItemSelected(item) || isGroupSelected(item),
+			[isItemSelected, isGroupSelected],
 		),
 		/**
 		 * Add an item/group to the list of selected items.
 		 * @param {object} item Item to select.
 		 * @returns {void}
 		 */
-		select = useCallback(item => {
+		select = useCallback((item) => {
 			const items = item.items ?? [item];
-			setSelectedItems(selection => [
+			setSelectedItems((selection) => [
 				...selection,
-				...items.filter(i => !selection.includes(i))
+				...items.filter((i) => !selection.includes(i)),
 			]);
 			setLastSelection(item);
 		}, []),
@@ -55,14 +55,14 @@ export const useSelectedItems = ({
 		 * @param {object} item Item to select.
 		 * @returns {void}
 		 */
-		deselect = useCallback(item => {
+		deselect = useCallback((item) => {
 			const items = item.items ?? [item];
-			setSelectedItems(selection =>
-				selection.filter(i => !items.includes(i))
+			setSelectedItems((selection) =>
+				selection.filter((i) => !items.includes(i)),
 			);
 			setLastSelection(item);
 		}, []),
-		selectOnly = useCallback(item => {
+		selectOnly = useCallback((item) => {
 			setSelectedItems(item.items?.slice() || [item]);
 			setLastSelection(item);
 		}, []),
@@ -71,7 +71,7 @@ export const useSelectedItems = ({
 		 * @returns {void}
 		 */
 		selectAll = useCallback(() => {
-			setSelectedItems(data.flatMap(item => item.items || item));
+			setSelectedItems(data.flatMap((item) => item.items || item));
 			setLastSelection(undefined);
 		}, [data]),
 		/**
@@ -91,12 +91,12 @@ export const useSelectedItems = ({
 		toggleSelect = useCallback(
 			(item, selected = !isSelected(item)) =>
 				selected ? select(item) : deselect(item),
-			[isSelected]
+			[isSelected],
 		),
 		toggleSelectTo = useCallback(
 			(item, selected) => {
 				const last = lastSelection
-					? flatData.findIndex(i => compareItemsFn(i, lastSelection))
+					? flatData.findIndex((i) => compareItemsFn(i, lastSelection))
 					: -1;
 				if (last < 0) {
 					return toggleSelect(item, selected);
@@ -110,20 +110,20 @@ export const useSelectedItems = ({
 				});
 				setLastSelection(item);
 			},
-			[flatData, compareItemsFn, toggleSelect]
+			[flatData, compareItemsFn, toggleSelect],
 		);
 
 	// keep selected items across data updates
 	useEffect(
 		() =>
-			setSelectedItems(selectedItems =>
+			setSelectedItems((selectedItems) =>
 				selectedItems.length > 0
-					? flatData.filter(i =>
-						selectedItems.find(item => compareItemsFn(i, item))
-					)
-					: selectedItems
+					? flatData.filter((i) =>
+							selectedItems.find((item) => compareItemsFn(i, item)),
+						)
+					: selectedItems,
 			),
-		[flatData]
+		[flatData],
 	);
 	return {
 		selectedItems,
@@ -136,6 +136,6 @@ export const useSelectedItems = ({
 		selectAll,
 		deselectAll,
 		toggleSelect,
-		toggleSelectTo
+		toggleSelectTo,
 	};
 };