@vc-shell/framework 1.0.119 → 1.0.121

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>
@@ -270,7 +270,7 @@
                   class="vc-table__body-actions-container tw-relative tw-flex tw-justify-center tw-items-center tw-group"
                 >
                   <button
-                    :ref="(el: Element) => setActionToggleRefs(el, item.id)"
+                    :ref="(el) => setActionToggleRefs(el, item.id)"
                     class="tw-text-[#41afe6] tw-cursor-pointer tw-border-none tw-bg-transparent disabled:tw-text-[gray] tw-w-full"
                     :class="{
                       'group-hover:tw-text-[#319ed4]': itemActions[itemIndex] && itemActions[itemIndex].length,
@@ -285,7 +285,7 @@
                   </button>
                   <div
                     v-show="selectedRow === item.id"
-                    :ref="(el: Element) => setTooltipRefs(el, item.id)"
+                    :ref="(el) => setTooltipRefs(el, item.id)"
                     class="vc-table__body-tooltip tw-bg-white tw-rounded-[4px] tw-p-[15px] tw-z-[1] tw-absolute tw-right-0 tw-drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)] tw-w-max"
                     :style="tooltipStyle"
                     @mouseleave="closeActions"
@@ -314,7 +314,7 @@
                       </div>
                     </div>
                     <div
-                      :ref="(el: Element) => setTooltipArrowRefs(el, item.id)"
+                      :ref="(el) => setTooltipArrowRefs(el, item.id)"
                       class="vc-table__body-tooltip-arrow"
                       :style="arrowStyle"
                     ></div>
@@ -435,13 +435,14 @@ import {
   onBeforeMount,
   nextTick,
   MaybeRef,
+  ComponentPublicInstance,
 } from "vue";
 import VcTableCounter from "./_internal/vc-table-counter/vc-table-counter.vue";
 import VcTableFilter from "./_internal/vc-table-filter/vc-table-filter.vue";
 import VcTableMobileItem from "./_internal/vc-table-mobile-item/vc-table-mobile-item.vue";
 import VcTableCell from "./_internal/vc-table-cell/vc-table-cell.vue";
 import VcTableColumnSwitcher from "./_internal/vc-table-column-switcher/vc-table-column-switcher.vue";
-import { offset, flip, arrow, computePosition, ComputePositionReturn } from "@floating-ui/vue";
+import { offset, flip, arrow, computePosition, ComputePositionReturn, ReferenceElement } from "@floating-ui/vue";
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import { useLocalStorage, useCurrentElement } from "@vueuse/core";
 import { VcContainer, VcInput, VcCheckbox, VcIcon, VcPagination, VcButton } from "./../../";
@@ -522,7 +523,7 @@ const props = withDefaults(
 );
 
 interface ITableItemRef {
-  element: Element;
+  element: Element | ComponentPublicInstance;
   id: string;
 }
 
@@ -547,8 +548,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);
@@ -712,7 +713,7 @@ function rowCheckbox(item: T) {
   }
 }
 
-function setTooltipRefs(el: Element, id: string) {
+function setTooltipRefs(el: Element | ComponentPublicInstance | null, id: string) {
   if (el) {
     const isExists = tooltipRefs.value.some((item) => item.id === id);
     if (!isExists) {
@@ -721,7 +722,7 @@ function setTooltipRefs(el: Element, id: string) {
   }
 }
 
-function setActionToggleRefs(el: Element, id: string) {
+function setActionToggleRefs(el: Element | ComponentPublicInstance | null, id: string) {
   if (el) {
     const isExists = actionToggleRefs.value.some((item) => item.id === id);
     if (!isExists) {
@@ -730,11 +731,11 @@ function setActionToggleRefs(el: Element, id: string) {
   }
 }
 
-function setTooltipArrowRefs(el: Element, id: string) {
+function setTooltipArrowRefs(el: Element | ComponentPublicInstance | null, 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,13 +749,13 @@ 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(() => {
-        computePosition(toggleRef, tooltipRef as HTMLElement, {
+        computePosition(toggleRef as ReferenceElement, tooltipRef as HTMLElement, {
           placement: "bottom",
           middleware: [
             flip({ fallbackPlacements: ["top", "bottom"] }),
@@ -868,42 +869,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) {
@@ -1143,11 +1146,11 @@ function onRowDragLeave(event: DragEvent) {
   rowElement.classList.remove("vc-table__drag-row-bottom");
 }
 
-function onRowDragEnd(event: DragEvent & { currentTarget?: { draggable: boolean } }) {
+function onRowDragEnd(event: DragEvent) {
   rowDragged.value = false;
   draggedRowIndex.value = undefined;
   droppedRowIndex.value = undefined;
-  event.currentTarget.draggable = false;
+  (event.currentTarget as HTMLElement).draggable = false;
 }
 
 function onRowDrop(event: DragEvent) {