@webitel/ui-datalist 1.1.77 → 1.1.79

package/package.json

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

package/src/modules/card/stores/createCardStore.ts

@@ -6,7 +6,8 @@ import {
 import { getDefaultsFromZodSchema } from '@webitel/api-services/utils';
 import type { ApiModule } from '@webitel/ui-sdk/src/api/types/ApiModule';
 import { defineStore } from 'pinia';
-import { effectScope, ref, toRaw, watch } from 'vue';
+import type { MaybeRef } from 'vue';
+import { effectScope, ref, toRaw, toValue, watch } from 'vue';
 import type { z } from 'zod/v4';
 
 import type { CardItemId, CardParentId } from '../types/CardStore.types';
@@ -32,7 +33,7 @@ export const createCardStore = <
 	validationSchemaOptions,
 }: {
 	namespace: string;
-	standardValidationSchema: z.ZodType;
+	standardValidationSchema: MaybeRef<z.ZodType>;
 	/**
 	 * Every method on {@link ApiModule} is optional, but a card store reads and
 	 * writes one item, so these three are required here.
@@ -158,7 +159,7 @@ export const createCardStore = <
 				await loadItem();
 			} else if (standardValidationSchema) {
 				draftItemInstance.value = await getDefaultsFromZodSchema(
-					standardValidationSchema,
+					toValue(standardValidationSchema),
 					draftItemInstance.value,
 				);
 			} else {

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

@@ -15,6 +15,8 @@ const routes = [
 ];
 
 const namespace = 'cases';
+/* the `filters` route query key is namespaced by the store's storagePath */
+const filtersQueryKey = `${namespace}/filters`;
 
 describe('tableFiltersStoreBody', () => {
 	let router: Router;
@@ -84,7 +86,7 @@ describe('tableFiltersStoreBody', () => {
 			await router.push({
 				name: 'cases',
 				query: {
-					filters: JSON.stringify({
+					[filtersQueryKey]: JSON.stringify({
 						status_val: 'open',
 					}),
 				},
@@ -104,7 +106,9 @@ describe('tableFiltersStoreBody', () => {
 			});
 			await new Promise((resolve) => setTimeout(resolve));
 
-			expect(router.currentRoute.value.query.filters).toContain('open');
+			expect(router.currentRoute.value.query[filtersQueryKey]).toContain(
+				'open',
+			);
 		});
 
 		it('stores filters under the store namespace, not a shared key', async () => {
@@ -143,7 +147,9 @@ describe('tableFiltersStoreBody', () => {
 
 			await runWithRouter(() => store.syncPersistence());
 
-			expect(router.currentRoute.value.query.filters).toContain('open');
+			expect(router.currentRoute.value.query[filtersQueryKey]).toContain(
+				'open',
+			);
 		});
 
 		it('publishes nothing while no filter is applied', async () => {

package/src/modules/filters/components/dynamic-filter-add-action.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, useEventListener } from '@vueuse/core';
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -72,6 +72,43 @@ const dynamicFilterAddAction = ref<{
 	hidePopover: () => void;
 } | null>(null);
 
+/**
+ * @author @HlukhovYe
+ *
+ * https://webitel.atlassian.net/browse/WTEL-10240
+ *
+ * A click fully outside the popover can also be the same click that closes a
+ * child select/multiselect/datepicker overlay (its own panel is teleported to
+ * `body`, so it's not a descendant of `popoverContentRef`, and the `ignore`
+ * list below only matches clicks landing directly on it, not this outside
+ * click). The browser blurs the overlay's focused element (e.g. a multiselect
+ * filter input) as part of the same mousedown that starts this click, so by
+ * the time onClickOutside's own `click`-phase handler runs, `activeElement`
+ * has already reset to `body` — too late to check. A capture-phase
+ * `pointerdown` listener runs earlier, while focus is still intact, so it's
+ * used here to snapshot whether an open field overlay currently has focus.
+ * If so, let that overlay's own outside-click handler close it and leave this
+ * popover open — otherwise both close on the same click.
+ */
+let hadOwnOpenFieldOverlayOnPointerdown = false;
+useEventListener(
+	document,
+	'pointerdown',
+	() => {
+		const openFieldOverlay = document.querySelector(
+			'.p-select-overlay, .p-multiselect-overlay, .p-datepicker-panel',
+		);
+		hadOwnOpenFieldOverlayOnPointerdown = !!(
+			openFieldOverlay &&
+			(popoverContentRef.value?.contains(document.activeElement) ||
+				openFieldOverlay.contains(document.activeElement))
+		);
+	},
+	{
+		capture: true,
+	},
+);
+
 /**
  * @author @Oleksandr Palonnyi
  *
@@ -84,7 +121,11 @@ const dynamicFilterAddAction = ref<{
  * */
 onClickOutside(
 	popoverContentRef,
-	() => dynamicFilterAddAction?.value?.hidePopover(),
+	() => {
+		if (hadOwnOpenFieldOverlayOnPointerdown) return;
+
+		dynamicFilterAddAction?.value?.hidePopover();
+	},
 	{
 		capture: true, // Fix for PrimeVue stopPropagation bug
 		ignore: [

package/src/modules/headers/__tests__/createTableHeadersStore.spec.ts

@@ -16,6 +16,8 @@ const routes = [
 ];
 
 const id = 'cases/headers';
+/* the `fields` route query key is namespaced by the table's storagePath */
+const fieldsQueryKey = `${id}/fields`;
 
 const rawHeaders = [
 	{
@@ -148,7 +150,7 @@ describe('tableHeadersStoreBody', () => {
 			await router.push({
 				name: 'cases',
 				query: {
-					fields: 'createdAt',
+					[fieldsQueryKey]: 'createdAt',
 				},
 			});
 
@@ -237,7 +239,7 @@ describe('tableHeadersStoreBody', () => {
 			await router.push({
 				name: 'cases',
 				query: {
-					fields: 'agent,createdAt',
+					[fieldsQueryKey]: 'agent,createdAt',
 				},
 			});
 
@@ -280,7 +282,7 @@ describe('tableHeadersStoreBody', () => {
 			await router.push({
 				name: 'cases',
 				query: {
-					fields: 'member',
+					[fieldsQueryKey]: 'member',
 				},
 			});
 
@@ -326,7 +328,7 @@ describe('tableHeadersStoreBody', () => {
 
 			await runWithRouter(() => store.syncPersistence());
 
-			expect(router.currentRoute.value.query.fields).toBe('name');
+			expect(router.currentRoute.value.query[fieldsQueryKey]).toBe('name');
 		});
 
 		it('publishes nothing while the columns are still default', async () => {

package/src/modules/persist/usePersistedStorage.ts

@@ -62,7 +62,10 @@ export const usePersistedStorage = ({
 
 	/* keyed by the enum, so a kind without an adapter is a type error */
 	const adapterFactories: Record<PersistedStorageType, () => StorageLike> = {
-		[PersistedStorageType.Route]: () => useRoutePersistedStorage(),
+		[PersistedStorageType.Route]: () =>
+			useRoutePersistedStorage({
+				storagePath,
+			}),
 		[PersistedStorageType.LocalStorage]: () =>
 			useLocalStoragePersistedStorage({
 				storagePath,

package/src/modules/persist/useRoutePersistedStorage.ts

@@ -19,12 +19,19 @@ const enqueueWrite = <T>(write: () => Promise<T>): Promise<T> => {
 	return result;
 };
 
-export const useRoutePersistedStorage = (): StorageLike => {
+const makeQueryKey = (storagePath: string, key: string) =>
+	storagePath ? `${storagePath}/${key}` : key;
+
+export const useRoutePersistedStorage = ({
+	storagePath = '',
+}: {
+	storagePath?: string;
+} = {}): StorageLike => {
 	const router = useRouter();
 	const route = useRoute();
 
 	const getItem = async (key: string) => {
-		return route.query[key];
+		return route.query[makeQueryKey(storagePath, key)];
 	};
 
 	const setItem = async (key: string, value: string | string[]) => {
@@ -35,7 +42,7 @@ export const useRoutePersistedStorage = (): StorageLike => {
 				hash: route.hash,
 				query: {
 					...route.query,
-					[key]: value,
+					[makeQueryKey(storagePath, key)]: value,
 				},
 			}),
 		);
@@ -46,7 +53,7 @@ export const useRoutePersistedStorage = (): StorageLike => {
 			const query = {
 				...route.query,
 			};
-			delete query[key];
+			delete query[makeQueryKey(storagePath, key)];
 
 			return router.replace({
 				name: route.name,

package/src/modules/table/createTableStore.store.ts

@@ -103,9 +103,19 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		selected.value = value;
 	};
 
+	// filtersManager is reactive(), so its values come back as reactive
+	// proxies — strip that here so apiModule implementations never have to.
+	const toRawFilterValues = (source: Record<string, unknown>) =>
+		Object.fromEntries(
+			Object.entries(source).map(([key, value]) => [
+				key,
+				toRaw(value),
+			]),
+		);
+
 	// Always request `id` (Vuex REQUIRED_FIELDS default) — needed for select/delete/open
 	const getLoadDataParams = () => ({
-		...filtersManager.value.getAllValues(),
+		...toRawFilterValues(filtersManager.value.getAllValues()),
 		page: page.value,
 		size: size.value,
 		sort: sort.value,