@veristone/nuxt-v-app 0.2.2 → 0.2.4

package/app/components/V/A/Crud/Delete.vue

@@ -89,6 +89,7 @@ const handleDelete = async () => {
 <template>
   <UModal v-model:open="isOpen">
     <UButton
+      v-if="open === undefined"
       :icon="triggerIcon"
       :color="triggerColor as any"
       :variant="triggerVariant as any"

package/app/components/V/A/CrudTable/index.vue

@@ -0,0 +1,486 @@
+<template>
+  <section class="space-y-4">
+    <!-- Toolbar -->
+    <VATableToolbar
+      :search="searchValue"
+      @update:search="val => updateSearch(val)"
+      v-model:visible-columns="visibleColumns"
+      :searchable="config.toolbar?.search ?? true"
+      :search-placeholder="config.toolbar?.searchPlaceholder ?? 'Search...'"
+      :show-column-toggle="config.toolbar?.columns ?? true"
+      :columns="columns"
+      :exportable="config.toolbar?.export ?? true"
+      :data="tableData"
+      :export-filename="config.toolbar?.exportFilename ?? 'export'"
+    >
+      <template #left>
+        <slot name="toolbar-left" />
+      </template>
+      <template #right>
+        <slot name="toolbar-right" />
+      </template>
+      <template #actions>
+        <UButton
+          v-if="config.actions?.create ?? true"
+          icon="i-lucide-plus"
+          :label="config.actions?.createLabel ?? 'Create'"
+          @click="$emit('create')"
+        />
+        <slot name="toolbar-actions" />
+      </template>
+    </VATableToolbar>
+
+    <!-- Table -->
+    <div class="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-800">
+      <!-- Loading -->
+      <div v-if="isLoading" class="p-8">
+        <VAStateLoading :rows="5" />
+      </div>
+
+      <!-- Empty -->
+      <VAStateEmpty
+        v-else-if="!tableData.length"
+        :title="emptyState.title"
+        :description="emptyState.description"
+        :icon="emptyState.icon"
+      >
+        <template v-if="$slots.empty" #action>
+          <slot name="empty" />
+        </template>
+      </VAStateEmpty>
+
+      <!-- Table -->
+      <UTable
+        v-else
+        :data="tableData"
+        :columns="visibleTableColumns"
+        class="w-full"
+        @select="handleRowClick"
+      >
+        <!-- Selection column -->
+        <template v-if="config.selection?.enabled" #select-header>
+          <UCheckbox
+            :model-value="allSelected"
+            :indeterminate="someSelected"
+            @update:model-value="toggleAll"
+          />
+        </template>
+        <template v-if="config.selection?.enabled" #select="{ row }">
+          <UCheckbox
+            :model-value="isSelected(row)"
+            @update:model-value="toggleSelect(row)"
+          />
+        </template>
+
+        <!-- Actions column -->
+        <template v-if="showActions" #actions-cell="{ row }">
+          <slot name="row-actions" :row="row?.original">
+            <div class="flex items-center justify-end gap-1">
+              <UButton
+                v-if="config.actions?.view"
+                icon="i-lucide-eye"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                @click.stop="handleView(row?.original)"
+              />
+              <UButton
+                v-if="config.actions?.edit"
+                icon="i-lucide-pencil"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                @click.stop="handleEdit(row?.original)"
+              />
+              <UButton
+                v-if="config.actions?.delete"
+                icon="i-lucide-trash-2"
+                color="error"
+                variant="ghost"
+                size="xs"
+                @click.stop="handleDelete(row?.original)"
+              />
+              <slot name="extra-actions" :row="row?.original" />
+            </div>
+          </slot>
+        </template>
+
+        <!-- Forward custom slots -->
+        <template v-for="(_, slotName) in customSlots" :key="slotName" #[slotName]="slotProps">
+          <slot :name="slotName" v-bind="slotProps" />
+        </template>
+      </UTable>
+    </div>
+
+    <!-- Pagination -->
+    <footer v-if="config.pagination?.enabled && totalPages > 1" class="flex items-center justify-between">
+      <p class="text-sm text-neutral-500">
+        Showing {{ startIndex + 1 }} to {{ endIndex }} of {{ totalCount }} results
+      </p>
+      <UPagination
+        v-model="currentPage"
+        :total="totalCount"
+        :page-count="config.pagination?.pageSize ?? 20"
+      />
+    </footer>
+
+    <!-- Delete confirmation modal -->
+    <VAModalConfirm
+      v-model:open="showDeleteModal"
+      title="Delete Item"
+      :message="deleteMessage"
+      confirm-text="Delete"
+      color="error"
+      :loading="isDeleting"
+      @confirm="confirmDeleteItem"
+    />
+  </section>
+</template>
+
+<script setup>
+import { h, resolveComponent } from 'vue'
+
+defineOptions({
+  name: 'VACrudTable'
+})
+
+const props = defineProps({
+  // Core
+  endpoint: {
+    type: String,
+    default: null
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+
+  // Optional: Inject existing crud instance
+  crud: {
+    type: Object,
+    default: null
+  },
+
+  // Configuration (Grouped)
+  config: {
+    type: Object,
+    default: () => ({
+      toolbar: {
+        search: true,
+        searchPlaceholder: 'Search...',
+        columns: true,
+        export: true,
+        exportFilename: 'export'
+      },
+      actions: {
+        create: true,
+        createLabel: 'Create',
+        view: true,
+        edit: true,
+        delete: true,
+        viewRoute: null,
+        editRoute: null
+      },
+      selection: {
+        enabled: false
+      },
+      pagination: {
+        enabled: true,
+        pageSize: 20
+      }
+    })
+  },
+
+  // Empty State
+  emptyState: {
+    type: Object,
+    default: () => ({
+      title: 'No data',
+      description: '',
+      icon: 'i-lucide-inbox'
+    })
+  },
+
+  // Initial filters for internal useXCrud
+  initialFilters: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['create', 'view', 'edit', 'delete', 'select', 'row-click'])
+
+const slots = useSlots()
+const router = useRouter()
+
+// Merge user config with defaults
+const defaultConfig = {
+  toolbar: {
+    search: true,
+    searchPlaceholder: 'Search...',
+    columns: true,
+    export: true,
+    exportFilename: 'export'
+  },
+  actions: {
+    create: true,
+    createLabel: 'Create',
+    view: true,
+    edit: true,
+    delete: true,
+    viewRoute: null,
+    editRoute: null
+  },
+  selection: {
+    enabled: false
+  },
+  pagination: {
+    enabled: true,
+    pageSize: 20
+  }
+}
+
+const config = computed(() => ({
+  toolbar: { ...defaultConfig.toolbar, ...props.config?.toolbar },
+  actions: { ...defaultConfig.actions, ...props.config?.actions },
+  selection: { ...defaultConfig.selection, ...props.config?.selection },
+  pagination: { ...defaultConfig.pagination, ...props.config?.pagination }
+}))
+
+// Initialize useXCrud
+let crudInstance
+try {
+  if (props.crud) {
+    crudInstance = props.crud
+  } else if (props.endpoint) {
+    // Use explicit .all() factory method
+    crudInstance = useXCrud(props.endpoint, {
+      initialFilters: props.initialFilters
+    }).all()
+  }
+} catch (e) {
+  console.error('VACrudTable: Failed to initialize useXCrud', e)
+}
+
+// Fallback empty crud instance
+if (!crudInstance) {
+  crudInstance = {
+    data: ref([]),
+    loading: ref(false),
+    error: ref(null),
+    total: ref(0),
+    search: ref(''),
+    filters: ref({}),
+    deleting: ref(false),
+    refresh: async () => {},
+    remove: async () => false
+  }
+}
+
+// Expose crud for parent
+defineExpose({ crud: crudInstance })
+
+// Accessors
+const searchValue = computed(() => crudInstance?.search?.value ?? crudInstance?.search ?? '')
+const isLoading = computed(() => crudInstance?.loading?.value ?? crudInstance?.loading ?? false)
+const isDeleting = computed(() => crudInstance?.deleting?.value ?? crudInstance?.deleting ?? false)
+const totalCount = computed(() => crudInstance?.total?.value ?? crudInstance?.total ?? 0)
+
+function updateSearch(val) {
+  if (crudInstance?.search !== undefined) {
+    if (typeof crudInstance.search === 'object' && 'value' in crudInstance.search) {
+      crudInstance.search.value = val
+    } else {
+      crudInstance.search = val
+    }
+  }
+}
+
+// Get table data
+const tableData = computed(() => {
+  const d = crudInstance?.data?.value ?? crudInstance?.data
+  return Array.isArray(d) ? d : []
+})
+
+// Column visibility
+const visibleColumns = ref([])
+
+// Check actions
+const showActions = computed(() => {
+  return config.value.actions?.view || config.value.actions?.edit || config.value.actions?.delete
+})
+
+const CellRenderer = resolveComponent('VATableCellRenderer')
+
+const processedColumns = computed(() => {
+  const cols = props.columns.map(col => {
+    const colDef = {
+      ...col,
+      id: col.id || col.accessorKey || col.key,
+      accessorKey: col.accessorKey || col.key,
+      header: col.header || col.label
+    }
+
+    if (col.meta?.preset && col.meta.preset !== 'actions') {
+      colDef.cell = ({ row }) => {
+        const value = getCellValue(row?.original, col)
+        return h(CellRenderer, {
+          value,
+          column: col,
+          row: row?.original
+        })
+      }
+    }
+
+    return colDef
+  })
+
+  if (showActions.value) {
+    cols.push({
+      id: 'actions',
+      header: '',
+      enableSorting: false,
+      enableHiding: false,
+      meta: {
+        class: { td: 'w-24 text-right' }
+      }
+    })
+  }
+
+  return cols
+})
+
+const visibleTableColumns = computed(() => {
+  if (!visibleColumns.value.length) return processedColumns.value
+
+  return processedColumns.value.filter(col => {
+    if (col.id === 'actions') return true
+    if (col.enableHiding === false) return true
+    return visibleColumns.value.includes(col.id)
+  })
+})
+
+const columnsWithPresets = computed(() =>
+  props.columns.filter(col => col.meta?.preset)
+)
+
+function getCellValue(row, col) {
+  if (!row) return null
+  const key = col.accessorKey || col.key || col.id
+  if (!key) return null
+
+  if (key.includes('.')) {
+    return key.split('.').reduce((obj, k) => obj?.[k], row)
+  }
+
+  return row[key]
+}
+
+const customSlots = computed(() => {
+  const internal = [
+    'select-header', 'select', 'actions-cell', 'row-actions',
+    'extra-actions', 'toolbar-left', 'toolbar-right', 'toolbar-actions',
+    'empty'
+  ]
+
+  return Object.fromEntries(
+    Object.entries(slots).filter(([name]) =>
+      !internal.includes(name) &&
+      !name.startsWith('cell-') &&
+      !columnsWithPresets.value.some(col =>
+        name === `${col.id || col.accessorKey}-cell`
+      )
+    )
+  )
+})
+
+const selectedRows = ref([])
+
+const allSelected = computed(() =>
+  tableData.value.length > 0 && selectedRows.value.length === tableData.value.length
+)
+
+const someSelected = computed(() =>
+  selectedRows.value.length > 0 && selectedRows.value.length < tableData.value.length
+)
+
+function isSelected(row) {
+  return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey])
+}
+
+function toggleSelect(row) {
+  const index = selectedRows.value.findIndex(r => r[props.rowKey] === row[props.rowKey])
+  if (index >= 0) {
+    selectedRows.value.splice(index, 1)
+  } else {
+    selectedRows.value.push(row)
+  }
+  emit('select', selectedRows.value)
+}
+
+function toggleAll(value) {
+  selectedRows.value = value ? [...tableData.value] : []
+  emit('select', selectedRows.value)
+}
+
+const currentPage = ref(1)
+
+const totalPages = computed(() =>
+  Math.ceil(totalCount.value / (config.value.pagination?.pageSize ?? 20))
+)
+
+const startIndex = computed(() =>
+  (currentPage.value - 1) * (config.value.pagination?.pageSize ?? 20)
+)
+
+const endIndex = computed(() =>
+  Math.min(startIndex.value + (config.value.pagination?.pageSize ?? 20), totalCount.value)
+)
+
+function handleRowClick(row) {
+  emit('row-click', row)
+}
+
+function handleView(row) {
+  if (config.value.actions?.viewRoute) {
+    const route = config.value.actions.viewRoute.replace(':id', row[props.rowKey])
+    router.push(route)
+  } else {
+    emit('view', row)
+  }
+}
+
+function handleEdit(row) {
+  if (config.value.actions?.editRoute) {
+    const route = config.value.actions.editRoute.replace(':id', row[props.rowKey])
+    router.push(route)
+  } else {
+    emit('edit', row)
+  }
+}
+
+const showDeleteModal = ref(false)
+const itemToDelete = ref(null)
+const deleteMessage = ref('Are you sure you want to delete this item?')
+
+function handleDelete(row) {
+  itemToDelete.value = row
+  deleteMessage.value = `Are you sure you want to delete "${row.name || row.title || 'this item'}"?`
+  showDeleteModal.value = true
+}
+
+async function confirmDeleteItem() {
+  if (!itemToDelete.value || !crudInstance?.remove) return
+
+  const success = await crudInstance.remove(itemToDelete.value[props.rowKey])
+  if (success) {
+    showDeleteModal.value = false
+    itemToDelete.value = null
+    emit('delete', itemToDelete.value)
+  }
+}
+</script>

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="flex items-center justify-end gap-1">
+    <!-- Primary actions (always visible) -->
+    <template v-for="action in primaryActions" :key="action.name">
+      <UTooltip v-if="action.label" :text="action.label">
+        <UButton
+          :icon="action.icon"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :disabled="action.disabled"
+          @click="emit(action.name, row)"
+        />
+      </UTooltip>
+      <UButton
+        v-else
+        :icon="action.icon"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :disabled="action.disabled"
+        @click="emit(action.name, row)"
+      />
+    </template>
+
+    <!-- Overflow menu (for additional actions) -->
+    <UDropdownMenu v-if="overflowActions.length" :items="overflowMenuItems">
+      <UButton
+        icon="i-lucide-more-horizontal"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+      />
+    </UDropdownMenu>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableActionColumn'
+})
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  showView: {
+    type: Boolean,
+    default: false
+  },
+  showEdit: {
+    type: Boolean,
+    default: true
+  },
+  showDelete: {
+    type: Boolean,
+    default: true
+  },
+  maxVisible: {
+    type: Number,
+    default: 2
+  }
+})
+
+const emit = defineEmits(['view', 'edit', 'delete'])
+
+// Build default actions based on props
+const defaultActions = computed(() => {
+  const actions = []
+
+  if (props.showView) {
+    actions.push({
+      name: 'view',
+      label: 'View',
+      icon: 'i-lucide-eye'
+    })
+  }
+
+  if (props.showEdit) {
+    actions.push({
+      name: 'edit',
+      label: 'Edit',
+      icon: 'i-lucide-pencil'
+    })
+  }
+
+  if (props.showDelete) {
+    actions.push({
+      name: 'delete',
+      label: 'Delete',
+      icon: 'i-lucide-trash-2',
+      color: 'error'
+    })
+  }
+
+  return actions
+})
+
+// Combine default and custom actions
+const allActions = computed(() => {
+  return [...defaultActions.value, ...props.actions]
+})
+
+// Split into primary (visible) and overflow actions
+const primaryActions = computed(() => {
+  return allActions.value
+    .filter(a => !a.overflow)
+    .slice(0, props.maxVisible)
+})
+
+const overflowActions = computed(() => {
+  const explicitOverflow = allActions.value.filter(a => a.overflow)
+  const implicitOverflow = allActions.value
+    .filter(a => !a.overflow)
+    .slice(props.maxVisible)
+  return [...implicitOverflow, ...explicitOverflow]
+})
+
+// Build dropdown menu items for overflow
+const overflowMenuItems = computed(() => {
+  return overflowActions.value.map(action => ({
+    label: action.label || action.name,
+    icon: action.icon,
+    disabled: action.disabled,
+    onSelect: () => emit(action.name, props.row)
+  }))
+})
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex items-center justify-end gap-1">
+    <!-- View button -->
+    <UButton
+      v-if="showView"
+      icon="i-lucide-eye"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      @click="handleView"
+    />
+
+    <!-- Edit button -->
+    <UButton
+      v-if="showEdit"
+      icon="i-lucide-pencil"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      @click="$emit('edit', row)"
+    />
+
+    <!-- Delete button -->
+    <UButton
+      v-if="showDelete"
+      icon="i-lucide-trash-2"
+      color="error"
+      variant="ghost"
+      size="xs"
+      @click="$emit('delete', row)"
+    />
+
+    <!-- Extra actions slot -->
+    <slot :row="row" />
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableActions'
+})
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true
+  },
+  showView: {
+    type: Boolean,
+    default: true
+  },
+  showEdit: {
+    type: Boolean,
+    default: true
+  },
+  showDelete: {
+    type: Boolean,
+    default: true
+  },
+  viewRoute: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['view', 'edit', 'delete'])
+
+function handleView() {
+  if (props.viewRoute) {
+    // Replace :id or {id} with actual row id
+    const route = props.viewRoute
+      .replace(':id', props.row.id)
+      .replace('{id}', props.row.id)
+    navigateTo(route)
+  } else {
+    emit('view', props.row)
+  }
+}
+</script>