@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

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

@@ -1,388 +0,0 @@
-/**
- * useTableSelectionV2 - Enhanced selection composable for VcDataTable
- *
- * Features:
- * - Single and multiple selection modes
- * - isRowSelectable callback for disabling selection on specific rows
- * - Efficient Set-based lookup for O(1) selection checks
- * - Select all with selectability filtering
- *
- * This is an enhanced version for VcDataTable.
- * The original useTableSelection is kept for VcTableComposition compatibility.
- *
- * Inspired by PrimeVue DataTable selection patterns.
- */
-import { ref, computed, watch, type Ref, type ComputedRef } from "vue";
-
-export interface UseTableSelectionV2Options<T> {
-  /** Source data items */
-  items: Ref<T[]>;
-  /** External selection value (v-model:selection) */
-  selection?: Ref<T | T[] | undefined>;
-  /** Selection mode: single or multiple */
-  selectionMode: Ref<"single" | "multiple" | undefined>;
-  /** Callback to determine if a row can be selected */
-  isRowSelectable?: (item: T) => boolean;
-  /** Data key field for item identification */
-  dataKey: string;
-  /** Function to get unique key for an item */
-  getItemKey: (item: T, index: number) => string;
-  /** Total count of items (for pagination - used by "select all" feature) */
-  totalCount?: Ref<number | undefined>;
-  /** External "select all" state (v-model:selectAllActive) */
-  selectAllActive?: Ref<boolean | undefined>;
-  /** Callback when "select all" mode changes */
-  onSelectAllChange?: (active: boolean) => void;
-}
-
-export interface RowSelectEvent<T> {
-  data: T;
-  originalEvent: Event;
-}
-
-export interface RowSelectAllEvent<T> {
-  data: T[];
-  originalEvent: Event;
-}
-
-/** Selection state info for display */
-export interface SelectionInfo {
-  /** Number of selected items */
-  count: number;
-  /** Whether "select all" mode is active (includes non-visible items) */
-  isSelectAll: boolean;
-  /** Total count of items (from totalCount prop) */
-  totalCount?: number;
-}
-
-export interface UseTableSelectionV2Return<T> {
-  /** Internal selection array */
-  internalSelection: Ref<T[]>;
-  /** Set of selected item keys for O(1) lookup */
-  selectionKeys: ComputedRef<Set<string>>;
-  /** All selectable items are selected */
-  allSelected: ComputedRef<boolean>;
-  /** Some but not all selectable items are selected (indeterminate state) */
-  someSelected: ComputedRef<boolean>;
-  /** Whether "select all" mode is active (includes non-visible items) */
-  isSelectAllActive: Ref<boolean>;
-  /** Whether to show "select all" choice (when all visible items selected and more exist) */
-  showSelectAllChoice: ComputedRef<boolean>;
-  /** Selection info for display */
-  selectionInfo: ComputedRef<SelectionInfo>;
-  /** Check if an item is selected */
-  isSelected: (item: T) => boolean;
-  /** Check if an item can be selected */
-  canSelect: (item: T) => boolean;
-  /** Handle row selection change (click or checkbox) */
-  handleRowSelectionChange: (item: T, event?: Event | boolean) => RowSelectEvent<T> | null;
-  /** Handle select all checkbox change */
-  handleSelectAllChange: (value: boolean, event?: Event) => RowSelectAllEvent<T>;
-  /** Select a specific item */
-  selectItem: (item: T, event?: Event) => RowSelectEvent<T> | null;
-  /** Unselect a specific item */
-  unselectItem: (item: T, event?: Event) => RowSelectEvent<T> | null;
-  /** Clear all selections */
-  clearSelection: () => void;
-  /** Select all items (marks mode, emits event for parent to handle) */
-  selectAll: () => void;
-  /** Clear "select all" mode */
-  clearSelectAll: () => void;
-  /** Get selection state for bulk operations */
-  getSelectionState: () => { selected: T[]; isSelectAll: boolean; count: number };
-}
-
-export function useTableSelectionV2<T extends Record<string, any>>(
-  options: UseTableSelectionV2Options<T>
-): UseTableSelectionV2Return<T> {
-  const {
-    items,
-    selection,
-    selectionMode,
-    isRowSelectable,
-    getItemKey,
-    totalCount,
-    selectAllActive,
-    onSelectAllChange,
-  } = options;
-
-  // ============================================================================
-  // State
-  // ============================================================================
-
-  /** Internal selection array */
-  const internalSelection = ref<T[]>([]) as Ref<T[]>;
-
-  /** Internal "select all" mode state */
-  const isSelectAllActive = ref<boolean>(false);
-
-  // Sync selection with external prop
-  watch(
-    () => selection?.value,
-    (newVal) => {
-      if (newVal !== undefined) {
-        internalSelection.value = Array.isArray(newVal) ? newVal : [newVal];
-      }
-    },
-    { immediate: true }
-  );
-
-  // Sync selectAllActive with external prop
-  watch(
-    () => selectAllActive?.value,
-    (newVal) => {
-      if (newVal !== undefined) {
-        isSelectAllActive.value = newVal;
-      }
-    },
-    { immediate: true }
-  );
-
-  /**
-   * Set of selected item keys for O(1) lookup
-   */
-  const selectionKeys = computed<Set<string>>(() => {
-    return new Set(
-      internalSelection.value.map((item) => getItemKey(item, -1))
-    );
-  });
-
-  // ============================================================================
-  // Computed Properties
-  // ============================================================================
-
-  /**
-   * Get all selectable items (filtered by isRowSelectable)
-   */
-  const selectableItems = computed<T[]>(() => {
-    if (!isRowSelectable) return items.value;
-    return items.value.filter(isRowSelectable);
-  });
-
-  /**
-   * All selectable items are selected
-   */
-  const allSelected = computed<boolean>(() => {
-    if (!items.value || items.value.length === 0) return false;
-    if (selectableItems.value.length === 0) return false;
-    return selectableItems.value.every((item) => isSelected(item));
-  });
-
-  /**
-   * Some but not all selectable items are selected (indeterminate state)
-   */
-  const someSelected = computed<boolean>(() => {
-    if (!items.value || items.value.length === 0) return false;
-    if (selectableItems.value.length === 0) return false;
-    const selectedCount = selectableItems.value.filter((item) =>
-      isSelected(item)
-    ).length;
-    return selectedCount > 0 && selectedCount < selectableItems.value.length;
-  });
-
-  /**
-   * Whether to show "select all" choice banner
-   * Shows when all visible items are selected and more items exist (totalCount > items.length)
-   */
-  const showSelectAllChoice = computed<boolean>(() => {
-    if (!totalCount?.value) return false;
-    if (isSelectAllActive.value) return false; // Already in select all mode
-    return allSelected.value && totalCount.value > items.value.length;
-  });
-
-  /**
-   * Selection info for display
-   */
-  const selectionInfo = computed<SelectionInfo>(() => ({
-    count: isSelectAllActive.value
-      ? (totalCount?.value ?? internalSelection.value.length)
-      : internalSelection.value.length,
-    isSelectAll: isSelectAllActive.value,
-    totalCount: totalCount?.value,
-  }));
-
-  // ============================================================================
-  // Methods
-  // ============================================================================
-
-  /**
-   * Check if an item is selected
-   */
-  const isSelected = (item: T): boolean => {
-    const key = getItemKey(item, -1);
-    return selectionKeys.value.has(key);
-  };
-
-  /**
-   * Check if an item can be selected
-   */
-  const canSelect = (item: T): boolean => {
-    if (!isRowSelectable) return true;
-    return isRowSelectable(item);
-  };
-
-  /**
-   * Select a specific item
-   */
-  const selectItem = (item: T, event?: Event): RowSelectEvent<T> | null => {
-    if (!canSelect(item)) return null;
-
-    const mode = selectionMode.value;
-    const key = getItemKey(item, -1);
-
-    if (mode === "single") {
-      internalSelection.value = [item];
-    } else {
-      if (!selectionKeys.value.has(key)) {
-        internalSelection.value = [...internalSelection.value, item];
-      }
-    }
-
-    return {
-      data: item,
-      originalEvent: event || new Event("select"),
-    };
-  };
-
-  /**
-   * Unselect a specific item
-   */
-  const unselectItem = (item: T, event?: Event): RowSelectEvent<T> | null => {
-    const key = getItemKey(item, -1);
-
-    internalSelection.value = internalSelection.value.filter(
-      (selected) => getItemKey(selected, -1) !== key
-    );
-
-    return {
-      data: item,
-      originalEvent: event || new Event("unselect"),
-    };
-  };
-
-  /**
-   * Handle row selection change (click or checkbox)
-   */
-  const handleRowSelectionChange = (
-    item: T,
-    eventOrValue?: Event | boolean
-  ): RowSelectEvent<T> | null => {
-    // Check if row is selectable
-    if (!canSelect(item)) {
-      return null;
-    }
-
-    const isCurrentlySelected = isSelected(item);
-    const originalEvent =
-      eventOrValue instanceof Event ? eventOrValue : new Event("change");
-
-    if (isCurrentlySelected) {
-      return unselectItem(item, originalEvent);
-    } else {
-      return selectItem(item, originalEvent);
-    }
-  };
-
-  /**
-   * Handle select all checkbox change
-   */
-  const handleSelectAllChange = (
-    value: boolean,
-    event?: Event
-  ): RowSelectAllEvent<T> => {
-    const originalEvent = event || new Event("change");
-
-    if (value) {
-      // Select all selectable items
-      internalSelection.value = [...selectableItems.value];
-      return {
-        data: selectableItems.value,
-        originalEvent,
-      };
-    } else {
-      // Clear selection
-      internalSelection.value = [];
-      return {
-        data: [],
-        originalEvent,
-      };
-    }
-  };
-
-  /**
-   * Clear all selections
-   */
-  const clearSelection = (): void => {
-    internalSelection.value = [];
-    isSelectAllActive.value = false;
-    onSelectAllChange?.(false);
-  };
-
-  /**
-   * Select all items (marks mode, parent should handle loading all IDs)
-   * This sets the "select all" flag - parent component decides how to handle bulk operations
-   */
-  const selectAll = (): void => {
-    // First select all visible items
-    internalSelection.value = [...selectableItems.value];
-    // Then activate "select all" mode for non-visible items
-    isSelectAllActive.value = true;
-    onSelectAllChange?.(true);
-  };
-
-  /**
-   * Clear "select all" mode (but keep visible selections)
-   */
-  const clearSelectAll = (): void => {
-    isSelectAllActive.value = false;
-    onSelectAllChange?.(false);
-  };
-
-  /**
-   * Get selection state for bulk operations
-   * Parent can use this to determine whether to operate on selected items or all items
-   */
-  const getSelectionState = (): { selected: T[]; isSelectAll: boolean; count: number } => {
-    return {
-      selected: [...internalSelection.value],
-      isSelectAll: isSelectAllActive.value,
-      count: isSelectAllActive.value
-        ? (totalCount?.value ?? internalSelection.value.length)
-        : internalSelection.value.length,
-    };
-  };
-
-  // Clear select all mode when selection changes manually (e.g., uncheck an item)
-  watch(
-    () => internalSelection.value.length,
-    (newLength, oldLength) => {
-      // If user deselects an item while in "select all" mode, exit that mode
-      if (isSelectAllActive.value && newLength < oldLength) {
-        isSelectAllActive.value = false;
-        onSelectAllChange?.(false);
-      }
-    }
-  );
-
-  return {
-    internalSelection,
-    selectionKeys,
-    allSelected,
-    someSelected,
-    isSelectAllActive,
-    showSelectAllChoice,
-    selectionInfo,
-    isSelected,
-    canSelect,
-    handleRowSelectionChange,
-    handleSelectAllChange,
-    selectItem,
-    unselectItem,
-    clearSelection,
-    selectAll,
-    clearSelectAll,
-    getSelectionState,
-  };
-}
-
-export default useTableSelectionV2;

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

@@ -1,221 +0,0 @@
-/**
- * useTableSort - Composable for table sorting functionality
- *
- * Handles single and multi-sort modes with removable sort support.
- * Extracted from VcDataTable.vue for better modularity.
- *
- * Inspired by PrimeVue DataTable sorting patterns.
- */
-import { computed, ref, watch, type Ref, type ComputedRef } from "vue";
-import type { SortMeta } from "@ui/components/organisms/vc-table/types";
-
-export interface UseTableSortOptions {
-  /** Current sort field (for single sort mode) */
-  sortField: Ref<string | undefined>;
-  /** Current sort order: 1 = asc, -1 = desc, 0 = none */
-  sortOrder: Ref<number>;
-  /** Sort mode: single or multiple */
-  sortMode: Ref<"single" | "multiple">;
-  /** Multi-sort metadata array */
-  multiSortMeta: Ref<SortMeta[]>;
-  /** Allow removing sort by cycling through asc -> desc -> none */
-  removableSort: Ref<boolean>;
-  /** Callback when sort changes */
-  onSort?: (event: SortEvent) => void;
-}
-
-export interface SortEvent {
-  sortField?: string;
-  sortOrder?: number;
-  multiSortMeta?: SortMeta[];
-}
-
-export interface UseTableSortReturn {
-  /** Handle sort click on column header */
-  handleSort: (field: string, event?: Event) => void;
-  /** Get sort direction for a field */
-  getSortDirection: (field: string) => "asc" | "desc" | undefined;
-  /** Get sort index for multi-sort (1-based for display) */
-  getSortIndex: (field: string) => number | undefined;
-  /** Check if field is currently sorted */
-  isSorted: (field: string) => boolean;
-  /** Internal sort field state */
-  internalSortField: Ref<string | undefined>;
-  /** Internal sort order state */
-  internalSortOrder: Ref<number>;
-  /** Internal multi-sort meta state */
-  internalMultiSortMeta: Ref<SortMeta[]>;
-}
-
-export function useTableSort(options: UseTableSortOptions): UseTableSortReturn {
-  const {
-    sortField,
-    sortOrder,
-    sortMode,
-    multiSortMeta,
-    removableSort,
-    onSort,
-  } = options;
-
-  // Internal state (initialized from props, kept in sync via watchers below)
-  const internalSortField = ref<string | undefined>(sortField.value);
-  const internalSortOrder = ref<number>(sortOrder.value ?? 0);
-  const internalMultiSortMeta = ref<SortMeta[]>([...(multiSortMeta.value || [])]);
-
-  // Sync internal state when props change from the parent.
-  // This is critical for adapter/controlled usage where the parent manages
-  // the sort cycle independently (e.g. VcTableAdapter + legacy onHeaderClick).
-  // Without these watchers, VcDataTable's internal sort state drifts from the
-  // parent's props since both advance their own cycle on each click.
-  watch(
-    () => [sortField.value, sortOrder.value, multiSortMeta.value] as const,
-    ([field, order, meta]) => {
-      internalSortField.value = field;
-      internalSortOrder.value = order ?? 0;
-      internalMultiSortMeta.value = [...(meta || [])];
-    },
-  );
-
-  /**
-   * Handle sort click on column header
-   */
-  const handleSort = (field: string, event?: Event): void => {
-    if (sortMode.value === "multiple") {
-      handleMultiSort(field, event);
-    } else {
-      handleSingleSort(field);
-    }
-  };
-
-  /**
-   * Handle single sort mode
-   */
-  const handleSingleSort = (field: string): void => {
-    let newOrder: 1 | -1 | 0 = 1;
-
-    if (internalSortField.value === field) {
-      if (internalSortOrder.value === 1) {
-        newOrder = -1;
-      } else if (internalSortOrder.value === -1) {
-        newOrder = removableSort.value ? 0 : 1;
-      }
-    }
-
-    internalSortField.value = newOrder === 0 ? undefined : field;
-    internalSortOrder.value = newOrder;
-
-    onSort?.({
-      sortField: newOrder === 0 ? undefined : field,
-      sortOrder: newOrder,
-    });
-  };
-
-  /**
-   * Handle multi-sort mode
-   */
-  const handleMultiSort = (field: string, event?: Event): void => {
-    const currentMeta = [...internalMultiSortMeta.value];
-    const existingIndex = currentMeta.findIndex((m) => m.field === field);
-    const isCtrlClick = (event as MouseEvent | KeyboardEvent | undefined)?.ctrlKey || (event as MouseEvent | KeyboardEvent | undefined)?.metaKey;
-
-    if (isCtrlClick) {
-      // Ctrl+click: add to or toggle existing sort
-      if (existingIndex >= 0) {
-        const existing = currentMeta[existingIndex];
-        if (existing.order === 1) {
-          existing.order = -1;
-        } else if (existing.order === -1) {
-          if (removableSort.value) {
-            // Remove from sort
-            currentMeta.splice(existingIndex, 1);
-          } else {
-            existing.order = 1;
-          }
-        }
-      } else {
-        // Add new sort field
-        currentMeta.push({ field, order: 1 });
-      }
-    } else {
-      // Regular click: replace all sorts with this column
-      if (existingIndex >= 0 && currentMeta.length === 1) {
-        // Toggle existing single sort
-        const existing = currentMeta[0];
-        if (existing.order === 1) {
-          existing.order = -1;
-        } else if (existing.order === -1) {
-          if (removableSort.value) {
-            currentMeta.splice(0, 1);
-          } else {
-            existing.order = 1;
-          }
-        }
-      } else {
-        // Replace with new single sort
-        currentMeta.length = 0;
-        currentMeta.push({ field, order: 1 });
-      }
-    }
-
-    internalMultiSortMeta.value = currentMeta;
-
-    onSort?.({
-      multiSortMeta: currentMeta,
-    });
-  };
-
-  /**
-   * Get sort direction for a field
-   */
-  const getSortDirection = (field: string): "asc" | "desc" | undefined => {
-    if (sortMode.value === "multiple") {
-      const meta = internalMultiSortMeta.value.find((m) => m.field === field);
-      if (meta) {
-        return meta.order === 1 ? "asc" : meta.order === -1 ? "desc" : undefined;
-      }
-      return undefined;
-    }
-
-    // Single sort mode
-    if (internalSortField.value === field) {
-      return internalSortOrder.value === 1
-        ? "asc"
-        : internalSortOrder.value === -1
-          ? "desc"
-          : undefined;
-    }
-    return undefined;
-  };
-
-  /**
-   * Get sort index for multi-sort (1-based for display)
-   */
-  const getSortIndex = (field: string): number | undefined => {
-    if (sortMode.value !== "multiple") return undefined;
-
-    const meta = internalMultiSortMeta.value;
-    if (meta.length <= 1) return undefined;
-
-    const index = meta.findIndex((m) => m.field === field);
-    return index >= 0 ? index + 1 : undefined;
-  };
-
-  /**
-   * Check if field is currently sorted
-   */
-  const isSorted = (field: string): boolean => {
-    return getSortDirection(field) !== undefined;
-  };
-
-  return {
-    handleSort,
-    getSortDirection,
-    getSortIndex,
-    isSorted,
-    internalSortField,
-    internalSortOrder,
-    internalMultiSortMeta,
-  };
-}
-
-export default useTableSort;

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

@@ -1,32 +0,0 @@
-import { ref, provide, inject, InjectionKey, Ref } from "vue";
-
-interface TableSwipeContext {
-  activeSwipeId: Ref<string | null>;
-  setActiveSwipe: (id: string | null) => void;
-}
-
-const TableSwipeKey = Symbol() as InjectionKey<TableSwipeContext>;
-
-export function provideTableSwipe() {
-  const activeSwipeId = ref<string | null>(null);
-
-  function setActiveSwipe(id: string | null) {
-    activeSwipeId.value = id;
-  }
-
-  const context = {
-    activeSwipeId,
-    setActiveSwipe,
-  };
-
-  provide(TableSwipeKey, context);
-  return context;
-}
-
-export function useTableSwipe() {
-  const context = inject(TableSwipeKey);
-  if (!context) {
-    throw new Error("useTableSwipe must be used within a provider");
-  }
-  return context;
-}