@neovici/cosmoz-omnitable 14.12.1 → 14.12.3

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-return-assign */
 import '@neovici/cosmoz-input';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import './ui-helpers/cosmoz-clear-button';
@@ -96,10 +95,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 			return null;
 		}
 
-		return {
-			min: fromHashString(matches[1]),
-			max: fromHashString(matches[2]),
-		};
+		return { min: fromHashString(matches[1]), max: fromHashString(matches[2]) };
 	}
 
 	renderCell(column, { item }) {

package/cosmoz-omnitable-column-boolean.js

@@ -4,69 +4,53 @@ 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);
-		} catch (e) {
+		} catch {
 			return null;
 		}
 	};
@@ -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-date.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-return-assign */
 import { html } from 'lit-html';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
@@ -86,10 +85,7 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 			return null;
 		}
 
-		return {
-			min: toDate(matches[1]),
-			max: toDate(matches[2]),
-		};
+		return { min: toDate(matches[1]), max: toDate(matches[2]) };
 	}
 
 	renderCell(column, { item }) {

package/cosmoz-omnitable-column-datetime.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-return-assign */
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@neovici/cosmoz-datetime-input';
 import './ui-helpers/cosmoz-clear-button';
@@ -98,10 +97,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 			return null;
 		}
 
-		return {
-			min: fromHashString(matches[1]),
-			max: fromHashString(matches[2]),
-		};
+		return { min: fromHashString(matches[1]), max: fromHashString(matches[2]) };
 	}
 
 	renderCell(column, { item }) {
@@ -119,7 +115,6 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 		></cosmoz-input>`;
 	}
 
-	// eslint-disable-next-line max-lines-per-function
 	renderHeader(
 		{ title, min, max, limits, locale, filterStep },
 		{ filter },

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-column-mixin.js

@@ -18,7 +18,6 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
 		},
 	serializeFilter = (column, filter) =>
 		filter === '' || filter == null ? null : filter,
-	// eslint-disable-next-line max-lines-per-function
 	columnMixin = (base) =>
 		class extends base {
 			static get properties() {

package/cosmoz-omnitable-column-time.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-return-assign */
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@neovici/cosmoz-input';
 
@@ -93,10 +92,7 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 			return null;
 		}
 
-		return {
-			min: fromHashString(matches[1]),
-			max: fromHashString(matches[2]),
-		};
+		return { min: fromHashString(matches[1]), max: fromHashString(matches[2]) };
 	}
 
 	renderCell(column, { item }) {

package/cosmoz-omnitable-column.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-return-assign */
 import '@neovici/cosmoz-input';
 import './ui-helpers/cosmoz-clear-button';
 

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-header-row.js

@@ -5,61 +5,50 @@ import { render } from './lib/settings/cosmoz-omnitable-sort-group';
 import { when } from 'lit-html/directives/when.js';
 import { SortAndGroupContext } from './lib/use-sort-and-group-options';
 
-const /* eslint-disable-next-line max-lines-per-function */
-	renderHeaderRow = ({
-		data,
+const renderHeaderRow = ({
+	data,
+	columns,
+	groupOnColumn,
+	filters,
+	setFilterState,
+	sortAndGroup: {
+		sortOn: on,
+		setSortOn: setOn,
+		descending,
+		setDescending,
+	} = {},
+}) =>
+	repeat(
 		columns,
-		groupOnColumn,
-		filters,
-		setFilterState,
-		sortAndGroup: {
-			sortOn: on,
-			setSortOn: setOn,
-			descending,
-			setDescending,
-		} = {},
-	}) =>
-		repeat(
-			columns,
-			(column) => column.name,
-			(column) => [
-				html`<div
-					class="cell ${column.headerCellClass} header-cell"
-					part="cell header-cell cell-${column.name} header-cell-${column.name}"
-					?hidden="${column === groupOnColumn}"
-					title="${column.title}"
-					name="${column.name}"
-				>
-					${column.renderHeader(
-						column,
-						filters[column.name] ?? {},
-						(state) => setFilterState(column.name, state),
-						column.source(column, data),
-					)}
-					${render({
-						on,
-						setOn,
-						descending,
-						setDescending,
-						column,
-					})}
-				</div>`,
-				html`<cosmoz-omnitable-resize-nub
-					.column="${column}"
-					name="${column.name}"
-				></cosmoz-omnitable-resize-nub>`,
-			],
-		);
+		(column) => column.name,
+		(column) => [
+			html`<div
+				class="cell ${column.headerCellClass} header-cell"
+				part="cell header-cell cell-${column.name} header-cell-${column.name}"
+				?hidden="${column === groupOnColumn}"
+				title="${column.title}"
+				name="${column.name}"
+			>
+				${column.renderHeader(
+					column,
+					filters[column.name] ?? {},
+					(state) => setFilterState(column.name, state),
+					column.source(column, data),
+				)}
+				${render({ on, setOn, descending, setDescending, column })}
+			</div>`,
+			html`<cosmoz-omnitable-resize-nub
+				.column="${column}"
+				name="${column.name}"
+			></cosmoz-omnitable-resize-nub>`,
+		],
+	);
 
 const HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => {
 	const sortAndGroup = useContext(SortAndGroupContext);
 	return html`
 		${when(columns, (columns) =>
-			renderHeaderRow({
-				columns,
-				sortAndGroup,
-				...thru,
-			}),
+			renderHeaderRow({ columns, sortAndGroup, ...thru }),
 		)}
 		${when(
 			!hideSelectAll,

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)] }),
 );