@vc-shell/framework 1.1.65 → 1.1.67

package/ui/components/organisms/vc-table/composables/useTableColumnResize.ts

@@ -1,6 +1,5 @@
 import { ref, Ref } from "vue";
 import { TableColPartial } from "../types";
-import * as _ from "lodash-es";
 
 export function useTableColumnResize(
   internalColumns: Ref<TableColPartial[]>,
@@ -30,11 +29,43 @@ export function useTableColumnResize(
   }
 
   function handleMouseDown(e: MouseEvent, item: TableColPartial) {
+    // Prevent any default behavior and stop propagation
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+
+    if (!item.id) {
+      console.warn("Column has no id, cannot resize:", item);
+      return;
+    }
+
     const containerLeft = getOffset(headerRef.value as HTMLElement).left;
     resizeColumnElement.value = item;
     columnResizing.value = true;
     lastResize.value = e.pageX - containerLeft + (headerRef.value as HTMLDivElement).scrollLeft;
 
+    // Prevent body scroll during resize
+    document.body.style.overflow = "hidden";
+    document.body.style.userSelect = "none";
+
+
+    // If resizing any column and there are flexible columns, fix all column widths
+    if (headerRef.value) {
+      const hasFlexibleColumns = internalColumns.value.some((col) => col.visible !== false && !col.width);
+
+      if (hasFlexibleColumns) {
+        // Fix current widths for all visible columns
+        internalColumns.value.forEach((col) => {
+          if (col.visible !== false && col.id && !col.width) {
+            const columnElement = headerRef.value!.querySelector(`#${CSS.escape(col.id)}`) as HTMLElement;
+            if (columnElement) {
+              col.width = columnElement.offsetWidth + "px";
+            }
+          }
+        });
+      }
+    }
+
     bindColumnResizeEvents();
   }
 
@@ -53,6 +84,9 @@ export function useTableColumnResize(
           columnResizing.value = false;
           onColumnResizeEnd();
         }
+        // Restore body scroll in case resize was cancelled
+        document.body.style.overflow = "";
+        document.body.style.userSelect = "";
       };
       document.addEventListener("mouseup", columnResizeEndListener);
     }
@@ -70,12 +104,33 @@ export function useTableColumnResize(
   }
 
   function onColumnResize(event: MouseEvent) {
-    if (columnResizing.value && resizer.value && headerRef.value) {
+    if (columnResizing.value && resizer.value && headerRef.value && resizeColumnElement.value) {
       const containerLeft = getOffset(headerRef.value).left;
       resizer.value.style.top = "0px";
-      const leftOffset = event.pageX - containerLeft + headerRef.value.scrollLeft;
-      resizer.value.style.left =
-        Math.min(leftOffset, headerRef.value.offsetWidth - resizer.value.offsetWidth - 70) + "px";
+
+      // Calculate the left offset based on mouse position
+      let leftOffset = event.pageX - containerLeft + headerRef.value.scrollLeft;
+
+      // Check if this is the last visible column
+      const currentColIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value!.id);
+      let isLastColumn = true;
+      if (currentColIndex !== -1) {
+        for (let i = currentColIndex + 1; i < internalColumns.value.length; i++) {
+          if (internalColumns.value[i].visible !== false) {
+            isLastColumn = false;
+            break;
+          }
+        }
+      }
+
+      // For the last column, limit the resizer position to prevent it from going beyond the table
+      if (isLastColumn) {
+        const maxLeft = headerRef.value.offsetWidth - resizer.value.offsetWidth - 1;
+        leftOffset = Math.min(leftOffset, maxLeft);
+      }
+
+      // Ensure resizer doesn't go beyond the right edge of the table
+      resizer.value.style.left = Math.min(leftOffset, headerRef.value.offsetWidth - resizer.value.offsetWidth) + "px";
       resizer.value.style.display = "block";
     }
   }
@@ -83,8 +138,47 @@ export function useTableColumnResize(
   function onColumnResizeEnd() {
     if (!resizer.value || !headerRef.value || !resizeColumnElement.value || lastResize.value === undefined) return;
 
-    const delta = resizer.value.offsetLeft - lastResize.value;
-    const columnElement = headerRef.value.querySelector(`#${resizeColumnElement.value.id}`);
+    // Calculate delta but limit it to prevent overflow
+    let delta = resizer.value.offsetLeft - lastResize.value;
+
+    // Check if this is the last visible column
+    const currentColIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value!.id);
+    let isLastColumn = true;
+    if (currentColIndex !== -1) {
+      for (let i = currentColIndex + 1; i < internalColumns.value.length; i++) {
+        if (internalColumns.value[i].visible !== false) {
+          isLastColumn = false;
+          break;
+        }
+      }
+    }
+
+    // For the last column, limit delta to prevent overflow
+    if (isLastColumn && delta > 0) {
+      const columnElement = headerRef.value.querySelector(`#${CSS.escape(resizeColumnElement.value?.id ?? "")}`);
+      if (columnElement) {
+        const currentWidth = (columnElement as HTMLElement).offsetWidth;
+        const containerWidth = headerRef.value.offsetWidth;
+        let totalWidthOtherColumns = 0;
+
+        // Calculate total width of other visible columns
+        internalColumns.value.forEach((col, index) => {
+          if (index !== currentColIndex && col.visible !== false && col.id) {
+            const colEl = headerRef.value!.querySelector(`#${CSS.escape(col.id)}`) as HTMLElement;
+            if (colEl) {
+              totalWidthOtherColumns += colEl.offsetWidth;
+            }
+          }
+        });
+
+        // Maximum delta that won't cause overflow
+        const maxDelta = containerWidth - totalWidthOtherColumns - currentWidth - 1;
+        delta = Math.min(delta, maxDelta);
+      }
+    }
+    // Escape special characters in ID for querySelector
+    const escapedId = CSS.escape(resizeColumnElement.value?.id ?? "");
+    const columnElement = headerRef.value.querySelector(`#${escapedId}`);
 
     if (columnElement) {
       const columnWidth = (columnElement as HTMLElement).offsetWidth;
@@ -92,50 +186,65 @@ export function useTableColumnResize(
       const minWidth = 15;
 
       if (columnWidth + delta > parseInt(minWidth.toString(), 10)) {
-        nextColumn.value = internalColumns.value[internalColumns.value.indexOf(resizeColumnElement.value) + 1];
+        const currentColIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value?.id);
+
+        // Find next visible column
+        let nextVisibleColumn = undefined;
+        if (currentColIndex !== -1) {
+          for (let i = currentColIndex + 1; i < internalColumns.value.length; i++) {
+            if (internalColumns.value[i].visible !== false) {
+              nextVisibleColumn = internalColumns.value[i];
+              break;
+            }
+          }
+        }
+
+        nextColumn.value = nextVisibleColumn;
+
+        // Simply resize the current column without affecting others
+        if (newColumnWidth > minWidth) {
+          const colIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value?.id);
 
-        if (nextColumn.value) {
-          const nextColElement = headerRef.value.querySelector(`#${nextColumn.value.id}`);
+          if (colIndex !== -1 && internalColumns.value[colIndex]) {
+            // For the last column, check max width to prevent overflow
+            if (!nextColumn.value && headerRef.value) {
+              const tableWidth = headerRef.value.offsetWidth;
+              let totalWidthBeforeLastColumn = 0;
 
-          if (nextColElement) {
-            const nextColumnWidth = (nextColElement as HTMLElement).offsetWidth - delta;
+              // Sum up widths of all columns before the last one
+              internalColumns.value.forEach((col, index) => {
+                if (index < colIndex && col.visible !== false && col.id) {
+                  const colElement = headerRef.value!.querySelector(`#${CSS.escape(col.id)}`) as HTMLElement;
+                  if (colElement) {
+                    totalWidthBeforeLastColumn += colElement.offsetWidth;
+                  }
+                }
+              });
 
-            if (newColumnWidth > minWidth && nextColumnWidth > minWidth) {
-              resizeTableCells(newColumnWidth, nextColumnWidth);
+              // Calculate the maximum allowed width for the last column
+              const maxAllowedWidth = tableWidth - totalWidthBeforeLastColumn - 1;
+              const finalWidth = Math.min(newColumnWidth, maxAllowedWidth);
+
+              if (finalWidth > minWidth) {
+                internalColumns.value[colIndex].width = finalWidth + "px";
+              }
+            } else {
+              // For non-last columns, just set the new width
+              internalColumns.value[colIndex].width = newColumnWidth + "px";
             }
           }
-        } else {
-          if (newColumnWidth > minWidth) {
-            resizeColumnElement.value.width = newColumnWidth + "px";
-          }
         }
       }
 
       resizer.value.style.display = "none";
       unbindColumnResizeEvents();
-      onStateChange();
-    }
-  }
-
-  function resizeTableCells(newColumnWidth: number, nextColumnWidth: number) {
-    if (!headerRef.value || !resizeColumnElement.value) return;
 
-    const colIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value?.id);
-    const widths: number[] = [];
-    const tableHeaders = headerRef.value.querySelectorAll(".vc-table-columns-header__cell") as NodeListOf<HTMLElement>;
+      // Restore body scroll after resize
+      document.body.style.overflow = "";
+      document.body.style.userSelect = "";
 
-    tableHeaders.forEach((header) => widths.push(header.offsetWidth));
-
-    internalColumns.value.forEach((col, index) => {
-      col.width = widths[index] + "px";
-    });
-
-    widths.forEach((width, index) => {
-      const colWidth =
-        index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-
-      internalColumns.value[index].width = colWidth + "px";
-    });
+      onStateChange();
+    }
   }
 
   return {

package/ui/components/organisms/vc-table/composables/useTableState.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ref, Ref, computed, toValue, toRefs, MaybeRef } from "vue";
+import { ref, Ref, computed, toValue, toRefs, MaybeRef, nextTick } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import { cloneDeep, pick, unionBy } from "lodash-es";
 import { TableColPartial } from "../types";
@@ -12,10 +12,11 @@ export interface UseTableStateOptions {
     "auto" | "defined" | MaybeRef<ITableColumns[]> | (() => ITableColumns[])
   >;
   expanded: Ref<boolean, boolean>;
+  headerRef?: Ref<HTMLElement | undefined>;
 }
 
 export function useTableState(options: UseTableStateOptions) {
-  const { stateKey, columnSelector, expanded } = toRefs(options);
+  const { stateKey, columnSelector, expanded, headerRef } = toRefs(options);
 
   const state = useLocalStorage<TableColPartial[]>(`VC_TABLE_STATE_${stateKey.value.toUpperCase()}`, []);
   const internalColumns = ref<TableColPartial[]>([]) as Ref<TableColPartial[]>;
@@ -41,25 +42,30 @@ export function useTableState(options: UseTableStateOptions) {
       if (!expanded?.value) {
         return x.alwaysVisible;
       }
-      return x;
+      return true;
     });
   });
 
   function saveState() {
     console.debug("[@vc-shell/framework#vc-table.vue] - Save state");
     const colsClone = cloneDeep(internalColumns.value);
-    state.value = colsClone.map((col) => pick(col, "id", "visible", "width", "predefined"));
+    state.value = colsClone.map((col) => pick(col, "id", "visible", "width", "predefined", "title"));
   }
 
   function mergeColumns(storedCol: TableColPartial, predefinedCol: TableColPartial | undefined) {
     if (predefinedCol) {
       if (predefinedCol.predefined && !storedCol.predefined) {
-        return { ...predefinedCol, predefined: true };
+        return { 
+          ...predefinedCol, 
+          predefined: true,
+          width: storedCol.width || predefinedCol.width,
+          visible: storedCol.visible !== undefined ? storedCol.visible : predefinedCol.visible
+        };
       } else {
         return {
           ...predefinedCol,
           visible: storedCol.visible,
-          width: storedCol.width,
+          width: storedCol.width || predefinedCol.width,
           title: predefinedCol.title || storedCol.title || "",
         };
       }
@@ -145,15 +151,62 @@ export function useTableState(options: UseTableStateOptions) {
   }
 
   function toggleColumn(item: ITableColumns) {
+    // Find the original column to preserve its title
+    const originalColumn = allColumns.value.find((col) => col.id === item.id);
+
     // if item is not in internalColumns, add it
     if (!internalColumns.value.find((x) => x.id === item.id)) {
-      internalColumns.value.push(item);
+      const newCol = {
+        ...item,
+        title: item.title || originalColumn?.title || "",
+        width: item.width || originalColumn?.width,
+      };
+      
+      // Don't set any width for new columns - they'll take available space
+      // The flexbox will handle the distribution
+      if (!newCol.width) {
+        // Keep it undefined to use flexbox
+        newCol.width = undefined;
+      }
+      
+      internalColumns.value.push(newCol);
+      
+      // When adding a new column, check if we need to adjust widths to prevent overflow
+      const visibleColumns = internalColumns.value.filter(col => col.visible !== false);
+      const hasFixedWidths = visibleColumns.some(col => col.width);
+      
+      if (hasFixedWidths) {
+        // Calculate total fixed width
+        let totalFixedWidth = 0;
+        visibleColumns.forEach(col => {
+          if (col.width && typeof col.width === 'string') {
+            const width = parseInt(col.width);
+            if (!isNaN(width)) {
+              totalFixedWidth += width;
+            }
+          }
+        });
+        
+        // If total fixed width is too large, remove fixed widths to allow flex distribution
+        if (totalFixedWidth > 800) { // Assuming a reasonable container width
+          internalColumns.value = internalColumns.value.map(col => ({
+            ...col,
+            width: undefined // Let flexbox handle it
+          }));
+        }
+      }
     }
 
     if (item) {
       internalColumns.value = internalColumns.value.map((x) => {
         if (x.id === item.id) {
-          x = item;
+          const updatedCol = {
+            ...item,
+            title: item.title || originalColumn?.title || x.title || "",
+            width: item.width || originalColumn?.width || x.width,
+          };
+          
+          return updatedCol;
         }
         return x;
       });

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

@@ -273,7 +273,8 @@ const emit = defineEmits<{
 
 const instance = getCurrentInstance();
 
-const { items, columns, stateKey, columnSelector, expanded, selectionItems, enableItemActions, itemActionBuilder } = toRefs(props);
+const { items, columns, stateKey, columnSelector, expanded, selectionItems, enableItemActions, itemActionBuilder } =
+  toRefs(props);
 
 // template refs
 const tableBody = ref<HTMLElement | null>();

package/ui/composables/useAdaptiveItems.ts

@@ -207,4 +207,4 @@ export function useAdaptiveItems<T>(options: {
     // Export function for updating observer
     updateObserver: setupElementsObserver,
   };
-}
+}