@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.3

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

@@ -1,12 +1,12 @@
 import { computed, type Ref } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 import type {
   MobileCardLayout,
   MobileColumnConfig,
   MobileCardPosition,
   MobileCardRole,
   MobileFieldPosition,
-} from "../types";
+} from "@ui/components/organisms/vc-table/types";
 
 /** Field positions in order for auto-placement */
 const FIELD_POSITIONS: MobileFieldPosition[] = ["top-left", "top-right", "bottom-left", "bottom-right"];

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

@@ -5,8 +5,8 @@
  * from VcDataTable.vue to reduce main component size.
  */
 import { ref, computed, watch, type Ref, type ComputedRef } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import type { VcColumnProps } from "../types";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
 
 export interface UseTableColumnsOptions {
   visibleColumns: Ref<ColumnInstance[]> | ComputedRef<ColumnInstance[]>;

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

@@ -51,6 +51,16 @@ export function useTableColumnsResize(options: UseTableColumnsResizeOptions) {
   // How far the last column can grow (= gap between column right edge and container right edge)
   let maxLastColumnGrowth = 0;
 
+  /**
+   * Check whether a column is currently rendered in the DOM.
+   * Columns may exist in the columns array (columnWidths) but be hidden
+   * (e.g. via column switcher, showAllColumns=false, hiddenColumnIds).
+   */
+  const isColumnRendered = (columnId: string): boolean => {
+    if (!getColumnElement) return false;
+    return getColumnElement(columnId) !== null;
+  };
+
   /**
    * Update DOM element width directly (bypasses reactivity for smooth drag)
    * Updates both header and all body cells for the column
@@ -159,9 +169,17 @@ export function useTableColumnsResize(options: UseTableColumnsResizeOptions) {
 
     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;
+    // Find the next RENDERED column to the right as the resize neighbor.
+    // columns.value (columnWidths) may contain hidden column entries — these
+    // have no DOM element and must be skipped. If no rendered neighbor exists,
+    // this is the last visible column and uses the "last column" resize mode.
+    neighborColumnIndex = -1;
+    for (let i = columnIndex + 1; i < columns.value.length; i++) {
+      if (isColumnRendered(columns.value[i].id)) {
+        neighborColumnIndex = i;
+        break;
+      }
+    }
 
     // Pin ALL columns and record their actual rendered widths
     initialWidths = pinAllColumnWidths();
@@ -226,19 +244,20 @@ export function useTableColumnsResize(options: UseTableColumnsResizeOptions) {
   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.
+    // Commit widths to reactive state.
+    // Resized + neighbor get their new values; other RENDERED columns keep their
+    // actual rendered width (measured at mousedown). Hidden columns (no DOM element)
+    // keep their existing width — don't overwrite with initialWidths fallback values.
     columns.value.forEach((col, index) => {
       if (index === resizingColumnIndex) {
         col.width = pendingWidth;
       } else if (index === neighborColumnIndex) {
         col.width = pendingNeighborWidth;
-      } else {
+      } else if (isColumnRendered(col.id)) {
+        // Only commit measured width for rendered columns
         col.width = initialWidths[index];
       }
+      // Hidden columns: keep their existing col.width unchanged
     });
 
     // Clear hardcoded DOM styles so Vue regains control

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

@@ -1,4 +1,5 @@
 import { inject, type ComputedRef } from "vue";
+import { TableContextKey } from "@ui/components/organisms/vc-table/keys";
 
 export interface TableContext<T = any> {
   selectedRowIndex: ComputedRef<number | undefined>;
@@ -11,5 +12,5 @@ export interface TableContext<T = any> {
  * @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);
+  return inject(TableContextKey, null) as TableContext<T> | null;
 }

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

@@ -1,5 +1,5 @@
 import { ref, computed } from "vue";
-import type { FilterValue } from "../types";
+import type { FilterValue } from "@ui/components/organisms/vc-table/types";
 
 export interface UseFilterStateOptions {
   /** Called whenever a filter is applied/cleared with a flat payload for the backend */

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

@@ -1,6 +1,6 @@
 import { ref, Ref, watch, onBeforeUnmount } from "vue";
-import { TableItem } from "../types";
-import { createLogger } from "../../../../../core/utilities";
+import { TableItem } from "@ui/components/organisms/vc-table/types";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("vc-table-row-reorder");
 

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

@@ -7,7 +7,7 @@
  * Inspired by PrimeVue DataTable sorting patterns.
  */
 import { computed, ref, watch, type Ref, type ComputedRef } from "vue";
-import type { SortMeta } from "../types";
+import type { SortMeta } from "@ui/components/organisms/vc-table/types";
 
 export interface UseTableSortOptions {
   /** Current sort field (for single sort mode) */

package/ui/components/organisms/vc-table/index.ts

@@ -3,13 +3,13 @@
 /**
  * @deprecated Use `VcDataTable` from `framework/ui/components` instead.
  */
-export { default as VcTable } from "./VcTableAdapter.vue";
+export { default as VcTable } from "@ui/components/organisms/vc-table/VcTableAdapter.vue";
 
 // Declarative API - VcDataTable with VcColumn support (PrimeVue-like)
-export { default as VcDataTable } from "./VcDataTable.vue";
+export { default as VcDataTable } from "@ui/components/organisms/vc-table/VcDataTable.vue";
 
 // Declarative Column Component (renderless)
-export { default as VcColumn } from "./components/VcColumn.vue";
+export { default as VcColumn } from "@ui/components/organisms/vc-table/components/VcColumn.vue";
 
 // Compositional API components
 export {
@@ -27,10 +27,10 @@ export {
   TableSelectAllBar,
   TableSearchHeader,
   TableGroupRow,
-} from "./components";
+} from "@ui/components/organisms/vc-table/components";
 
 // Utilities
-export { ColumnCollector } from "./utils/ColumnCollector";
+export { ColumnCollector } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 
 // Cell formatters
 export {
@@ -45,7 +45,7 @@ export {
   CellStatus,
   CellStatusIcon,
   CellEditableWrapper,
-} from "./components/cells";
+} from "@ui/components/organisms/vc-table/components/cells";
 
 // Composables (public API)
 export {
@@ -59,10 +59,10 @@ export {
   useVirtualScroll,
   useColumnFilter,
   useFilterState,
-} from "./composables";
+} from "@ui/components/organisms/vc-table/composables";
 
 // Virtual scroll types
-export type { VirtualScrollOptions, VirtualScrollItem, VirtualScrollReturn } from "./composables";
+export type { VirtualScrollOptions, VirtualScrollItem, VirtualScrollReturn } from "@ui/components/organisms/vc-table/composables";
 
 // Re-export types
-export * from "./types";
+export * from "@ui/components/organisms/vc-table/types";

package/ui/components/organisms/vc-table/keys.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Ref } from "vue";
+import type { TableContext } from "@ui/components/organisms/vc-table/composables/useTableContext";
+import type { ColumnCollector } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+
+export const TableContextKey: InjectionKey<TableContext> = Symbol("TableContext");
+export const ColumnCollectorKey: InjectionKey<ColumnCollector> = Symbol("ColumnCollector");
+export const HasFlexColumnsKey: InjectionKey<Ref<boolean>> = Symbol("HasFlexColumns");

package/ui/components/organisms/vc-table/types.ts

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ComputedRef, Ref, VNode } from "vue";
-import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
-import type { ColumnInstance } from "./utils/ColumnCollector";
+import { IActionBuilderResult, ITableColumns } from "@core/types";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 
 // Re-export types used by compositional components
 export type { IActionBuilderResult, ITableColumns };
 
 // Re-export row grouping types from composable
-export type { GroupedData, RowGroupingOptions, UseTableRowGroupingReturn } from "./composables/useTableRowGrouping";
+export type { GroupedData, RowGroupingOptions, UseTableRowGroupingReturn } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
 
 // Re-export ColumnInstance for external use
 export type { ColumnInstance };
@@ -431,7 +431,7 @@ export interface VcDataTableProps<T = any> {
   /**
    * Display mode for row actions:
    * - `"inline"`: Quick action buttons on hover + overflow dropdown (Google Drive style)
-   * - `"dropdown"`: All actions in dropdown menu triggered by three dots (shadcn style)
+   * - `"dropdown"`: All actions in dropdown menu triggered by three dots
    * @default "inline"
    */
   rowActionsMode?: "inline" | "dropdown";

package/ui/components/organisms/vc-table/utils/ColumnCollector.ts

@@ -15,7 +15,7 @@
  */
 
 import type { ComponentInternalInstance, Slots, VNode } from "vue";
-import type { VcColumnProps } from "../types";
+import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
 
 export interface ColumnInstance {
   instance: ComponentInternalInstance;

package/ui/components/organisms/vc-table/utils/index.ts

@@ -5,10 +5,10 @@
  */
 
 // Deep cloning utility for reactive objects
-export { deepClone } from "./deepClone";
+export { deepClone } from "@ui/components/organisms/vc-table/utils/deepClone";
 
 // Column collection utility for declarative column API
-export { ColumnCollector, type ColumnInstance } from "./ColumnCollector";
+export { ColumnCollector, type ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 
 // Re-export registries from composables
 export {
@@ -16,4 +16,4 @@ export {
   type CellType,
   type CellTypeConfig,
   type CellRegistration,
-} from "../composables/useCellRegistry";
+} from "@ui/components/organisms/vc-table/composables/useCellRegistry";