@neovici/cosmoz-omnitable 8.7.2 → 8.8.1

package/cosmoz-omnitable-styles.js

@@ -97,7 +97,7 @@ const checkbox = css`
 				var(--primary-color)
 			);
 		}
-		.sort[data-sort='desc'] {
+		.sort:not([data-sort='desc']) {
 			transform: scaleY(-1);
 		}
 		:not(:hover) > * > .sort:not([data-sort]) {

package/lib/cosmoz-omnitable-group.js

@@ -0,0 +1,84 @@
+import { html } from 'haunted';
+import { _ } from '@neovici/cosmoz-i18next';
+import { without } from '@neovici/cosmoz-utils/lib/array';
+
+const direction = (descending) =>
+		`(${descending ? _('Descending') : _('Ascending')})`,
+	values = (columns, groupOn) => {
+		const value = columns.find((column) => column.name === groupOn);
+		return [
+			value,
+			columns
+				?.filter?.((c) => c['groupOn'])
+				/* eslint-disable-next-line no-bitwise */
+				.sort((a, b) => ((b.name === value) >> 0) - ((a.name === value) >> 0)),
+		];
+	},
+	onSelect = (newVal, { value, onChange, onText, limit }) => {
+		onText('');
+		onChange([...without(newVal)(value), newVal].slice(-limit));
+	},
+	onChange = ({ setGroupOn, setGroupOnDescending }) => {
+		return (val, close) => {
+			const value = (val[0] ?? val)?.name ?? '',
+				setter = setGroupOn,
+				directionSetter = setGroupOnDescending;
+
+			setter((oldValue) => {
+				if (value) {
+					directionSetter((oldDirection) =>
+						value === oldValue ? !oldDirection : false
+					);
+				} else {
+					directionSetter(null);
+				}
+				return value;
+			});
+
+			value && close(); /* eslint-disable-line no-unused-expressions */
+		};
+	};
+
+export default () => html`
+	<sort-and-group-consumer
+		style="display: contents"
+		.render=${({
+			columns,
+			groupOnDescending,
+			groupOn,
+			setGroupOn,
+			setGroupOnDescending,
+		} = {}) => {
+			const [groupOnColumn, source] = values(columns, groupOn);
+			return html` <div class="group">
+				<cosmoz-autocomplete
+					.label="${_('Group on')} ${direction(groupOnDescending)}"
+					.placeholder=${_('No grouping')}
+					.source=${source}
+					.value=${groupOnColumn}
+					limit="1"
+					text-property="title"
+					always-float-label
+					.itemHeight=${48}
+					.itemLimit=${8}
+					.onChange=${onChange({ setGroupOn, setGroupOnDescending })}
+					.onSelect=${onSelect}
+					default-index="-1"
+					show-single
+				>
+					<svg
+						slot="suffix"
+						viewBox="0 0 24 24"
+						preserveAspectRatio="xMidYMid meet"
+						focusable="false"
+						width="24"
+						fill="currentColor"
+					>
+						<path d="M7 10l5 5 5-5z"></path>
+					</svg>
+				</cosmoz-autocomplete>
+			</div>`;
+		}}
+	>
+	</sort-and-group-consumer>
+`;

package/lib/cosmoz-omnitable-settings.js

@@ -5,6 +5,7 @@ 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';
+import group  from './cosmoz-omnitable-group';
 
 const placement = ['bottom-right', ...defaultPlacement],
 	settingsStyles = `
@@ -67,7 +68,6 @@ const placement = ['bottom-right', ...defaultPlacement],
 	.buttons {
 		display: flex;
 		gap: 8px;
-		margin-top: 10px;
 		padding: 12px 14px;
 		box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.15);
 	}
@@ -96,6 +96,10 @@ const placement = ['bottom-right', ...defaultPlacement],
 		color: inherit;
 		text-decoration: underline;
 	}
+	.group {
+		padding: 0px 14px;
+		box-shadow: inset 0px 1px 0px rgb(0 0 0 / 15%)
+	}
 	`,
 	parseIndex = (str) => {
 		const idx = parseInt(str, 10);
@@ -279,26 +283,23 @@ const placement = ['bottom-right', ...defaultPlacement],
 			useSettings(host);
 		return [
 			html`
-				<style>
-					${settingsStyles}
-				</style>
+				<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,
-		];
+			group(),
+			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);
 	},
 	// eslint-disable-next-line max-lines-per-function
 	Settings = ({

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.2",
+	"version": "8.8.1",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"