@neovici/cosmoz-omnitable 8.6.0 → 8.7.0

package/cosmoz-omnitable-header-row.js

@@ -8,10 +8,6 @@ const /* eslint-disable-next-line max-lines-per-function */
 		data,
 		columns,
 		groupOnColumn,
-		sortOnColumn,
-		setSortOn,
-		descending,
-		setDescending,
 		filters,
 		setFilterState,
 	}) =>
@@ -25,19 +21,15 @@ const /* eslint-disable-next-line max-lines-per-function */
 					title=${column.title}
 					name=${column.name}
 				>
-					${sort({
-						column,
-						sortOnColumn,
-						setSortOn,
-						descending,
-						setDescending,
-					})}
-					${column.renderHeader(
-						column,
-						filters[column.name] ?? {},
-						(state) => setFilterState(column.name, state),
-						column.source(column, data)
-					)}
+					${[
+						column.renderHeader(
+							column,
+							filters[column.name] ?? {},
+							(state) => setFilterState(column.name, state),
+							column.source(column, data)
+						),
+						sort(column.name),
+					]}
 				</div>`,
 				html`<cosmoz-omnitable-resize-nub
 					.column=${column}

package/cosmoz-omnitable-styles.js

@@ -87,7 +87,6 @@ const checkbox = css`
 			outline: none;
 			color: inherit;
 			padding: 0;
-			order: 112;
 		}
 		.sort svg {
 			display: block;
@@ -101,22 +100,19 @@ const checkbox = css`
 		.sort[data-sort='desc'] {
 			transform: scaleY(-1);
 		}
-		:not(:hover) > .sort:not([data-sort]) {
+		:not(:hover) > * > .sort:not([data-sort]) {
 			display: none;
 		}
-
 		.header-cell {
 			display: inline-flex;
 			position: relative;
 		}
-		.header-cell:hover .sort + *,
-		.header-cell .sort[data-sort] + * {
-			max-width: calc(100% - 10px);
+		.header-cell * {
+			min-width: 0;
 		}
-
 	`;
 
-export { checkbox };
+export { checkbox, sort };
 
 export default `<style>
 	:host {
@@ -171,10 +167,6 @@ export default `<style>
 		 }
 	}
 
-	.header-cell > * {
-		width: 100%;
-	}
-
 	cosmoz-omnitable-header-row {
 		white-space: nowrap;
 	}

package/cosmoz-omnitable.js

@@ -46,6 +46,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		<div id="layoutStyle"></div>
 
 		<div class="mainContainer">
+			<sort-and-group-provider value="[[ sortAndGroup ]]">
 			<div class="header" id="header">
 				<input class="checkbox all" type="checkbox" checked="[[ _allSelected ]]" on-input="_onAllCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
 				<cosmoz-omnitable-header-row
@@ -53,14 +54,11 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 					columns="[[ normalizedColumns ]]"
 					filters="[[ filters ]]"
 					group-on-column="[[ groupOnColumn ]]"
-					descending="[[ descending ]]"
-					set-descending="[[ setDescending ]]"
-					sort-on-column="[[ sortOnColumn ]]"
-					set-sort-on="[[ setSortOn ]]"
 					content="[[ _renderSettings(normalizedSettings, collapsedColumns, settingsId, hasChangedSettings, hasHiddenFilter, filters) ]]"
 					set-filter-state="[[ setFilterState ]]"
 				></cosmoz-omnitable-header-row>
 			</div>
+			</sort-and-group-provider>
 			<div class="tableContent" id="tableContent">
 				<template is="dom-if" if="[[ !_dataIsValid ]]">
 					<div class="tableContent-empty">

package/lib/cosmoz-omnitable-settings.js

@@ -1,9 +1,11 @@
 import { html, component, useCallback } from 'haunted';
 import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
-import { checkbox } from '../cosmoz-omnitable-styles';
+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 {
@@ -54,6 +56,14 @@ const placement = ['bottom-right', ...defaultPlacement],
 		margin: 4px 0;
 	}
 
+	${sortStyle}
+	.sort {
+		order: initial;
+		margin: 0;
+		width: auto;
+		padding: 8px;
+	}
+
 	.buttons {
 		display: flex;
 		gap: 8px;
@@ -211,58 +221,59 @@ const placement = ['bottom-right', ...defaultPlacement],
 	},
 	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
+			({
+				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}
 				>
-				<input
-					class="checkbox"
-					type="checkbox"
-					.checked=${checked}
-					@click=${onToggle}
-					.indeterminate=${indeterminate}
-					.windeterminate=${indeterminate}
-				/>
-			</div>`;
-		},
+					<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);

package/lib/cosmoz-omnitable-sort.js

@@ -2,43 +2,46 @@ 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="M3.56699 0.75C3.75944 0.416666 4.24056 0.416667 4.43301 0.75L7.03109 5.25C7.22354 5.58333 6.98298 6 6.59808 6L1.40192 6C1.01702 6 0.776461 5.58333 0.968911 5.25L3.56699 0.75Z"
-		/>
-	</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> `;
 
-export default ({
-		column,
-		sortOnColumn,
-		setSortOn,
-		descending,
-		setDescending,
-	}) => html` <button
-		class="sort"
-		data-sort=${ifDefined(
-			(column === sortOnColumn && (descending ? 'desc' : 'asc')) || undefined
-		)}
-		@click=${(e) => {
-			const sort = e.currentTarget?.dataset.sort;
-			if (!sort) {
-				setSortOn(column.name);
-				setDescending(false);
-			}
-			if (sort === 'asc') {
-				setDescending(true);
-			}
-			if (sort === 'desc') {
-				setSortOn();
-				setDescending(false);
-			}
-		}}
+export default (column) => html`
+	<sort-and-group-consumer
+		style="display: contents"
+		.render=${({
+			sortOn,
+			setSortOn,
+			descending,
+			setDescending,
+		} = {}) => html` <button
+			class="sort"
+			data-sort=${ifDefined(
+				(column === sortOn && (descending ? 'desc' : 'asc')) || undefined
+			)}
+			@click=${(e) => {
+				const sort = e.currentTarget?.dataset.sort;
+				if (!sort) {
+					setSortOn(column);
+					setDescending(false);
+				}
+				if (sort === 'asc') {
+					setDescending(true);
+				}
+				if (sort === 'desc') {
+					setSortOn();
+					setDescending(false);
+				}
+			}}
+		>
+			${sortIcon}
+		</button>`}
 	>
-		${sortIcon}
-	</button>`;
-
+	</sort-and-group-consumer>
+`;

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

@@ -1,45 +1,63 @@
-import { useMemo } from 'haunted';
+import { useMemo, createContext, component, useContext } from 'haunted';
 import { useHashState } from './use-hash-state';
 
 const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
 	boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p));
 
 export const useSortAndGroupOptions = (columns, hashParam, initial) => {
-	const [sortOn, setSortOn] = useHashState(initial.sortOn, hashParam, {
-			suffix: '-sortOn',
-		}),
-		[descending, setDescending] = useHashState(initial.descending, hashParam, {
-			suffix: '-descending',
-			read: boolParam,
-		}),
-		[groupOn, setGroupOn] = useHashState(initial.groupOn, hashParam, {
-			suffix: '-groupOn',
-		}),
-		[groupOnDescending, setGroupOnDescending] = useHashState(
-			initial.groupOnDescending,
-			hashParam,
-			{ suffix: '-groupOnDescending', read: boolParam }
-		),
-		sortOnColumn = useMemo(
-			() => columns.find((column) => column.name === sortOn),
-			[columns, sortOn]
-		),
-		groupOnColumn = useMemo(
-			() => columns.find((column) => column.name === groupOn),
-			[columns, groupOn]
-		);
+		const [sortOn, setSortOn] = useHashState(initial.sortOn, hashParam, {
+				suffix: '-sortOn',
+			}),
+			[descending, setDescending] = useHashState(
+				initial.descending,
+				hashParam,
+				{
+					suffix: '-descending',
+					read: boolParam,
+				}
+			),
+			[groupOn, setGroupOn] = useHashState(initial.groupOn, hashParam, {
+				suffix: '-groupOn',
+			}),
+			[groupOnDescending, setGroupOnDescending] = useHashState(
+				initial.groupOnDescending,
+				hashParam,
+				{ suffix: '-groupOnDescending', read: boolParam }
+			),
+			sortOnColumn = useMemo(
+				() => columns.find((column) => column.name === sortOn),
+				[columns, sortOn]
+			),
+			groupOnColumn = useMemo(
+				() => columns.find((column) => column.name === groupOn),
+				[columns, groupOn]
+			),
+			sortAndGroup_ = {
+				groupOn,
+				setGroupOn,
+				groupOnDescending,
+				setGroupOnDescending,
 
-	return {
-		groupOn,
-		setGroupOn,
-		groupOnColumn,
-		groupOnDescending,
-		setGroupOnDescending,
+				sortOn,
+				setSortOn,
+				descending,
+				setDescending,
+			},
+			sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_));
 
-		sortOn,
-		setSortOn,
-		sortOnColumn,
-		descending,
-		setDescending,
-	};
-};
+		return {
+			...sortAndGroup,
+			sortAndGroup,
+			groupOnColumn,
+			sortOnColumn,
+		};
+	},
+	SortAndGroupContext = createContext();
+
+customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
+customElements.define(
+	'sort-and-group-consumer',
+	component(({ render }) => render(useContext(SortAndGroupContext)), {
+		useShadowDOM: false,
+	})
+);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.6.0",
+	"version": "8.7.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"