@webitel/ui-datalist 1.0.53 → 1.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "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",
@@ -37,7 +37,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@webitel/styleguide": "^24.12.26",
     "@webitel/ui-sdk": "^25.8.7",
-    "@webitel/api-services": "^0.0.24",
+    "@webitel/api-services": "^0.0.38",
     "zod": "^3.25.55",
     "@vueuse/core": "^13.3.0"
   },

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

@@ -1,7 +1,6 @@
 import { RegleBehaviourOptions } from '@regle/core';
 import { RegleSchemaBehaviourOptions, useRegleSchema } from '@regle/schemas';
 import { getDefaultsFromZodSchema } from '@webitel/api-services/utils';
-// @ts-ignore
 import { ApiModule } from '@webitel/ui-sdk/src/api/types/ApiModule';
 import { defineStore } from 'pinia';
 import { ref, toRaw, watch } from 'vue';

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

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

package/src/modules/filters/components/preview/dynamic-filter-preview.vue

@@ -1,50 +1,51 @@
 <template>
   <dynamic-filter-config-view :disabled="readonly">
-    <template #activator="{ disabled: configFormVisible, toggle }">
-      <wt-tooltip
-        :disabled="configFormVisible"
-        @update:visible="!localValue && fillLocalValue()"
-        @click="toggle"
-      >
-        <template #activator>
-          <div @click="toggle">
-            <wt-chip color="primary">
-              {{ filter.label || filterConfig.label }}
-              <wt-icon-btn
-                v-if="!filterConfig.notDeletable && !readonly"
-                color="on-primary"
-                icon="close--filled"
-                size="sm"
-                @mousedown.stop="deleteFilter"
-              />
-            </wt-chip>
-          </div>
-        </template>
-
-        <template #default>
-          <dynamic-filter-preview-info>
-            <template #header>
-              {{ filterConfig.label }}
-            </template>
-
-            <template #default>
-              <slot name="info">
-                <wt-loader
-                  v-if="!isRenderPreview"
+    <template #activator="{ toggle }">
+      <div @click="toggle">
+        <wt-popover>
+          <template #activator="{ show: showCheapPopoverCb, hide: hideCheapPopover }">
+            <div
+              @pointerenter="(event) => showCheapPopover(event, showCheapPopoverCb)"
+              @pointerleave="hideCheapPopover"
+            >
+              <wt-chip color="primary">
+                {{ filter.label || filterConfig.label }}
+                <wt-icon-btn
+                  v-if="!filterConfig.notDeletable && !readonly"
+                  color="on-primary"
+                  icon="close--filled"
                   size="sm"
+                  @mousedown.stop="deleteFilter"
                 />
-                <component
-                  :is="filterConfig.valuePreviewComponent"
-                  v-else
-                  :filter="props.filter"
-                  :filter-config="filterConfig"
-                  :value="localValue"
-                />
-              </slot>
-            </template>
-          </dynamic-filter-preview-info>
-        </template>
-      </wt-tooltip>
+              </wt-chip>
+            </div>
+          </template>
+
+          <template #default>
+            <dynamic-filter-preview-info>
+              <template #header>
+                {{ filterConfig.label }}
+              </template>
+
+              <template #default>
+                <slot name="info">
+                  <wt-loader
+                    v-if="!isRenderPreview"
+                    size="sm"
+                  />
+                  <component
+                    :is="filterConfig.valuePreviewComponent"
+                    v-else
+                    :filter="props.filter"
+                    :filter-config="filterConfig"
+                    :value="localValue"
+                  />
+                </slot>
+              </template>
+            </dynamic-filter-preview-info>
+          </template>
+        </wt-popover>
+      </div>
     </template>
 
     <template #content="{ hide }">
@@ -70,9 +71,9 @@ import {
   WtChip,
   WtIconBtn,
   WtLoader,
-  WtTooltip,
+  WtPopover,
 } from '@webitel/ui-sdk/components';
-import { computed, ref, watch } from 'vue';
+import {computed, ref, useTemplateRef, watch} from 'vue';
 
 import { IFilter } from '../../classes/Filter';
 import { FilterOptionToPreviewApiSearchMethodMap } from '../../modules/filterConfig/components';
@@ -87,6 +88,14 @@ const emit = defineEmits<DynamicFilterEmits>();
 
 const localValue = ref();
 
+const showCheapPopover = (event, showPopoverCb: (event) => void) => {
+  if (!localValue.value) {
+    fillLocalValue()
+  }
+
+  showPopoverCb(event);
+};
+
 /**
  * @author @dlohvinov
  *

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

@@ -7,24 +7,20 @@ interface Props {
     disabled?: boolean;
     disableClickAway?: boolean;
 }
-declare const toggle: (event: any) => void;
-declare const hide: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_1: {
-    toggle: (event: any) => void;
+declare var __VLS_5: {
+    toggle: any;
     disabled: boolean;
-}, __VLS_9: {
-    hide: () => void;
+}, __VLS_7: {
+    hide: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    activator?: (props: typeof __VLS_1) => any;
+    activator?: (props: typeof __VLS_5) => any;
 } & {
-    content?: (props: typeof __VLS_9) => any;
+    content?: (props: typeof __VLS_7) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<Props, {
     WtPopover: typeof WtPopover;
-    toggle: typeof toggle;
-    hide: typeof hide;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1,42 +1,35 @@
-import { WtChip, WtIconBtn, WtLoader, WtTooltip } from '@webitel/ui-sdk/components';
+import { WtChip, WtIconBtn, WtLoader, WtPopover } from '@webitel/ui-sdk/components';
 import { IFilter } from '../../classes/Filter';
 import DynamicFilterConfigForm from '../config/dynamic-view/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from '../config/dynamic-view/dynamic-filter-config-view.vue';
 import { DynamicFilterProps } from '../types/Filter.types';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 declare const localValue: import("vue").Ref<any, any>;
-/**
- * @author @dlohvinov
- *
- * @description
- * loading filters preview data -> main preview component
- * instead of tooltip-components to avoid api requests spam
- */
-declare const fillLocalValue: (filter?: IFilter) => Promise<void>;
+declare const showCheapPopover: (event: any, showPopoverCb: (event: any) => void) => void;
 declare const isRenderPreview: import("vue").ComputedRef<any>;
 declare const submit: (filter: IFilter, { hide }: {
     hide: any;
 }) => void;
 declare const deleteFilter: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_29: {}, __VLS_39: {
-    hide: () => void;
+declare var __VLS_24: {}, __VLS_34: {
+    hide: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    info?: (props: typeof __VLS_29) => any;
+    info?: (props: typeof __VLS_24) => any;
 } & {
-    form?: (props: typeof __VLS_39) => any;
+    form?: (props: typeof __VLS_34) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<DynamicFilterProps, {
     WtChip: typeof WtChip;
     WtIconBtn: typeof WtIconBtn;
     WtLoader: typeof WtLoader;
-    WtTooltip: typeof WtTooltip;
+    WtPopover: typeof WtPopover;
     DynamicFilterConfigForm: typeof DynamicFilterConfigForm;
     DynamicFilterConfigView: typeof DynamicFilterConfigView;
     DynamicFilterPreviewInfo: typeof DynamicFilterPreviewInfo;
     localValue: typeof localValue;
-    fillLocalValue: typeof fillLocalValue;
+    showCheapPopover: typeof showCheapPopover;
     isRenderPreview: typeof isRenderPreview;
     submit: typeof submit;
     deleteFilter: typeof deleteFilter;