@webitel/ui-datalist 1.1.6 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"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/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;