@vc-shell/framework 1.0.119 → 1.0.121

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -2,8 +2,8 @@
   <div
     class="vc-app-menu-item"
     :class="[
-      { 'vc-app-menu-item_active': isActive && !children.length },
-      { 'vc-app-menu-item_no-hover': children.length },
+      { 'vc-app-menu-item_active': isActive && !children?.length },
+      { 'vc-app-menu-item_no-hover': children?.length },
     ]"
     @click="$emit('onClick')"
   >
@@ -28,7 +28,7 @@
     <div class="vc-app-menu-item__title">
       {{ title }}
       <VcIcon
-        v-if="children.length"
+        v-if="children?.length"
         class="vc-app-menu-item__title-icon"
         icon="fas fa-chevron-down"
         size="xs"

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -10,8 +10,8 @@
           :is-active="isExactActive"
           :children="children"
           :sticky="sticky"
-          :icon="icon"
-          :title="title"
+          :icon="icon ?? ''"
+          :title="title ?? ''"
           @on-click="onMenuItemClick"
         />
       </router-link>
@@ -20,8 +20,8 @@
       <vc-app-menu-link
         :children="children"
         :sticky="sticky"
-        :icon="icon"
-        :title="title"
+        :icon="icon ?? ''"
+        :title="title ?? ''"
         @on-click="onMenuItemClick"
       />
 
@@ -36,7 +36,7 @@
         >
           <router-link
             v-slot="{ isActive }"
-            :to="nested.component.url"
+            :to="(nested.component?.url as string)"
             custom
           >
             <div
@@ -64,12 +64,12 @@ import { onMounted, ref } from "vue";
 import { BladeMenu } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { useRoute } from "vue-router";
-import { BladeConstructor } from "./../../../../../../../../shared";
+import { BladeInstanceConstructor } from "./../../../../../../../../shared";
 
 export interface Props {
   sticky?: boolean;
   isVisible?: boolean;
-  component?: BladeConstructor;
+  component?: BladeInstanceConstructor;
   icon?: string;
   title?: string;
   children?: BladeMenu[];

package/ui/components/organisms/vc-app/vc-app.vue

@@ -17,7 +17,6 @@
       :blades="bladesRefs"
       :buttons="toolbarItems"
       :title="title"
-      @toolbarbutton:click="onToolbarButtonClick"
       @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
       @logo:click="$emit('logo:click')"
@@ -61,16 +60,16 @@ import { getCurrentInstance, markRaw } from "vue";
 import { BladeMenu, IBladeToolbar } from "../../../../core/types";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
-import { BladePageComponent, IBladeRef, useBladeNavigation } from "./../../../../shared";
+import { BladeInstanceConstructor, IBladeRef, useBladeNavigation } from "./../../../../shared";
 
 export interface Props {
-  pages?: BladePageComponent[];
+  pages?: BladeInstanceConstructor[];
   menuItems?: BladeMenu[];
   mobileMenuItems?: IBladeToolbar[];
   toolbarItems?: IBladeToolbar[];
   isReady?: boolean;
   isAuthorized?: boolean;
-  logo?: string;
+  logo: string;
   version?: string;
   theme?: "light" | "dark";
   bladesRefs?: IBladeRef[];
@@ -109,25 +108,18 @@ const onMenuItemClick = function ({ item }: { item: BladeMenu }) {
   if (item.clickHandler && typeof item.clickHandler === "function") {
     item.clickHandler(instance?.exposed);
   } else {
-    openBlade(
-      {
-        blade: markRaw(item.component),
-      },
-      true
-    );
-  }
-};
-
-const onToolbarButtonClick = function (item: Record<string, unknown>) {
-  console.debug(`vc-app#onToolbarButtonClick() called.`);
-
-  if (item.clickHandler && typeof item.clickHandler === "function") {
-    item.clickHandler(instance?.proxy);
+    if (item.component) {
+      openBlade(
+        {
+          blade: markRaw(item.component),
+        },
+        true
+      );
+    }
   }
 };
 
 defineExpose({
-  onToolbarButtonClick,
   onMenuItemClick,
 });
 </script>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -2,7 +2,7 @@
   <div
     class="vc-blade-toolbar-button"
     :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
-    :title="title as string"
+    :title="title"
     @click="onClick"
   >
     <div ref="dropButtonRef">
@@ -56,7 +56,7 @@ import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 export interface Props {
   isExpanded: boolean;
   icon?: string | (() => string);
-  title?: string | unknown;
+  title?: string;
   options?: Record<string, unknown>;
   disabled?: boolean;
   dropdownItems?: IBladeDropdownItem[];

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -13,7 +13,7 @@
           v-if="item.isVisible === undefined || item.isVisible"
           :is-expanded="isExpanded"
           :icon="item.icon"
-          :title="item.title"
+          :title="unref(item.title)"
           :options="item.options"
           :disabled="item.disabled as boolean"
           :dropdown-items="item.dropdownItems"
@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { IBladeToolbar } from "./../../../../../../core/types";
-import { ref } from "vue";
+import { ref, unref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
 import { VcIcon } from "./../../../../";
 

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -110,7 +110,7 @@ const { open } = usePopup({
     title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
   },
   slots: {
-    default: computed(() => error.value),
+    default: computed(() => error?.value),
   },
 });
 

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -191,7 +191,7 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends {[x:string]: any; id?: string}">
-import { ref, onMounted, computed, watch } from "vue";
+import { ref, onMounted, computed, Ref } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import { VcSelect, VcInput, VcTextarea, VcCheckbox } from "./../../";
@@ -244,7 +244,7 @@ const emit = defineEmits<{
 
 const { locale, te, t } = useI18n({ useScope: "global" });
 
-const items = ref([]);
+const items: Ref<any[]> = ref([]);
 const loading = ref(false);
 
 const computedProperty = computed(() => {
@@ -305,7 +305,7 @@ onMounted(async () => {
   await getOptions();
 });
 
-async function getOptions(keyword: string = null) {
+async function getOptions(keyword: string | undefined = undefined) {
   if (props.optionsGetter) {
     try {
       loading.value = true;

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -7,7 +7,7 @@
     <template #title>
       <div>
         <span>{{ currentImage.name }} (</span>
-        <VcLink @click="copyLink(currentImage.url)">{{
+        <VcLink @click="copyLink(currentImage.url ?? '')">{{
           t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK")
         }}</VcLink>
         <span>)</span>

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -33,7 +33,7 @@
             @drop="onItemDrop($event, image)"
           ></VcGalleryItem>
           <VcFileUpload
-            v-if="!disabled && !hideAfterUpload"
+            v-if="!disabled && !defaultImages.length"
             class="tw-m-2"
             :icon="uploadIcon"
             :variant="variant"
@@ -84,8 +84,6 @@ export interface Props {
     edit: boolean;
     remove: boolean;
   };
-  disableDrag?: boolean;
-  hideAfterUpload?: boolean;
   rules?: string | Record<string, unknown>;
   name?: string;
   loading?: boolean;
@@ -123,6 +121,7 @@ const reorderGalleryRef = ref<HTMLElement>();
 const dropPosition = ref<number>();
 
 const currentIndex = computed(() => previewImageIndex.value);
+const disableDrag = computed(() => defaultImages.value.length <= 1);
 
 const { open } = usePopup(
   computed(() => ({
@@ -165,53 +164,55 @@ const updateOrder = () => {
 };
 
 function onItemMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
-  if (!props.disableDrag && !props.disabled) {
+  if (!disableDrag.value && !props.disabled) {
     event.currentTarget.draggable = true;
     return;
   }
 }
 
 function onItemDragStart(event: DragEvent, item: IImage) {
-  if (!props.disableDrag && !props.disabled) {
+  if (!disableDrag.value && !props.disabled) {
     draggedItem.value = item;
     draggedElement.value = event.target as HTMLElement;
-    event.dataTransfer.setData("text", "gallery_reorder");
+    event.dataTransfer?.setData("text", "gallery_reorder");
   }
 }
 
 function onItemDragOver(event: DragEvent) {
   const dropItem = findParentElement(event.target as HTMLElement);
 
-  if (!props.disableDrag && !props.disabled && draggedItem.value && dropItem) {
+  if (!disableDrag.value && !props.disabled && draggedItem.value && dropItem) {
     event.preventDefault();
 
-    const containerOffset = galleryRef.value.getBoundingClientRect();
+    const containerOffset = galleryRef.value?.getBoundingClientRect();
     const dropItemOffset = dropItem.getBoundingClientRect();
 
-    if (draggedElement.value !== dropItem) {
+    if (draggedElement.value !== dropItem && containerOffset) {
       const elementStyle = getComputedStyle(dropItem);
       const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
       const targetLeft = dropItemOffset.left - containerOffset.left;
       const columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
 
-      reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
-      reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
+      if (reorderGalleryRef.value) {
+        reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
+        reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
 
-      if (event.pageX > columnCenter) {
-        reorderGalleryRef.value.style.left = targetLeft + dropItemOffsetWidth + "px";
-        dropPosition.value = 1;
-      } else {
-        reorderGalleryRef.value.style.left = targetLeft - parseFloat(elementStyle.marginLeft) + "px";
-        dropPosition.value = -1;
-      }
+        if (event.pageX > columnCenter) {
+          reorderGalleryRef.value.style.left = targetLeft + dropItemOffsetWidth + "px";
+          dropPosition.value = 1;
+        } else {
+          reorderGalleryRef.value.style.left = targetLeft - parseFloat(elementStyle.marginLeft) + "px";
+          dropPosition.value = -1;
+        }
 
-      reorderGalleryRef.value.style.display = "block";
+        reorderGalleryRef.value.style.display = "block";
+      }
     }
   }
 }
 
 function onItemDragLeave(event: DragEvent) {
-  if (!props.disableDrag && !props.disabled && draggedItem.value) {
+  if (!disableDrag.value && !props.disabled && draggedItem.value && reorderGalleryRef.value) {
     event.preventDefault();
 
     reorderGalleryRef.value.style.display = "none";
@@ -241,10 +242,12 @@ function onItemDrop(event: DragEvent, item: IImage) {
       updateOrder();
     }
 
-    reorderGalleryRef.value.style.display = "none";
-    draggedElement.value.draggable = false;
-    draggedItem.value = null;
-    dropPosition.value = null;
+    if (reorderGalleryRef.value && draggedElement.value) {
+      reorderGalleryRef.value.style.display = "none";
+      draggedElement.value.draggable = false;
+      draggedItem.value = undefined;
+      dropPosition.value = undefined;
+    }
   }
 }
 
@@ -265,8 +268,8 @@ function findParentElement(element: HTMLElement) {
   } else {
     let parent = element.parentElement;
 
-    while (!parent.classList.contains("vc-gallery__item")) {
-      parent = parent.parentElement;
+    while (!(parent && parent.classList.contains("vc-gallery__item"))) {
+      parent = parent?.parentElement || null;
       if (!parent) break;
     }
     return parent;

package/ui/components/organisms/vc-notification-dropdown/_internal/notification/notification.vue

@@ -7,8 +7,9 @@
       <template v-else>
         <VcNotificationTemplate
           :color="notificationStyle.color"
-          :title="notification.title"
+          :title="notification.title ?? ''"
           :icon="notificationStyle.icon"
+          :notification="notification"
         >
           <VcHint
             v-if="notification.description"
@@ -17,18 +18,12 @@
           >
         </VcNotificationTemplate>
       </template>
-      <div class="tw-flex tw-shrink-0">
-        <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
-          {{ pushTime }}
-        </p>
-      </div>
     </VcRow>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, h } from "vue";
-import moment from "moment";
 import { PushNotification } from "./../../../../../../core/api/platform";
 import { VcRow, VcNotificationTemplate } from "./../../../../";
 import { NotificationTemplateConstructor } from "./../../../../../../core/types";
@@ -42,23 +37,15 @@ export interface Emits {
   (event: "onClick"): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  notification: undefined,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
-const locale = window.navigator.language;
-
 const notificationStyle = computed(() => ({
   color: "#A9BCCD",
   icon: "fas fa-info",
 }));
 
-const pushTime = computed(() => {
-  return moment(props.notification.created).locale(locale).format("L LT");
-});
-
 const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
 
 function notificationTemplateRenderer() {

package/ui/components/organisms/vc-notification-dropdown/vc-notification-dropdown.vue

@@ -65,7 +65,7 @@
           >
             <NotificationItem
               :notification="item"
-              :templates="templates"
+              :templates="templates || []"
               @on-click="() => (isDropdownVisible = false)"
             />
           </div>

package/ui/components/organisms/vc-notification-template/index.ts

@@ -1,3 +1 @@
-import _NotificationTemplate from "./vc-notification-template.vue";
-
-export const VcNotificationTemplate = _NotificationTemplate as typeof _NotificationTemplate;
+export { default as VcNotificationTemplate } from "./vc-notification-template.vue";

package/ui/components/organisms/vc-notification-template/vc-notification-template.vue

@@ -1,33 +1,51 @@
 <template>
-  <div class="tw-flex tw-items-center">
-    <div
-      class="tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-white tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0"
-      :style="{ 'background-color': color }"
-    >
-      <VcIcon
-        :icon="icon"
-        size="l"
-      ></VcIcon>
-    </div>
-    <div>
-      <p
-        class="tw-text-[color:var(--basic-black-color)] tw-text-xl tw-leading-[19px] tw-font-bold tw-m-0 tw-mb-1"
-        :class="{ 'tw-mr-4': $isDesktop.value }"
+  <div class="tw-flex flex-row tw-justify-between tw-grow tw-basis-0">
+    <div class="tw-flex tw-items-center">
+      <div
+        class="tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-white tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0"
+        :style="{ 'background-color': color }"
       >
-        {{ title }}
+        <VcIcon
+          :icon="icon"
+          size="l"
+        ></VcIcon>
+      </div>
+      <div>
+        <p
+          class="tw-text-[color:var(--basic-black-color)] tw-text-xl tw-leading-[19px] tw-font-bold tw-m-0 tw-mb-1"
+          :class="{ 'tw-mr-4': $isDesktop.value }"
+        >
+          {{ title }}
+        </p>
+        <slot></slot>
+      </div>
+    </div>
+    <div class="tw-flex tw-shrink-0">
+      <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
+        {{ pushTime }}
       </p>
-      <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { VcIcon } from "./../../";
+import moment from "moment";
+import { PushNotification } from "../../../../core/api/platform";
+
 export interface Props {
   color: string;
   icon: string;
   title: string;
+  notification: PushNotification;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const locale = window.navigator.language;
+
+const pushTime = computed(() => {
+  return moment(props.notification.created).locale(locale).format("L LT");
+});
 </script>

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Money cell -->
   <template v-if="cell.type === 'money'">
-    <template v-if="value > 0">
+    <template v-if="typeof Number(value) === 'number' && Number(value) > 0">
       <span>{{ Math.trunc(Number(value)) }}</span
       ><span class="tw-text-[#a5a5a5] tw-text-xs"
         >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
@@ -33,8 +33,8 @@
         {{ moment(value).locale(locale).format(cell.format) }}
       </template>
       <template v-else>
-        <template v-if="cell.type === 'date'">{{ value.toLocaleDateString() }}</template>
-        <template v-if="cell.type === 'time'">{{ value.toLocaleTimeString() }}</template>
+        <template v-if="cell.type === 'date'">{{ value instanceof Date && value.toLocaleDateString() }}</template>
+        <template v-if="cell.type === 'time'">{{ value instanceof Date && value.toLocaleTimeString() }}</template>
         <template v-if="cell.type === 'date-time'">{{ value.toLocaleString() }}</template>
       </template>
     </template>
@@ -47,7 +47,7 @@
       :bordered="true"
       size="s"
       aspect="1x1"
-      :src="value"
+      :src="(value as string)"
       background="contain"
     />
   </template>
@@ -62,7 +62,7 @@
     v-else-if="cell.type === 'status-icon'"
     class="tw-flex tw-justify-center"
   >
-    <VcStatusIcon :status="value"></VcStatusIcon>
+    <VcStatusIcon :status="(value as boolean)"></VcStatusIcon>
   </div>
 
   <!-- Number cell -->
@@ -97,7 +97,7 @@ export interface Props {
 const props = defineProps<Props>();
 
 const locale = window.navigator.language;
-const value = computed(() => {
+const value = computed((): unknown => {
   return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {
     if (p && Array.isArray(p) && p.length) {
       const val = p && p[0][c];

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -58,7 +58,7 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, nextTick } from "vue";
-import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
+import { offset, computePosition, ComputePositionReturn, ReferenceElement } from "@floating-ui/vue";
 
 export interface Props {
   title?: string;
@@ -100,10 +100,12 @@ function openPanel(isMobile: boolean) {
   if (!isMobile) {
     if (isPanelVisible.value) {
       nextTick(() => {
-        computePosition(filterToggle.value, filterPanel.value, {
-          placement: "bottom-end",
-          middleware: [offset(10)],
-        }).then((item) => (popper.value = item));
+        if (filterToggle.value && filterPanel.value) {
+          computePosition(filterToggle.value as ReferenceElement, filterPanel.value, {
+            placement: "bottom-end",
+            middleware: [offset(10)],
+          }).then((item) => (popper.value = item));
+        }
       });
     }
   }

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -17,7 +17,7 @@
       <div
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].variant}`]"
-        @click.stop="leftSwipeActions[0].clickHandler(item)"
+        @click.stop="leftSwipeActions[0].clickHandler(item as T)"
       >
         <VcIcon :icon="leftSwipeActions[0].icon"></VcIcon>
         <div class="tw-mt-1 tw-text-lg">
@@ -40,7 +40,7 @@
       <div
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${rightSwipeActions[0].variant}`]"
-        @click.stop="rightSwipeActions[0].clickHandler(item)"
+        @click.stop="rightSwipeActions[0].clickHandler(item as T)"
       >
         <VcIcon :icon="rightSwipeActions[0].icon"></VcIcon>
         <div class="vc-table-mobile__item-action-text">
@@ -53,7 +53,7 @@
         v-if="rightSwipeActions.length === 2"
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
         :class="[`vc-table-mobile__item-action_${rightSwipeActions[1].variant}`]"
-        @click.stop="rightSwipeActions[1].clickHandler(item)"
+        @click.stop="rightSwipeActions[1].clickHandler(item as T)"
       >
         <VcIcon :icon="rightSwipeActions[1].icon"></VcIcon>
         <div class="tw-mt-1 tw-text-lg">
@@ -99,7 +99,7 @@
                   v-for="(itemAction, i) in itemActions"
                   :key="i"
                   class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
-                  @click="itemAction.clickHandler(item)"
+                  @click="itemAction.clickHandler(item as T)"
                 >
                   <VcIcon
                     :icon="itemAction.icon"
@@ -119,7 +119,7 @@
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
-import { computed, ref, watch } from "vue";
+import { Ref, computed, ref, watch } from "vue";
 import { IActionBuilderResult } from "./../../../../../../core/types";
 import { useI18n } from "vue-i18n";
 
@@ -133,16 +133,11 @@ export interface TableItem {
   actions?: IActionBuilderResult[];
 }
 
-const props = withDefaults(
-  defineProps<{
-    item: T;
-    actionBuilder?: (item: T) => IActionBuilderResult[];
-    swipingItem?: string;
-  }>(),
-  {
-    swipingItem: null,
-  }
-);
+const props = defineProps<{
+  item: T;
+  actionBuilder?: (item: T) => IActionBuilderResult[];
+  swipingItem?: string;
+}>();
 
 const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
@@ -154,7 +149,7 @@ const isMoving = ref(false);
 const threshold = 10;
 const maxWidth = 80;
 const isActionsPopupVisible = ref(false);
-const itemActions = ref([]);
+const itemActions: Ref<IActionBuilderResult<T>[]> = ref([]);
 
 watch(
   () => props.swipingItem,