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

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

@@ -1,39 +1,39 @@
 // Export all compositional components
-export { default as Table } from "./Table.vue";
-export { default as TableHeader } from "./TableHeader.vue";
-export { default as TableBody } from "./TableBody.vue";
-export { default as TableRow } from "./TableRow.vue";
-export { default as TableHead } from "./TableHead.vue";
-export { default as TableCell } from "./TableCell.vue";
-export { default as TableFooter } from "./TableFooter.vue";
-export { default as TableEmpty } from "./TableEmpty.vue";
-export { default as TableColumnSwitcher } from "./TableColumnSwitcher.vue";
-export { default as TableRowActions } from "./TableRowActions.vue";
-export { default as TableCheckbox } from "./TableCheckbox.vue";
+export { default as Table } from "@ui/components/organisms/vc-table/components/Table.vue";
+export { default as TableHeader } from "@ui/components/organisms/vc-table/components/TableHeader.vue";
+export { default as TableBody } from "@ui/components/organisms/vc-table/components/TableBody.vue";
+export { default as TableRow } from "@ui/components/organisms/vc-table/components/TableRow.vue";
+export { default as TableHead } from "@ui/components/organisms/vc-table/components/TableHead.vue";
+export { default as TableCell } from "@ui/components/organisms/vc-table/components/TableCell.vue";
+export { default as TableFooter } from "@ui/components/organisms/vc-table/components/TableFooter.vue";
+export { default as TableEmpty } from "@ui/components/organisms/vc-table/components/TableEmpty.vue";
+export { default as TableColumnSwitcher } from "@ui/components/organisms/vc-table/components/TableColumnSwitcher.vue";
+export { default as TableRowActions } from "@ui/components/organisms/vc-table/components/TableRowActions.vue";
+export { default as TableCheckbox } from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
 // TableResizeHandle — not used (resize is handled inline in TableHead.vue)
 // TableActions — deprecated (use TableRowActions instead)
-export { default as TableSelectAllBar } from "./TableSelectAllBar.vue";
-export { default as TableSearchHeader } from "./TableSearchHeader.vue";
-export { default as TableGroupRow } from "./TableGroupRow.vue";
-export { default as ColumnFilter } from "./ColumnFilter.vue";
-export { default as GlobalFiltersButton } from "./GlobalFiltersButton.vue";
-export { default as GlobalFiltersPanel } from "./GlobalFiltersPanel.vue";
-export { default as ColumnSwitcherButton } from "./ColumnSwitcherButton.vue";
-export { default as TableAddRowButton } from "./TableAddRowButton.vue";
+export { default as TableSelectAllBar } from "@ui/components/organisms/vc-table/components/TableSelectAllBar.vue";
+export { default as TableSearchHeader } from "@ui/components/organisms/vc-table/components/TableSearchHeader.vue";
+export { default as TableGroupRow } from "@ui/components/organisms/vc-table/components/TableGroupRow.vue";
+export { default as ColumnFilter } from "@ui/components/organisms/vc-table/components/ColumnFilter.vue";
+export { default as GlobalFiltersButton } from "@ui/components/organisms/vc-table/components/GlobalFiltersButton.vue";
+export { default as GlobalFiltersPanel } from "@ui/components/organisms/vc-table/components/GlobalFiltersPanel.vue";
+export { default as ColumnSwitcherButton } from "@ui/components/organisms/vc-table/components/ColumnSwitcherButton.vue";
+export { default as TableAddRowButton } from "@ui/components/organisms/vc-table/components/TableAddRowButton.vue";
 
 // Declarative Column Component (renderless)
-export { default as VcColumn } from "./VcColumn.vue";
+export { default as VcColumn } from "@ui/components/organisms/vc-table/components/VcColumn.vue";
 
 // Cell renderer for VcDataTable
-export { default as DataTableCellRenderer } from "./DataTableCellRenderer.vue";
+export { default as DataTableCellRenderer } from "@ui/components/organisms/vc-table/components/DataTableCellRenderer.vue";
 
 // High-level DataTable components (used by VcDataTable)
-export { default as DataTableRow } from "./DataTableRow.vue";
-export { default as DataTableBody } from "./DataTableBody.vue";
-export { default as DataTableHeader } from "./DataTableHeader.vue";
+export { default as DataTableRow } from "@ui/components/organisms/vc-table/components/DataTableRow.vue";
+export { default as DataTableBody } from "@ui/components/organisms/vc-table/components/DataTableBody.vue";
+export { default as DataTableHeader } from "@ui/components/organisms/vc-table/components/DataTableHeader.vue";
 
 // Cell formatter components
-export * from "./cells";
+export * from "@ui/components/organisms/vc-table/components/cells";
 
 // Mobile components
-export * from "./mobile";
+export * from "@ui/components/organisms/vc-table/components/mobile";

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

@@ -164,10 +164,10 @@
  */
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import type { MobileCardLayout, MobileSwipeAction } from "../../types";
-import { useTableSwipe } from "../../composables/useTableSwipe";
-import MobileCellRenderer from "./MobileCellRenderer.vue";
-import MobileActionSheet from "./MobileActionSheet.vue";
+import type { MobileCardLayout, MobileSwipeAction } from "@ui/components/organisms/vc-table/types";
+import { useTableSwipe } from "@ui/components/organisms/vc-table/composables/useTableSwipe";
+import MobileCellRenderer from "@ui/components/organisms/vc-table/components/mobile/MobileCellRenderer.vue";
+import MobileActionSheet from "@ui/components/organisms/vc-table/components/mobile/MobileActionSheet.vue";
 
 const props = withDefaults(
   defineProps<{

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

@@ -73,11 +73,11 @@
  * - Action handling
  */
 import { computed, unref } from "vue";
-import type { MobileCardLayout, MobileSwipeAction, TableEmptyAction, ColumnInstance, TableAction, PullToRefreshTextConfig } from "../../types";
-import { useMobileCardLayout } from "../../composables/useMobileCardLayout";
-import { provideTableSwipe } from "../../composables/useTableSwipe";
-import DataTableMobileCard from "./DataTableMobileCard.vue";
-import PullToRefresh from "./PullToRefresh.vue";
+import type { MobileCardLayout, MobileSwipeAction, TableEmptyAction, ColumnInstance, TableAction, PullToRefreshTextConfig } from "@ui/components/organisms/vc-table/types";
+import { useMobileCardLayout } from "@ui/components/organisms/vc-table/composables/useMobileCardLayout";
+import { provideTableSwipe } from "@ui/components/organisms/vc-table/composables/useTableSwipe";
+import DataTableMobileCard from "@ui/components/organisms/vc-table/components/mobile/DataTableMobileCard.vue";
+import PullToRefresh from "@ui/components/organisms/vc-table/components/mobile/PullToRefresh.vue";
 
 const props = withDefaults(
   defineProps<{

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

@@ -1,109 +1,60 @@
 <template>
-  <TransitionRoot
-    appear
-    :show="open"
-    as="template"
+  <VcSidebar
+    :model-value="open"
+    position="bottom"
+    size="sm"
+    draggable
+    drag-handle
+    :close-button="false"
+    :title="title"
+    :inset="false"
+    @update:model-value="!$event && handleClose()"
+    @close="handleClose"
   >
-    <Dialog
-      as="div"
-      class="vc-mobile-action-sheet"
-      @close="handleClose"
-    >
-      <!-- Backdrop with blur -->
-      <TransitionChild
-        as="template"
-        enter="vc-mobile-action-sheet__backdrop-enter"
-        enter-from="vc-mobile-action-sheet__backdrop-enter-from"
-        enter-to="vc-mobile-action-sheet__backdrop-enter-to"
-        leave="vc-mobile-action-sheet__backdrop-leave"
-        leave-from="vc-mobile-action-sheet__backdrop-leave-from"
-        leave-to="vc-mobile-action-sheet__backdrop-leave-to"
+    <!-- Actions list -->
+    <div class="vc-mobile-action-sheet__actions">
+      <button
+        v-for="action in actions"
+        :key="action.id"
+        class="vc-mobile-action-sheet__action"
+        :class="[
+          `vc-mobile-action-sheet__action--${action.type || 'default'}`,
+          { 'vc-mobile-action-sheet__action--disabled': action.disabled },
+        ]"
+        :disabled="action.disabled"
+        @click="handleActionClick(action)"
       >
-        <div class="vc-mobile-action-sheet__backdrop" />
-      </TransitionChild>
-
-      <!-- Sheet container -->
-      <div class="vc-mobile-action-sheet__container">
-        <TransitionChild
-          as="template"
-          enter="vc-mobile-action-sheet__sheet-enter"
-          enter-from="vc-mobile-action-sheet__sheet-enter-from"
-          enter-to="vc-mobile-action-sheet__sheet-enter-to"
-          leave="vc-mobile-action-sheet__sheet-leave"
-          leave-from="vc-mobile-action-sheet__sheet-leave-from"
-          leave-to="vc-mobile-action-sheet__sheet-leave-to"
+        <VcIcon
+          :icon="action.icon"
+          class="vc-mobile-action-sheet__action-icon"
+        />
+        <span class="vc-mobile-action-sheet__action-title">{{ action.title }}</span>
+      </button>
+    </div>
+
+    <template #footer>
+      <div class="vc-mobile-action-sheet__cancel">
+        <button
+          class="vc-mobile-action-sheet__cancel-btn"
+          @click="handleClose"
         >
-          <DialogPanel
-            ref="sheetRef"
-            class="vc-mobile-action-sheet__panel"
-            @touchstart="handleTouchStart"
-            @touchmove="handleTouchMove"
-            @touchend="handleTouchEnd"
-          >
-            <!-- Drag handle -->
-            <div class="vc-mobile-action-sheet__handle">
-              <div class="vc-mobile-action-sheet__handle-bar" />
-            </div>
-
-            <!-- Title -->
-            <DialogTitle
-              v-if="title"
-              class="vc-mobile-action-sheet__title"
-            >
-              {{ title }}
-            </DialogTitle>
-
-            <!-- Actions list -->
-            <div class="vc-mobile-action-sheet__actions">
-              <button
-                v-for="action in actions"
-                :key="action.id"
-                class="vc-mobile-action-sheet__action"
-                :class="[
-                  `vc-mobile-action-sheet__action--${action.type || 'default'}`,
-                  { 'vc-mobile-action-sheet__action--disabled': action.disabled },
-                ]"
-                :disabled="action.disabled"
-                @click="handleActionClick(action)"
-              >
-                <VcIcon
-                  :icon="action.icon"
-                  class="vc-mobile-action-sheet__action-icon"
-                />
-                <span class="vc-mobile-action-sheet__action-title">{{ action.title }}</span>
-              </button>
-            </div>
-
-            <!-- Cancel button -->
-            <div class="vc-mobile-action-sheet__cancel">
-              <button
-                class="vc-mobile-action-sheet__cancel-btn"
-                @click="handleClose"
-              >
-                {{ cancelLabel }}
-              </button>
-            </div>
-          </DialogPanel>
-        </TransitionChild>
+          {{ cancelLabel }}
+        </button>
       </div>
-    </Dialog>
-  </TransitionRoot>
+    </template>
+  </VcSidebar>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
 /**
  * MobileActionSheet - iOS-style bottom sheet for action overflow
  *
+ * Thin wrapper around VcSidebar(position="bottom") with swipe-to-dismiss.
  * Displays when there are more than 2 swipe actions on a mobile card.
- * Features:
- * - Slide-up animation from bottom
- * - Semi-transparent backdrop with blur
- * - Swipe down to dismiss
- * - Cancel button at bottom
  */
-import { ref } from "vue";
-import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
-import type { MobileSwipeAction } from "../../types";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import type { MobileSwipeAction } from "@ui/components/organisms/vc-table/types";
 
 const props = withDefaults(
   defineProps<{
@@ -119,7 +70,7 @@ const props = withDefaults(
   {
     title: undefined,
     cancelLabel: "Cancel",
-  }
+  },
 );
 
 const emit = defineEmits<{
@@ -129,12 +80,6 @@ const emit = defineEmits<{
   action: [action: MobileSwipeAction<T>];
 }>();
 
-// Touch handling for swipe-to-dismiss
-const sheetRef = ref<InstanceType<typeof DialogPanel> | null>(null);
-const touchStartY = ref(0);
-const touchCurrentY = ref(0);
-const isDragging = ref(false);
-
 function handleClose() {
   emit("close");
 }
@@ -144,95 +89,28 @@ function handleActionClick(action: MobileSwipeAction<T>) {
   emit("action", action);
   emit("close");
 }
-
-// Swipe down to dismiss logic
-function handleTouchStart(event: TouchEvent) {
-  touchStartY.value = event.touches[0].clientY;
-  touchCurrentY.value = event.touches[0].clientY;
-  isDragging.value = true;
-}
-
-function handleTouchMove(event: TouchEvent) {
-  if (!isDragging.value) return;
-  touchCurrentY.value = event.touches[0].clientY;
-
-  const delta = touchCurrentY.value - touchStartY.value;
-  // Only allow dragging down
-  if (delta > 0 && sheetRef.value?.$el) {
-    sheetRef.value.$el.style.transform = `translateY(${delta}px)`;
-  }
-}
-
-function handleTouchEnd() {
-  if (!isDragging.value) return;
-  isDragging.value = false;
-
-  const delta = touchCurrentY.value - touchStartY.value;
-  // If dragged more than 100px down, close the sheet
-  if (delta > 100) {
-    handleClose();
-  }
-
-  // Reset transform
-  if (sheetRef.value?.$el) {
-    sheetRef.value.$el.style.transform = "";
-  }
-}
 </script>
 
 <style lang="scss">
 :root {
-  --action-sheet-bg: var(--additional-50);
-  --action-sheet-backdrop: rgb(from var(--neutrals-900) r g b / 50%);
-  --action-sheet-handle-bg: var(--neutrals-300);
-  --action-sheet-title-color: var(--neutrals-500);
   --action-sheet-border: var(--neutrals-200);
   --action-sheet-action-color: var(--primary-700);
   --action-sheet-action-hover: var(--neutrals-100);
   --action-sheet-action-danger: var(--danger-600);
   --action-sheet-action-success: var(--success-600);
   --action-sheet-action-warning: var(--warning-600);
-  --action-sheet-action-disabled: var(--neutrals-400);
   --action-sheet-cancel-bg: var(--additional-50);
   --action-sheet-cancel-color: var(--primary-600);
 }
 
 .vc-mobile-action-sheet {
-  @apply tw-relative tw-z-50;
-
-  &__backdrop {
-    @apply tw-fixed tw-inset-0 tw-bg-[var(--action-sheet-backdrop)] tw-backdrop-blur-sm;
-  }
-
-  &__container {
-    @apply tw-fixed tw-inset-0 tw-flex tw-items-end tw-justify-center;
-    padding-bottom: env(safe-area-inset-bottom, 0);
-  }
-
-  &__panel {
-    @apply tw-w-full tw-max-w-lg tw-bg-[var(--action-sheet-bg)] tw-rounded-t-2xl tw-overflow-hidden tw-shadow-2xl;
-    touch-action: none;
-  }
-
-  &__handle {
-    @apply tw-flex tw-justify-center tw-py-3;
-  }
-
-  &__handle-bar {
-    @apply tw-w-10 tw-h-1 tw-bg-[var(--action-sheet-handle-bg)] tw-rounded-full;
-  }
-
-  &__title {
-    @apply tw-text-center tw-text-sm tw-font-medium tw-text-[var(--action-sheet-title-color)] tw-pb-3 tw-px-4;
-  }
-
   &__actions {
     @apply tw-border-t tw-border-[var(--action-sheet-border)];
   }
 
   &__action {
     @apply tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-5 tw-py-4 tw-text-left
-           tw-border-b tw-border-[var(--action-sheet-border)] tw-transition-colors
+           tw-border-b tw-border-[var(--action-sheet-border)] tw-transition-colors tw-bg-transparent tw-border-x-0 tw-border-t-0 tw-cursor-pointer
            hover:tw-bg-[var(--action-sheet-action-hover)]
            active:tw-bg-[var(--action-sheet-action-hover)];
 
@@ -270,66 +148,16 @@ function handleTouchEnd() {
   }
 
   &__cancel {
-    @apply tw-mt-2 tw-mx-3 tw-mb-3;
+    @apply tw-p-3;
   }
 
   &__cancel-btn {
-    @apply tw-w-full tw-py-4 tw-text-center tw-text-base tw-font-semibold
+    @apply tw-w-full tw-py-4 tw-text-center tw-text-base tw-font-semibold tw-border-0
            tw-text-[var(--action-sheet-cancel-color)]
            tw-bg-[var(--action-sheet-cancel-bg)]
-           tw-rounded-xl tw-transition-colors
+           tw-rounded-xl tw-transition-colors tw-cursor-pointer
            hover:tw-bg-[var(--action-sheet-action-hover)]
            active:tw-bg-[var(--action-sheet-action-hover)];
   }
-
-  // Backdrop animations
-  &__backdrop-enter {
-    @apply tw-duration-300 tw-ease-out;
-  }
-
-  &__backdrop-enter-from {
-    @apply tw-opacity-0;
-  }
-
-  &__backdrop-enter-to {
-    @apply tw-opacity-100;
-  }
-
-  &__backdrop-leave {
-    @apply tw-duration-200 tw-ease-in;
-  }
-
-  &__backdrop-leave-from {
-    @apply tw-opacity-100;
-  }
-
-  &__backdrop-leave-to {
-    @apply tw-opacity-0;
-  }
-
-  // Sheet slide-up animations
-  &__sheet-enter {
-    @apply tw-duration-300 tw-ease-out;
-  }
-
-  &__sheet-enter-from {
-    @apply tw-translate-y-full tw-opacity-0;
-  }
-
-  &__sheet-enter-to {
-    @apply tw-translate-y-0 tw-opacity-100;
-  }
-
-  &__sheet-leave {
-    @apply tw-duration-200 tw-ease-in;
-  }
-
-  &__sheet-leave-from {
-    @apply tw-translate-y-0 tw-opacity-100;
-  }
-
-  &__sheet-leave-to {
-    @apply tw-translate-y-full tw-opacity-0;
-  }
 }
 </style>

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

@@ -31,9 +31,9 @@
  */
 import { computed } from "vue";
 import * as _ from "lodash-es";
-import type { MobileColumnConfig } from "../../types";
-import DynamicCellRenderer from "../cells/DynamicCellRenderer.vue";
-import { SlotProxy } from "../_internal/SlotProxy";
+import type { MobileColumnConfig } from "@ui/components/organisms/vc-table/types";
+import DynamicCellRenderer from "@ui/components/organisms/vc-table/components/cells/DynamicCellRenderer.vue";
+import { SlotProxy } from "@ui/components/organisms/vc-table/components/_internal/SlotProxy";
 
 const props = defineProps<{
   /** Mobile column configuration */

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

@@ -1,6 +1,6 @@
 // Mobile components for VcDataTable
-export { default as MobileCellRenderer } from "./MobileCellRenderer.vue";
-export { default as MobileActionSheet } from "./MobileActionSheet.vue";
-export { default as DataTableMobileCard } from "./DataTableMobileCard.vue";
-export { default as DataTableMobileView } from "./DataTableMobileView.vue";
-export { default as PullToRefresh } from "./PullToRefresh.vue";
+export { default as MobileCellRenderer } from "@ui/components/organisms/vc-table/components/mobile/MobileCellRenderer.vue";
+export { default as MobileActionSheet } from "@ui/components/organisms/vc-table/components/mobile/MobileActionSheet.vue";
+export { default as DataTableMobileCard } from "@ui/components/organisms/vc-table/components/mobile/DataTableMobileCard.vue";
+export { default as DataTableMobileView } from "@ui/components/organisms/vc-table/components/mobile/DataTableMobileView.vue";
+export { default as PullToRefresh } from "@ui/components/organisms/vc-table/components/mobile/PullToRefresh.vue";

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

@@ -1,23 +1,23 @@
 // === PUBLIC API ===
-export { useTableContext } from "./useTableContext";
+export { useTableContext } from "@ui/components/organisms/vc-table/composables/useTableContext";
 // useTableSelection — exported from shared/composables (not from this directory)
-export { useTableColumnsResize } from "./useTableColumnsResize";
-export { useTableColumnsReorder } from "./useTableColumnsReorder";
-export { useTableRowReorder } from "./useTableRowReorder";
-export { useTableInlineEdit } from "./useTableInlineEdit";
-export { useVirtualScroll } from "./useVirtualScroll";
-export type { VirtualScrollOptions, VirtualScrollItem, VirtualScrollReturn } from "./useVirtualScroll";
-export { useTableRowGrouping } from "./useTableRowGrouping";
-export type { RowGroupingOptions, GroupedData, UseTableRowGroupingReturn } from "./useTableRowGrouping";
-export { useFilterState } from "./useTableFilter";
-export type { UseFilterStateOptions, UseFilterStateReturn } from "./useTableFilter";
-export { useColumnFilter } from "./useColumnFilter";
-export type { UseColumnFilterReturn } from "./useColumnFilter";
+export { useTableColumnsResize } from "@ui/components/organisms/vc-table/composables/useTableColumnsResize";
+export { useTableColumnsReorder } from "@ui/components/organisms/vc-table/composables/useTableColumnsReorder";
+export { useTableRowReorder } from "@ui/components/organisms/vc-table/composables/useTableRowReorder";
+export { useTableInlineEdit } from "@ui/components/organisms/vc-table/composables/useTableInlineEdit";
+export { useVirtualScroll } from "@ui/components/organisms/vc-table/composables/useVirtualScroll";
+export type { VirtualScrollOptions, VirtualScrollItem, VirtualScrollReturn } from "@ui/components/organisms/vc-table/composables/useVirtualScroll";
+export { useTableRowGrouping } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
+export type { RowGroupingOptions, GroupedData, UseTableRowGroupingReturn } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
+export { useFilterState } from "@ui/components/organisms/vc-table/composables/useTableFilter";
+export type { UseFilterStateOptions, UseFilterStateReturn } from "@ui/components/organisms/vc-table/composables/useTableFilter";
+export { useColumnFilter } from "@ui/components/organisms/vc-table/composables/useColumnFilter";
+export type { UseColumnFilterReturn } from "@ui/components/organisms/vc-table/composables/useColumnFilter";
 
 // === NEW COMPOSABLES (PrimeVue-style) ===
-export { useTableSort } from "./useTableSort";
-export type { UseTableSortOptions, UseTableSortReturn, SortEvent } from "./useTableSort";
-export { useTableEditing } from "./useTableEditing";
+export { useTableSort } from "@ui/components/organisms/vc-table/composables/useTableSort";
+export type { UseTableSortOptions, UseTableSortReturn, SortEvent } from "@ui/components/organisms/vc-table/composables/useTableSort";
+export { useTableEditing } from "@ui/components/organisms/vc-table/composables/useTableEditing";
 export type {
   UseTableEditingOptions,
   UseTableEditingReturn,
@@ -25,25 +25,25 @@ export type {
   CellEditCompleteEvent,
   RowEditEvent,
   RowEditSaveEvent,
-} from "./useTableEditing";
-export { useTableExpansion } from "./useTableExpansion";
-export type { UseTableExpansionOptions, UseTableExpansionReturn, RowExpandEvent } from "./useTableExpansion";
-export { useTableSelectionV2 } from "./useTableSelectionV2";
+} from "@ui/components/organisms/vc-table/composables/useTableEditing";
+export { useTableExpansion } from "@ui/components/organisms/vc-table/composables/useTableExpansion";
+export type { UseTableExpansionOptions, UseTableExpansionReturn, RowExpandEvent } from "@ui/components/organisms/vc-table/composables/useTableExpansion";
+export { useTableSelectionV2 } from "@ui/components/organisms/vc-table/composables/useTableSelectionV2";
 export type {
   UseTableSelectionV2Options,
   UseTableSelectionV2Return,
   RowSelectEvent,
   RowSelectAllEvent,
-} from "./useTableSelectionV2";
-export { useDataProcessing } from "./useDataProcessing";
-export type { UseDataProcessingOptions, UseDataProcessingReturn } from "./useDataProcessing";
-export { useTableColumns } from "./useTableColumns";
-export type { UseTableColumnsOptions, UseTableColumnsReturn } from "./useTableColumns";
-export { useMobileCardLayout } from "./useMobileCardLayout";
-export type { UseMobileCardLayoutOptions, UseMobileCardLayoutReturn } from "./useMobileCardLayout";
-export { useDataTableState } from "./useDataTableState";
-export type { UseDataTableStateOptions, UseDataTableStateReturn, DataTablePersistedState } from "./useDataTableState";
+} from "@ui/components/organisms/vc-table/composables/useTableSelectionV2";
+export { useDataProcessing } from "@ui/components/organisms/vc-table/composables/useDataProcessing";
+export type { UseDataProcessingOptions, UseDataProcessingReturn } from "@ui/components/organisms/vc-table/composables/useDataProcessing";
+export { useTableColumns } from "@ui/components/organisms/vc-table/composables/useTableColumns";
+export type { UseTableColumnsOptions, UseTableColumnsReturn } from "@ui/components/organisms/vc-table/composables/useTableColumns";
+export { useMobileCardLayout } from "@ui/components/organisms/vc-table/composables/useMobileCardLayout";
+export type { UseMobileCardLayoutOptions, UseMobileCardLayoutReturn } from "@ui/components/organisms/vc-table/composables/useMobileCardLayout";
+export { useDataTableState } from "@ui/components/organisms/vc-table/composables/useDataTableState";
+export type { UseDataTableStateOptions, UseDataTableStateReturn, DataTablePersistedState } from "@ui/components/organisms/vc-table/composables/useDataTableState";
 
 // === SWIPE (used by mobile components) ===
-export { useTableSwipe, provideTableSwipe } from "./useTableSwipe";
+export { useTableSwipe, provideTableSwipe } from "@ui/components/organisms/vc-table/composables/useTableSwipe";
 

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

@@ -14,7 +14,7 @@ import type {
   SelectFilterConfig,
   SelectFilterWithFieldConfig,
   DateRangeFilterConfig,
-} from "../types";
+} from "@ui/components/organisms/vc-table/types";
 
 /**
  * Type guard: check if config is a select filter with options

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

@@ -8,7 +8,7 @@
  * Inspired by PrimeVue's processedData computed pattern.
  */
 import { computed, type Ref, type ComputedRef } from "vue";
-import type { SortMeta } from "../types";
+import type { SortMeta } from "@ui/components/organisms/vc-table/types";
 
 export interface UseDataProcessingOptions<T> {
   /** Source data items */

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

@@ -26,19 +26,19 @@
  */
 
 import { computed, ref, toRef, watch, type Ref, type ComputedRef } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import type { VcColumnProps, EditChange } from "../types";
-
-import { useTableSelectionV2 } from "./useTableSelectionV2";
-import { useTableSort, type SortEvent } from "./useTableSort";
-import { useTableEditing } from "./useTableEditing";
-import { useTableExpansion } from "./useTableExpansion";
-import { useTableRowGrouping, type GroupedData } from "./useTableRowGrouping";
-import { useTableInlineEdit } from "./useTableInlineEdit";
-import { useTableColumns } from "./useTableColumns";
-import { useTableColumnsResize } from "./useTableColumnsResize";
-import { useTableColumnsReorder } from "./useTableColumnsReorder";
-import { useColumnFilter } from "./useColumnFilter";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps, EditChange } from "@ui/components/organisms/vc-table/types";
+
+import { useTableSelectionV2 } from "@ui/components/organisms/vc-table/composables/useTableSelectionV2";
+import { useTableSort, type SortEvent } from "@ui/components/organisms/vc-table/composables/useTableSort";
+import { useTableEditing } from "@ui/components/organisms/vc-table/composables/useTableEditing";
+import { useTableExpansion } from "@ui/components/organisms/vc-table/composables/useTableExpansion";
+import { useTableRowGrouping, type GroupedData } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
+import { useTableInlineEdit } from "@ui/components/organisms/vc-table/composables/useTableInlineEdit";
+import { useTableColumns } from "@ui/components/organisms/vc-table/composables/useTableColumns";
+import { useTableColumnsResize } from "@ui/components/organisms/vc-table/composables/useTableColumnsResize";
+import { useTableColumnsReorder } from "@ui/components/organisms/vc-table/composables/useTableColumnsReorder";
+import { useColumnFilter } from "@ui/components/organisms/vc-table/composables/useColumnFilter";
 
 // =============================================================================
 // Types

package/ui/components/organisms/vc-table/composables/useDataTableState.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, beforeEach } from "vitest";
 import { defineComponent, ref } from "vue";
 import { mount } from "@vue/test-utils";
-import { useDataTableState } from "./useDataTableState";
+import { useDataTableState } from "@ui/components/organisms/vc-table/composables/useDataTableState";
 
 describe("useDataTableState", () => {
   beforeEach(() => {

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

@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { shallowRef } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import type { VcColumnProps } from "../types";
-import { useMobileCardLayout } from "./useMobileCardLayout";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
+import { useMobileCardLayout } from "@ui/components/organisms/vc-table/composables/useMobileCardLayout";
 
 function createColumn(props: Partial<VcColumnProps> & { id: string }): ColumnInstance {
   const { id, ...rest } = props;