@webitel/ui-datalist 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.6",
+	"version": "1.1.8",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && ( npm run lint:fix || true) && (npm run build:types || true) && npm run utils:publish",

package/src/modules/filters/components/config/dynamic-view/dynamic-filter-config-view.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dynamic-filter-config-view">
-    <wt-popover :disabled="props.disabled">
+    <wt-popover ref="popover" :disabled="props.disabled">
       <template #activator="{ toggle }">
         <slot
           name="activator"
@@ -24,6 +24,7 @@
  * and their styling
  */
 import { WtPopover } from '@webitel/ui-sdk/components';
+import { defineExpose, ref } from 'vue';
 
 interface Props {
 	disabled?: boolean;
@@ -31,6 +32,16 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+const popover = ref(null);
+
+const hidePopover = () => {
+	popover.value?.hide();
+};
+
+defineExpose({
+	hidePopover,
+});
 </script>
 
 <style scoped></style>

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

@@ -1,5 +1,6 @@
 <template>
   <dynamic-filter-config-view
+    ref="dynamicFilterAddAction"
     disable-click-away
     class="dynamic-filter-add-action"
   >
@@ -14,20 +15,24 @@
 
     <template #content="{ hide }">
       <slot name="form">
-        <dynamic-filter-config-form
-          :filter-configs="props.filterConfigs"
-          @cancel="hide"
-          @submit="
-            (payload) => submit(payload, { hide })
-          "
-        />
+        <div ref="popoverContentRef">
+          <dynamic-filter-config-form
+            :filter-configs="props.filterConfigs"
+            @cancel="hide"
+            @submit="
+              (payload) => submit(payload, { hide })
+            "
+          />
+        </div>
       </slot>
     </template>
   </dynamic-filter-config-view>
 </template>
 
 <script lang="ts" setup>
+import { onClickOutside } from '@vueuse/core';
 import { WtIconAction } from '@webitel/ui-sdk/components';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { FilterInitParams } from '../classes/Filter';
@@ -54,6 +59,31 @@ const submit = (payload: FilterInitParams, { hide }) => {
 	emit('add:filter', payload);
 	hide();
 };
+
+const popoverContentRef = ref<HTMLElement | null>(null);
+const dynamicFilterAddAction = ref<null>(null);
+
+/**
+ * @author @Oleksandr Palonnyi
+ *
+ * [WTEL-8817](https://webitel.atlassian.net/browse/WTEL-8817)
+ *
+ * Close popover on outside click.
+ * Capture phase fixes PrimeVue bug where stopPropagation() (used by navbar menus)
+ * blocks default outside-click detection. Capture fires before the block.
+ * Ignore: .wt-chip (activator), .p-popover (popover content)
+ * */
+onClickOutside(
+	popoverContentRef,
+	() => dynamicFilterAddAction.value?.hidePopover(),
+	{
+		capture: true, // Fix for PrimeVue stopPropagation bug
+		ignore: [
+			'.wt-chip',
+			'.p-popover',
+		], // Exclude activator and popover
+	},
+);
 </script>
 
 <style lang="scss" scoped>

package/src/modules/headers/createTableHeadersStore.ts

@@ -130,7 +130,12 @@ export const tableHeadersStoreBody = ({
 		]);
 	};
 
-	const updateSort = (column) => {
+	const updateSort = (
+		column,
+		options: {
+			order?: SortSymbols;
+		} = {},
+	) => {
 		const getNextSortOrder = (sort) => {
 			switch (sort) {
 				case SortSymbols.NONE:
@@ -162,7 +167,10 @@ export const tableHeadersStoreBody = ({
 			});
 		};
 
-		const order = getNextSortOrder(column.sort);
+		const order =
+			options.order !== undefined
+				? options.order
+				: getNextSortOrder(column.sort);
 
 		headers.value = changeHeadersSort({
 			headers: headers.value,

package/types/modules/filter-presets/stores/createFilterPresetsStore.d.ts

@@ -1,3 +1,4 @@
+import { EnginePresetQuery } from 'webitel-sdk';
 export declare const filterPresetsStoreBody: (namespace?: string) => {
     presetId: import("vue").Ref<any, any>;
     setupPresetPersistence: () => Promise<void>;
@@ -97,7 +98,9 @@ export declare const filterPresetsStoreBody: (namespace?: string) => {
     updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
-    updateSort: (column: any) => void;
+    updateSort: (column: any, options?: {
+        order?: EnginePresetQuery;
+    }) => void;
     columnResize: ({ columnName, columnWidth }: {
         columnName: any;
         columnWidth: any;
@@ -208,7 +211,9 @@ export declare const createFilterPresetsStore: (namespace: string) => () => {
     updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
-    updateSort: (column: any) => void;
+    updateSort: (column: any, options?: {
+        order?: EnginePresetQuery;
+    }) => void;
     columnResize: ({ columnName, columnWidth }: {
         columnName: any;
         columnWidth: any;

package/types/modules/filters/components/config/dynamic-view/dynamic-filter-config-view.vue.d.ts

@@ -2,18 +2,20 @@ interface Props {
     disabled?: boolean;
     disableClickAway?: boolean;
 }
-declare var __VLS_8: {
+declare var __VLS_10: {
     toggle: any;
     disabled: boolean;
-}, __VLS_11: {
+}, __VLS_13: {
     hide: any;
 };
 type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_8) => any;
+    activator?: (props: typeof __VLS_10) => any;
 } & {
-    content?: (props: typeof __VLS_11) => any;
+    content?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    hidePopover: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/modules/filters/components/dynamic-filter-add-action.vue.d.ts

@@ -4,9 +4,9 @@ interface Props {
     filterConfigs: BaseFilterConfig[];
     showLabel?: boolean;
 }
-declare var __VLS_15: {};
+declare var __VLS_16: {};
 type __VLS_Slots = {} & {
-    form?: (props: typeof __VLS_15) => any;
+    form?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "add:filter": (args_0: FilterInitParams) => any;

package/types/modules/headers/createTableHeadersStore.d.ts

@@ -1,4 +1,5 @@
 import { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
+import { SortSymbols } from '@webitel/ui-sdk/scripts/sortQueryAdapters';
 import { useTableStoreConfig } from '../types/tableStore.types';
 interface TableHeadersStoreBodyParams {
     rawHeaders: WtTableHeader[];
@@ -12,7 +13,9 @@ export declare const tableHeadersStoreBody: ({ rawHeaders, id, }: TableHeadersSt
     columnWidths: import("vue").ComputedRef<any>;
     isReorderingColumn: import("vue").Ref<boolean, boolean>;
     updateShownHeaders: (value: any) => void;
-    updateSort: (column: any) => void;
+    updateSort: (column: any, options?: {
+        order?: SortSymbols;
+    }) => void;
     columnResize: ({ columnName, columnWidth }: {
         columnName: any;
         columnWidth: any;
@@ -31,7 +34,9 @@ export declare const createTableHeadersStore: <Entity>(namespace: string, config
     columnWidths: import("vue").ComputedRef<any>;
     isReorderingColumn: import("vue").Ref<boolean, boolean>;
     updateShownHeaders: (value: any) => void;
-    updateSort: (column: any) => void;
+    updateSort: (column: any, options?: {
+        order?: SortSymbols;
+    }) => void;
     columnResize: ({ columnName, columnWidth }: {
         columnName: any;
         columnWidth: any;

package/types/modules/table/createTableStore.store.d.ts

@@ -1,3 +1,4 @@
+import deepEqual from 'deep-equal';
 import { type Ref } from 'vue';
 import { PatchItemPropertyParams, useTableStoreConfig } from '../types/tableStore.types';
 export declare const tableStoreBody: <Entity extends {
@@ -99,7 +100,9 @@ export declare const tableStoreBody: <Entity extends {
     updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
-    updateSort: (column: any) => void;
+    updateSort: (column: any, options?: {
+        order?: deepEqual;
+    }) => void;
     columnResize: ({ columnName, columnWidth }: {
         columnName: any;
         columnWidth: any;
@@ -210,7 +213,9 @@ export declare const createTableStore: <Entity extends {
     updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
-    updateSort: (column: any) => void;
+    updateSort: (column: any, options?: {
+        order?: deepEqual;
+    }) => void;
     columnResize: ({ columnName, columnWidth }: {
         columnName: any;
         columnWidth: any;