@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -0,0 +1,175 @@
+import { ref, Ref, onBeforeUnmount } from "vue";
+
+export interface ReorderableColumn {
+  id: string;
+  [key: string]: any;
+}
+
+export interface UseTableColumnsReorderOptions<T extends ReorderableColumn> {
+  columns: Ref<T[]>;
+  onReorderEnd?: (columns: T[]) => void;
+}
+
+/**
+ * Composable for table column reordering with drag & drop
+ * Features:
+ * - Live reordering (columns swap during drag)
+ * - 50% threshold (swap only when crossing middle of target column)
+ * - Smooth transitions
+ * - Throttling for performance
+ */
+export function useTableColumnsReorder<T extends ReorderableColumn>(
+  options: UseTableColumnsReorderOptions<T>
+) {
+  const { columns, onReorderEnd } = options;
+
+  const isDragging = ref(false);
+  let draggedColumnId: string | null = null;
+  let dragThrottleTimer: number | null = null;
+
+  const handleDragStart = (columnId: string, event: DragEvent) => {
+    if (!event.dataTransfer) return;
+
+    draggedColumnId = columnId;
+    isDragging.value = true;
+
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", columnId);
+
+    // Disable default ghost image - use transparent 1x1 pixel
+    const transparentPixel = document.createElement("img");
+    transparentPixel.src =
+      "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+    transparentPixel.style.position = "absolute";
+    transparentPixel.style.top = "-9999px";
+    document.body.appendChild(transparentPixel);
+    event.dataTransfer.setDragImage(transparentPixel, 0, 0);
+
+    // Clean up the temporary image after drag starts
+    setTimeout(() => transparentPixel.remove(), 0);
+
+    // Add dragging class to header being dragged
+    const dragElement = (event.target as HTMLElement).closest(".vc-table-composition__head") as HTMLElement;
+    if (dragElement) {
+      dragElement.classList.add("vc-table-composition__head--dragging");
+      // dragend fires on the source element when drag ends for ANY reason
+      // (successful drop, cancel, or drop outside valid targets).
+      // This is the safety net — without it, dropping outside a column header
+      // leaves the --dragging class stuck because `drop` never fires.
+      dragElement.addEventListener("dragend", cleanupDrag, { once: true });
+    }
+  };
+
+  const handleDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+
+    if (!draggedColumnId) return;
+
+    // Throttle the reorder to avoid too frequent updates (50ms)
+    if (dragThrottleTimer) return;
+
+    dragThrottleTimer = window.setTimeout(() => {
+      dragThrottleTimer = null;
+    }, 50);
+
+    // Get the column being hovered
+    const target = event.target as HTMLElement;
+    const header = target.closest(".vc-table-composition__head") as HTMLElement;
+    if (!header) return;
+
+    // Get column ID from data attribute (more reliable than DOM index)
+    const hoveredColumnId = header.getAttribute("data-column-id");
+    if (!hoveredColumnId || hoveredColumnId === draggedColumnId) return;
+
+    // Check if cursor crossed the middle of the hovered column (50% threshold)
+    const rect = (header as HTMLElement).getBoundingClientRect();
+    const middleX = rect.left + rect.width / 2;
+    const mouseX = event.clientX;
+
+    const dragIndex = columns.value.findIndex((col) => col.id === draggedColumnId);
+    const dropIndex = columns.value.findIndex((col) => col.id === hoveredColumnId);
+
+    // Only swap if:
+    // 1. Moving left and cursor is past the left half of target
+    // 2. Moving right and cursor is past the right half of target
+    const movingLeft = dragIndex > dropIndex;
+    const movingRight = dragIndex < dropIndex;
+
+    const shouldSwap = (movingLeft && mouseX < middleX) || (movingRight && mouseX > middleX);
+
+    if (shouldSwap && dragIndex !== -1 && dropIndex !== -1 && dragIndex !== dropIndex) {
+      const [movedColumn] = columns.value.splice(dragIndex, 1);
+      columns.value.splice(dropIndex, 0, movedColumn);
+    }
+  };
+
+  const handleDrop = (event: DragEvent) => {
+    event.preventDefault();
+    cleanupDrag();
+  };
+
+  const cleanupDrag = () => {
+    // Guard: both `drop` and `dragend` call this — only run once
+    if (!isDragging.value) return;
+
+    // Remove dragging class from all headers
+    document.querySelectorAll(".vc-table-composition__head--dragging").forEach((el) => {
+      el.classList.remove("vc-table-composition__head--dragging");
+    });
+
+    isDragging.value = false;
+    draggedColumnId = null;
+    if (dragThrottleTimer) {
+      clearTimeout(dragThrottleTimer);
+      dragThrottleTimer = null;
+    }
+
+    // Callback
+    if (onReorderEnd) {
+      onReorderEnd(columns.value);
+    }
+  };
+
+  // Cleanup on dragend event
+  const handleDragEnd = () => {
+    cleanupDrag();
+  };
+
+  /**
+   * Returns props to spread onto a `<TableHead>` for drag-and-drop reordering.
+   *
+   * Usage: `<TableHead v-bind="reorder.getReorderHeadProps(col.id)" />`
+   */
+  const getReorderHeadProps = (columnId: string) => ({
+    reorderable: true,
+    columnId,
+    onReorderDragStart: (id: string | undefined, e: DragEvent) => handleDragStart(id!, e),
+    onReorderDragOver: (e: DragEvent) => handleDragOver(e),
+    onReorderDrop: (id: string | undefined, e: DragEvent) => {
+      handleDrop(e);
+    },
+    onReorderDragEnd: () => handleDragEnd(),
+  });
+
+  // Cleanup: if component unmounts mid-drag, clear timer and state
+  onBeforeUnmount(() => {
+    if (dragThrottleTimer) {
+      clearTimeout(dragThrottleTimer);
+      dragThrottleTimer = null;
+    }
+    isDragging.value = false;
+    draggedColumnId = null;
+  });
+
+  return {
+    isDragging,
+    handleDragStart,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+    getReorderHeadProps,
+  };
+}

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

@@ -0,0 +1,292 @@
+import { ref, Ref, onBeforeUnmount } from "vue";
+
+export interface ResizableColumn {
+  id: string;
+  width: number;
+}
+
+export interface UseTableColumnsResizeOptions {
+  columns: Ref<ResizableColumn[]>;
+  minColumnWidth?: number;
+  /** Returns the header cell DOM element for a given column id (for measuring flex columns) */
+  getColumnElement?: (id: string) => HTMLElement | null;
+  /** Returns all cell DOM elements for a given column id (for live resize updates) */
+  getAllColumnElements?: (id: string) => NodeListOf<Element> | null;
+  onResizeEnd?: (columns: ResizableColumn[]) => void;
+}
+
+/**
+ * Composable for table column resizing with DOM-based updates during drag.
+ *
+ * Implements two-column resize: dragging a column's right border grows that
+ * column while shrinking its right neighbor by the same amount, keeping the
+ * total table width constant and preventing columns from overflowing.
+ *
+ * The last column (no right neighbor) can shrink freely and can grow only
+ * into the existing filler gap. When already at the container edge, dragging
+ * right is a no-op. After being shrunk, it can grow back up to the edge.
+ *
+ * During drag: updates DOM styles directly (no reactive updates = no re-renders = smooth).
+ * On mouseup: commits final widths for ALL columns to reactive state (including
+ * unchanged columns whose actual rendered width is recorded). This ensures
+ * hasFlexColumns becomes false and the filler gap appears after the last column.
+ */
+/** Minimum gap between the last column's right edge and the container's right edge */
+const EDGE_MARGIN = 10;
+
+export function useTableColumnsResize(options: UseTableColumnsResizeOptions) {
+  const { columns, minColumnWidth = 60, getColumnElement, getAllColumnElements, onResizeEnd } = options;
+
+  const isResizing = ref(false);
+
+  // Mutable state (not reactive — only used during drag)
+  let resizingColumnIndex = -1;
+  let neighborColumnIndex = -1;
+  let startX = 0;
+  // All column widths measured at resize start
+  let initialWidths: number[] = [];
+  // Pending widths for resized column and neighbor (updated during drag)
+  let pendingWidth = 0;
+  let pendingNeighborWidth = 0;
+  // How far the last column can grow (= gap between column right edge and container right edge)
+  let maxLastColumnGrowth = 0;
+
+  /**
+   * Update DOM element width directly (bypasses reactivity for smooth drag)
+   * Updates both header and all body cells for the column
+   */
+  const setElementWidth = (columnId: string, width: number) => {
+    const widthPx = `${width}px`;
+
+    // Update header element
+    if (getColumnElement) {
+      const el = getColumnElement(columnId);
+      if (el) {
+        el.style.transition = "none";
+        el.style.width = widthPx;
+        el.style.minWidth = widthPx;
+        el.style.maxWidth = widthPx;
+        el.style.flex = "0 0 auto";
+      }
+    }
+
+    // Update all body cells with this column id
+    if (getAllColumnElements) {
+      const cells = getAllColumnElements(columnId);
+      if (cells) {
+        cells.forEach((cell) => {
+          const htmlCell = cell as HTMLElement;
+          htmlCell.style.transition = "none";
+          htmlCell.style.width = widthPx;
+          htmlCell.style.minWidth = widthPx;
+          htmlCell.style.maxWidth = widthPx;
+          htmlCell.style.flex = "0 0 auto";
+        });
+      }
+    }
+  };
+
+  /**
+   * Pin ALL column widths to their current rendered values in a single batch.
+   * This prevents flex redistribution during resize.
+   *
+   * Key: measure ALL widths first, then apply ALL changes.
+   * This avoids layout thrashing that causes visual "jumping".
+   */
+  const pinAllColumnWidths = (): number[] => {
+    const widths: number[] = [];
+
+    // Phase 1: Measure all widths (single layout read)
+    columns.value.forEach((col) => {
+      let width = 0;
+      if (getColumnElement) {
+        const el = getColumnElement(col.id);
+        if (el) {
+          width = Math.round(el.getBoundingClientRect().width);
+        }
+      }
+      if (!width) {
+        width = col.width || minColumnWidth;
+      }
+      widths.push(width);
+    });
+
+    // Phase 2: Apply all DOM updates (single layout write)
+    widths.forEach((width, index) => {
+      setElementWidth(columns.value[index].id, width);
+    });
+
+    return widths;
+  };
+
+  /**
+   * Remove hardcoded DOM styles set during resize and actively restore the
+   * correct flex/width values. After resize ALL columns have committed widths,
+   * so this always restores flex: 0 1 auto with the committed pixel width.
+   */
+  const unpinAllColumnWidths = () => {
+    columns.value.forEach((col) => {
+      const hasWidth = col.width > 0;
+      const restoreElement = (el: HTMLElement | null | undefined) => {
+        if (!el) return;
+        el.style.minWidth = "";
+        el.style.maxWidth = "";
+        el.style.transition = "";
+        if (hasWidth) {
+          el.style.flex = "0 1 auto";
+          el.style.width = `${col.width}px`;
+        } else {
+          el.style.flex = "1 1 0";
+          el.style.width = "";
+        }
+      };
+
+      if (getColumnElement) {
+        restoreElement(getColumnElement(col.id));
+      }
+      if (getAllColumnElements) {
+        const cells = getAllColumnElements(col.id);
+        if (cells) {
+          cells.forEach((cell) => restoreElement(cell as HTMLElement));
+        }
+      }
+    });
+  };
+
+  const handleResizeStart = (columnId: string, event: MouseEvent) => {
+    const columnIndex = columns.value.findIndex((c) => c.id === columnId);
+    if (columnIndex === -1) return;
+
+    resizingColumnIndex = columnIndex;
+
+    // Neighbor: right column for two-column resize; last column has no neighbor
+    const hasRightNeighbor = columnIndex < columns.value.length - 1;
+    neighborColumnIndex = hasRightNeighbor ? columnIndex + 1 : -1;
+
+    // Pin ALL columns and record their actual rendered widths
+    initialWidths = pinAllColumnWidths();
+
+    // For the last column: measure how much room there is to grow.
+    // We measure from the column's parent wrapper (the TransitionGroup flex container),
+    // NOT from the table container — the container includes row padding and other elements
+    // that would overestimate the available space and cause overflow on mouseup.
+    // wrapperRight - columnRight = exact filler width (the growable space).
+    maxLastColumnGrowth = 0;
+    if (neighborColumnIndex === -1 && getColumnElement) {
+      const columnEl = getColumnElement(columnId);
+      if (columnEl && columnEl.parentElement) {
+        const wrapperRight = columnEl.parentElement.getBoundingClientRect().right;
+        const columnRight = columnEl.getBoundingClientRect().right;
+        maxLastColumnGrowth = Math.max(0, wrapperRight - columnRight - EDGE_MARGIN);
+      }
+    }
+
+    startX = event.pageX;
+    pendingWidth = initialWidths[columnIndex];
+    pendingNeighborWidth = neighborColumnIndex !== -1 ? initialWidths[neighborColumnIndex] : 0;
+    isResizing.value = true;
+
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+  };
+
+  const handleResizeMove = (event: MouseEvent) => {
+    if (!isResizing.value || resizingColumnIndex === -1) return;
+
+    const rawDelta = event.pageX - startX;
+    const initialWidth = initialWidths[resizingColumnIndex];
+
+    // Clamp so resized column doesn't go below minColumnWidth
+    const minDelta = minColumnWidth - initialWidth;
+
+    let clampedDelta: number;
+    if (neighborColumnIndex !== -1) {
+      // Two-column mode: resized column grows/shrinks, right neighbor does the inverse.
+      const neighborInitial = initialWidths[neighborColumnIndex];
+      const maxDelta = neighborInitial - minColumnWidth;
+      clampedDelta = Math.max(minDelta, Math.min(rawDelta, maxDelta));
+
+      pendingNeighborWidth = Math.round(neighborInitial - clampedDelta);
+      setElementWidth(columns.value[neighborColumnIndex].id, pendingNeighborWidth);
+    } else {
+      // Last column (no neighbor): can grow only into the filler gap (the space between
+      // the column's right edge and the container's right edge measured at mousedown).
+      // When already at the edge, maxLastColumnGrowth ≈ 0 → can't grow → drag right is no-op.
+      // Can always shrink down to minColumnWidth.
+      clampedDelta = Math.max(minDelta, Math.min(rawDelta, maxLastColumnGrowth));
+    }
+
+    pendingWidth = Math.round(initialWidth + clampedDelta);
+    setElementWidth(columns.value[resizingColumnIndex].id, pendingWidth);
+  };
+
+  const handleResizeEnd = () => {
+    if (!isResizing.value) return;
+
+    // Commit ALL column widths to reactive state.
+    // Resized + neighbor get their new values; all others keep their
+    // actual rendered width (measured at mousedown). This converts any
+    // flex-grow columns to fixed-width, so hasFlexColumns becomes false
+    // and the ::after filler gap appears after the last column.
+    columns.value.forEach((col, index) => {
+      if (index === resizingColumnIndex) {
+        col.width = pendingWidth;
+      } else if (index === neighborColumnIndex) {
+        col.width = pendingNeighborWidth;
+      } else {
+        col.width = initialWidths[index];
+      }
+    });
+
+    // Clear hardcoded DOM styles so Vue regains control
+    unpinAllColumnWidths();
+
+    isResizing.value = false;
+    resizingColumnIndex = -1;
+    neighborColumnIndex = -1;
+    initialWidths = [];
+    pendingWidth = 0;
+    pendingNeighborWidth = 0;
+    maxLastColumnGrowth = 0;
+
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+
+    if (onResizeEnd) {
+      onResizeEnd(columns.value);
+    }
+  };
+
+  /**
+   * Returns props to spread onto a `<TableHead>` for column resizing.
+   */
+  const getResizeHeadProps = (columnId: string, index: number) => ({
+    resizable: true,
+    columnId,
+    isLastResizable: index === columns.value.length - 1,
+    onResizeStart: (id: string | undefined, e: MouseEvent) => handleResizeStart(id!, e),
+  });
+
+  // Cleanup: if component unmounts mid-resize, remove document listeners
+  onBeforeUnmount(() => {
+    if (isResizing.value) {
+      document.removeEventListener("mousemove", handleResizeMove);
+      document.removeEventListener("mouseup", handleResizeEnd);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      isResizing.value = false;
+    }
+  });
+
+  return {
+    isResizing,
+    handleResizeStart,
+    getResizeHeadProps,
+  };
+}

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

@@ -0,0 +1,15 @@
+import { inject, type ComputedRef } from "vue";
+
+export interface TableContext<T = any> {
+  selectedRowIndex: ComputedRef<number | undefined>;
+  setSelectedRowIndex: (index: number | undefined) => void;
+  variant: ComputedRef<string | undefined>;
+}
+
+/**
+ * Hook to access table context from child components
+ * @returns Table context or null if not inside a Table component
+ */
+export function useTableContext<T = any>(): TableContext<T> | null {
+  return inject<TableContext<T> | null>("tableContext", null);
+}