@neovici/cosmoz-omnitable 8.8.1 → 8.11.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,44 @@
+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"
+						title=${c.title}
+						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);
+							}
+						}}
+					>
+						<span>${c.title}</span> ${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?.find((c) => c.name === 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,223 @@
+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: 270px;
+	}
+
+	.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: auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.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: repeat(auto-fit, minmax(112px, 1fr));
+		grid-template-rows: auto;
+		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;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.group span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.group[data-group] {
+		background: var(
+			--cosmoz-omnitable-checkbox-checked-color,
+			var(--primary-color)
+		);
+	}
+	.group svg {
+		margin-left: 4px;
+		flex: none;
+		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
 	};
 };