@webitel/ui-datalist 1.1.68 → 1.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.68",
+	"version": "1.1.70",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

package/src/modules/filter-presets/stores/__tests__/createFilterPresetsStore.spec.ts

@@ -0,0 +1,58 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { createFilterPresetsStore } from '../createFilterPresetsStore';
+
+const NAMESPACE = 'test';
+const STORAGE_KEY = `${NAMESPACE}/presets/preset`;
+const CACHED_PRESET_ID = 42;
+
+const setupStore = async () => {
+	const store = createFilterPresetsStore(NAMESPACE)();
+	await store.setupPresetPersistence();
+
+	return store;
+};
+
+describe('filter presets persistence', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+		localStorage.clear();
+	});
+
+	it('restores the cached preset id', async () => {
+		localStorage.setItem(STORAGE_KEY, String(CACHED_PRESET_ID));
+
+		const store = await setupStore();
+
+		expect(store.presetId).toBe(CACHED_PRESET_ID);
+	});
+
+	/*
+   restore() snapshots the value through onStore before reading the storages,
+    so an onStore that clears used to delete the cached preset on every setup
+   */
+	it('keeps the cached preset id stored while restoring it', async () => {
+		localStorage.setItem(STORAGE_KEY, String(CACHED_PRESET_ID));
+
+		await setupStore();
+
+		expect(localStorage.getItem(STORAGE_KEY)).toBe(String(CACHED_PRESET_ID));
+	});
+
+	it('leaves presetId empty when nothing is cached, instead of NaN', async () => {
+		const store = await setupStore();
+
+		expect(store.presetId).toBeNull();
+	});
+
+	it('drops the cached preset on resetPreset', async () => {
+		localStorage.setItem(STORAGE_KEY, String(CACHED_PRESET_ID));
+		const store = await setupStore();
+
+		await store.resetPreset();
+
+		expect(store.presetId).toBeNull();
+		expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+	});
+});

package/src/modules/filter-presets/stores/createFilterPresetsStore.ts

@@ -28,6 +28,8 @@ export const filterPresetsStoreBody = (namespace = 'presets') => {
 
 	const presetId = ref<number | null>(null);
 
+	let resetPersistedPreset: (() => Promise<void>) | null = null;
+
 	const setupPresetPersistence = async () => {
 		const { restore: restorePreset, reset } = usePersistedStorage({
 			name: 'preset',
@@ -36,11 +38,15 @@ export const filterPresetsStoreBody = (namespace = 'presets') => {
 				PersistedStorageType.LocalStorage,
 			],
 			storagePath: presetsNamespace,
-			onStore: (save, { name }) => {
+			/*
+     side-effect free on purpose: serialize() runs this path merely to snapshot
+      the value, so clearing the storage from here wipes the cached preset
+      before restore() gets to read it
+     */
+			onStore: async (save, { name }) => {
 				const value = presetId.value;
-				if (!value) {
-					return reset();
-				}
+				if (!value) return;
+
 				return save({
 					name,
 					value,
@@ -48,9 +54,13 @@ export const filterPresetsStoreBody = (namespace = 'presets') => {
 			},
 			onRestore: async (restore, name) => {
 				const value = await restore(name);
-				presetId.value = Number(value);
+				/* absent key resolves undefined, and Number(undefined) is NaN */
+				if (value) presetId.value = Number(value);
 			},
 		});
+
+		resetPersistedPreset = reset;
+
 		await restorePreset();
 	};
 
@@ -59,8 +69,10 @@ export const filterPresetsStoreBody = (namespace = 'presets') => {
 		presetsTableConfig,
 	);
 
-	const resetPreset = () => {
+	/* onStore no longer clears, so dropping the cached preset is explicit */
+	const resetPreset = async () => {
 		presetId.value = null;
+		await resetPersistedPreset?.();
 	};
 
 	return {

package/src/modules/filters/__tests__/createTableFiltersStore.spec.ts

@@ -22,6 +22,7 @@ describe('tableFiltersStoreBody', () => {
 
 	beforeEach(async () => {
 		localStorage.clear();
+		sessionStorage.clear();
 
 		router = createRouter({
 			history: createMemoryHistory(),
@@ -106,6 +107,19 @@ describe('tableFiltersStoreBody', () => {
 			expect(router.currentRoute.value.query.filters).toContain('open');
 		});
 
+		it('stores filters under the store namespace, not a shared key', async () => {
+			const store = await setUpStore();
+
+			store.addFilter({
+				name: 'status',
+				value: 'open',
+			});
+			await new Promise((resolve) => setTimeout(resolve));
+
+			expect(sessionStorage.getItem(`${namespace}/filters`)).toContain('open');
+			expect(sessionStorage.getItem('/filters')).toBeNull();
+		});
+
 		it('keeps searchMode out of the route query', async () => {
 			const store = await setUpStore();
 

package/src/modules/filters/createTableFiltersStore.ts

@@ -55,7 +55,9 @@ export const tableFiltersStoreBody = (
 
 			storages: [
 				PersistedStorageType.Route,
+				PersistedStorageType.SessionStorage,
 			],
+			storagePath: namespace,
 
 			/* use custom .toString() logic, provided by FiltersManager */
 			onStore: async (save, { name }) => {

package/src/modules/headers/createTableHeadersStore.ts

@@ -249,9 +249,10 @@ export const tableHeadersStoreBody = ({
 		const fieldsStorage = usePersistedStorage({
 			name: 'fields',
 			value: fields,
+			/* order is the restore priority: a shared link wins over local columns */
 			storages: [
-				PersistedStorageType.LocalStorage,
 				PersistedStorageType.Route,
+				PersistedStorageType.LocalStorage,
 			],
 			storagePath: id,
 			onStore: (save, { name }) => {

package/src/modules/persist/PersistedStorage.types.ts

@@ -3,6 +3,7 @@ import type { Ref, WatchOptions } from 'vue';
 export enum PersistedStorageType {
 	LocalStorage = 'localStorage',
 	Route = 'route',
+	SessionStorage = 'sessionStorage',
 }
 
 // in route query, or in localStorage
@@ -35,6 +36,10 @@ export interface PersistedPropertyConfig {
 	storagePath?: string;
 	startWatchManually?: boolean;
 	watchConfig?: WatchOptions;
+	// must be side-effect free apart from the `save` it is handed: serialize()
+	// runs this path with a `save` that only captures, so touching the storages
+	// from here mutates them at snapshot time – including before restore() has
+	// read them
 	onStore?: (
 		save: ({
 			name,

package/src/modules/persist/__tests__/usePersistedStorage.spec.ts

@@ -26,10 +26,11 @@ const createStorageMock = (): StorageLike & {
 
 const routeStorage = createStorageMock();
 const localStorage = createStorageMock();
+const sessionStorage = createStorageMock();
 
 /*
  route storage resolves `undefined` for a missing query param,
-  local storage resolves `null` – both are mocked to keep that difference
+  the web ones resolve `null` – all are mocked to keep that difference
  */
 vi.mock('../useRoutePersistedStorage', () => ({
 	useRoutePersistedStorage: () => ({
@@ -44,15 +45,109 @@ vi.mock('../useLocalStoragePersistedStorage', () => ({
 	useLocalStoragePersistedStorage: () => localStorage,
 }));
 
+vi.mock('../useSessionStoragePersistedStorage', () => ({
+	useSessionStoragePersistedStorage: () => sessionStorage,
+}));
+
 const { usePersistedStorage } = await import('../usePersistedStorage');
 
+const storageMocks = {
+	[PersistedStorageType.Route]: routeStorage,
+	[PersistedStorageType.LocalStorage]: localStorage,
+	[PersistedStorageType.SessionStorage]: sessionStorage,
+};
+
+const storageKinds = Object.values(PersistedStorageType).map((type) => ({
+	type,
+	storage: storageMocks[type],
+}));
+
 describe('usePersistedStorage', () => {
 	beforeEach(() => {
-		routeStorage.value = null;
-		localStorage.value = null;
+		Object.values(storageMocks).forEach((storage) => {
+			storage.value = null;
+		});
 		vi.clearAllMocks();
 	});
 
+	/* every kind has to take part in all of it, so every enum member is run */
+	describe.each(storageKinds)('$type storage', ({ type, storage }) => {
+		it('is restored from', async () => {
+			storage.value = 'stored';
+			const value = ref('');
+
+			await usePersistedStorage({
+				name: 'filters',
+				value,
+				storages: [
+					type,
+				],
+			}).restore();
+
+			expect(value.value).toBe('stored');
+		});
+
+		it('is written to by the watcher', async () => {
+			const value = ref('initial');
+
+			await usePersistedStorage({
+				name: 'filters',
+				value,
+				storages: [
+					type,
+				],
+			}).restore();
+
+			value.value = 'changed';
+			await nextTick();
+
+			expect(storage.value).toBe('changed');
+		});
+
+		it('is published into by sync when it holds nothing', async () => {
+			const value = ref('filtered');
+
+			await usePersistedStorage({
+				name: 'filters',
+				value,
+				storages: [
+					type,
+				],
+			}).sync();
+
+			expect(storage.value).toBe('filtered');
+		});
+
+		it('is left untouched by sync when it already holds a value', async () => {
+			storage.value = 'stored';
+
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref('from-memory'),
+				storages: [
+					type,
+				],
+			}).sync();
+
+			expect(storage.setItem).not.toHaveBeenCalled();
+			expect(storage.value).toBe('stored');
+		});
+
+		it('is cleared by reset', async () => {
+			storage.value = 'stored';
+
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref('from-memory'),
+				storages: [
+					type,
+				],
+			}).reset();
+
+			expect(storage.value).toBeNull();
+		});
+	});
+
 	describe('sync', () => {
 		it('publishes the current value to an empty storage', async () => {
 			const value = ref('filtered');
@@ -224,6 +319,40 @@ describe('usePersistedStorage', () => {
 			expect(value.value).toBe('from-local-storage');
 		});
 
+		it('follows the declared order, not the order the kinds are defined in', async () => {
+			routeStorage.value = 'from-url';
+			localStorage.value = 'from-local-storage';
+			const value = ref('');
+
+			await usePersistedStorage({
+				name: 'fields',
+				value,
+				storages: [
+					PersistedStorageType.LocalStorage,
+					PersistedStorageType.Route,
+				],
+			}).restore();
+
+			expect(value.value).toBe('from-local-storage');
+		});
+
+		it('restores from the third storage when the first two hold nothing', async () => {
+			sessionStorage.value = 'from-session-storage';
+			const value = ref('');
+
+			await usePersistedStorage({
+				name: 'fields',
+				value,
+				storages: [
+					PersistedStorageType.Route,
+					PersistedStorageType.LocalStorage,
+					PersistedStorageType.SessionStorage,
+				],
+			}).restore();
+
+			expect(value.value).toBe('from-session-storage');
+		});
+
 		it('prefers the route value over the next storages', async () => {
 			routeStorage.value = 'from-url';
 			localStorage.value = 'from-local-storage';
@@ -241,6 +370,36 @@ describe('usePersistedStorage', () => {
 			expect(value.value).toBe('from-url');
 		});
 
+		it('seeds the storages that held nothing with the restored value', async () => {
+			sessionStorage.value = 'from-session-storage';
+
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref(''),
+				storages: [
+					PersistedStorageType.Route,
+					PersistedStorageType.SessionStorage,
+				],
+			}).restore();
+
+			expect(routeStorage.value).toBe('from-session-storage');
+			expect(sessionStorage.setItem).not.toHaveBeenCalled();
+		});
+
+		it('seeds nothing when the state is still default', async () => {
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref(''),
+				storages: [
+					PersistedStorageType.Route,
+					PersistedStorageType.SessionStorage,
+				],
+			}).restore();
+
+			expect(routeStorage.setItem).not.toHaveBeenCalled();
+			expect(sessionStorage.setItem).not.toHaveBeenCalled();
+		});
+
 		it('leaves the value untouched when no storage holds anything', async () => {
 			const value = ref('in-memory');
 

package/src/modules/persist/__tests__/useWebStoragePersistedStorage.spec.ts

@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { useLocalStoragePersistedStorage } from '../useLocalStoragePersistedStorage';
+import { useSessionStoragePersistedStorage } from '../useSessionStoragePersistedStorage';
+
+const webStorages = [
+	{
+		name: 'useLocalStoragePersistedStorage',
+		useStorage: useLocalStoragePersistedStorage,
+		nativeStorage: () => localStorage,
+	},
+	{
+		name: 'useSessionStoragePersistedStorage',
+		useStorage: useSessionStoragePersistedStorage,
+		nativeStorage: () => sessionStorage,
+	},
+];
+
+describe.each(webStorages)('$name', ({ useStorage, nativeStorage }) => {
+	beforeEach(() => {
+		localStorage.clear();
+		sessionStorage.clear();
+	});
+
+	it('namespaces keys with the storagePath', async () => {
+		const storage = useStorage({
+			storagePath: 'cases/headers',
+		});
+
+		await storage.setItem('fields', 'name,subject');
+
+		expect(nativeStorage().getItem('cases/headers/fields')).toBe(
+			'name,subject',
+		);
+	});
+
+	it('keeps stores with different paths apart', async () => {
+		const cases = useStorage({
+			storagePath: 'cases',
+		});
+		const contacts = useStorage({
+			storagePath: 'contacts',
+		});
+
+		await cases.setItem('fields', 'subject');
+		await contacts.setItem('fields', 'name');
+
+		expect(await cases.getItem('fields')).toBe('subject');
+		expect(await contacts.getItem('fields')).toBe('name');
+	});
+
+	it('resolves null for a missing key', async () => {
+		const storage = useStorage({
+			storagePath: 'cases',
+		});
+
+		expect(await storage.getItem('fields')).toBeNull();
+	});
+
+	it('stores an array as a comma-joined value', async () => {
+		const storage = useStorage({
+			storagePath: 'cases',
+		});
+
+		await storage.setItem('fields', [
+			'name',
+			'subject',
+		]);
+
+		expect(await storage.getItem('fields')).toBe('name,subject');
+	});
+
+	it('removes a key', async () => {
+		const storage = useStorage({
+			storagePath: 'cases',
+		});
+		await storage.setItem('fields', 'name');
+
+		await storage.removeItem('fields');
+
+		expect(await storage.getItem('fields')).toBeNull();
+	});
+});
+
+describe('web storages isolation', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		sessionStorage.clear();
+	});
+
+	it('does not let the two kinds see each other values', async () => {
+		const local = useLocalStoragePersistedStorage({
+			storagePath: 'cases',
+		});
+		const session = useSessionStoragePersistedStorage({
+			storagePath: 'cases',
+		});
+
+		await local.setItem('filters', 'from-local-storage');
+
+		expect(await session.getItem('filters')).toBeNull();
+
+		await session.setItem('filters', 'from-session-storage');
+
+		expect(await local.getItem('filters')).toBe('from-local-storage');
+	});
+});

package/src/modules/persist/useLocalStoragePersistedStorage.ts

@@ -1,34 +1,13 @@
 import type { StorageLike } from './PersistedStorage.types.ts';
-
-const separator = ';';
-
-const makePath = (storagePath: string, key: string) => `${storagePath}/${key}`;
+import { useWebStoragePersistedStorage } from './useWebStoragePersistedStorage';
 
 export const useLocalStoragePersistedStorage = ({
 	storagePath = '',
 }: {
 	storagePath?: string;
 }): StorageLike => {
-	const getItem = async (key: string) => {
-		const value = localStorage.getItem(makePath(storagePath, key));
-		if (value === null) return null;
-		return value.split(separator).join();
-	};
-
-	const setItem = async (key: string, inputValue: string | string[]) => {
-		const value = Array.isArray(inputValue)
-			? inputValue.join(separator)
-			: inputValue;
-		localStorage.setItem(makePath(storagePath, key), value);
-	};
-
-	const removeItem = async (key: string) => {
-		localStorage.removeItem(makePath(storagePath, key));
-	};
-
-	return {
-		getItem,
-		setItem,
-		removeItem,
-	};
+	return useWebStoragePersistedStorage({
+		storage: () => localStorage,
+		storagePath,
+	});
 };

package/src/modules/persist/usePersistedStorage.ts

@@ -8,9 +8,11 @@ import {
 	type PersistedStorageController,
 	PersistedStorageType,
 	type PersistStorableValue,
+	type StorageLike,
 } from './PersistedStorage.types';
 import { useLocalStoragePersistedStorage } from './useLocalStoragePersistedStorage';
 import { useRoutePersistedStorage } from './useRoutePersistedStorage';
+import { useSessionStoragePersistedStorage } from './useSessionStoragePersistedStorage';
 
 const toStorableValue = (value: PersistableValue): PersistStorableValue => {
 	return typeof value === 'string' ? value : (value?.toString() ?? '');
@@ -58,24 +60,30 @@ export const usePersistedStorage = ({
 				configStorages,
 			];
 
+	/* keyed by the enum, so a kind without an adapter is a type error */
+	const adapterFactories: Record<PersistedStorageType, () => StorageLike> = {
+		[PersistedStorageType.Route]: () => useRoutePersistedStorage(),
+		[PersistedStorageType.LocalStorage]: () =>
+			useLocalStoragePersistedStorage({
+				storagePath,
+			}),
+		[PersistedStorageType.SessionStorage]: () =>
+			useSessionStoragePersistedStorage({
+				storagePath,
+			}),
+	};
+
 	/*
   order matters, as the first storage in the list has the highest priority
    */
-	if (storages.includes(PersistedStorageType.Route)) {
-		adapters.push({
-			type: PersistedStorageType.Route,
-			...useRoutePersistedStorage(),
-		});
-	}
+	storages.forEach((type) => {
+		if (adapters.some((adapter) => adapter.type === type)) return;
 
-	if (storages.includes(PersistedStorageType.LocalStorage)) {
 		adapters.push({
-			type: PersistedStorageType.LocalStorage,
-			...useLocalStoragePersistedStorage({
-				storagePath,
-			}),
+			type,
+			...adapterFactories[type](),
 		});
-	}
+	});
 
 	/*
    runs the storing path with a `save` doing whatever the caller needs:
@@ -163,6 +171,13 @@ export const usePersistedStorage = ({
 				value.value = restoredValue;
 			}
 		}
+		/*
+     the restored value comes from one storage, and the others may hold nothing
+      – seed them, so every storage mirrors the state right away instead of
+      waiting for the next sync()
+     */
+		await sync();
+
 		/*
       start watching after restoring value to prevent restored value
        from storing again

package/src/modules/persist/useSessionStoragePersistedStorage.ts

@@ -0,0 +1,13 @@
+import type { StorageLike } from './PersistedStorage.types.ts';
+import { useWebStoragePersistedStorage } from './useWebStoragePersistedStorage';
+
+export const useSessionStoragePersistedStorage = ({
+	storagePath = '',
+}: {
+	storagePath?: string;
+}): StorageLike => {
+	return useWebStoragePersistedStorage({
+		storage: () => sessionStorage,
+		storagePath,
+	});
+};

package/src/modules/persist/useWebStoragePersistedStorage.ts

@@ -0,0 +1,37 @@
+import type { StorageLike } from './PersistedStorage.types.ts';
+
+const separator = ';';
+
+const makePath = (storagePath: string, key: string) => `${storagePath}/${key}`;
+
+/* `storage` is a getter, so the global is touched at call time, not at module load */
+export const useWebStoragePersistedStorage = ({
+	storage,
+	storagePath = '',
+}: {
+	storage: () => Storage;
+	storagePath?: string;
+}): StorageLike => {
+	const getItem = async (key: string) => {
+		const value = storage().getItem(makePath(storagePath, key));
+		if (value === null) return null;
+		return value.split(separator).join();
+	};
+
+	const setItem = async (key: string, inputValue: string | string[]) => {
+		const value = Array.isArray(inputValue)
+			? inputValue.join(separator)
+			: inputValue;
+		storage().setItem(makePath(storagePath, key), value);
+	};
+
+	const removeItem = async (key: string) => {
+		storage().removeItem(makePath(storagePath, key));
+	};
+
+	return {
+		getItem,
+		setItem,
+		removeItem,
+	};
+};