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

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

@@ -42,9 +42,10 @@
 <script setup lang="ts">
 import { computed, inject, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-currency.vue";
-import { VcIcon } from "../../../../atoms";
-import CellEditableWrapper from "./CellEditableWrapper.vue";
+import VcInputCurrency from "@ui/components/molecules/vc-input-currency/vc-input-currency.vue";
+import { VcIcon } from "@ui/components/atoms";
+import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
+import CellEditableWrapper from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";
 
 const props = defineProps<{
   /** The monetary value to display or edit */
@@ -75,8 +76,8 @@ const emit = defineEmits<{
 const { t } = useI18n({ useScope: "global" });
 const locale = window.navigator.language;
 
-const isMobileRef = inject<Ref<boolean>>("isMobile", ref(false));
-const isDesktopRef = inject<Ref<boolean>>("isDesktop", ref(true));
+const isMobileRef = inject(IsMobileKey, ref(false));
+const isDesktopRef = inject(IsDesktopKey, ref(true));
 const isMobile = computed(() => isMobileRef.value);
 const isDesktop = computed(() => isDesktopRef.value);
 
@@ -113,7 +114,7 @@ const onBlur = (errors: string[]) => {
   }
 
   &__error-icon {
-    @apply tw-text-[color:var(--danger-500)];
+    @apply tw-text-danger-500;
   }
 }
 </style>

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

@@ -40,9 +40,10 @@
 <script setup lang="ts">
 import { computed, inject, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import VcInput from "../../../../molecules/vc-input/vc-input.vue";
-import { VcIcon } from "../../../../atoms";
-import CellEditableWrapper from "./CellEditableWrapper.vue";
+import VcInput from "@ui/components/molecules/vc-input/vc-input.vue";
+import { VcIcon } from "@ui/components/atoms";
+import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
+import CellEditableWrapper from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";
 
 const props = defineProps<{
   /** The numeric value to display or edit */
@@ -70,8 +71,8 @@ const emit = defineEmits<{
 
 const { t } = useI18n({ useScope: "global" });
 
-const isMobileRef = inject<Ref<boolean>>("isMobile", ref(false));
-const isDesktopRef = inject<Ref<boolean>>("isDesktop", ref(true));
+const isMobileRef = inject(IsMobileKey, ref(false));
+const isDesktopRef = inject(IsDesktopKey, ref(true));
 const isMobile = computed(() => isMobileRef.value);
 const isDesktop = computed(() => isDesktopRef.value);
 
@@ -106,7 +107,7 @@ const onBlur = (errors: string[]) => {
   }
 
   &__error-icon {
-    @apply tw-text-[color:var(--danger-500)];
+    @apply tw-text-danger-500;
   }
 }
 </style>

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

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { VcStatus } from "../../../../atoms";
+import { VcStatus } from "@ui/components/atoms";
 
 defineProps<{
   /** The status text to display in a status badge */

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

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { VcStatusIcon } from "../../../../atoms";
+import { VcStatusIcon } from "@ui/components/atoms";
 
 defineProps<{
   /** Boolean value indicating status (true = success, false = error) */

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

@@ -27,19 +27,19 @@
  * ```
  */
 import { computed, type Component } from "vue";
-import { useCellRegistry } from "../../composables/useCellRegistry";
+import { useCellRegistry } from "@ui/components/organisms/vc-table/composables/useCellRegistry";
 
 // Import cell components for fallback and default registration
-import CellDefault from "./CellDefault.vue";
-import CellMoney from "./CellMoney.vue";
-import CellNumber from "./CellNumber.vue";
-import CellDate from "./CellDate.vue";
-import CellDateAgo from "./CellDateAgo.vue";
-import CellImage from "./CellImage.vue";
-import CellStatus from "./CellStatus.vue";
-import CellStatusIcon from "./CellStatusIcon.vue";
-import CellLink from "./CellLink.vue";
-import CellHtml from "./CellHtml.vue";
+import CellDefault from "@ui/components/organisms/vc-table/components/cells/CellDefault.vue";
+import CellMoney from "@ui/components/organisms/vc-table/components/cells/CellMoney.vue";
+import CellNumber from "@ui/components/organisms/vc-table/components/cells/CellNumber.vue";
+import CellDate from "@ui/components/organisms/vc-table/components/cells/CellDate.vue";
+import CellDateAgo from "@ui/components/organisms/vc-table/components/cells/CellDateAgo.vue";
+import CellImage from "@ui/components/organisms/vc-table/components/cells/CellImage.vue";
+import CellStatus from "@ui/components/organisms/vc-table/components/cells/CellStatus.vue";
+import CellStatusIcon from "@ui/components/organisms/vc-table/components/cells/CellStatusIcon.vue";
+import CellLink from "@ui/components/organisms/vc-table/components/cells/CellLink.vue";
+import CellHtml from "@ui/components/organisms/vc-table/components/cells/CellHtml.vue";
 
 // Get composable methods
 const { register, has, get } = useCellRegistry();

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

@@ -1,11 +1,11 @@
-export { default as CellMoney } from "./CellMoney.vue";
-export { default as CellDateAgo } from "./CellDateAgo.vue";
-export { default as CellDate } from "./CellDate.vue";
-export { default as CellImage } from "./CellImage.vue";
-export { default as CellStatus } from "./CellStatus.vue";
-export { default as CellStatusIcon } from "./CellStatusIcon.vue";
-export { default as CellLink } from "./CellLink.vue";
-export { default as CellHtml } from "./CellHtml.vue";
-export { default as CellNumber } from "./CellNumber.vue";
-export { default as CellDefault } from "./CellDefault.vue";
-export { default as CellEditableWrapper } from "./CellEditableWrapper.vue";
+export { default as CellMoney } from "@ui/components/organisms/vc-table/components/cells/CellMoney.vue";
+export { default as CellDateAgo } from "@ui/components/organisms/vc-table/components/cells/CellDateAgo.vue";
+export { default as CellDate } from "@ui/components/organisms/vc-table/components/cells/CellDate.vue";
+export { default as CellImage } from "@ui/components/organisms/vc-table/components/cells/CellImage.vue";
+export { default as CellStatus } from "@ui/components/organisms/vc-table/components/cells/CellStatus.vue";
+export { default as CellStatusIcon } from "@ui/components/organisms/vc-table/components/cells/CellStatusIcon.vue";
+export { default as CellLink } from "@ui/components/organisms/vc-table/components/cells/CellLink.vue";
+export { default as CellHtml } from "@ui/components/organisms/vc-table/components/cells/CellHtml.vue";
+export { default as CellNumber } from "@ui/components/organisms/vc-table/components/cells/CellNumber.vue";
+export { default as CellDefault } from "@ui/components/organisms/vc-table/components/cells/CellDefault.vue";
+export { default as CellEditableWrapper } from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";

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";