@neovici/cosmoz-omnitable 8.7.3 → 8.9.0

package/cosmoz-omnitable-header-row.js

@@ -37,13 +37,15 @@ const /* eslint-disable-next-line max-lines-per-function */
 				></cosmoz-omnitable-resize-nub>`,
 			]
 		),
-	HeaderRow = ({ content, columns, ...thru }) => [
+	HeaderRow = ({ columns, settingsConfig, ...thru }) => [
 		columns &&
 			renderHeaderRow({
 				columns,
 				...thru,
 			}),
-		content,
+		html`<cosmoz-omnitable-settings
+			.config=${settingsConfig}
+		></cosmoz-omnitable-settings>`,
 	];
 
 customElements.define(

package/cosmoz-omnitable.js

@@ -24,7 +24,6 @@ import { translatable } from '@neovici/cosmoz-i18next';
 import { mixin, hauntedPolymer } from '@neovici/cosmoz-utils';
 import { isEmpty } from '@neovici/cosmoz-utils/lib/template.js';
 import { useOmnitable } from './lib/use-omnitable';
-import './lib/cosmoz-omnitable-settings';
 import { saveAsCsvAction } from './lib/save-as-csv-action';
 import { saveAsXlsxAction } from './lib/save-as-xlsx-action';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
@@ -54,8 +53,8 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 					columns="[[ normalizedColumns ]]"
 					filters="[[ filters ]]"
 					group-on-column="[[ groupOnColumn ]]"
-					content="[[ _renderSettings(normalizedSettings, collapsedColumns, settingsId, hasChangedSettings, hasHiddenFilter, filters) ]]"
 					set-filter-state="[[ setFilterState ]]"
+					settings-config="[[ settingsConfig ]]"
 				></cosmoz-omnitable-header-row>
 			</div>
 			</sort-and-group-provider>
@@ -547,21 +546,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			value && close(); /* eslint-disable-line no-unused-expressions */
 		};
 	}
-
-	// eslint-disable-next-line max-params
-	_renderSettings(normalizedSettings, collapsed, settingsId, hasChangedSettings, hasHiddenFilter, filters) {
-		return litHtml`<cosmoz-omnitable-settings
-			.settings=${ normalizedSettings }
-			.onSettings=${ this.setSettings }
-			.collapsed=${ collapsed?.map(c => c.name) }
-			.settingsId=${ settingsId }
-			.hasChanges=${ hasChangedSettings }
-			.onSave=${ this.onSettingsSave }
-			.onReset=${ this.onSettingsReset }
-			.badge=${ hasHiddenFilter }
-			.filters=${ filters }
-		>`;
-	}
 }
 customElements.define('cosmoz-omnitable', Omnitable);
 

package/lib/cosmoz-omnitable-sort.js

@@ -1,16 +1,6 @@
 import { html } from 'haunted';
 import { ifDefined } from 'lit-html/directives/if-defined';
-
-const sortIcon = html`<svg
-	width="8"
-	height="6"
-	viewBox="0 0 8 6"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M0.5,0.5h7c0.4,0,0.6,0.4,0.4,0.7L4.4,5.3c-0.2,0.2-0.5,0.2-0.7,0L0.1,1.2
-		C-0.1,0.9,0.1,0.5,0.5,0.5z" />
-</svg> `;
+import { triangle } from './icons';
 
 export default (column) => html`
 	<sort-and-group-consumer
@@ -40,7 +30,7 @@ export default (column) => html`
 				}
 			}}
 		>
-			${sortIcon}
+			${triangle}
 		</button>`}
 	>
 	</sort-and-group-consumer>

package/lib/icons.js

@@ -0,0 +1,66 @@
+/* eslint-disable import/group-exports */
+import { html } from 'lit-html';
+
+export const close = html`<svg
+	width="10"
+	height="9"
+	viewBox="0 0 10 9"
+	stroke="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<line
+		x1="8.53033"
+		y1="0.53033"
+		x2="1.53033"
+		y2="7.53033"
+		stroke-width="1.5"
+	/>
+	<line
+		x1="8.46967"
+		y1="7.53033"
+		x2="1.46967"
+		y2="0.530331"
+		stroke-width="1.5"
+	/>
+</svg>`;
+
+export const pull = html`
+	<svg
+		width="16"
+		height="6"
+		viewBox="0 0 16 6"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="16" height="2" />
+		<rect y="4" width="16" height="2" />
+	</svg>
+`;
+
+export const arrow = html` <svg
+	width="12"
+	height="7"
+	viewBox="0 0 12 7"
+	fill="none"
+	stroke="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M0.999998 0.999999L6 6L11 1"
+		stroke-width="1.5"
+		stroke-linejoin="round"
+	/>
+</svg>`;
+
+export const triangle = html`<svg
+	width="8"
+	height="6"
+	viewBox="0 0 8 6"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M0.5,0.5h7c0.4,0,0.6,0.4,0.4,0.7L4.4,5.3c-0.2,0.2-0.5,0.2-0.7,0L0.1,1.2
+		C-0.1,0.9,0.1,0.5,0.5,0.5z"
+	/>
+</svg> `;

package/lib/settings/cosmoz-omnitable-group.js

@@ -0,0 +1,43 @@
+import { html } from 'haunted';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { triangle } from '../icons';
+
+export default () => html`
+	<sort-and-group-consumer
+		class="groups"
+		.render=${({
+			columns,
+			groupOnDescending: descending,
+			groupOn,
+			setGroupOn,
+			setGroupOnDescending,
+		} = {}) => {
+			const items = columns?.filter?.((c) => c['groupOn']);
+			return items?.map(
+				(c) =>
+					html`<button
+						class="group"
+						data-group=${ifDefined(
+							(c.name === groupOn && (descending ? 'desc' : 'asc')) || undefined
+						)}
+						@click=${(e) => {
+							const group = e.currentTarget?.dataset.group;
+							if (!group) {
+								setGroupOn(c.name);
+								setGroupOnDescending(false);
+							}
+							if (group === 'asc') {
+								setGroupOnDescending(true);
+							} else if (group === 'desc') {
+								setGroupOn();
+								setGroupOnDescending(false);
+							}
+						}}
+					>
+						${c.title} ${triangle}
+					</button>`
+			);
+		}}
+	>
+	</sort-and-group-consumer>
+`;

package/lib/settings/cosmoz-omnitable-settings.js

@@ -0,0 +1,135 @@
+import { html, component } from 'haunted';
+import { nothing } from 'lit-html';
+import { _ } from '@neovici/cosmoz-i18next';
+import { isEmpty } from '@neovici/cosmoz-utils/lib/template';
+import { defaultPlacement } from '@neovici/cosmoz-dropdown';
+import '@neovici/cosmoz-collapse';
+import sort from '../cosmoz-omnitable-sort';
+import group from './cosmoz-omnitable-group';
+import style, { dropdown as dropdownStyle } from './style.css';
+import useSettingsUi from './use-settings-ui';
+import { close, pull, arrow } from '../icons';
+
+/* eslint-disable max-lines-per-function */
+const placement = ['bottom-right', ...defaultPlacement],
+	renderItem =
+		({
+			onDragStart,
+			onDragEnter,
+			onDragOver,
+			onDragLeave,
+			onDrop,
+			onDown,
+			onToggle,
+			collapsed,
+			filters,
+		}) =>
+		(column, i) => {
+			const indeterminate = collapsed?.includes(column.name),
+				checked = !column.disabled && !indeterminate;
+			return html` <div
+				class="item"
+				data-index=${i}
+				@mousedown=${onDown}
+				draggable="true"
+				@dragstart=${onDragStart}
+				@dragenter=${onDragEnter}
+				@dragover=${onDragOver}
+				@dragleave=${onDragLeave}
+				@drop=${onDrop}
+			>
+				<button class="pull">${pull}</button>
+				<label
+					class="title"
+					?has-filter=${!isEmpty(filters[column.name]?.filter)}
+					>${column.title}</label
+				>
+				${sort(column.name)}
+				<input
+					class="checkbox"
+					type="checkbox"
+					.checked=${checked}
+					@click=${onToggle}
+					.indeterminate=${indeterminate}
+					.windeterminate=${indeterminate}
+				/>
+			</div>`;
+		},
+	SettingsUI = (host) => {
+		const {
+			settings,
+			settingsId,
+			onSave,
+			onReset,
+			hasChanges,
+			opened,
+			setOpened,
+			...thru
+		} = useSettingsUi(host);
+		return [
+			html`
+				<style>
+					${style}
+				</style>
+				<div class="headline">
+					${_('Sort and filter')}
+					<button class="close" @click=${(e) => e.currentTarget?.blur()}>
+						${close}
+					</button>
+				</div>
+				<div class="contents">
+					<div
+						class="heading"
+						?data-opened=${opened.columns}
+						@click=${() => setOpened((c) => ({ ...c, columns: !c.columns }))}
+					>
+						${_('Columns')} ${arrow}
+					</div>
+					<cosmoz-collapse ?opened=${opened.columns}>
+						<div class="list">${settings?.map(renderItem(thru))}</div>
+					</cosmoz-collapse>
+					<div
+						class="heading"
+						?data-opened=${opened.group}
+						@click=${() => setOpened((c) => ({ ...c, group: !c.group }))}
+					>
+						${_('Group on')} ${arrow}
+					</div>
+					<cosmoz-collapse ?opened=${opened.group}>
+						${group()}
+					</cosmoz-collapse>
+				</div>
+			`,
+			settingsId &&
+				html`<div class="buttons">
+					<button
+						class="button reset"
+						@click=${onReset}
+						?disabled=${!hasChanges}
+					>
+						${_('Reset')}
+					</button>
+					<button class="button" @click=${onSave} ?disabled=${!hasChanges}>
+						${_('Save')}
+					</button>
+				</div>`,
+		].filter(Boolean);
+	},
+	Settings = ({ config }) => html`
+		<style>
+			${dropdownStyle}
+		</style>
+		<cosmoz-dropdown
+			.render=${() => html`<cosmoz-omnitable-settings-ui
+				.config=${config}
+			></cosmoz-omnitable-settings-ui>`}
+			.placement=${placement}
+		>
+			<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor">
+				<path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path>
+			</svg>
+			${config?.badge ? html`<div class="badge" slot="button"></div>` : nothing}
+		</cosmoz-dropdown>
+	`;
+customElements.define('cosmoz-omnitable-settings', component(Settings));
+customElements.define('cosmoz-omnitable-settings-ui', component(SettingsUI));

package/lib/settings/index.js

@@ -0,0 +1,3 @@
+import './cosmoz-omnitable-settings';
+
+export { default as useSettings } from './use-settings';

package/lib/settings/normalize.js

@@ -0,0 +1,40 @@
+const byName = (name) => (item) => item.name === name;
+
+export default (columns = [], settings = [], savedSettings = []) => {
+	const cols = columns.filter(
+			(column) =>
+				!settings.some(byName(column.name)) &&
+				!savedSettings.some(byName(column.name))
+		),
+		_savedSettings = savedSettings.filter(
+			(column) => !settings.some(byName(column.name))
+		);
+
+	return [
+		...settings,
+		..._savedSettings.flatMap((setting) => {
+			const column = columns.find((c) => c.name === setting.name);
+
+			if (!column) {
+				return [];
+			}
+
+			return {
+				...setting,
+				title: column.title,
+				minWidth: parseInt(column.minWidth, 10),
+			};
+		}),
+		...cols.map((column) => {
+			const { name, title, priority, minWidth, width, flex } = column;
+			return {
+				name,
+				title,
+				priority,
+				minWidth: parseInt(minWidth, 10),
+				width: parseInt(width, 10),
+				flex: parseInt(flex, 10),
+			};
+		}),
+	];
+};

package/lib/settings/style.css.js

@@ -0,0 +1,211 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+import { checkbox, sort as sortStyle } from '../../cosmoz-omnitable-styles';
+
+export default css`
+	:host {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		max-height: var(--ot-height, 60vh);
+		outline: none;
+		min-width: 264px;
+	}
+
+	.headline {
+		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15),
+			inset 0px 1px 0px rgba(0, 0, 0, 0.15);
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 0.95;
+		padding: 12px 14px 11px 14px;
+		display: flex;
+	}
+	.close {
+		border: none;
+		background: none;
+		cursor: pointer;
+		padding: 0;
+		margin-left: auto;
+	}
+
+	.contents {
+		overflow-y: auto;
+		scrollbar-width: 2px;
+		scrollbar-gutter: stable;
+	}
+	.contents::-webkit-scrollbar {
+		width: 2px;
+	}
+	.contents::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.contents::-webkit-scrollbar-track-piece:start,
+	.contents::-webkit-scrollbar-track-piece:end {
+		background: transparent;
+	}
+
+	.heading {
+		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
+		font-weight: 500;
+		font-size: 14px;
+		line-height: 0.95;
+		padding: 14px;
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	.heading svg {
+		margin-left: auto;
+	}
+	.heading[data-opened] svg {
+		transform: scaleY(-1);
+	}
+	cosmoz-collapse[opened] + .heading {
+		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15),
+			inset 0px 1px 0px rgba(0, 0, 0, 0.15);
+	}
+
+	.list {
+		flex: 1;
+		padding: 2px 14px;
+		min-width: 232px;
+	}
+	.item {
+		display: flex;
+		align-items: center;
+		background: white;
+	}
+	.item.drag {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+	.item.dragover {
+		box-shadow: 0 -2px 0 0 currentColor;
+	}
+	.pull {
+		border: none;
+		padding: 0;
+		font-size: 0;
+		vertical-align: bottom;
+		outline: none;
+		background: transparent;
+		cursor: move;
+		margin-right: 12px;
+		color: #c4c4c4;
+	}
+	.title {
+		flex: 1;
+	}
+	.title[has-filter] {
+		font-weight: bold;
+	}
+	${checkbox}
+	.checkbox {
+		margin: 4px 0;
+	}
+
+	${sortStyle}
+	.sort {
+		order: initial;
+		margin: 0;
+		width: auto;
+		padding: 8px;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 8px;
+		padding: 12px 14px;
+		box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15);
+	}
+	.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: 600;
+		line-height: 26px;
+		border-radius: 4px;
+		padding: 8px;
+		flex: 1;
+	}
+	.button:not(.reset):hover {
+		background: var(--cosmoz-button-hover-bg-color, #3a3f44);
+	}
+	.button[disabled] {
+		opacity: 0.2;
+		pointer-events: none;
+	}
+	.reset {
+		background: transparent;
+		color: inherit;
+		text-decoration: underline;
+	}
+	.groups {
+		display: grid;
+		column-gap: 7px;
+		row-gap: 8px;
+		grid-template-columns: 1fr 1fr;
+		padding: 14px;
+	}
+	.group {
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		border-radius: 2px;
+		font-size: 13px;
+		line-height: 1;
+		text-align: center;
+		padding: 6px 12px;
+		background: transparent;
+		cursor: pointer;
+	}
+	.group[data-group] {
+		background: var(
+			--cosmoz-omnitable-checkbox-checked-color,
+			var(--primary-color)
+		);
+	}
+	.group svg {
+		vertical-align: middle;
+	}
+	.group:not([data-group]) svg {
+		display: none;
+	}
+	.group:not([data-group='desc']) svg {
+		transform: scaleY(-1);
+	}
+`;
+
+export const dropdown = css`
+	: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 {
+		outline: none;
+	}
+	cosmoz-dropdown::part(button) {
+		--cosmoz-dropdown-button-size: 24px;
+		padding: 0;
+		background: transparent;
+		color: inherit;
+	}
+	cosmoz-dropdown::part(anchor) {
+		display: inline-block;
+	}
+	.badge {
+		position: absolute;
+		top: 1px;
+		right: -4px;
+		background-color: var(
+			--cosmoz-omnitable-checkbox-checked-color,
+			var(--primary-color)
+		);
+		width: 8px;
+		height: 8px;
+		border-radius: 100%;
+	}
+`;

package/lib/{use-saved-settings.js → settings/use-saved-settings.js}

@@ -3,7 +3,7 @@ import { props } from '@neovici/cosmoz-utils/lib/object';
 
 const storagePrefix = 'omnitable-';
 
-export const useSavedSettings = (settingsId, settings, setSettings) => {
+export default (settingsId, settings, setSettings) => {
 	const
 		[counter, setCounter] = useState(0),
 		savedSettings = useMemo(() => {
@@ -19,9 +19,10 @@ export const useSavedSettings = (settingsId, settings, setSettings) => {
 		}, [settingsId, counter]);
 
 	return {
+		settingsId,
 		savedSettings,
 
-		onSettingsSave: useCallback(() => {
+		onSave: useCallback(() => {
 			if (!settingsId) {
 				return;
 			}
@@ -36,7 +37,7 @@ export const useSavedSettings = (settingsId, settings, setSettings) => {
 			}
 		}, [settings]),
 
-		onSettingsReset: e => {
+		onReset: e => {
 			setSettings([]);
 
 			if (e.shiftKey) {
@@ -49,6 +50,6 @@ export const useSavedSettings = (settingsId, settings, setSettings) => {
 			}
 		},
 
-		hasChangedSettings: settings.length !== 0
+		hasChanges: settings.length !== 0
 	};
 };

package/lib/settings/use-settings-ui.js

@@ -0,0 +1,116 @@
+import { useCallback } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
+
+const parseIndex = (str) => {
+	const idx = parseInt(str, 10);
+	return isFinite(idx) ? idx : undefined;
+};
+
+// eslint-disable-next-line max-lines-per-function
+export default (host) => {
+	const { config } = host,
+		{ settings, setSettings } = config,
+		meta = useMeta({ settings, setSettings });
+
+	return {
+		...config,
+		onDown: useCallback(
+			(e) => {
+				if (!e.target.closest('.pull')) {
+					return;
+				}
+
+				meta.handle = e.currentTarget;
+			},
+			[meta]
+		),
+
+		onDragStart: useCallback(
+			(e) => {
+				const { target } = e,
+					index = parseIndex(target.dataset.index);
+
+				if (!meta.handle?.contains(target) || index == null) {
+					return e.preventDefault();
+				}
+
+				meta.handle = null;
+				e.dataTransfer.effectAllowed = 'move';
+				e.dataTransfer.setData('omnitable/sort-index', index);
+				setTimeout(() => target.classList.add('drag'), 0);
+				target.addEventListener(
+					'dragend',
+					(e) => e.target.classList.remove('drag'),
+					{ once: true }
+				);
+			},
+			[meta]
+		),
+
+		onDragEnter: useCallback((e) => {
+			const ctg = e.currentTarget;
+			if (ctg !== e.target) {
+				return;
+			}
+
+			e.preventDefault();
+			e.dataTransfer.dropEffect = 'move';
+			ctg.classList.add('dragover');
+		}, []),
+
+		onDragOver: useCallback((e) => {
+			e.preventDefault();
+			e.currentTarget.classList.add('dragover');
+		}, []),
+
+		onDragLeave: useCallback((e) => {
+			const ctg = e.currentTarget;
+			if (ctg.contains(e.relatedTarget)) {
+				return;
+			}
+
+			ctg.classList.remove('dragover');
+		}, []),
+
+		onDrop: useCallback(
+			(e) => {
+				const from = parseIndex(e.dataTransfer.getData('omnitable/sort-index')),
+					to = parseIndex(e.currentTarget.dataset.index),
+					{ settings, setSettings } = meta;
+
+				e.currentTarget.classList.remove('dragover');
+				e.preventDefault();
+
+				const newSettings = settings.slice();
+				newSettings.splice(
+					to + (from >= to ? 0 : -1),
+					0,
+					newSettings.splice(from, 1)[0]
+				);
+				setSettings(newSettings);
+			},
+			[meta]
+		),
+
+		onToggle: useCallback(
+			(e) => {
+				const checked = e.target.checked,
+					idx = parseIndex(e.target.closest('[data-index]')?.dataset.index),
+					{ settings, setSettings } = meta,
+					newSettings = settings.slice(),
+					setting = settings[idx],
+					priority = e.target.windeterminate
+						? settings.reduce((acc, s) => Math.max(acc, s.priority), 0) + 1
+						: setting.priority;
+
+				newSettings.splice(idx, 1, {
+					...settings[idx],
+					disabled: !checked,
+					priority,
+				});
+				setSettings(newSettings);
+			},
+			[meta]
+		),
+	};
+};

package/lib/settings/use-settings.js

@@ -0,0 +1,32 @@
+import { useMemo, useState } from 'haunted';
+
+import useSavedSettings from './use-saved-settings';
+import normalize from './normalize';
+
+export default ({ settingsId, columns }) => {
+	const [settings, setSettings] = useState([]),
+		[opened, setOpened] = useState({ columns: true, group: true }),
+		{ savedSettings, ...thru } = useSavedSettings(
+			settingsId,
+			settings,
+			setSettings
+		),
+		normalizedSettings = useMemo(
+			() => normalize(columns, settings, savedSettings),
+			[columns, settings, savedSettings]
+		),
+		normalizedColumns = useMemo(
+			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
+			[columns, ...normalizedSettings.map(s => s.name)]
+		);
+
+	return {
+		...thru,
+		opened,
+		setOpened,
+		settings: normalizedSettings,
+		normalizedColumns,
+		setSettings,
+	};
+};
+

package/lib/use-omnitable.js

@@ -1,22 +1,18 @@
-import { useCallback, useMemo, useState, useEffect } from 'haunted';
-import { normalizeSettings } from './normalize-settings';
+import { useCallback, useMemo, useEffect } from 'haunted';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
-import { useSavedSettings } from './use-saved-settings';
+import { useSettings } from './settings';
 import { useDOMColumns } from './use-dom-columns';
 import { useSortAndGroupOptions } from './use-sort-and-group-options';
 import { onItemChange } from './utils-data';
 
 // eslint-disable-next-line max-lines-per-function
-export const useOmnitable = host => {
+export const useOmnitable = (host) => {
 	const { enabledColumns, hashParam } = host,
 		columns = useDOMColumns(host, { enabledColumns }),
-		sortAndGroupOptions = useSortAndGroupOptions(
-			columns,
-			hashParam,
-			host
-		),
-		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions,
+		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, host),
+		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
+			sortAndGroupOptions,
 		{ data, resizeSpeedFactor, settingsId } = host,
 		// TODO: drop filterFunctions
 		{
@@ -25,7 +21,7 @@ export const useOmnitable = host => {
 			setFilterState,
 			numProcessedItems,
 			filterFunctions,
-			groupsCount
+			groupsCount,
 		} = useProcessedItems({
 			data,
 			columns,
@@ -33,73 +29,93 @@ export const useOmnitable = host => {
 			groupOnDescending,
 			sortOnColumn,
 			descending,
-			hashParam
+			hashParam,
 		}),
-		[settings, setSettings] = useState([]),
-		{ savedSettings, onSettingsSave, onSettingsReset, hasChangedSettings } =
-			useSavedSettings(settingsId, settings, setSettings),
-		normalizedSettings = useMemo(
-			() => normalizeSettings(columns, settings, savedSettings),
-			[columns, settings, savedSettings]
-		),
-		normalizedColumns = useMemo(
-			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
-			[columns, ...normalizedSettings.map(s => s.name)]
-		),
+		settingsOpts = useSettings({ settingsId, columns }),
+		{ settings, setSettings, normalizedColumns } = settingsOpts,
 		layout = useFastLayout({
 			host,
-			settings: normalizedSettings,
+			settings,
 			setSettings,
 			groupOnColumn,
-			resizeSpeedFactor
+			resizeSpeedFactor,
 		}),
 		collapsedColumns = useMemo(
-			() => normalizedSettings.reduce((acc, column, index) =>
-				layout[index] != null ||
+			() =>
+				settings.reduce(
+					(acc, column, index) =>
+						layout[index] != null ||
 						column.name === groupOnColumn?.name ||
 						column.disabled
-					? acc
-					: [...acc, columns.find(c => c.name === column.name)],
-			[]),
-			[columns, normalizedSettings, layout]
+							? acc
+							: [...acc, columns.find((c) => c.name === column.name)],
+					[]
+				),
+			[columns, settings, layout]
 		),
 		hasHiddenFilter = useMemo(
 			() =>
 				[
 					groupOnColumn,
 					...collapsedColumns,
-					...normalizedSettings.filter(s => s.disabled)
-				].some(column => column && Object.keys(filterFunctions).includes(column.name)),
-			[filterFunctions, normalizedSettings, collapsedColumns]
+					...settings.filter((s) => s.disabled),
+				].some(
+					(column) =>
+						column && Object.keys(filterFunctions).includes(column.name)
+				),
+			[filterFunctions, settings, collapsedColumns]
+		),
+		settingsConfig = useMemo(
+			() => ({
+				...settingsOpts,
+				collapsed: collapsedColumns,
+				badge: hasHiddenFilter,
+				filters,
+			}),
+			[settingsOpts, collapsedColumns, hasHiddenFilter, filters]
 		);
 
 	useEffect(() => {
-		const handler = ev => setFilterState(ev.detail.name, state => ({ ...state, ...ev.detail.state }));
+		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,
+	useEffect(() => {
+		const el = host.shadowRoot.querySelector('#tableContent'),
+			observer = new ResizeObserver((entries) =>
+				requestAnimationFrame(() => {
+					host.style.setProperty(
+						'--ot-height',
+						entries[0]?.contentRect.height + 'px'
+					);
+				})
+			);
+		observer.observe(el);
+		return () => observer.unobserve(el);
+	}, []);
 
+	return {
 		...sortAndGroupOptions,
 
-		setSettings,
-		normalizedSettings,
+		columns,
 		normalizedColumns,
 		collapsedColumns,
-		hasHiddenFilter,
-		onSettingsSave,
-		onSettingsReset,
-		hasChangedSettings,
+
+		settingsConfig,
+
 		filters,
 		setFilterState,
 		onItemChange: useCallback(
-			(column, item) => value => onItemChange(host, column, item, value),
+			(column, item) => (value) => onItemChange(host, column, item, value),
 			[]
 		),
 		numProcessedItems,
 		groupsCount,
-		sortedFilteredGroupedItems: processedItems
+		sortedFilteredGroupedItems: processedItems,
 	};
 };

package/lib/use-sort-and-group-options.js

@@ -42,6 +42,8 @@ export const useSortAndGroupOptions = (columns, hashParam, initial) => {
 				setSortOn,
 				descending,
 				setDescending,
+
+				columns,
 			},
 			sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_));
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.7.3",
+	"version": "8.9.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -54,6 +54,7 @@
 	"dependencies": {
 		"@neovici/cosmoz-autocomplete": "^3.1.0",
 		"@neovici/cosmoz-bottom-bar": "^5.0.0",
+		"@neovici/cosmoz-collapse": "^1.1.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
 		"@neovici/cosmoz-dropdown": "^1.5.0",
 		"@neovici/cosmoz-grouped-list": "^3.2.0",

package/lib/cosmoz-omnitable-settings.js

@@ -1,366 +0,0 @@
-import { html, component, useCallback } from 'haunted';
-import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
-import { checkbox, sort as sortStyle } from '../cosmoz-omnitable-styles';
-import { nothing } from 'lit-html';
-import { isEmpty } from '@neovici/cosmoz-utils/lib/template';
-import { defaultPlacement } from '@neovici/cosmoz-dropdown';
-import sort from './cosmoz-omnitable-sort';
-
-const placement = ['bottom-right', ...defaultPlacement],
-	settingsStyles = `
-	:host {
-		box-sizing: border-box;
-		display: flex;
-		flex-direction: column;
-		max-height: 42vh;
-		outline: none;
-		padding-top: 14px;
-	}
-	.list {
-		overflow-y: auto;
-		flex: 1;
-		padding: 2px 14px;
-		min-width: 232px;
-	}
-	.item {
-		display: flex;
-		align-items: center;
-		background: white;
-	}
-	.item.drag {
-		opacity: 0.6;
-		pointer-events: none;
-	}
-	.item.dragover {
-		box-shadow: 0 -2px 0 0 currentColor;
-	}
-	.pull {
-		border: none;
-		padding: 0;
-		font-size: 0;
-		vertical-align: bottom;
-		outline: none;
-		background: transparent;
-		cursor: move;
-		margin-right: 12px;
-		color: #c4c4c4;
-	}
-	.title {
-		flex: 1;
-	}
-	.title[has-filter] {
-		font-weight: bold;
-	}
-	${checkbox}
-	.checkbox {
-		margin: 4px 0;
-	}
-
-	${sortStyle}
-	.sort {
-		order: initial;
-		margin: 0;
-		width: auto;
-		padding: 8px;
-	}
-
-	.buttons {
-		display: flex;
-		gap: 8px;
-		margin-top: 10px;
-		padding: 12px 14px;
-		box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15);
-	}
-	.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: 600;
-		line-height: 26px;
-		border-radius: 4px;
-		padding: 8px;
-		flex: 1;
-	}
-	.button:not(.reset):hover {
-		background: var(--cosmoz-button-hover-bg-color, #3A3F44);
-	}
-	.button[disabled] {
-		opacity: 0.2;
-		pointer-events: none;
-	}
-	.reset {
-		background: transparent;
-		color: inherit;
-		text-decoration: underline;
-	}
-	`,
-	parseIndex = (str) => {
-		const idx = parseInt(str, 10);
-		return isFinite(idx) ? idx : undefined;
-	},
-	// eslint-disable-next-line max-lines-per-function
-	useSettings = (host) => {
-		const { settings, onSettings } = host,
-			meta = useMeta({ settings, onSettings });
-
-		return {
-			settings: host.settings,
-			collapsed: host.collapsed,
-
-			settingsId: host.settingsId,
-			hasChanges: host.hasChanges,
-			onSave: host.onSave,
-			onReset: host.onReset,
-
-			filters: host.filters,
-
-			onDown: useCallback(
-				(e) => {
-					if (!e.target.closest('.pull')) {
-						return;
-					}
-
-					meta.handle = e.currentTarget;
-				},
-				[meta]
-			),
-
-			onDragStart: useCallback(
-				(e) => {
-					const { target } = e,
-						index = parseIndex(target.dataset.index);
-
-					if (!meta.handle?.contains(target) || index == null) {
-						return e.preventDefault();
-					}
-
-					meta.handle = null;
-					e.dataTransfer.effectAllowed = 'move';
-					e.dataTransfer.setData('omnitable/sort-index', index);
-					setTimeout(() => target.classList.add('drag'), 0);
-					target.addEventListener(
-						'dragend',
-						(e) => e.target.classList.remove('drag'),
-						{ once: true }
-					);
-				},
-				[meta]
-			),
-
-			onDragEnter: useCallback((e) => {
-				const ctg = e.currentTarget;
-				if (ctg !== e.target) {
-					return;
-				}
-
-				e.preventDefault();
-				e.dataTransfer.dropEffect = 'move';
-				ctg.classList.add('dragover');
-			}, []),
-
-			onDragOver: useCallback((e) => {
-				e.preventDefault();
-				e.currentTarget.classList.add('dragover');
-			}, []),
-
-			onDragLeave: useCallback((e) => {
-				const ctg = e.currentTarget;
-				if (ctg.contains(e.relatedTarget)) {
-					return;
-				}
-
-				ctg.classList.remove('dragover');
-			}, []),
-
-			onDrop: useCallback(
-				(e) => {
-					const from = parseIndex(
-							e.dataTransfer.getData('omnitable/sort-index')
-						),
-						to = parseIndex(e.currentTarget.dataset.index),
-						{ settings, onSettings } = meta;
-
-					e.currentTarget.classList.remove('dragover');
-					e.preventDefault();
-
-					const newSettings = settings.slice();
-					newSettings.splice(
-						to + (from >= to ? 0 : -1),
-						0,
-						newSettings.splice(from, 1)[0]
-					);
-					onSettings(newSettings);
-				},
-				[meta]
-			),
-
-			onToggle: useCallback(
-				(e) => {
-					const checked = e.target.checked,
-						idx = parseIndex(e.target.closest('[data-index]')?.dataset.index),
-						{ settings, onSettings } = meta,
-						newSettings = settings.slice(),
-						setting = settings[idx],
-						priority = e.target.windeterminate
-							? settings.reduce((acc, s) => Math.max(acc, s.priority), 0) + 1
-							: setting.priority;
-
-					newSettings.splice(idx, 1, {
-						...settings[idx],
-						disabled: !checked,
-						priority,
-					});
-					onSettings(newSettings);
-				},
-				[meta]
-			),
-		};
-	},
-	renderItem =
-		// eslint-disable-next-line max-lines-per-function
-			({
-				onDragStart,
-				onDragEnter,
-				onDragOver,
-				onDragLeave,
-				onDrop,
-				onDown,
-				onToggle,
-				collapsed,
-				filters,
-			}) =>
-			(column, i) => {
-				const indeterminate = collapsed?.includes(column.name),
-					checked = !column.disabled && !indeterminate;
-				return html` <div
-					class="item"
-					data-index=${i}
-					@mousedown=${onDown}
-					draggable="true"
-					@dragstart=${onDragStart}
-					@dragenter=${onDragEnter}
-					@dragover=${onDragOver}
-					@dragleave=${onDragLeave}
-					@drop=${onDrop}
-				>
-					<button class="pull">
-						<svg
-							width="16"
-							height="6"
-							viewBox="0 0 16 6"
-							fill="currentColor"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<rect width="16" height="2" />
-							<rect y="4" width="16" height="2" />
-						</svg>
-					</button>
-					<label
-						class="title"
-						?has-filter=${!isEmpty(filters[column.name]?.filter)}
-						>${column.title}</label
-					>
-					${sort(column.name)}
-					<input
-						class="checkbox"
-						type="checkbox"
-						.checked=${checked}
-						@click=${onToggle}
-						.indeterminate=${indeterminate}
-						.windeterminate=${indeterminate}
-					/>
-				</div>`;
-			},
-	SettingsUI = (host) => {
-		const { settings, settingsId, onSave, onReset, hasChanges, ...thru } =
-			useSettings(host);
-		return [
-			html`
-				<style>
-					${settingsStyles}
-				</style>
-				<div class="list">${settings?.map(renderItem(thru))}</div>
-			`,
-			settingsId
-				? html`<div class="buttons">
-						<button
-							class="button reset"
-							@click=${onReset}
-							?disabled=${!hasChanges}
-						>
-							Reset
-						</button>
-						<button class="button" @click=${onSave} ?disabled=${!hasChanges}>
-							Save
-						</button>
-				  </div>`
-				: nothing,
-		];
-	},
-	// eslint-disable-next-line max-lines-per-function
-	Settings = ({
-		anchor,
-		settings,
-		onSettings,
-		collapsed,
-		settingsId,
-		hasChanges,
-		onSave,
-		onReset,
-		filters,
-		badge,
-	}) => html`
-		<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) {
-				--cosmoz-dropdown-button-size: 24px;
-				padding: 0;
-				background: transparent;
-				color: inherit;
-			}
-			cosmoz-dropdown::part(anchor) {
-				display: inline-block;
-			}
-			.badge {
-				position: absolute;
-				top: 1px;
-				right: -4px;
-				background-color: var(
-					--cosmoz-omnitable-checkbox-checked-color,
-					var(--primary-color)
-				);
-				width: 8px;
-				height: 8px;
-				border-radius: 100%;
-			}
-		</style>
-		<cosmoz-dropdown
-			.render=${() => html`<cosmoz-omnitable-settings-ui
-				.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" fill="currentColor">
-				<path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path>
-			</svg>
-			${badge ? html`<div class="badge" slot="button"></div>` : nothing}
-		</cosmoz-dropdown>
-	`;
-customElements.define('cosmoz-omnitable-settings', component(Settings));
-customElements.define('cosmoz-omnitable-settings-ui', component(SettingsUI));

package/lib/normalize-settings.js

@@ -1,37 +0,0 @@
-const byName = name => item => item.name === name;
-
-export const
-	normalizeSettings = (columns = [], settings = [], savedSettings = []) => {
-		const
-			cols = columns.filter(column => !settings.some(byName(column.name)) && !savedSettings.some(byName(column.name))),
-			_savedSettings = savedSettings.filter(column => !settings.some(byName(column.name)));
-
-		return [
-			...settings,
-			..._savedSettings
-				.flatMap(setting => {
-					const column = columns.find(c => c.name === setting.name);
-
-					if (!column) {
-						return [];
-					}
-
-					return {
-						...setting,
-						title: column.title,
-						minWidth: parseInt(column.minWidth, 10)
-					};
-				}),
-			...cols.map(column => {
-				const { name, title, priority, minWidth, width, flex } = column;
-				return {
-					name,
-					title,
-					priority,
-					minWidth: parseInt(minWidth, 10),
-					width: parseInt(width, 10),
-					flex: parseInt(flex, 10)
-				};
-			})
-		];
-	};