@veristone/nuxt-v-app 0.2.2 → 0.2.4

package/app/components/V/A/Table/CellRenderer.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { useTimeAgo } from '@vueuse/core'
+
+/**
+ * VATableCellRenderer - Renders cell content based on column preset
+ *
+ * Automatically formats values based on column meta.preset:
+ * - text: Plain text (default)
+ * - email: Clickable email link
+ * - badge: Status badge with color mapping
+ * - date: Formatted date/time
+ * - currency: Formatted currency
+ * - number: Formatted number
+ * - boolean: Checkbox/icon
+ * - avatar: Avatar with optional name
+ * - link: Clickable URL
+ */
+
+defineOptions({
+  name: 'VATableCellRenderer'
+})
+
+const props = defineProps({
+  value: {
+    type: [String, Number, Boolean, Date, Object, Array],
+    default: null
+  },
+  column: {
+    type: Object,
+    required: true
+  },
+  row: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Get preset from column meta
+const preset = computed(() => props.column?.meta?.preset || 'text')
+
+// Default badge color mappings
+const defaultColorMap = {
+  active: 'success',
+  inactive: 'neutral',
+  pending: 'warning',
+  approved: 'success',
+  rejected: 'error',
+  completed: 'success',
+  cancelled: 'error',
+  draft: 'neutral',
+  published: 'success',
+  archived: 'neutral',
+  enabled: 'success',
+  disabled: 'neutral',
+  true: 'success',
+  false: 'neutral',
+  yes: 'success',
+  no: 'neutral'
+}
+
+// Format date based on format option
+function formatDate(value, format) {
+  if (!value) return '—'
+  const date = new Date(value)
+  if (isNaN(date.getTime())) return value
+
+  switch (format) {
+    case 'relative':
+      return useTimeAgo(date).value
+    case 'time':
+      return date.toLocaleTimeString()
+    case 'datetime':
+      return date.toLocaleString()
+    case 'date':
+    default:
+      return date.toLocaleDateString()
+  }
+}
+
+// Format currency
+function formatCurrency(value, currency = 'USD', locale = 'en-US') {
+  if (value == null) return '—'
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency
+  }).format(value)
+}
+
+// Format number
+function formatNumber(value, decimals, locale = 'en-US') {
+  if (value == null) return '—'
+  const opts = decimals != null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {}
+  return new Intl.NumberFormat(locale, opts).format(value)
+}
+
+// Get badge color from value
+function getBadgeColor(value) {
+  const colorMap = props.column?.meta?.colorMap || {}
+  const key = String(value).toLowerCase()
+  return colorMap[key] || colorMap[value] || defaultColorMap[key] || 'neutral'
+}
+
+// Formatted display value
+const displayValue = computed(() => {
+  const val = props.value
+  const meta = props.column?.meta || {}
+
+  switch (preset.value) {
+    case 'email':
+      return val || '—'
+    case 'date':
+      return formatDate(val, meta.format)
+    case 'currency':
+      return formatCurrency(val, meta.currency, meta.locale)
+    case 'number':
+      return formatNumber(val, meta.decimals, meta.locale)
+    case 'boolean':
+      return '' // Icon only
+    case 'badge':
+      return val || '—'
+    case 'link':
+      return val || '—'
+    case 'avatar':
+      return meta.showName !== false ? (props.row?.name || props.row?.title || val) : ''
+    default:
+      return val ?? '—'
+  }
+})
+
+// Avatar URL (for avatar preset)
+const avatarUrl = computed(() => {
+  if (preset.value !== 'avatar') return null
+  const val = props.value
+  // If value is a string URL, use it directly
+  if (typeof val === 'string' && (val.startsWith('http') || val.startsWith('/'))) {
+    return val
+  }
+  // If value is an object with avatar/image/url property
+  if (val && typeof val === 'object') {
+    return val.avatar || val.image || val.url || val.src
+  }
+  return null
+})
+</script>
+
+<template>
+  <!-- Email -->
+  <a
+    v-if="preset === 'email' && value"
+    :href="`mailto:${value}`"
+    class="text-primary-600 dark:text-primary-400 hover:underline"
+  >
+    {{ displayValue }}
+  </a>
+
+  <!-- Link -->
+  <a
+    v-else-if="preset === 'link' && value"
+    :href="value"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="text-primary-600 dark:text-primary-400 hover:underline"
+  >
+    {{ displayValue }}
+  </a>
+
+  <!-- Badge -->
+  <UBadge
+    v-else-if="preset === 'badge'"
+    :color="getBadgeColor(value)"
+    variant="subtle"
+    class="capitalize"
+  >
+    {{ displayValue }}
+  </UBadge>
+
+  <!-- Boolean -->
+  <UIcon
+    v-else-if="preset === 'boolean'"
+    :name="value ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
+    :class="value ? 'text-success-500 w-5 h-5' : 'text-neutral-400 w-5 h-5'"
+  />
+
+  <!-- Avatar -->
+  <div v-else-if="preset === 'avatar'" class="flex items-center gap-2">
+    <UAvatar
+      :src="avatarUrl"
+      :alt="displayValue"
+      :size="column?.meta?.size || 'xs'"
+    />
+    <span v-if="column?.meta?.showName !== false">{{ displayValue }}</span>
+  </div>
+
+  <!-- Default: text, date, currency, number -->
+  <span v-else :class="preset === 'number' || preset === 'currency' ? 'tabular-nums' : ''">
+    {{ displayValue }}
+  </span>
+</template>

package/app/components/V/A/Table/ColumnToggle.vue

@@ -0,0 +1,131 @@
+<template>
+  <UPopover>
+    <UButton
+      icon="i-lucide-columns-3"
+      color="neutral"
+      variant="outline"
+      size="sm"
+    />
+
+    <template #content>
+      <div class="p-3 w-56">
+        <header class="flex items-center justify-between mb-3 pb-2 border-b border-neutral-200 dark:border-neutral-700">
+          <span class="text-sm font-medium">Columns</span>
+          <div class="flex gap-1">
+            <UButton
+              label="All"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              @click="showAll"
+            />
+            <UButton
+              label="Reset"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              @click="reset"
+            />
+          </div>
+        </header>
+
+        <ul class="space-y-1">
+          <li v-for="col in columns" :key="getColumnId(col)">
+            <label class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer">
+              <UCheckbox
+                :model-value="isVisible(col)"
+                @update:model-value="toggleColumn(col, $event)"
+              />
+              <span class="text-sm">{{ getColumnLabel(col) }}</span>
+            </label>
+          </li>
+        </ul>
+
+        <footer v-if="hiddenCount > 0" class="mt-3 pt-2 border-t border-neutral-200 dark:border-neutral-700">
+          <p class="text-xs text-neutral-500">
+            {{ hiddenCount }} column{{ hiddenCount === 1 ? '' : 's' }} hidden
+          </p>
+        </footer>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableColumnToggle'
+})
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// Get column ID
+function getColumnId(col) {
+  return col.id || col.accessorKey || col.key
+}
+
+// Get column label
+function getColumnLabel(col) {
+  return col.header || col.label || getColumnId(col)
+}
+
+// Check if column is visible
+function isVisible(col) {
+  const id = getColumnId(col)
+  // If no model value set, all columns are visible by default
+  if (!props.modelValue?.length) return true
+  return props.modelValue.includes(id)
+}
+
+// Toggle column visibility
+function toggleColumn(col, visible) {
+  const id = getColumnId(col)
+  let newValue
+
+  if (!props.modelValue?.length) {
+    // First toggle - start with all columns except this one
+    if (!visible) {
+      newValue = props.columns
+        .map(c => getColumnId(c))
+        .filter(cid => cid !== id)
+    } else {
+      return // Already all visible
+    }
+  } else {
+    if (visible) {
+      newValue = [...props.modelValue, id]
+    } else {
+      newValue = props.modelValue.filter(cid => cid !== id)
+    }
+  }
+
+  emit('update:modelValue', newValue)
+}
+
+// Show all columns
+function showAll() {
+  const allIds = props.columns.map(c => getColumnId(c))
+  emit('update:modelValue', allIds)
+}
+
+// Reset to default (all visible)
+function reset() {
+  emit('update:modelValue', [])
+}
+
+// Count hidden columns
+const hiddenCount = computed(() => {
+  if (!props.modelValue?.length) return 0
+  return props.columns.length - props.modelValue.length
+})
+</script>

package/app/components/V/A/Table/EditableCell.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    class="group relative"
+    :class="{ 'cursor-pointer': editable && !isEditing }"
+    @dblclick="startEditing"
+  >
+    <!-- Display Mode -->
+    <template v-if="!isEditing">
+      <div class="flex items-center gap-1">
+        <slot>
+          <span :class="displayClass">{{ displayValue }}</span>
+        </slot>
+        <UIcon
+          v-if="editable"
+          name="i-lucide-pencil"
+          class="w-3 h-3 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity"
+        />
+      </div>
+    </template>
+
+    <!-- Edit Mode -->
+    <template v-else>
+      <!-- Text Input -->
+      <UInput
+        v-if="type === 'text' || type === 'email' || type === 'number'"
+        ref="inputRef"
+        v-model="editValue"
+        :type="type"
+        size="xs"
+        class="w-full"
+        @keydown.enter="saveEdit"
+        @keydown.escape="cancelEdit"
+        @blur="onBlur"
+      />
+
+      <!-- Textarea -->
+      <UTextarea
+        v-else-if="type === 'textarea'"
+        ref="inputRef"
+        v-model="editValue"
+        rows="2"
+        size="xs"
+        class="w-full"
+        @keydown.escape="cancelEdit"
+        @blur="onBlur"
+      />
+
+      <!-- Select -->
+      <USelect
+        v-else-if="type === 'select'"
+        ref="inputRef"
+        v-model="editValue"
+        :items="options"
+        size="xs"
+        class="w-full"
+        @update:model-value="saveEdit"
+        @keydown.escape="cancelEdit"
+      />
+
+      <!-- Checkbox -->
+      <UCheckbox
+        v-else-if="type === 'boolean'"
+        v-model="editValue"
+        @update:model-value="saveEdit"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableEditableCell'
+})
+
+const props = defineProps({
+  value: {
+    type: [String, Number, Boolean, Object, Array],
+    default: null
+  },
+  editable: {
+    type: Boolean,
+    default: true
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: value => ['text', 'email', 'number', 'textarea', 'select', 'boolean'].includes(value)
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  displayClass: {
+    type: String,
+    default: ''
+  },
+  formatter: {
+    type: Function,
+    default: null
+  }
+})
+
+const emit = defineEmits(['save', 'cancel'])
+
+const inputRef = ref(null)
+const isEditing = ref(false)
+const editValue = ref(props.value)
+
+// Display value with optional formatter
+const displayValue = computed(() => {
+  if (props.formatter) {
+    return props.formatter(props.value)
+  }
+  if (props.value === null || props.value === undefined) {
+    return '-'
+  }
+  if (props.type === 'boolean') {
+    return props.value ? 'Yes' : 'No'
+  }
+  return String(props.value)
+})
+
+// Start editing
+function startEditing() {
+  if (!props.editable) return
+  editValue.value = props.value
+  isEditing.value = true
+
+  nextTick(() => {
+    if (inputRef.value && inputRef.value.focus) {
+      inputRef.value.focus()
+    }
+  })
+}
+
+// Save edit
+function saveEdit() {
+  if (editValue.value !== props.value) {
+    emit('save', editValue.value, props.value)
+  }
+  isEditing.value = false
+}
+
+// Cancel edit
+function cancelEdit() {
+  editValue.value = props.value
+  isEditing.value = false
+  emit('cancel')
+}
+
+// Handle blur - save on blur unless escape was pressed
+function onBlur() {
+  setTimeout(() => {
+    if (isEditing.value) {
+      saveEdit()
+    }
+  }, 100)
+}
+
+// Watch for external value changes
+watch(
+  () => props.value,
+  (newValue) => {
+    if (!isEditing.value) {
+      editValue.value = newValue
+    }
+  }
+)
+
+// Expose methods for parent components
+defineExpose({
+  startEditing,
+  cancelEdit,
+  isEditing
+})
+</script>

package/app/components/V/A/Table/Export.vue

@@ -0,0 +1,154 @@
+<template>
+  <UDropdownMenu :items="exportMenuItems">
+    <UButton
+      :label="showLabel ? 'Export' : undefined"
+      icon="i-lucide-download"
+      color="neutral"
+      variant="outline"
+      size="sm"
+      :trailing-icon="showLabel ? 'i-lucide-chevron-down' : undefined"
+    />
+  </UDropdownMenu>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableExport'
+})
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  filename: {
+    type: String,
+    default: 'export'
+  },
+  showLabel: {
+    type: Boolean,
+    default: true
+  },
+  enableCsv: {
+    type: Boolean,
+    default: true
+  },
+  enableJson: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['export'])
+
+// Build menu items
+const exportMenuItems = computed(() => {
+  const items = []
+
+  if (props.enableCsv) {
+    items.push({
+      label: 'Export as CSV',
+      icon: 'i-lucide-file-spreadsheet',
+      onSelect: () => exportCsv()
+    })
+  }
+
+  if (props.enableJson) {
+    items.push({
+      label: 'Export as JSON',
+      icon: 'i-lucide-file-json',
+      onSelect: () => exportJson()
+    })
+  }
+
+  return items
+})
+
+// Format a cell value for export
+function formatValue(value, formatter) {
+  if (formatter) {
+    return formatter(value)
+  }
+
+  if (value === null || value === undefined) {
+    return ''
+  }
+
+  if (typeof value === 'object') {
+    return JSON.stringify(value)
+  }
+
+  return String(value)
+}
+
+// Get value from nested path (e.g., "user.name")
+function getNestedValue(obj, path) {
+  if (typeof obj !== 'object' || obj === null) return undefined
+
+  const keys = path.split('.')
+  let current = obj
+
+  for (const key of keys) {
+    if (typeof current !== 'object' || current === null) return undefined
+    current = current[key]
+  }
+
+  return current
+}
+
+// Export to CSV
+function exportCsv() {
+  // Build header row
+  const headers = props.columns.map(col => `"${col.label.replace(/"/g, '""')}"`)
+  const rows = [headers.join(',')]
+
+  // Build data rows
+  for (const item of props.data) {
+    const row = props.columns.map(col => {
+      const value = getNestedValue(item, col.key)
+      const formatted = formatValue(value, col.formatter)
+      // Escape quotes and wrap in quotes
+      return `"${formatted.replace(/"/g, '""')}"`
+    })
+    rows.push(row.join(','))
+  }
+
+  const csvContent = rows.join('\n')
+  downloadFile(csvContent, `${props.filename}.csv`, 'text/csv')
+  emit('export', 'csv', csvContent)
+}
+
+// Export to JSON
+function exportJson() {
+  // Build clean export data
+  const exportData = props.data.map(item => {
+    const obj = {}
+    for (const col of props.columns) {
+      const value = getNestedValue(item, col.key)
+      obj[col.key] = col.formatter ? col.formatter(value) : value
+    }
+    return obj
+  })
+
+  const jsonContent = JSON.stringify(exportData, null, 2)
+  downloadFile(jsonContent, `${props.filename}.json`, 'application/json')
+  emit('export', 'json', jsonContent)
+}
+
+// Download file utility
+function downloadFile(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+</script>