@neovici/cosmoz-omnitable 9.0.1 → 10.0.0-beta.1

package/cosmoz-omnitable-header-row.js

@@ -1,5 +1,5 @@
 import { html, component } from 'haunted';
-import { repeat } from 'lit-html/directives/repeat';
+import { repeat } from 'lit-html/directives/repeat.js';
 import './lib/cosmoz-omnitable-resize-nub';
 
 const /* eslint-disable-next-line max-lines-per-function */

package/cosmoz-omnitable-item-row.js

@@ -1,5 +1,5 @@
 import { component, html } from 'haunted';
-import { repeat } from 'lit-html/directives/repeat';
+import { repeat } from 'lit-html/directives/repeat.js';
 
 const
 	renderCell = (column, data, onItemChange) => column.editable

package/cosmoz-omnitable.js

@@ -44,7 +44,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 	/* eslint-disable-next-line max-lines-per-function */
 	static get template() {
 		const template = html`
-			${html([styles])}
+			${html(Object.assign([styles], { raw: [styles] }))}
 			<div id="layoutStyle"></div>
 
 			<div class="mainContainer">
@@ -230,18 +230,14 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 	}
 
 	renderItem(collapsedColumns) {
-		return (
-			item,
-			index,
-			{ selected, expanded, toggleCollapse }
-		) => {
+		return (item, index, { selected, expanded, toggleCollapse }) => {
 			return litHtml`
 			<div class="item-row-wrapper">
 				<div ?selected=${selected}
 					part="itemRow itemRow-${item[indexSymbol]}"
 					.dataIndex=${item[indexSymbol]}
 					.dataItem=${item}
-					class="itemRow" 
+					class="itemRow"
 					@click=${this.onItemClick}
 				>
 					<input class="checkbox"
@@ -268,7 +264,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 				</div>
 				<cosmoz-omnitable-item-expand .columns=${collapsedColumns}
 					.item=${item}
-					.index=${index} 
+					.index=${index}
 					?selected=${selected}
 					?expanded=${expanded}
 					.groupOnColumn=${this.groupOnColumn}
@@ -280,7 +276,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 
 	renderGroup(item, index, { selected, folded, toggleFold }) {
 		return litHtml`
-			<div class="${this._getGroupRowClasses(folded)}" 
+			<div class="${this._getGroupRowClasses(folded)}"
 					part="groupRow groupRow-${item[indexSymbol]}">
 				<input class="checkbox"
 					type="checkbox"
@@ -688,5 +684,5 @@ const tmplt = `
 	<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
 `;
 
-export const actionSlots = litHtml([tmplt]),
-	actionSlotsPolymer = html([tmplt]);
+export const actionSlots = litHtml(Object.assign([tmplt], { raw: [tmplt] })),
+	actionSlotsPolymer = html(Object.assign([tmplt], { raw: [tmplt] }));

package/lib/cosmoz-omnitable-amount-range-input.js

@@ -1,7 +1,7 @@
 import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 

package/lib/cosmoz-omnitable-date-range-input.js

@@ -1,7 +1,7 @@
 import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 

package/lib/cosmoz-omnitable-datetime-range-input.js

@@ -1,7 +1,7 @@
 import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 

package/lib/cosmoz-omnitable-number-range-input.js

@@ -1,7 +1,7 @@
 import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 

package/lib/cosmoz-omnitable-time-range-input.js

@@ -1,7 +1,7 @@
 import { _ } from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
 

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

@@ -1,5 +1,5 @@
 import { html } from 'haunted';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { triangle } from '../icons';
 
 export const render = ({ columns, on, descending, setOn, setDescending }) =>

package/lib/settings/normalize.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/group-exports */
 import { props } from '@neovici/cosmoz-utils/lib/object';
 
-export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOn'];
+export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOnDescending'];
 
 const byName = (name) => (item) => item.name === name;
 

package/lib/settings/use-saved-settings.js

@@ -13,7 +13,7 @@ const storagePrefix = 'omnitable-',
 		}
 	};
 // eslint-disable-next-line max-lines-per-function
-export default (settingsId, settings, setSettings) => {
+export default (settingsId, settings, setSettings, onReset) => {
 	const [counter, setCounter] = useState(0),
 		savedSettings = useMemo(() => read(settingsId), [settingsId, counter]);
 
@@ -40,18 +40,22 @@ export default (settingsId, settings, setSettings) => {
 			}
 		}, [settings]),
 
-		onReset: (e) => {
-			setSettings();
+		onReset: useCallback(
+			(e) => {
+				setSettings();
 
-			if (e.shiftKey) {
-				try {
-					localStorage.removeItem(storagePrefix + settingsId);
-					setCounter((counter) => counter + 1);
-				} catch (err) {
-					// ignore error
+				if (e.shiftKey) {
+					try {
+						localStorage.removeItem(storagePrefix + settingsId);
+						setCounter((counter) => counter + 1);
+					} catch (err) {
+						// ignore error
+					}
 				}
-			}
-		},
+				onReset?.();
+			},
+			[onReset]
+		),
 
 		hasChanges: settings != null,
 	};

package/lib/settings/use-settings.js

@@ -1,15 +1,24 @@
-import { useMemo, useState } from 'haunted';
+import { useMemo, useState, useRef, useCallback } from 'haunted';
 
 import useSavedSettings from './use-saved-settings';
-import normalize from './normalize';
+import normalize, { sgProps } from './normalize';
 
-export default ({ settingsId, ...thru }) => {
-	const [settings, setSettings] = useState(),
+export default ({ settingsId, initial: ini, ...thru }) => {
+	const initial = useMemo(
+			() => Object.fromEntries(sgProps.map((k) => [k, ini[k]])),
+			[]
+		),
+		resetRef = useRef(),
+		onReset = useCallback(() => {
+			resetRef.current?.(initial);
+		}, [initial]),
+		[settings, setSettings] = useState(),
 		[opened, setOpened] = useState({ columns: true, sort: true }),
 		{ savedSettings, ...rest } = useSavedSettings(
 			settingsId,
 			settings,
-			setSettings
+			setSettings,
+			onReset
 		),
 		{ columns } = thru,
 		normalizedSettings = useMemo(
@@ -17,6 +26,7 @@ export default ({ settingsId, ...thru }) => {
 				normalize({
 					settings,
 					savedSettings,
+					initial,
 					...thru,
 				}),
 			[settings, savedSettings, ...Object.values(thru)]
@@ -36,5 +46,6 @@ export default ({ settingsId, ...thru }) => {
 		settings: normalizedSettings,
 		columns: normalizedColumns,
 		setSettings,
+		resetRef,
 	};
 };

package/lib/use-hash-state.js

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'haunted';
-import { navigate } from '@neovici/cosmoz-page-router/lib/use-routes';
-import { invoke } from './invoke';
+import { navigate } from '@neovici/cosmoz-page-router';
 import { identity } from '@neovici/cosmoz-utils/lib/function';
+import { invoke } from './invoke';
 
 const
 	hashUrl = () => new URL(location.hash.replace(/^#!?/iu, '').replace('%23', '#'), location.origin),

package/lib/use-omnitable.js

@@ -5,15 +5,21 @@ import { useSettings } from './settings';
 import { useDOMColumns } from './use-dom-columns';
 import { useSortAndGroupOptions } from './use-sort-and-group-options';
 import { onItemChange } from './utils-data';
-import { useNotifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property'
+import { useNotifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = (host) => {
 	const { enabledColumns, hashParam, settingsId } = host,
 		_columns = useDOMColumns(host, { enabledColumns }),
 		settingS = useSettings({ columns: _columns, settingsId, initial: host }),
-		{ settings, setSettings, columns } = settingS,
-		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, settings, setSettings),
+		{ settings, setSettings, columns, resetRef } = settingS,
+		sortAndGroupOptions = useSortAndGroupOptions(
+			columns,
+			hashParam,
+			settings,
+			setSettings,
+			resetRef
+		),
 		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
 			sortAndGroupOptions,
 		{ data, resizeSpeedFactor } = host,

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

@@ -4,6 +4,7 @@ import {
 	component,
 	useContext,
 	useCallback,
+	useEffect,
 } from 'haunted';
 import { useHashState } from './use-hash-state';
 
@@ -23,7 +24,8 @@ export const useSortAndGroupOptions = (
 		columns,
 		hashParam,
 		settings,
-		setSettings
+		setSettings,
+		resetRef
 	) => {
 		const [sortOn, setSortOn] = useHashState(settings.sortOn, hashParam, {
 				suffix: '-sortOn',
@@ -73,7 +75,16 @@ export const useSortAndGroupOptions = (
 
 				columns,
 			},
-			sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_));
+			sortAndGroup = useMemo(() => sortAndGroup_, Object.values(sortAndGroup_)),
+			setSG = useCallback((c) => {
+				setSortOn(c.sortOn);
+				setGroupOn(c.groupOn);
+				setDescending(c.descending);
+				setGroupOnDescending(c.groupOnDescending);
+			}, []);
+
+		// eslint-disable-next-line no-void
+		useEffect(() => void (resetRef.current = setSG), []);
 
 		return {
 			...sortAndGroup,
@@ -84,7 +95,6 @@ export const useSortAndGroupOptions = (
 	},
 	SortAndGroupContext = createContext();
 
-
 customElements.define('sort-and-group-provider', SortAndGroupContext.Provider);
 customElements.define(
 	'sort-and-group-consumer',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "9.0.1",
+	"version": "10.0.0-beta.1",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -52,15 +52,15 @@
 		]
 	},
 	"dependencies": {
-		"@neovici/cosmoz-autocomplete": "^3.1.0",
-		"@neovici/cosmoz-bottom-bar": "^5.0.0",
+		"@neovici/cosmoz-autocomplete": "^4.0.0-beta.1",
+		"@neovici/cosmoz-bottom-bar": "^6.0.0-beta.1",
 		"@neovici/cosmoz-collapse": "^1.1.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
-		"@neovici/cosmoz-dropdown": "^1.5.0",
-		"@neovici/cosmoz-grouped-list": "^4.0.7",
+		"@neovici/cosmoz-dropdown": "^2.0.0-beta.1",
+		"@neovici/cosmoz-grouped-list": "^5.0.0-beta.1",
 		"@neovici/cosmoz-i18next": "^3.1.1",
-		"@neovici/cosmoz-page-router": "^7.0.0 || ^8.0.0",
-		"@neovici/cosmoz-utils": "^3.19.0",
+		"@neovici/cosmoz-page-router": "^9.0.0-beta.3",
+		"@neovici/cosmoz-utils": "^4.0.0-beta.2",
 		"@neovici/nullxlsx": "^3.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
@@ -70,28 +70,27 @@
 		"@polymer/paper-spinner": "^3.0.0",
 		"@polymer/polymer": "^3.3.0",
 		"@webcomponents/shadycss": "^1.10.0",
-		"file-saver-es": "^2.0.5",
-		"haunted": "^4.8.0",
-		"lit-html": "^1.3.0"
+		"file-saver-es": "^2.0.0",
+		"haunted": "^5.0.0",
+		"lit-html": "^2.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",
 		"@commitlint/config-conventional": "^17.0.0",
 		"@neovici/cfg": "^1.13.0",
-		"@neovici/cosmoz-viewinfo": "^3.1.3",
-		"@neovici/eslint-config": "^1.3.3",
-		"@open-wc/testing": "^2.5.28",
+		"@neovici/cosmoz-viewinfo": "^3.1.0",
+		"@open-wc/testing": "^3.0.0",
 		"@polymer/iron-test-helpers": "^3.0.0",
-		"@polymer/paper-button": "^3.0.1",
-		"@polymer/paper-item": "^3.0.1",
-		"@polymer/paper-listbox": "^3.0.1",
+		"@polymer/paper-button": "^3.0.0",
+		"@polymer/paper-item": "^3.0.0",
+		"@polymer/paper-listbox": "^3.0.0",
 		"@polymer/paper-toggle-button": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@web/dev-server": "^0.1.10",
 		"husky": "^8.0.0",
 		"semantic-release": "^19.0.0",
-		"sinon": "^13.0.0",
-		"web-animations-js": "^2.3.2"
+		"sinon": "^14.0.0",
+		"web-animations-js": "^2.3.0"
 	}
 }