@neovici/cosmoz-omnitable 12.1.0 → 12.2.1

package/cosmoz-omnitable-header-row.js

@@ -1,6 +1,7 @@
 import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat.js';
 import './lib/cosmoz-omnitable-resize-nub';
+import { render } from './lib/settings/cosmoz-omnitable-sort-group';
 
 const /* eslint-disable-next-line max-lines-per-function */
 	renderHeaderRow = ({
@@ -27,6 +28,23 @@ const /* eslint-disable-next-line max-lines-per-function */
 							(state) => setFilterState(column.name, state),
 							column.source(column, data)
 						),
+						html` <sort-and-group-consumer
+							style="display:contents"
+							.render=${({
+								sortOn: on,
+								setSortOn: setOn,
+								descending,
+								setDescending,
+							} = {}) =>
+								render({
+									on,
+									setOn,
+									descending,
+									setDescending,
+									column,
+								})}
+						>
+						</sort-and-group-consumer>`,
 					]}
 				</div>`,
 				html`<cosmoz-omnitable-resize-nub

package/cosmoz-omnitable-styles.js

@@ -435,4 +435,42 @@ export default `
 	.expand:hover, .fold:hover {
 		color: #000;
 	}
+.sg {
+			display: inline-flex;
+			width: 10px;
+			cursor: pointer;
+			align-items: center;
+			margin-top: 18px;
+			overflow: hidden;
+			flex: none;
+			background: none;
+			border: none;
+			outline: none;
+			color: inherit;
+			padding: 0;
+		}
+		.sg span {display: none}
+		.sg svg {
+			display: block;
+		}
+		.sg[data-on] {
+			color: var(
+				--cosmoz-omnitable-checkbox-checked-color,
+				var(--primary-color)
+			);
+		}
+		.sg:not([data-on='desc']) {
+			transform: scaleY(-1);
+		}
+		:not(:hover) > * > .sg:not([data-on]) {
+			display: none;
+		}
+		.header-cell {
+			display: inline-flex;
+			position: relative;
+		}
+		.header-cell :not(.sg) {
+			min-width: 0;
+			flex: auto;
+		}
 `;

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

@@ -4,8 +4,7 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 import '@neovici/cosmoz-collapse';
-import sort from './cosmoz-omnitable-sort';
-import group from './cosmoz-omnitable-group';
+import { sort, group } from './cosmoz-omnitable-sort-group';
 import style, { dropdown as dropdownStyle } from './style.css';
 import useSettingsUi from './use-settings-ui';
 import { close, pull, arrow } from '../icons';

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

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

package/lib/use-public-interface.js

@@ -72,6 +72,8 @@ export const usePublicInterface = ({ host, visibleData, ...api }) => {
 		api.sortedFilteredGroupedItems
 	);
 	useNotifyProperty('selectedItems', api.selectedItems);
+	useNotifyProperty('sortOn', api.sortOn)
+	useNotifyProperty('descending', api.descending)
 
 	useImperativeApi(
 		{

package/package.json

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

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

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

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

@@ -1,23 +0,0 @@
-import { html } from 'haunted';
-import { render } from './cosmoz-omnitable-group';
-
-export default () => html`
-	<sort-and-group-consumer
-		class="sgs"
-		.render=${({
-			columns,
-			sortOn: on,
-			setSortOn: setOn,
-			descending,
-			setDescending,
-		} = {}) =>
-			render({
-				columns: columns?.filter?.((c) => c['sortOn']),
-				on,
-				setOn,
-				descending,
-				setDescending,
-			})}
-	>
-	</sort-and-group-consumer>
-`;