@neovici/cosmoz-omnitable 8.7.1 → 8.8.0

package/cosmoz-omnitable-group-row.js

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

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/cosmoz-omnitable.js

@@ -121,8 +121,9 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 								<input class="checkbox" type="checkbox" checked="[[ selected ]]" on-input="_onCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
 								<h3 class="groupRow-label">
 									<div><span>[[ groupOnColumn.title ]]</span>: &nbsp;</div>
-									<cosmoz-omnitable-group-row column="[[ groupOnColumn ]]" item="[[ item.items.0 ]]" selected="[[ selected ]]" folded="[[ folded ]]">
-									</cosmoz-omnitable-group-row>
+									<cosmoz-omnitable-group-row column="[[ groupOnColumn ]]" item="[[ item.items.0 ]]" selected="[[ selected ]]" folded="[[ folded ]]"
+										group="[[ item ]]"
+									></cosmoz-omnitable-group-row>
 								</h3>
 								<div class="groupRow-badge">[[ item.items.length ]]</div>
 								<paper-icon-button class="fold" icon="[[ _getFoldIcon(folded) ]]" on-tap="_toggleGroup"></paper-icon-button>

package/lib/cosmoz-omnitable-group.js

@@ -0,0 +1,79 @@
+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, type, value) => {
+		return (
+			columns
+				?.filter?.((c) => c[type])
+				/* eslint-disable-next-line no-bitwise */
+				.sort((a, b) => ((b === value) >> 0) - ((a === 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,
+			groupOnColumn,
+			setGroupOn,
+			setGroupOnDescending,
+		} = {}) => html` <div class="group">
+			<cosmoz-autocomplete
+				.label="${_('Group on')} ${direction(groupOnDescending)}"
+				.placeholder=${_('No grouping')}
+				.source=${values(columns, 'groupOn', groupOnColumn)}
+				.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.1",
+	"version": "8.8.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"