@vc-shell/framework 1.0.119 → 1.0.120

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-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,

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

@@ -143,7 +143,7 @@
               >
                 <div
                   class="tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3"
-                  :class="tableAlignment[item.align]"
+                  :class="item.align ? tableAlignment[item.align as keyof typeof tableAlignment] : ''"
                 >
                   <div class="tw-truncate">
                     <slot :name="`header_${item.id}`">{{ item.title }}</slot>
@@ -187,7 +187,7 @@
                 class="tw-sticky tw-h-[42px] tw-z-[1] tw-right-0 tw-top-0 tw-table-cell tw-align-middle tw-w-0"
               >
                 <VcTableColumnSwitcher
-                  :items="toggleCols"
+                  :items="toggleCols.filter((col): col is  ITableColumns => col !== undefined)"
                   @change="toggleColumn"
                 ></VcTableColumnSwitcher>
               </div>
@@ -547,8 +547,8 @@ const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
 
 // event listeners
-let columnResizeListener: (...args: any[]) => any = null;
-let columnResizeEndListener: (...args: any[]) => any = null;
+let columnResizeListener: ((...args: any[]) => any) | null = null;
+let columnResizeEndListener: ((...args: any[]) => any) | null = null;
 
 const selection = ref<T[]>([]) as Ref<T[]>;
 const allSelected = ref(false);
@@ -732,9 +732,9 @@ function setActionToggleRefs(el: Element, id: string) {
 
 function setTooltipArrowRefs(el: Element, id: string) {
   if (el) {
-    const isExists = tooltipArrowRefs.value.some((item) => item.id === id);
+    const isExists = tooltipArrowRefs.value?.some((item) => item.id === id);
     if (!isExists) {
-      tooltipArrowRefs.value.push({ element: el, id });
+      tooltipArrowRefs.value?.push({ element: el, id });
     }
   }
 }
@@ -748,9 +748,9 @@ function showActions(item: T, index: string) {
 
     selectedRow.value = item.id;
 
-    const toggleRef = actionToggleRefs.value.find((item) => item.id === index).element;
-    const tooltipRef = tooltipRefs.value.find((item) => item.id === index).element;
-    const tooltipArrowRef = tooltipArrowRefs.value.find((item) => item.id === index).element;
+    const toggleRef = actionToggleRefs.value.find((item) => item.id === index)?.element;
+    const tooltipRef = tooltipRefs.value.find((item) => item.id === index)?.element;
+    const tooltipArrowRef = tooltipArrowRefs.value?.find((item) => item.id === index)?.element;
 
     if (toggleRef && tooltipRef && tooltipArrowRef) {
       nextTick(() => {
@@ -868,42 +868,44 @@ function getOffset(element: HTMLElement) {
   const rect = element.getBoundingClientRect();
   const win = element.ownerDocument.defaultView;
   return {
-    top: rect.top + win.pageYOffset,
-    left: rect.left + win.pageXOffset,
+    top: rect.top + ((win && win.scrollY) ?? 0),
+    left: rect.left + ((win && win.scrollX) ?? 0),
   };
 }
 
 function onColumnResizeEnd() {
-  const delta = resizer.value.offsetLeft - lastResize.value;
+  const delta = resizer.value.offsetLeft - (lastResize.value ?? 0);
 
-  const columnElement: HTMLElement = table.value.querySelector(`#${resizeColumnElement.value.id}`);
+  const columnElement: HTMLElement | null = table.value.querySelector(`#${resizeColumnElement.value?.id}`);
 
-  const columnWidth = columnElement.offsetWidth;
-  const newColumnWidth = columnWidth + delta;
+  if (columnElement) {
+    const columnWidth = columnElement.offsetWidth;
+    const newColumnWidth = columnWidth + delta;
 
-  const minWidth = 15;
+    const minWidth = 15;
 
-  if (columnWidth + delta > parseInt(minWidth.toString(), 10) && resizeColumnElement.value) {
-    nextColumn.value = filteredCols.value[filteredCols.value.indexOf(resizeColumnElement.value) + 1];
+    if (columnWidth + delta > parseInt(minWidth.toString(), 10) && resizeColumnElement.value) {
+      nextColumn.value = filteredCols.value[filteredCols.value.indexOf(resizeColumnElement.value) + 1];
 
-    if (nextColumn.value) {
-      const nextColElement = table.value.querySelector(`#${nextColumn.value.id}`);
+      if (nextColumn.value) {
+        const nextColElement = table.value.querySelector(`#${nextColumn.value.id}`);
 
-      const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
-      if (newColumnWidth > 15 && nextColumnWidth > 15) {
-        resizeTableCells(newColumnWidth, nextColumnWidth);
-      }
-    } else {
-      if (newColumnWidth > 15) {
-        resizeColumnElement.value.width = newColumnWidth + "px";
+        const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
+        if (newColumnWidth > 15 && nextColumnWidth > 15) {
+          resizeTableCells(newColumnWidth, nextColumnWidth);
+        }
+      } else {
+        if (newColumnWidth > 15) {
+          resizeColumnElement.value.width = newColumnWidth + "px";
+        }
       }
     }
-  }
-  resizer.value.style.display = "none";
+    resizer.value.style.display = "none";
 
-  unbindColumnResizeEvents();
+    unbindColumnResizeEvents();
 
-  saveState();
+    saveState();
+  }
 }
 
 function resizeTableCells(newColumnWidth: number, nextColumnWidth: number) {