@neovici/cosmoz-omnitable 14.14.3 → 14.15.1

package/cosmoz-omnitable-column-number.js

@@ -1,157 +0,0 @@
-import '@neovici/cosmoz-input';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import './ui-helpers/cosmoz-clear-button';
-
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from 'lit-html';
-
-import { columnMixin } from './cosmoz-omnitable-column-mixin';
-
-import './lib/cosmoz-omnitable-number-range-input';
-import { defaultComputeSource } from './lib/utils-data';
-import {
-	applySingleFilter,
-	getComparableValue,
-	getInputString,
-	getString,
-	toHashString,
-	toNumber,
-} from './lib/utils-number';
-import { get } from '@polymer/polymer/lib/utils/path';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumnNumber extends columnMixin(PolymerElement) {
-	static get properties() {
-		return {
-			min: { type: Number, value: null, notify: true },
-			max: { type: Number, value: null, notify: true },
-			limits: { type: Function },
-			locale: { type: String, value: null, notify: true },
-			autoupdate: { type: Boolean, value: false, notify: true },
-			cellClass: { type: String, value: 'number-cell align-right' },
-			width: { type: String, value: '30px' },
-			minWidth: { type: String, value: '30px' },
-			headerCellClass: { type: String, value: 'number-header-cell' },
-			maximumFractionDigits: { type: Number, value: null },
-			minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
-		};
-	}
-
-	getConfig(column) {
-		return { limits: column.limits };
-	}
-
-	getFilterFn(column, filter) {
-		const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
-			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return applySingleFilter(column, filter);
-	}
-
-	getString(column, item) {
-		return getString(column, item);
-	}
-
-	toXlsxValue({ valuePath }, item) {
-		return get(item, valuePath);
-	}
-
-	cellTitleFn(column, item) {
-		return getString(column, item);
-	}
-
-	getComparableValue(column, item) {
-		return getComparableValue(column, item);
-	}
-
-	serializeFilter(column, filter) {
-		if (filter == null) {
-			return;
-		}
-		const min = toNumber(filter.min),
-			max = toNumber(filter.max);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return toHashString(min) + '~' + toHashString(max);
-	}
-
-	deserializeFilter(column, filter) {
-		if (filter == null || filter === '') {
-			return null;
-		}
-		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
-
-		if (!Array.isArray(matches)) {
-			return null;
-		}
-
-		return {
-			min: toNumber(matches[1]),
-			max: toNumber(matches[2]),
-		};
-	}
-
-	renderCell(column, { item }) {
-		return html`<div class="omnitable-cell-number">
-			${getString(column, item)}
-		</div>`;
-	}
-
-	renderEditCell(column, { item }, onItemChange) {
-		const onChange = (event) => onItemChange(event.target.value);
-
-		return html`<cosmoz-input
-			no-label-float
-			type="number"
-			@change=${onChange}
-			.value=${getInputString(column, item)}
-		></cosmoz-input>`;
-	}
-
-	renderHeader(
-		{
-			title,
-			min,
-			max,
-			limits,
-			locale,
-			maximumFractionDigits,
-			minimumFractionDigits,
-			autoupdate,
-		},
-		{ filter },
-		setState,
-		source,
-	) {
-		return html`<cosmoz-omnitable-number-range-input
-			.title=${title}
-			.filter=${filter}
-			.values=${source}
-			.min=${min}
-			.max=${max}
-			.limits=${limits}
-			.locale=${locale}
-			.maximumFractionDigits=${maximumFractionDigits}
-			.minimumFractionDigsits=${minimumFractionDigits}
-			.autoupdate=${autoupdate}
-			@filter-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, filter: value }))}
-			@header-focused-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, headerFocused: value }))}
-		></cosmoz-omnitable-number-range-input>`;
-	}
-
-	computeSource(column, data) {
-		return defaultComputeSource(column, data);
-	}
-}
-customElements.define('cosmoz-omnitable-column-number', OmnitableColumnNumber);

package/cosmoz-omnitable-column-time.js

@@ -1,137 +0,0 @@
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@neovici/cosmoz-input';
-
-import './ui-helpers/cosmoz-clear-button';
-
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from 'lit-html';
-
-import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import {
-	getComparableValue,
-	getString,
-	toXlsxValue,
-	applySingleFilter,
-	toDate,
-	toHashString,
-	fromHashString,
-} from './lib/utils-time';
-import './lib/cosmoz-omnitable-time-range-input';
-import { defaultComputeSource } from './lib/utils-data';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumnTime extends columnMixin(PolymerElement) {
-	static get properties() {
-		return {
-			min: { type: Number, value: null, notify: true },
-			max: { type: Number, value: null, notify: true },
-			locale: { type: String, value: null, notify: true },
-			headerCellClass: { type: String, value: 'time-header-cell' },
-			minWidth: { type: String, value: '63px' },
-			width: { type: String, value: '210px' },
-			flex: { type: String, value: '0' },
-			/*
-			 * Specifies the value granularity of the time input's value in the filter.
-			 * 1 => full seconds
-			 * 0.1 => milliseconds
-			 */
-			filterStep: { type: String, value: '1' },
-		};
-	}
-
-	getFilterFn(column, filter) {
-		const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
-			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return applySingleFilter(column, filter);
-	}
-
-	getString(column, item) {
-		return getString(column, item);
-	}
-
-	toXlsxValue(column, item) {
-		return toXlsxValue(column, item);
-	}
-
-	cellTitleFn(column, item) {
-		return getString(column, item);
-	}
-
-	getComparableValue(column, item) {
-		return getComparableValue(column, item);
-	}
-
-	serializeFilter(column, filter) {
-		if (filter == null) {
-			return;
-		}
-		const min = toDate(filter.min),
-			max = toDate(filter.max);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return toHashString(min) + '~' + toHashString(max);
-	}
-
-	deserializeFilter(column, filter) {
-		if (filter == null || filter === '') {
-			return null;
-		}
-		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
-
-		if (!Array.isArray(matches)) {
-			return null;
-		}
-
-		return { min: fromHashString(matches[1]), max: fromHashString(matches[2]) };
-	}
-
-	renderCell(column, { item }) {
-		return getString(column, item);
-	}
-
-	renderEditCell(column, { item }, onItemChange) {
-		const onChange = (event) => onItemChange(event.target.value);
-		return html`<cosmoz-input
-			no-label-float
-			type="text"
-			@change=${onChange}
-			.value=${getString(column, item)}
-		></cosmoz-input>`;
-	}
-
-	renderHeader(
-		{ title, min, max, locale, filterStep },
-		{ filter },
-		setState,
-		source,
-	) {
-		return html`<cosmoz-omnitable-time-range-input
-			.title=${title}
-			.filter=${filter}
-			.values=${source}
-			.min=${min}
-			.max=${max}
-			.locale=${locale}
-			.filterStep=${filterStep}
-			@filter-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, filter: value }))}
-			@header-focused-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, headerFocused: value }))}
-		></cosmoz-omnitable-time-range-input>`;
-	}
-
-	computeSource(column, data) {
-		return defaultComputeSource(column, data);
-	}
-}
-customElements.define('cosmoz-omnitable-column-time', OmnitableColumnTime);

package/cosmoz-omnitable-column.js

@@ -1,99 +0,0 @@
-import '@neovici/cosmoz-input';
-import './ui-helpers/cosmoz-clear-button';
-
-import {
-	applySingleFilter,
-	columnMixin,
-	getString,
-} from './cosmoz-omnitable-column-mixin';
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from 'lit-html';
-
-const onChange = (setState) => (event) =>
-		setState((state) => {
-			// skip the event emitted during cosmoz-input initialization
-			if (state.inputValue === undefined && event.target.value === '') {
-				return state;
-			}
-
-			clearTimeout(state.t);
-			const t = setTimeout(
-				() => setState((state) => ({ ...state, filter: state.inputValue })),
-				1000,
-			);
-			return { ...state, inputValue: event.target.value, t };
-		}),
-	onBlur = (setState) => () =>
-		setState((state) => ({ ...state, filter: state.inputValue })),
-	onKeyDown = (setState) => (event) => {
-		if (event.keyCode === 13) {
-			event.preventDefault();
-			setState((state) => ({ ...state, filter: state.inputValue }));
-		}
-	},
-	onFocus = (setState) => (event) =>
-		setState((state) => ({ ...state, headerFocused: event.detail.value })),
-	resetFilter = (setState) => () =>
-		setState((state) => ({ ...state, filter: null, inputValue: null })),
-	hasFilter = (filter) => filter != null && filter !== '';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumn extends columnMixin(PolymerElement) {
-	static get properties() {
-		return {
-			minWidth: { type: String, value: '55px' },
-			editMinWidth: { type: String, value: '55px' },
-			inputValue: { type: Object, notify: true },
-		};
-	}
-
-	getFilterFn(column, filter) {
-		if (filter == null || filter === '') {
-			return;
-		}
-		return applySingleFilter(column, filter);
-	}
-
-	renderCell(column, { item }) {
-		return html`<span class="default-column">${getString(column, item)}</span>`;
-	}
-
-	renderEditCell(column, { item }, onItemChange) {
-		const onChange = (event) => onItemChange(event.target.value);
-		return html`<cosmoz-input
-			no-label-float
-			type="text"
-			@change=${onChange}
-			.value=${getString(column, item)}
-		></cosmoz-input>`;
-	}
-
-	renderHeader(column, { filter, inputValue, headerFocused }, setState) {
-		return html`<cosmoz-input
-			label=${column.title}
-			.value=${inputValue ?? filter}
-			@value-changed=${onChange(setState)}
-			focused=${headerFocused}
-			@focused-changed=${onFocus(setState)}
-			@keydown=${onKeyDown(setState)}
-			@blur=${onBlur(setState)}
-		>
-			<cosmoz-clear-button
-				suffix
-				slot="suffix"
-				?visible=${hasFilter(filter)}
-				light
-				@click=${resetFilter(setState)}
-			></cosmoz-clear-button>
-		</cosmoz-input>`;
-	}
-
-	legacyFilterToState(filter) {
-		return { filter, inputValue: filter };
-	}
-}
-customElements.define('cosmoz-omnitable-column', OmnitableColumn);

package/cosmoz-omnitable-group-row.js

@@ -1,20 +0,0 @@
-import { component } from '@pionjs/pion';
-import { nothing } from 'lit-html';
-
-const GroupRow = ({ column, item, selected, folded, group }) => {
-	if (!column) {
-		return nothing;
-	}
-
-	return (column.renderGroup ?? column.renderCell)(column, {
-		item,
-		selected,
-		folded,
-		group,
-	});
-};
-
-customElements.define(
-	'cosmoz-omnitable-group-row',
-	component(GroupRow, { useShadowDOM: false }),
-);

package/cosmoz-omnitable-item-row.js

@@ -1,38 +0,0 @@
-import { component, html } from '@pionjs/pion';
-import { repeat } from 'lit-html/directives/repeat.js';
-
-const renderCell = (column, data, onItemChange) =>
-	column.editable
-		? column.renderEditCell(column, data, onItemChange(column, data.item))
-		: column.renderCell(column, data);
-
-const ItemRow = ({
-	columns,
-	groupOnColumn,
-	item,
-	index,
-	selected,
-	expanded,
-	onItemChange,
-}) =>
-	repeat(
-		columns,
-		(column) => column.name,
-		(column) => {
-			return html`<div
-				class="cell itemRow-cell ${column.cellClass ?? ''}"
-				part="cell itemRow-cell cell-${column.name} itemRow-cell-${column.name}"
-				?hidden="${column === groupOnColumn}"
-				?editable="${column.editable}"
-				title="${column.cellTitleFn(column, item)}"
-				name="${column.name}"
-			>
-				${renderCell(column, { item, index, selected, expanded }, onItemChange)}
-			</div>`;
-		},
-	);
-
-customElements.define(
-	'cosmoz-omnitable-item-row',
-	component(ItemRow, { useShadowDOM: false }),
-);

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

@@ -1,41 +0,0 @@
-import { render } from 'lit-html';
-
-customElements.define(
-	'cosmoz-grouped-list-row',
-	class Element extends HTMLElement {
-		get item() {
-			return this._item;
-		}
-
-		set item(item) {
-			this._item = item;
-			this._render();
-		}
-
-		get index() {
-			return this._index;
-		}
-
-		set index(index) {
-			this._index = index;
-			this._render();
-		}
-
-		get renderFn() {
-			return this._renderFn;
-		}
-
-		set renderFn(renderFn) {
-			this._renderFn = renderFn;
-			this._render();
-		}
-
-		_render() {
-			if (this._item == null || this._index == null || this._renderFn == null) {
-				return;
-			}
-
-			render(this._renderFn(this._item, this._index), this);
-		}
-	},
-);

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

@@ -1,13 +0,0 @@
-import {
-	renderCosmozGroupedList,
-	useCosmozGroupedList,
-} from './use-cosmoz-grouped-list.js';
-import { component } from '@pionjs/pion';
-
-const CosmozGroupedList = (host) =>
-	renderCosmozGroupedList(useCosmozGroupedList(host));
-
-customElements.define(
-	'cosmoz-grouped-list',
-	component(CosmozGroupedList, { useShadowDOM: false }),
-);

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

@@ -1,32 +0,0 @@
-import { useCallback } from '@pionjs/pion';
-import { useWeakState } from './use-weak-state';
-import { isGroup } from './utils';
-
-export const useCollapsibleItems = () => {
-	const { setItemState, state, signal } = useWeakState(),
-		toggleFold = useCallback((item, folded) => {
-			if (!isGroup(item)) {
-				return;
-			}
-
-			setItemState(item, (state) => ({
-				folded: folded !== undefined ? folded : !state.folded,
-			}));
-		}, []),
-		toggleCollapse = useCallback((item, collapsed) => {
-			if (isGroup(item)) {
-				return;
-			}
-
-			setItemState(item, (state) => ({
-				expanded: collapsed !== undefined ? !collapsed : !state.expanded,
-			}));
-		}, []);
-
-	return {
-		state,
-		signal,
-		toggleFold,
-		toggleCollapse,
-	};
-};

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

@@ -1,102 +0,0 @@
-import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
-import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
-import { useCallback, useLayoutEffect, useMemo } from '@pionjs/pion';
-import { html } from 'lit-html';
-import './cosmoz-grouped-list-row';
-import { useCollapsibleItems } from './use-collapsible-items';
-import { useSelectedItems } from './use-selected-items';
-import { byReference, isExpanded, isFolded, prepareData } from './utils';
-import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
-
-const styles = {
-		host: { position: 'relative', display: 'flex', flexDirection: 'column' },
-	},
-	useCosmozGroupedList = (host) => {
-		const {
-				data,
-				renderItem,
-				renderGroup,
-				displayEmptyGroups,
-				compareItemsFn = byReference,
-			} = host,
-			{ toggleFold, toggleCollapse, state, signal } = useCollapsibleItems(),
-			// TODO: state changes trigger recalculation, which is slow (200ms with 10k items)
-			// it only makes sense to do it when a group is folded
-			// suggested fix: separate signal for item collapse and group fold
-			flatData = useMemo(
-				() => prepareData(data, displayEmptyGroups, state),
-				[data, displayEmptyGroups, signal],
-			),
-			{
-				selectedItems,
-				isItemSelected,
-				isGroupSelected,
-				isSelected,
-				select,
-				deselect,
-				selectOnly,
-				selectAll,
-				deselectAll,
-				toggleSelect,
-				toggleSelectTo,
-			} = useSelectedItems({ initial: [], compareItemsFn, data, flatData }),
-			renderRow = useCallback(
-				(item, index) =>
-					Array.isArray(item.items)
-						? renderGroup(item, index, {
-								selected: isGroupSelected(item, selectedItems),
-								folded: isFolded(item, state),
-								toggleSelect: (selected) =>
-									toggleSelect(
-										item,
-										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,
-									),
-								toggleCollapse: () => toggleCollapse(item),
-							}),
-				[renderItem, renderGroup, selectedItems, toggleSelect, signal],
-			);
-
-		useLayoutEffect(() => Object.assign(host.style, styles.host), []);
-
-		useNotifyProperty('selectedItems', selectedItems);
-		const api = {
-			toggleFold,
-			toggleCollapse,
-			isItemSelected,
-			isGroupSelected,
-			isSelected,
-			select,
-			deselect,
-			selectOnly,
-			selectAll,
-			deselectAll,
-			toggleSelect,
-			toggleSelectTo,
-		};
-
-		useImperativeApi(api, Object.values(api));
-
-		return { renderRow, flatData };
-	},
-	renderCosmozGroupedList = ({ renderRow, flatData }) =>
-		virtualize({
-			items: flatData,
-			renderItem: (item, index) =>
-				html`<cosmoz-grouped-list-row
-					.item=${item}
-					.index=${index}
-					.renderFn=${renderRow}
-				></cosmoz-grouped-list-row>`,
-		});
-
-export { renderCosmozGroupedList, useCosmozGroupedList };