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

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

@@ -0,0 +1,251 @@
+<template>
+  <PullToRefresh
+    :enabled="pullToRefresh"
+    :refreshing="loading"
+    :pull-text="pullToRefreshText?.pull"
+    :release-text="pullToRefreshText?.release"
+    :refreshing-text="pullToRefreshText?.refreshing"
+    @refresh="emit('refresh')"
+  >
+    <div class="vc-data-table-mobile-view">
+      <!-- Empty state -->
+      <div
+        v-if="!loading && items.length === 0"
+        class="vc-data-table-mobile-view__empty"
+      >
+        <slot name="empty">
+          <div class="vc-data-table-mobile-view__empty-content">
+            <VcIcon
+              :icon="empty?.icon || 'material-inbox'"
+              class="vc-data-table-mobile-view__empty-icon"
+            />
+            <p class="vc-data-table-mobile-view__empty-text">
+              {{ empty?.text || emptyText }}
+            </p>
+            <VcButton
+              v-if="empty?.action"
+              variant="primary"
+              @click="empty?.clickHandler"
+            >
+              {{ empty.action }}
+            </VcButton>
+          </div>
+        </slot>
+      </div>
+
+      <!-- Cards list -->
+      <div
+        v-if="items.length > 0"
+        class="vc-data-table-mobile-view__list"
+      >
+        <DataTableMobileCard
+          v-for="(item, index) in items"
+          :key="getItemKey(item, index)"
+          :item="item"
+          :index="index"
+          :layout="mobileLayout"
+          :is-selected="isItemSelected(item)"
+          :is-selectable="isItemSelectable(item)"
+          :actions="getItemActions(item)"
+          :selection-mode="selectionMode"
+          :any-selected="hasSelection"
+          :data-key="dataKey"
+          :more-label="moreLabel"
+          :action-sheet-title="actionSheetTitle"
+          :cancel-label="cancelLabel"
+          @click="handleRowClick"
+          @select="handleRowSelect"
+          @action="handleAction"
+        />
+      </div>
+    </div>
+  </PullToRefresh>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+/**
+ * DataTableMobileView - Mobile view container for VcDataTable
+ *
+ * Manages the list of mobile cards with:
+ * - Swipe context provider
+ * - Loading and empty states
+ * - Selection management
+ * - 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";
+
+const props = withDefaults(
+  defineProps<{
+    /** Data items to display */
+    items: T[];
+    /** Column instances from VcColumn */
+    columns: ColumnInstance[];
+    /** Currently selected items */
+    selection?: T[];
+    /** Selection mode */
+    selectionMode?: "single" | "multiple";
+    /** Function to check if row is selectable */
+    isRowSelectable?: (data: T) => boolean;
+    /** Function to generate row actions */
+    rowActions?: (item: T) => TableAction[];
+    /** Loading state */
+    loading?: boolean;
+    /** Data key field for item identification */
+    dataKey?: string;
+    /** Empty state configuration */
+    empty?: TableEmptyAction;
+    /** Empty text (fallback) */
+    emptyText?: string;
+    /** "More" button label */
+    moreLabel?: string;
+    /** Action sheet title */
+    actionSheetTitle?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Enable pull-to-refresh */
+    pullToRefresh?: boolean;
+    /** Custom text for pull-to-refresh states */
+    pullToRefreshText?: PullToRefreshTextConfig;
+  }>(),
+  {
+    selection: () => [],
+    selectionMode: undefined,
+    isRowSelectable: () => true,
+    rowActions: undefined,
+    loading: false,
+    dataKey: "id",
+    empty: undefined,
+    emptyText: "No data available",
+    moreLabel: "More",
+    actionSheetTitle: "Actions",
+    cancelLabel: "Cancel",
+    pullToRefresh: false,
+    pullToRefreshText: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  /** Row was clicked */
+  click: [item: T, index: number];
+  /** Row selection changed */
+  select: [item: T, index: number];
+  /** Action was triggered */
+  action: [action: MobileSwipeAction<T>, item: T, index: number];
+  /** Pull-to-refresh triggered */
+  refresh: [];
+}>();
+
+// Provide swipe context for cards
+provideTableSwipe();
+
+// Compute mobile layout from columns
+const columnsRef = computed(() => props.columns);
+const { mobileLayout, hasMobileColumns } = useMobileCardLayout({ columns: columnsRef });
+
+// Selection helpers
+const hasSelection = computed(() => (props.selection?.length ?? 0) > 0);
+
+function isItemSelected(item: T): boolean {
+  if (!props.selection) return false;
+  const itemKey = item[props.dataKey];
+  return props.selection.some((s) => s[props.dataKey] === itemKey);
+}
+
+function isItemSelectable(item: T): boolean {
+  if (!props.isRowSelectable) return true;
+  return props.isRowSelectable(item);
+}
+
+// Generate item key
+function getItemKey(item: T, index: number): string {
+  return String(item[props.dataKey] ?? `item-${index}`);
+}
+
+// Convert TableAction to MobileSwipeAction
+function getItemActions(item: T): MobileSwipeAction<T>[] {
+  if (!props.rowActions) return [];
+
+  const actions = props.rowActions(item);
+  if (!actions) return [];
+
+  return actions.map((action) => ({
+    id: action.id || String(unref(action.title)),
+    title: String(unref(action.title)),
+    icon: action.icon || "material-more_horiz",
+    type: mapActionType(action.variant),
+    disabled: action.disabled,
+    clickHandler: (actionItem: T, index: number) => {
+      action.clickHandler?.(actionItem, index);
+    },
+  }));
+}
+
+function mapActionType(variant?: string): "danger" | "success" | "warning" | "default" {
+  switch (variant) {
+    case "danger":
+      return "danger";
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    default:
+      return "default";
+  }
+}
+
+// Event handlers
+function handleRowClick(item: T, index: number) {
+  emit("click", item, index);
+}
+
+function handleRowSelect(item: T, index: number) {
+  emit("select", item, index);
+}
+
+function handleAction(action: MobileSwipeAction<T>, item: T, index: number) {
+  emit("action", action, item, index);
+}
+
+// Expose layout status for parent component
+defineExpose({
+  hasMobileColumns,
+  mobileLayout,
+});
+</script>
+
+<style lang="scss">
+:root {
+  --mobile-view-bg: var(--additional-50);
+  --mobile-view-empty-text: var(--neutrals-500);
+  --mobile-view-empty-icon: var(--neutrals-300);
+}
+
+.vc-data-table-mobile-view {
+  @apply tw-relative tw-min-h-[200px] tw-bg-[var(--mobile-view-bg)];
+
+  &__empty {
+    @apply tw-flex tw-items-center tw-justify-center tw-min-h-[200px] tw-p-8;
+  }
+
+  &__empty-content {
+    @apply tw-flex tw-flex-col tw-items-center tw-gap-4 tw-text-center;
+  }
+
+  &__empty-icon {
+    @apply tw-text-6xl tw-text-[var(--mobile-view-empty-icon)];
+  }
+
+  &__empty-text {
+    @apply tw-text-[var(--mobile-view-empty-text)] tw-m-0;
+  }
+
+  &__list {
+    @apply tw-flex tw-flex-col;
+  }
+}
+</style>

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

@@ -0,0 +1,335 @@
+<template>
+  <TransitionRoot
+    appear
+    :show="open"
+    as="template"
+  >
+    <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"
+      >
+        <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"
+        >
+          <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>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+/**
+ * MobileActionSheet - iOS-style bottom sheet for action overflow
+ *
+ * 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";
+
+const props = withDefaults(
+  defineProps<{
+    /** Whether sheet is open */
+    open: boolean;
+    /** Sheet title */
+    title?: string;
+    /** Actions to display */
+    actions: MobileSwipeAction<T>[];
+    /** Cancel button label */
+    cancelLabel?: string;
+  }>(),
+  {
+    title: undefined,
+    cancelLabel: "Cancel",
+  }
+);
+
+const emit = defineEmits<{
+  /** Close the sheet */
+  close: [];
+  /** Action was clicked */
+  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");
+}
+
+function handleActionClick(action: MobileSwipeAction<T>) {
+  if (action.disabled) return;
+  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
+           hover:tw-bg-[var(--action-sheet-action-hover)]
+           active:tw-bg-[var(--action-sheet-action-hover)];
+
+    &:last-child {
+      @apply tw-border-b-0;
+    }
+
+    &--default {
+      @apply tw-text-[var(--action-sheet-action-color)];
+    }
+
+    &--danger {
+      @apply tw-text-[var(--action-sheet-action-danger)];
+    }
+
+    &--success {
+      @apply tw-text-[var(--action-sheet-action-success)];
+    }
+
+    &--warning {
+      @apply tw-text-[var(--action-sheet-action-warning)];
+    }
+
+    &--disabled {
+      @apply tw-opacity-50 tw-cursor-not-allowed tw-pointer-events-none;
+    }
+  }
+
+  &__action-icon {
+    @apply tw-text-xl tw-flex-shrink-0;
+  }
+
+  &__action-title {
+    @apply tw-text-base tw-font-medium;
+  }
+
+  &__cancel {
+    @apply tw-mt-2 tw-mx-3 tw-mb-3;
+  }
+
+  &__cancel-btn {
+    @apply tw-w-full tw-py-4 tw-text-center tw-text-base tw-font-semibold
+           tw-text-[var(--action-sheet-cancel-color)]
+           tw-bg-[var(--action-sheet-cancel-bg)]
+           tw-rounded-xl tw-transition-colors
+           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

@@ -0,0 +1,68 @@
+<template>
+  <!-- Custom body slot from VcColumn (takes priority) -->
+  <template v-if="config.column.slots.body || config.column.slots.default">
+    <SlotProxy
+      :slot-fn="(config.column.slots.body || config.column.slots.default)!"
+      :scope="{
+        data: item,
+        field: fieldName,
+        index
+      }"
+    />
+  </template>
+
+  <!-- Type-specific cell formatters -->
+  <DynamicCellRenderer
+    v-else
+    :type="config.type || 'text'"
+    :value="cellValue"
+    :currency="currency"
+    :format="config.column.props.format"
+    :variant="dateVariant"
+  />
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+/**
+ * MobileCellRenderer - Renders cell content in mobile card view
+ *
+ * Simplified version of DataTableCellRenderer for mobile cards.
+ * Does not support editing, selection, or special columns (those are handled separately).
+ */
+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";
+
+const props = defineProps<{
+  /** Mobile column configuration */
+  config: MobileColumnConfig;
+  /** Row data item */
+  item: T;
+  /** Row index */
+  index: number;
+}>();
+
+// Field name from column
+const fieldName = computed(() => props.config.field || props.config.id);
+
+// Get cell value using lodash _.get for nested fields
+const cellValue = computed(() => {
+  return _.get(props.item, fieldName.value || "");
+});
+
+// Currency for money cells
+const currency = computed(() => {
+  const field = props.config.column.props.currencyField || "currency";
+  return (props.item as Record<string, unknown>)[field] as string || "USD";
+});
+
+// Date variant based on column type
+const dateVariant = computed<"date" | "time" | "date-time">(() => {
+  const type = props.config.type;
+  if (type === "time") return "time";
+  if (type === "datetime") return "date-time";
+  return "date";
+});
+</script>