@veristone/nuxt-v-app 0.2.2 → 0.2.4

package/app/composables/useXATableColumns.ts

@@ -1,456 +1,349 @@
-import { h, resolveComponent } from 'vue'
-import type { TableColumn } from '@nuxt/ui'
-
 /**
- * Composable for creating common table column patterns
+ * useXATableColumns - Column presets for common data types
+ *
+ * Provides pre-configured column definitions that automatically render
+ * with appropriate formatting and components via CellRenderer.
+ *
+ * @example
+ * ```typescript
+ * const { presets } = useXATableColumns();
+ *
+ * const tableColumns = [
+ *   presets.avatar('name', 'Name'),
+ *   presets.text('email', 'Email'),
+ *   presets.badge('status', 'Status'),
+ *   presets.date('createdAt', 'Created'),
+ *   presets.currency('price', 'Price'),
+ *   presets.actions(),
+ * ];
+ * ```
  */
-export function useXATableColumns<T extends Record<string, any>>() {
-  const UBadge = resolveComponent('UBadge')
-  const UButton = resolveComponent('UButton')
-  const UDropdownMenu = resolveComponent('UDropdownMenu')
-  const UAvatar = resolveComponent('UAvatar')
 
+import type { TableColumn } from '@nuxt/ui';
+
+export interface ColumnPresetOptions {
+  /** Column header text */
+  header?: string;
+  /** Enable sorting (default: true) */
+  sortable?: boolean;
+  /** Enable hiding (default: true) */
+  hideable?: boolean;
+  /** Additional TanStack column options */
+  columnOptions?: Partial<TableColumn<any>>;
+}
+
+export interface DateColumnOptions extends ColumnPresetOptions {
+  /** Date format: 'date', 'time', 'datetime', 'relative' */
+  format?: 'date' | 'time' | 'datetime' | 'relative';
+}
+
+export interface CurrencyColumnOptions extends ColumnPresetOptions {
+  /** Currency code (default: 'USD') */
+  currency?: string;
+  /** Locale (default: 'en-US') */
+  locale?: string;
+}
+
+export interface NumberColumnOptions extends ColumnPresetOptions {
+  /** Decimal places */
+  decimals?: number;
+  /** Locale (default: 'en-US') */
+  locale?: string;
+}
+
+export interface BadgeColumnOptions extends ColumnPresetOptions {
+  /** Custom color mapping */
+  colorMap?: Record<string, 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'secondary'>;
+}
+
+export interface AvatarColumnOptions extends ColumnPresetOptions {
+  /** Avatar size: 'xs', 'sm', 'md', 'lg', 'xl' */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Show name text alongside avatar */
+  showName?: boolean;
+}
+
+export interface ActionsColumnOptions {
+  /** Show view button */
+  showView?: boolean;
+  /** Show edit button */
+  showEdit?: boolean;
+  /** Show delete button */
+  showDelete?: boolean;
+  /** Maximum visible actions before overflow */
+  maxVisible?: number;
+}
+
+export interface EditableColumnOptions extends ColumnPresetOptions {
+  /** Input type for editing */
+  inputType?: 'text' | 'number' | 'email' | 'textarea' | 'select' | 'boolean';
+  /** Options for select input */
+  selectOptions?: Array<string | { label: string; value: unknown }>;
+  /** Custom formatter for display value */
+  formatter?: (value: unknown) => string;
+  /** Validation rules */
+  validation?: {
+    required?: boolean;
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+  };
+}
+
+export function useXATableColumns() {
   /**
-   * Create a text column with optional formatting
+   * Create a basic text column
    */
-  function textColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      truncate?: boolean
-      maxWidth?: string
-      class?: string
-    }
-  ): TableColumn<T> {
+  function text(key: string, header?: string, options: ColumnPresetOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const value = row.getValue(accessorKey)
-        const classes = [options?.class]
-        if (options?.truncate) {
-          classes.push('truncate')
-        }
-        return h('span', {
-          class: classes.filter(Boolean).join(' '),
-          style: options?.maxWidth ? { maxWidth: options.maxWidth } : undefined,
-          title: options?.truncate ? String(value) : undefined
-        }, String(value ?? ''))
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a date column with formatting
+   * Create an avatar column with optional name
    */
-  function dateColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      format?: Intl.DateTimeFormatOptions
-      locale?: string
-      relative?: boolean
-    }
-  ): TableColumn<T> {
-    const defaultFormat: Intl.DateTimeFormatOptions = {
-      day: 'numeric',
-      month: 'short',
-      year: 'numeric'
-    }
-
+  function avatar(key: string, header?: string, options: AvatarColumnOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const value = row.getValue(accessorKey)
-        if (!value) return '-'
-
-        const date = new Date(value as string | number | Date)
-        if (isNaN(date.getTime())) return String(value)
-
-        if (options?.relative) {
-          return formatRelativeTime(date)
-        }
-
-        return date.toLocaleDateString(
-          options?.locale ?? 'en-US',
-          options?.format ?? defaultFormat
-        )
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'avatar',
+        size: options.size || 'xs',
+        showName: options.showName !== false,
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a datetime column with time
+   * Create a badge/status column
    */
-  function dateTimeColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      format?: Intl.DateTimeFormatOptions
-      locale?: string
-    }
-  ): TableColumn<T> {
-    const defaultFormat: Intl.DateTimeFormatOptions = {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    }
-
+  function badge(key: string, header?: string, options: BadgeColumnOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const value = row.getValue(accessorKey)
-        if (!value) return '-'
-
-        const date = new Date(value as string | number | Date)
-        if (isNaN(date.getTime())) return String(value)
-
-        return date.toLocaleString(
-          options?.locale ?? 'en-US',
-          options?.format ?? defaultFormat
-        )
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'badge',
+        colorMap: options.colorMap,
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a currency/money column
+   * Create a date/time column
    */
-  function currencyColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      currency?: string
-      locale?: string
-      minimumFractionDigits?: number
-      maximumFractionDigits?: number
-    }
-  ): TableColumn<T> {
+  function date(key: string, header?: string, options: DateColumnOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header: () => h('div', { class: 'text-right' }, header),
-      cell: ({ row }) => {
-        const value = row.getValue(accessorKey)
-        if (value === null || value === undefined) return h('div', { class: 'text-right' }, '-')
-
-        const amount = Number(value)
-        if (isNaN(amount)) return h('div', { class: 'text-right' }, String(value))
-
-        const formatted = new Intl.NumberFormat(options?.locale ?? 'en-US', {
-          style: 'currency',
-          currency: options?.currency ?? 'USD',
-          minimumFractionDigits: options?.minimumFractionDigits ?? 2,
-          maximumFractionDigits: options?.maximumFractionDigits ?? 2
-        }).format(amount)
-
-        return h('div', { class: 'text-right font-medium' }, formatted)
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'date',
+        format: options.format || 'date',
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a number column with formatting
+   * Create a currency column
    */
-  function numberColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      locale?: string
-      minimumFractionDigits?: number
-      maximumFractionDigits?: number
-      align?: 'left' | 'center' | 'right'
-    }
-  ): TableColumn<T> {
-    const align = options?.align ?? 'right'
-    const alignClass = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right'
-    }[align]
-
+  function currency(key: string, header?: string, options: CurrencyColumnOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header: () => h('div', { class: alignClass }, header),
-      cell: ({ row }) => {
-        const value = row.getValue(accessorKey)
-        if (value === null || value === undefined) return h('div', { class: alignClass }, '-')
-
-        const num = Number(value)
-        if (isNaN(num)) return h('div', { class: alignClass }, String(value))
-
-        const formatted = new Intl.NumberFormat(options?.locale ?? 'en-US', {
-          minimumFractionDigits: options?.minimumFractionDigits,
-          maximumFractionDigits: options?.maximumFractionDigits
-        }).format(num)
-
-        return h('div', { class: alignClass }, formatted)
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'currency',
+        currency: options.currency || 'USD',
+        locale: options.locale || 'en-US',
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a badge/status column
+   * Create a number column with formatting
    */
-  function badgeColumn<K extends keyof T & string>(
-    accessorKey: K,
-    header: string,
-    colorMap: Record<string, 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'>,
-    options?: {
-      variant?: 'solid' | 'outline' | 'soft' | 'subtle'
-      capitalize?: boolean
-      labelMap?: Record<string, string>
-    }
-  ): TableColumn<T> {
+  function number(key: string, header?: string, options: NumberColumnOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const value = String(row.getValue(accessorKey) ?? '')
-        const color = colorMap[value] ?? 'neutral'
-        const label = options?.labelMap?.[value] ?? value
-
-        return h(UBadge, {
-          color,
-          variant: options?.variant ?? 'subtle',
-          class: options?.capitalize !== false ? 'capitalize' : ''
-        }, () => label)
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'number',
+        decimals: options.decimals,
+        locale: options.locale || 'en-US',
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a boolean column with badge display
+   * Create a boolean/checkbox column
    */
-  function booleanColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      trueLabel?: string
-      falseLabel?: string
-      trueColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
-      falseColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
-    }
-  ): TableColumn<T> {
+  function boolean(key: string, header?: string, options: ColumnPresetOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const value = Boolean(row.getValue(accessorKey))
-        return h(UBadge, {
-          color: value ? (options?.trueColor ?? 'success') : (options?.falseColor ?? 'neutral'),
-          variant: 'subtle'
-        }, () => value ? (options?.trueLabel ?? 'Yes') : (options?.falseLabel ?? 'No'))
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'boolean',
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create an avatar column
+   * Create an email column with link
    */
-  function avatarColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    options?: {
-      size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-      nameKey?: keyof T & string
-      fallbackIcon?: string
-    }
-  ): TableColumn<T> {
+  function email(key: string, header?: string, options: ColumnPresetOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const src = row.getValue(accessorKey) as string | undefined
-        const name = options?.nameKey ? (row.original as T)[options.nameKey] as string : undefined
-
-        return h(UAvatar, {
-          src,
-          alt: name,
-          size: options?.size ?? 'sm',
-          icon: options?.fallbackIcon ?? 'i-lucide-user'
-        })
-      }
-    }
+      accessorKey: key,
+      header: header || 'Email',
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'email',
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a user column with avatar and name/email
+   * Create a link/URL column
    */
-  function userColumn(
-    config: {
-      avatarKey?: keyof T & string
-      nameKey: keyof T & string
-      emailKey?: keyof T & string
-    },
-    header: string
-  ): TableColumn<T> {
+  function link(key: string, header?: string, options: ColumnPresetOptions = {}): TableColumn<any> {
     return {
-      id: 'user',
-      header,
-      cell: ({ row }) => {
-        const original = row.original as T
-        const avatar = config.avatarKey ? original[config.avatarKey] as string : undefined
-        const name = original[config.nameKey] as string
-        const email = config.emailKey ? original[config.emailKey] as string : undefined
-
-        return h('div', { class: 'flex items-center gap-3' }, [
-          h(UAvatar, {
-            src: avatar,
-            alt: name,
-            size: 'sm',
-            icon: 'i-lucide-user'
-          }),
-          h('div', { class: 'flex flex-col' }, [
-            h('span', { class: 'font-medium text-gray-900 dark:text-white' }, name),
-            email ? h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, email) : null
-          ].filter(Boolean))
-        ])
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'link',
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create an actions column with dropdown menu
+   * Create an actions column
    */
-  function actionsColumn(
-    getActions: (row: T) => Array<{
-      label: string
-      icon?: string
-      color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
-      disabled?: boolean
-      onClick: () => void
-    } | 'separator'>,
-    options?: {
-      header?: string
-      icon?: string
-    }
-  ): TableColumn<T> {
+  function actions(options: ActionsColumnOptions = {}): TableColumn<any> {
     return {
-      id: 'actions',
-      header: () => h('div', { class: 'text-right' }, options?.header ?? ''),
-      cell: ({ row }) => {
-        const actions = getActions(row.original as T)
-        const items = actions.map(action => {
-          if (action === 'separator') {
-            return { type: 'separator' as const }
-          }
-          return {
-            label: action.label,
-            icon: action.icon,
-            color: action.color,
-            disabled: action.disabled,
-            onSelect: action.onClick
-          }
-        })
-
-        return h('div', { class: 'text-right' }, [
-          h(UDropdownMenu, {
-            items: [items]
-          }, {
-            default: () => h(UButton, {
-              icon: options?.icon ?? 'i-lucide-ellipsis-vertical',
-              color: 'neutral',
-              variant: 'ghost',
-              size: 'xs'
-            })
-          })
-        ])
-      },
+      accessorKey: 'actions',
+      header: '',
       enableSorting: false,
       enableHiding: false,
-      size: 60
-    }
+      meta: {
+        preset: 'actions',
+        showView: options.showView ?? true,
+        showEdit: options.showEdit ?? true,
+        showDelete: options.showDelete ?? true,
+        maxVisible: options.maxVisible ?? 2,
+      },
+    };
   }
 
   /**
-   * Create a link column
+   * Create an editable column (supports inline editing)
    */
-  function linkColumn(
-    accessorKey: keyof T & string,
-    header: string,
-    getHref: (row: T) => string,
-    options?: {
-      external?: boolean
-      class?: string
-    }
-  ): TableColumn<T> {
+  function editable(key: string, header?: string, options: EditableColumnOptions = {}): TableColumn<any> {
     return {
-      accessorKey,
-      header,
-      cell: ({ row }) => {
-        const value = row.getValue(accessorKey)
-        const href = getHref(row.original as T)
-
-        return h('a', {
-          href,
-          target: options?.external ? '_blank' : undefined,
-          rel: options?.external ? 'noopener noreferrer' : undefined,
-          class: options?.class ?? 'text-primary-500 hover:text-primary-600 hover:underline'
-        }, String(value ?? ''))
-      }
-    }
+      accessorKey: key,
+      header: header || formatHeader(key),
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      meta: {
+        preset: 'editable',
+        inputType: options.inputType || 'text',
+        selectOptions: options.selectOptions,
+        formatter: options.formatter,
+        validation: options.validation,
+      },
+      ...options.columnOptions,
+    };
   }
 
   /**
-   * Create a sortable column header
+   * Create a custom column with a render function
    */
-  function sortableHeader(
-    accessorKey: keyof T & string,
-    header: string
+  function custom<T = any>(
+    key: keyof T & string,
+    header: string,
+    options: ColumnPresetOptions = {}
   ): TableColumn<T> {
     return {
-      accessorKey,
-      header: ({ column }) => {
-        const isSorted = column.getIsSorted()
-        return h(UButton, {
-          color: 'neutral',
-          variant: 'ghost',
-          label: header,
-          icon: isSorted
-            ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow')
-            : 'i-lucide-arrow-up-down',
-          class: '-mx-2.5',
-          onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
-        })
-      }
-    }
+      accessorKey: key as any,
+      header,
+      enableSorting: options.sortable !== false,
+      enableHiding: options.hideable !== false,
+      ...options.columnOptions,
+    };
   }
 
-  return {
-    textColumn,
-    dateColumn,
-    dateTimeColumn,
-    currencyColumn,
-    numberColumn,
-    badgeColumn,
-    booleanColumn,
-    avatarColumn,
-    userColumn,
-    actionsColumn,
-    linkColumn,
-    sortableHeader
+  /**
+   * Helper to format accessor key into readable header
+   */
+  function formatHeader(key: string): string {
+    return key
+      .replace(/([A-Z])/g, ' $1') // Add space before capitals
+      .replace(/[_-]/g, ' ') // Replace underscores and dashes
+      .replace(/^\s/, '') // Remove leading space
+      .split(' ')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
   }
-}
-
-// Helper function for relative time
-function formatRelativeTime(date: Date): string {
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const diffSecs = Math.floor(diffMs / 1000)
-  const diffMins = Math.floor(diffSecs / 60)
-  const diffHours = Math.floor(diffMins / 60)
-  const diffDays = Math.floor(diffHours / 24)
 
-  if (diffSecs < 60) return 'just now'
-  if (diffMins < 60) return `${diffMins}m ago`
-  if (diffHours < 24) return `${diffHours}h ago`
-  if (diffDays < 7) return `${diffDays}d ago`
+  // Presets object for easy access
+  const presets = {
+    text,
+    avatar,
+    badge,
+    date,
+    currency,
+    number,
+    boolean,
+    email,
+    link,
+    editable,
+    actions,
+    custom,
+  };
 
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  return {
+    // Individual preset functions
+    text,
+    avatar,
+    badge,
+    date,
+    currency,
+    number,
+    boolean,
+    email,
+    link,
+    editable,
+    actions,
+    custom,
+
+    // Presets object
+    presets,
+
+    // Utility
+    formatHeader,
+  };
 }
-
-export type { TableColumn }