@veristone/nuxt-v-app 0.1.1 → 0.2.0

package/app/pages/playground/crud.vue

@@ -0,0 +1,936 @@
+<script setup lang="ts">
+definePageMeta({
+  title: "CRUD Components",
+});
+
+const toast = useToast();
+
+// ===== VACrudCreate Test State =====
+const createBasicResult = ref<any>(null);
+const createCustomResult = ref<any>(null);
+const createInitialResult = ref<any>(null);
+const createProgrammaticOpen = ref(false);
+const createProgrammaticResult = ref<any>(null);
+const createSizeResults = ref<Record<string, any>>({});
+const createErrorResult = ref<any>(null);
+
+// ===== VACrudUpdate Test State =====
+const updateBasicResult = ref<any>(null);
+const updateUsers = ref([
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    role: "admin",
+    status: "active",
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane@example.com",
+    role: "user",
+    status: "active",
+  },
+  {
+    id: 3,
+    name: "Bob Wilson",
+    email: "bob@example.com",
+    role: "user",
+    status: "inactive",
+  },
+]);
+const updateSelectedUserId = ref(1);
+const updateSelectionResult = ref<any>(null);
+const updateSizeResults = ref<Record<string, any>>({});
+const updateProgrammaticOpen = ref(false);
+const updateProgrammaticResult = ref<any>(null);
+const updateCustomResult = ref<any>(null);
+const updateErrorResult = ref<any>(null);
+
+// ===== VACrudDelete Test State =====
+const deleteBasicDeleted = ref(false);
+const deleteMockItems = ref([
+  { id: 1, name: "Project Alpha", description: "Main development project" },
+  { id: 2, name: "Marketing Campaign", description: "Q1 marketing initiative" },
+  { id: 3, name: "Server Migration", description: "AWS to Azure migration" },
+]);
+const deleteSelectedItemId = ref(1);
+const deleteSelectionDeleted = ref(false);
+const deleteCustomDeleted = ref(false);
+const deleteProgrammaticOpen = ref(false);
+const deleteProgrammaticDeleted = ref(false);
+const deleteStyleResults = ref<Record<string, boolean>>({});
+const deleteErrorResult = ref<any>(null);
+
+// ===== Event Handlers =====
+// Create handlers
+const handleCreateBasic = (data: any) => {
+  createBasicResult.value = data;
+  toast.add({
+    title: "Created!",
+    description: `ID: ${data.id}`,
+    color: "success",
+  });
+};
+const handleCreateCustom = (data: any) => {
+  createCustomResult.value = data;
+  toast.add({
+    title: "Product Created!",
+    description: data.name,
+    color: "success",
+  });
+};
+const handleCreateInitial = (data: any) => {
+  createInitialResult.value = data;
+  toast.add({
+    title: "Created with Initial Data!",
+    description: data.name,
+    color: "success",
+  });
+};
+const handleCreateSize = (size: string, data: any) => {
+  createSizeResults.value[size] = data;
+  toast.add({
+    title: `${size.toUpperCase()} Modal Created!`,
+    description: data.name,
+    color: "success",
+  });
+};
+const handleCreateProgrammatic = (data: any) => {
+  createProgrammaticResult.value = data;
+  createProgrammaticOpen.value = false;
+  toast.add({
+    title: "Programmatic Create!",
+    description: data.name,
+    color: "success",
+  });
+};
+const handleCreateError = (error: any) => {
+  createErrorResult.value = error;
+  toast.add({
+    title: "Create Error",
+    description: error.message,
+    color: "error",
+  });
+};
+
+// Update handlers
+const handleUpdateBasic = (data: any) => {
+  updateBasicResult.value = data;
+  toast.add({ title: "Updated!", description: data.name, color: "success" });
+};
+const handleUpdateSelection = (data: any) => {
+  updateSelectionResult.value = data;
+  toast.add({
+    title: "User Updated!",
+    description: data.name,
+    color: "success",
+  });
+};
+const handleUpdateSize = (size: string, data: any) => {
+  updateSizeResults.value[size] = data;
+  toast.add({
+    title: `${size.toUpperCase()} Update!`,
+    description: data.name,
+    color: "success",
+  });
+};
+const handleUpdateProgrammatic = (data: any) => {
+  updateProgrammaticResult.value = data;
+  updateProgrammaticOpen.value = false;
+  toast.add({
+    title: "Programmatic Update!",
+    description: data.name,
+    color: "success",
+  });
+};
+const handleUpdateCustom = (data: any) => {
+  updateCustomResult.value = data;
+  toast.add({
+    title: "Settings Updated!",
+    description: data.name,
+    color: "success",
+  });
+};
+const handleUpdateError = (error: any) => {
+  updateErrorResult.value = error;
+  toast.add({
+    title: "Update Error",
+    description: error.message,
+    color: "error",
+  });
+};
+
+// Delete handlers
+const handleDeleteBasic = (id: number) => {
+  deleteBasicDeleted.value = true;
+  toast.add({
+    title: "Deleted!",
+    description: `Item #${id}`,
+    color: "success",
+  });
+};
+const handleDeleteSelection = (id: number) => {
+  deleteSelectionDeleted.value = true;
+  deleteMockItems.value = deleteMockItems.value.filter(
+    (item) => item.id !== id,
+  );
+  toast.add({
+    title: "Item Deleted!",
+    description: `ID: ${id}`,
+    color: "success",
+  });
+  if (deleteMockItems.value.length === 0) {
+    setTimeout(() => {
+      deleteMockItems.value = [
+        { id: 4, name: "New Project A", description: "Fresh start" },
+        { id: 5, name: "New Project B", description: "Another project" },
+      ];
+      deleteSelectionDeleted.value = false;
+    }, 2000);
+  }
+};
+const handleDeleteCustom = (id: number) => {
+  deleteCustomDeleted.value = true;
+  toast.add({
+    title: "Permanently Deleted!",
+    description: `ID: ${id}`,
+    color: "success",
+  });
+};
+const handleDeleteProgrammatic = (id: number) => {
+  deleteProgrammaticDeleted.value = true;
+  deleteProgrammaticOpen.value = false;
+  toast.add({
+    title: "Programmatic Delete!",
+    description: `ID: ${id}`,
+    color: "success",
+  });
+};
+const handleDeleteStyle = (style: string, id: number) => {
+  deleteStyleResults.value[style] = true;
+  toast.add({
+    title: `${style} Style Deleted!`,
+    description: `ID: ${id}`,
+    color: "success",
+  });
+};
+const handleDeleteError = (error: any) => {
+  deleteErrorResult.value = error;
+  toast.add({
+    title: "Delete Error",
+    description: error.message,
+    color: "error",
+  });
+};
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer class="overflow-y-auto max-h-[calc(100vh-4rem)]">
+      <div class="py-8">
+        <h1 class="text-3xl font-bold mb-4">CRUD Components</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-8">
+          Modal-based CRUD operations with VACrudCreate, VACrudUpdate, and
+          VACrudDelete.
+        </p>
+
+        <!-- ========================================== -->
+        <!-- VACrudCreate Section -->
+        <!-- ========================================== -->
+        <h2 class="text-2xl font-semibold mb-4 mt-12 text-primary-500">
+          VACrudCreate
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Modal component for creating new records with customizable triggers
+          and form slots.
+        </p>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
+          <!-- Basic Create -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-plus-circle" class="text-primary-500" />
+                Basic Usage
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">
+              Standard create modal with default trigger.
+            </p>
+            <VACrudCreate
+              endpoint="/api/test-items"
+              friendly-name="Item"
+              @created="handleCreateBasic"
+            >
+              <template #default="{ submit, loading }">
+                <form
+                  @submit.prevent="submit({ name: 'New Test Item' })"
+                  class="space-y-4"
+                >
+                  <UFormField label="Item Name">
+                    <UInput value="New Test Item" disabled />
+                  </UFormField>
+                  <div class="flex justify-end">
+                    <VABtnSubmit :loading="loading" label="Create Item" />
+                  </div>
+                </form>
+              </template>
+            </VACrudCreate>
+            <UAlert
+              v-if="createBasicResult"
+              class="mt-4"
+              color="success"
+              icon="i-lucide-check-circle"
+              title="Created!"
+              :description="`ID: ${createBasicResult.id}`"
+            />
+          </UCard>
+
+          <!-- Custom Trigger -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-package" class="text-green-500" />
+                Custom Trigger
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">
+              Custom icon, color, and label.
+            </p>
+            <VACrudCreate
+              endpoint="/api/products"
+              friendly-name="Product"
+              trigger-label="Add Product"
+              trigger-icon="i-lucide-package"
+              trigger-color="success"
+              @created="handleCreateCustom"
+            >
+              <template #default="{ submit, loading }">
+                <form
+                  @submit.prevent="submit({ name: 'New Product' })"
+                  class="space-y-4"
+                >
+                  <UFormField label="Product">
+                    <UInput value="New Product" disabled />
+                  </UFormField>
+                  <div class="flex justify-end">
+                    <VABtnSubmit
+                      :loading="loading"
+                      label="Add Product"
+                      color="green"
+                    />
+                  </div>
+                </form>
+              </template>
+            </VACrudCreate>
+            <UAlert
+              v-if="createCustomResult"
+              class="mt-4"
+              color="success"
+              title="Product Created!"
+              :description="createCustomResult.name"
+            />
+          </UCard>
+
+          <!-- Initial Data -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-file-edit" class="text-blue-500" />
+                With Initial Data
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">Pre-populated form fields.</p>
+            <VACrudCreate
+              endpoint="/api/users"
+              friendly-name="User"
+              :initial-data="{ name: 'John Doe', email: 'john@example.com' }"
+              @created="handleCreateInitial"
+            >
+              <template #default="{ submit, loading }">
+                <form
+                  @submit.prevent="
+                    submit({ name: 'John Doe', email: 'john@example.com' })
+                  "
+                  class="space-y-4"
+                >
+                  <UFormField label="Name">
+                    <UInput value="John Doe" disabled />
+                  </UFormField>
+                  <UFormField label="Email">
+                    <UInput value="john@example.com" disabled />
+                  </UFormField>
+                  <div class="flex justify-end">
+                    <VABtnSubmit :loading="loading" label="Create User" />
+                  </div>
+                </form>
+              </template>
+            </VACrudCreate>
+            <UAlert
+              v-if="createInitialResult"
+              class="mt-4"
+              color="success"
+              title="User Created!"
+              :description="createInitialResult.name"
+            />
+          </UCard>
+
+          <!-- Programmatic Control -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-code" class="text-orange-500" />
+                Programmatic Control
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">Control via v-model:open.</p>
+            <div class="flex gap-2 mb-4">
+              <UButton
+                label="Open"
+                color="warning"
+                size="sm"
+                @click="createProgrammaticOpen = true"
+              />
+            </div>
+            <VACrudCreate
+              v-model:open="createProgrammaticOpen"
+              endpoint="/api/items"
+              friendly-name="Item"
+              @created="handleCreateProgrammatic"
+            >
+              <template #default="{ submit, loading }">
+                <form
+                  @submit.prevent="submit({ name: 'Programmatic Item' })"
+                  class="space-y-4"
+                >
+                  <p class="text-sm text-gray-500">Opened programmatically!</p>
+                  <div class="flex justify-end">
+                    <VABtnSubmit :loading="loading" label="Create" />
+                  </div>
+                </form>
+              </template>
+            </VACrudCreate>
+            <UAlert
+              v-if="createProgrammaticResult"
+              class="mt-4"
+              color="warning"
+              title="Programmatic Success!"
+            />
+          </UCard>
+        </div>
+
+        <!-- ========================================== -->
+        <!-- VACrudUpdate Section -->
+        <!-- ========================================== -->
+        <h2 class="text-2xl font-semibold mb-4 mt-12 text-blue-500">
+          VACrudUpdate
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Update modal with data fetching, loading skeleton, and dirty tracking.
+        </p>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
+          <!-- Basic Update -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-pencil" class="text-blue-500" />
+                Basic Update
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">
+              Fetches data and tracks changes.
+            </p>
+            <VACrudUpdate
+              endpoint="/api/users"
+              :record-id="1"
+              friendly-name="User"
+              @updated="handleUpdateBasic"
+            >
+              <template
+                #default="{ submit, loading, data, isDirty, isFetching }"
+              >
+                <div v-if="isFetching" class="space-y-4">
+                  <USkeleton class="h-4 w-full" />
+                  <USkeleton class="h-4 w-3/4" />
+                  <USkeleton class="h-4 w-1/2" />
+                </div>
+                <form v-else @submit.prevent="submit(data)" class="space-y-4">
+                  <UFormField label="Name">
+                    <UInput v-model="data.name" />
+                  </UFormField>
+                  <UFormField label="Email">
+                    <UInput v-model="data.email" />
+                  </UFormField>
+                  <div class="flex justify-end">
+                    <VABtnSubmit :loading="loading" label="Save Changes" />
+                  </div>
+                </form>
+              </template>
+            </VACrudUpdate>
+            <UAlert
+              v-if="updateBasicResult"
+              class="mt-4"
+              color="success"
+              title="Updated!"
+              :description="updateBasicResult.name"
+            />
+          </UCard>
+
+          <!-- User Selection -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-users" class="text-indigo-500" />
+                Dynamic Selection
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">
+              Select different users to edit.
+            </p>
+
+            <VACrudUpdate
+              :endpoint="'/api/users'"
+              :record-id="updateSelectedUserId"
+              friendly-name="User"
+              @updated="handleUpdateSelection"
+            >
+              <template
+                #default="{ submit, loading, data, isFetching, isDirty }"
+              >
+                <div v-if="isFetching" class="space-y-4">
+                  <USkeleton class="h-4 w-full" />
+                  <USkeleton class="h-4 w-3/4" />
+                </div>
+                <form v-else @submit.prevent="submit(data)" class="space-y-4">
+                  <div class="flex items-center gap-2">
+                    <span class="text-xs text-gray-500"
+                      >Editing User ID: {{ updateSelectedUserId }}</span
+                    >
+                  </div>
+                  <UFormField label="Name">
+                    <UInput v-model="data.name" />
+                  </UFormField>
+                  <div class="flex justify-end">
+                    <VABtnSubmit :loading="loading" label="Update" />
+                  </div>
+                </form>
+              </template>
+            </VACrudUpdate>
+            <UAlert
+              v-if="updateSelectionResult"
+              class="mt-4"
+              color="success"
+              title="User Updated!"
+            />
+          </UCard>
+
+          <!-- Programmatic Update -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-code" class="text-orange-500" />
+                Programmatic Control
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">External modal control.</p>
+            <div class="flex gap-2 mb-4">
+              <UButton
+                label="Open Update"
+                color="warning"
+                size="sm"
+                @click="updateProgrammaticOpen = true"
+              />
+            </div>
+            <VACrudUpdate
+              v-model:open="updateProgrammaticOpen"
+              endpoint="/api/users"
+              :record-id="2"
+              friendly-name="User"
+              @updated="handleUpdateProgrammatic"
+            >
+              <template
+                #default="{ submit, loading, data, isFetching, isDirty }"
+              >
+                <div v-if="isFetching" class="space-y-4">
+                  <USkeleton class="h-4 w-full" />
+                  <USkeleton class="h-4 w-3/4" />
+                </div>
+                <form v-else @submit.prevent="submit(data)" class="space-y-4">
+                  <UFormField label="Name">
+                    <UInput v-model="data.name" />
+                  </UFormField>
+                  <div class="flex justify-end">
+                    <VABtnSubmit :loading="loading" label="Update" />
+                  </div>
+                </form>
+              </template>
+            </VACrudUpdate>
+            <UAlert
+              v-if="updateProgrammaticResult"
+              class="mt-4"
+              color="warning"
+              title="Programmatic Update!"
+            />
+          </UCard>
+
+          <!-- Custom Style Update -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-settings-2" class="text-green-500" />
+                Custom Trigger Style
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">Styled trigger button.</p>
+            <VACrudUpdate
+              endpoint="/api/users"
+              :record-id="3"
+              friendly-name="User"
+              trigger-label="Edit Settings"
+              trigger-icon="i-lucide-settings"
+              trigger-color="green"
+              @updated="handleUpdateCustom"
+            >
+              <template #default="{ submit, loading, data, isFetching }">
+                <div v-if="isFetching" class="space-y-4">
+                  <USkeleton class="h-4 w-full" />
+                </div>
+                <form v-else @submit.prevent="submit(data)" class="space-y-4">
+                  <UFormField label="Name">
+                    <UInput v-model="data.name" />
+                  </UFormField>
+
+                  <div class="flex justify-end">
+                    <VABtnSubmit
+                      :loading="loading"
+                      label="Save Settings"
+                      color="primary"
+                    />
+                  </div>
+                </form>
+              </template>
+            </VACrudUpdate>
+            <UAlert
+              v-if="updateCustomResult"
+              class="mt-4"
+              color="success"
+              title="Settings Updated!"
+            />
+          </UCard>
+        </div>
+
+        <!-- ========================================== -->
+        <!-- VACrudDelete Section -->
+        <!-- ========================================== -->
+        <h2 class="text-2xl font-semibold mb-4 mt-12 text-red-500">
+          VACrudDelete
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Delete confirmation modal with VAModalConfirm integration.
+        </p>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
+          <!-- Basic Delete -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-trash-2" class="text-red-500" />
+                Basic Delete
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">
+              Standard delete confirmation.
+            </p>
+            <div
+              class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg mb-4"
+            >
+              <div>
+                <p class="font-medium">Project Alpha</p>
+                <p class="text-sm text-gray-500">ID: 1</p>
+              </div>
+              <VACrudDelete
+                endpoint="/api/projects"
+                :record-id="1"
+                item-name="Project Alpha"
+                @deleted="handleDeleteBasic"
+              />
+            </div>
+            <UAlert
+              v-if="deleteBasicDeleted"
+              color="success"
+              icon="i-lucide-check-circle"
+              title="Deleted Successfully"
+              description="Project Alpha removed"
+            />
+          </UCard>
+
+          <!-- Item List Delete -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-list" class="text-blue-500" />
+                Item List with Delete
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">Select and delete items.</p>
+            <div
+              class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg mb-4"
+            >
+              <div>
+                <p class="font-medium">
+                  {{
+                    deleteMockItems.find((i) => i.id === deleteSelectedItemId)
+                      ?.name
+                  }}
+                </p>
+                <p class="text-sm text-gray-500">
+                  ID: {{ deleteSelectedItemId }}
+                </p>
+              </div>
+              <VACrudDelete
+                v-if="
+                  deleteMockItems.find((i) => i.id === deleteSelectedItemId)
+                "
+                endpoint="/api/items"
+                :record-id="deleteSelectedItemId"
+                :item-name="
+                  deleteMockItems.find((i) => i.id === deleteSelectedItemId)
+                    ?.name
+                "
+                @deleted="handleDeleteSelection"
+              />
+            </div>
+            <p class="text-xs text-gray-500 mb-2">
+              Remaining: {{ deleteMockItems.length }}
+            </p>
+            <UAlert
+              v-if="deleteSelectionDeleted"
+              color="success"
+              icon="i-lucide-trash"
+              title="Item Deleted"
+              description="Removed from list"
+            />
+          </UCard>
+
+          <!-- Custom Confirm Message -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-message-square" class="text-purple-500" />
+                Custom Confirm Message
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">Custom confirmation text.</p>
+            <div
+              class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg mb-4"
+            >
+              <div>
+                <p class="font-medium">Important Document</p>
+                <p class="text-sm text-gray-500">ID: 42</p>
+              </div>
+              <VACrudDelete
+                endpoint="/api/documents"
+                :record-id="42"
+                item-name="Important Document"
+                confirm-title="⚠️ Permanent Deletion"
+                confirm-message="Critical data cannot be recovered. Are you sure?"
+                trigger-color="warning"
+                @deleted="handleDeleteCustom"
+              />
+            </div>
+            <UAlert
+              v-if="deleteCustomDeleted"
+              color="warning"
+              icon="i-lucide-alert-circle"
+              title="Permanently Deleted"
+            />
+          </UCard>
+
+          <!-- Programmatic Delete -->
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-code" class="text-orange-500" />
+                Programmatic Control
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">External modal control.</p>
+            <div class="flex gap-2 mb-4">
+              <UButton
+                label="Open Delete"
+                color="error"
+                size="sm"
+                @click="deleteProgrammaticOpen = true"
+              />
+            </div>
+            <VACrudDelete
+              v-model:open="deleteProgrammaticOpen"
+              endpoint="/api/items"
+              :record-id="99"
+              item-name="Programmatic Item"
+              @deleted="handleDeleteProgrammatic"
+            />
+          </UCard>
+
+          <!-- Trigger Style Variants -->
+          <UCard class="lg:col-span-2">
+            <template #header>
+              <h3 class="font-semibold flex items-center gap-2">
+                <UIcon name="i-lucide-palette" class="text-green-500" />
+                Trigger Style Variants
+              </h3>
+            </template>
+            <p class="text-sm text-gray-500 mb-4">
+              Different trigger button styles.
+            </p>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div
+                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <span class="text-sm">Ghost (Default)</span>
+                <VACrudDelete
+                  endpoint="/api/items"
+                  :record-id="101"
+                  item-name="Ghost Item"
+                  trigger-variant="ghost"
+                  @deleted="(id) => handleDeleteStyle('ghost', id)"
+                />
+              </div>
+              <div
+                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <span class="text-sm">Solid</span>
+                <VACrudDelete
+                  endpoint="/api/items"
+                  :record-id="102"
+                  item-name="Solid Item"
+                  trigger-variant="solid"
+                  @deleted="(id) => handleDeleteStyle('solid', id)"
+                />
+              </div>
+              <div
+                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <span class="text-sm">With Label</span>
+                <VACrudDelete
+                  endpoint="/api/items"
+                  :record-id="103"
+                  item-name="Labeled Item"
+                  trigger-label="Remove"
+                  trigger-icon="i-lucide-x"
+                  trigger-variant="outline"
+                  @deleted="(id) => handleDeleteStyle('label', id)"
+                />
+              </div>
+              <div
+                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <span class="text-sm">Large</span>
+                <VACrudDelete
+                  endpoint="/api/items"
+                  :record-id="104"
+                  item-name="Large Item"
+                  trigger-size="md"
+                  @deleted="(id) => handleDeleteStyle('large', id)"
+                />
+              </div>
+            </div>
+            <div class="mt-4 flex flex-wrap gap-2">
+              <UBadge
+                v-for="(deleted, style) in deleteStyleResults"
+                :key="style"
+                color="success"
+              >
+                {{ style }} deleted
+              </UBadge>
+            </div>
+          </UCard>
+        </div>
+
+        <!-- ========================================== -->
+        <!-- API Reference -->
+        <!-- ========================================== -->
+        <h2 class="text-2xl font-semibold mb-4 mt-12">API Reference</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold text-primary-500">VACrudCreate</h3>
+            </template>
+            <div class="space-y-2 text-sm">
+              <p><strong>Props:</strong></p>
+              <ul class="text-gray-600 dark:text-gray-400 space-y-1 ml-4">
+                <li>• endpoint (required)</li>
+                <li>• friendlyName (required)</li>
+                <li>• triggerLabel, triggerIcon</li>
+                <li>• triggerColor, modalSize</li>
+                <li>• initialData, open</li>
+              </ul>
+              <p class="mt-3"><strong>Events:</strong></p>
+              <ul class="text-gray-600 dark:text-gray-400 space-y-1 ml-4">
+                <li>• @created(data)</li>
+                <li>• @error(error)</li>
+                <li>• @opened, @closed</li>
+              </ul>
+              <p class="mt-3">
+                <strong>Slot:</strong> { submit, loading, error }
+              </p>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold text-blue-500">VACrudUpdate</h3>
+            </template>
+            <div class="space-y-2 text-sm">
+              <p><strong>Props:</strong></p>
+              <ul class="text-gray-600 dark:text-gray-400 space-y-1 ml-4">
+                <li>• endpoint (required)</li>
+                <li>• recordId (required)</li>
+                <li>• friendlyName</li>
+                <li>• triggerLabel, triggerIcon</li>
+                <li>• modalSize, open</li>
+              </ul>
+              <p class="mt-3"><strong>Events:</strong></p>
+              <ul class="text-gray-600 dark:text-gray-400 space-y-1 ml-4">
+                <li>• @updated(data)</li>
+                <li>• @error(error)</li>
+                <li>• @opened, @closed</li>
+              </ul>
+              <p class="mt-3">
+                <strong>Slot:</strong> { submit, loading, error, data, isDirty,
+                isFetching }
+              </p>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold text-red-500">VACrudDelete</h3>
+            </template>
+            <div class="space-y-2 text-sm">
+              <p><strong>Props:</strong></p>
+              <ul class="text-gray-600 dark:text-gray-400 space-y-1 ml-4">
+                <li>• endpoint (required)</li>
+                <li>• recordId (required)</li>
+                <li>• itemName</li>
+                <li>• triggerLabel, triggerIcon</li>
+                <li>• confirmTitle, confirmMessage</li>
+              </ul>
+              <p class="mt-3"><strong>Events:</strong></p>
+              <ul class="text-gray-600 dark:text-gray-400 space-y-1 ml-4">
+                <li>• @deleted(id)</li>
+                <li>• @error(error)</li>
+                <li>• @opened, @closed</li>
+              </ul>
+              <p class="mt-3">
+                <strong>Slot:</strong> No slot (uses VAModalConfirm)
+              </p>
+            </div>
+          </UCard>
+        </div>
+      </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>