@veristone/nuxt-v-app 0.1.1 → 0.2.0

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+/**
+ * VACrudCreate - Veristone CRUD Create Modal
+ *
+ * Provides a reusable modal for creating new records via API.
+ * Handles form submission, loading states, and error handling.
+ *
+ * @example
+ * <VACrudCreate
+ *   endpoint="/api/loans"
+ *   friendly-name="Loan"
+ *   @created="onLoanCreated"
+ * >
+ *   <template #default="{ submit, loading, error }">
+ *     <form @submit.prevent="submit({ name: 'New Loan' })">
+ *       <UInput v-model="formData.name" placeholder="Loan name" />
+ *       <UButton type="submit" :loading="loading">Create</UButton>
+ *     </form>
+ *   </template>
+ * </VACrudCreate>
+ */
+
+interface Props {
+  endpoint: string;
+  friendlyName: string;
+  triggerLabel?: string;
+  triggerIcon?: string;
+  triggerColor?:
+    | "error"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning"
+    | "neutral";
+  triggerVariant?: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+  modalTitle?: string;
+  modalSize?: "sm" | "md" | "lg" | "xl";
+  initialData?: Record<string, any>;
+  open?: boolean;
+}
+
+interface Emits {
+  (e: "created", data: any): void;
+  (e: "error", error: any): void;
+  (e: "opened"): void;
+  (e: "closed"): void;
+  (e: "update:open", value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  triggerLabel: undefined,
+  triggerIcon: "i-lucide-plus",
+  triggerColor: "primary",
+  triggerVariant: "solid",
+  modalTitle: undefined,
+  modalSize: "md",
+  initialData: () => ({}),
+  open: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const { create, loading, errorState } = useVCrud(props.endpoint);
+const internalOpen = ref(false);
+
+// Hybrid internal/external state via computed getter/setter
+const isOpen = computed({
+  get: () => props.open ?? internalOpen.value,
+  set: (val) => {
+    emit("update:open", val);
+    internalOpen.value = val;
+  },
+});
+
+// Watch for open state changes to emit lifecycle events
+watch(isOpen, (val) => {
+  if (val) {
+    emit("opened");
+  } else {
+    emit("closed");
+  }
+});
+
+// Computed defaults for labels
+const computedTriggerLabel = computed(() => {
+  return props.triggerLabel ?? `Create ${props.friendlyName}`;
+});
+
+const computedModalTitle = computed(() => {
+  return props.modalTitle ?? `Create ${props.friendlyName}`;
+});
+
+// Submit handler
+const handleSubmit = async (data: Record<string, any>) => {
+  try {
+    const result = await create(data);
+    emit("created", result);
+    isOpen.value = false;
+  } catch (err) {
+    emit("error", err);
+  }
+};
+</script>
+
+<template>
+  <UModal v-model:open="isOpen">
+    <UButton
+      :label="computedTriggerLabel"
+      :icon="triggerIcon"
+      :color="triggerColor"
+      :variant="triggerVariant"
+    />
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ computedModalTitle }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="p-4 space-y-4">
+        <slot :submit="handleSubmit" :loading="loading" :error="errorState">
+          <div class="space-y-4">
+            <p class="text-gray-500 italic">
+              Provide form content via default slot
+            </p>
+          </div>
+        </slot>
+
+        <div
+          v-if="errorState"
+          class="p-3 rounded bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm"
+        >
+          {{ errorState }}
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+/**
+ * VACrudDelete - Delete confirmation component with CRUD integration
+ *
+ * Provides a delete button with confirmation modal that integrates with useVCrud.
+ * Handles API deletion, loading states, and error handling.
+ *
+ * @example
+ * <VACrudDelete
+ *   endpoint="/api/users"
+ *   :record-id="userId"
+ *   item-name="User"
+ *   @deleted="onUserDeleted"
+ * />
+ */
+
+const props = withDefaults(
+  defineProps<{
+    endpoint: string;
+    recordId: string | number;
+    itemName?: string;
+    triggerLabel?: string;
+    triggerIcon?: string;
+    triggerColor?:
+      | "error"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "info"
+      | "warning"
+      | "neutral";
+    triggerVariant?: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    triggerSize?: "xs" | "sm" | "md" | "lg" | "xl";
+    confirmTitle?: string;
+    confirmMessage?: string;
+    open?: boolean;
+  }>(),
+  {
+    itemName: "this item",
+    triggerIcon: "i-lucide-trash-2",
+    triggerColor: "error",
+    triggerVariant: "solid",
+    triggerSize: "xs",
+    confirmTitle: "Delete Item",
+    open: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  deleted: [id: string | number];
+  error: [error: any];
+  opened: [];
+  closed: [];
+  "update:open": [value: boolean];
+}>();
+
+const { remove, loading } = useVCrud(props.endpoint);
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (val) => {
+    emit("update:open", val ?? false);
+    if (val) {
+      emit("opened");
+    } else {
+      emit("closed");
+    }
+  },
+});
+
+const confirmMessage = computed(() => {
+  return (
+    props.confirmMessage ||
+    `Are you sure you want to delete ${props.itemName}? This cannot be undone.`
+  );
+});
+
+const handleDelete = async () => {
+  try {
+    await remove(props.recordId);
+    emit("deleted", props.recordId);
+    isOpen.value = false;
+  } catch (error) {
+    emit("error", error);
+  }
+};
+</script>
+
+<template>
+  <UModal v-model:open="isOpen">
+    <UButton
+      :icon="triggerIcon"
+      :color="triggerColor as any"
+      :variant="triggerVariant as any"
+      :size="triggerSize as any"
+      :label="triggerLabel"
+    />
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ confirmTitle }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
+
+    <!-- Modal Content -->
+    <template #body>
+      <div class="p-4 space-y-4">
+        <div class="flex items-start gap-4">
+          <div
+            class="shrink-0 p-2 rounded-full bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
+          >
+            <UIcon name="i-lucide-alert-triangle" class="w-6 h-6" />
+          </div>
+          <div class="flex-1">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              {{ confirmMessage }}
+            </p>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3">
+          <UButton
+            label="Cancel"
+            color="neutral"
+            variant="ghost"
+            @click="isOpen = false"
+          />
+          <UButton
+            label="Delete"
+            color="error"
+            variant="solid"
+            :loading="loading"
+            @click="handleDelete"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * VACrudUpdate - Veristone CRUD Update Modal
+ *
+ * Provides a reusable modal for editing records via API.
+ * Handles data fetching, form state management, and submission.
+ *
+ * @example
+ * ```vue
+ * <VACrudUpdate
+ *   endpoint="/api/users"
+ *   :record-id="userId"
+ *   friendly-name="User"
+ *   @updated="onUserUpdated"
+ * >
+ *   <template #default="{ submit, loading, error, data, isDirty }">
+ *     <form @submit.prevent="submit(data)">
+ *       <UFormGroup label="Name">
+ *         <UInput v-model="data.name" />
+ *       </UFormGroup>
+ *       <UButton type="submit" :loading="loading">Save</UButton>
+ *     </form>
+ *   </template>
+ * </VACrudUpdate>
+ * ```
+ */
+
+interface Props {
+  endpoint: string;
+  recordId: string | number;
+  friendlyName?: string;
+  triggerLabel?: string;
+  triggerIcon?: string;
+  triggerColor?:
+    | "neutral"
+    | "error"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning";
+  triggerVariant?: "ghost" | "link" | "solid" | "outline" | "soft" | "subtle";
+  modalTitle?: string;
+  modalSize?: "sm" | "md" | "lg" | "xl";
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  friendlyName: "Record",
+  triggerLabel: "Edit",
+  triggerIcon: "i-lucide-pencil",
+  triggerColor: "neutral",
+  triggerVariant: "ghost",
+  modalSize: "md",
+  open: undefined,
+});
+
+const emit = defineEmits<{
+  updated: [data: any];
+  error: [error: any];
+  opened: [];
+  closed: [];
+  "update:open": [value: boolean];
+}>();
+
+// Composables
+const { findOne, update, loading, errorState, formData, isFormDirty } =
+  useVCrud(props.endpoint);
+
+// State
+const internalOpen = ref(false);
+const isFetching = ref(false);
+
+// Computed modal title
+const computedModalTitle = computed(() => {
+  return props.modalTitle || `Edit ${props.friendlyName}`;
+});
+
+// Hybrid open state (internal + external v-model)
+const isOpen = computed({
+  get: () => (props.open !== undefined ? props.open : internalOpen.value),
+  set: (val) => {
+    emit("update:open", val);
+    internalOpen.value = val;
+  },
+});
+
+// Watch for modal open to fetch data
+watch(isOpen, async (val) => {
+  if (val) {
+    emit("opened");
+    if (props.recordId) {
+      isFetching.value = true;
+      try {
+        await findOne(props.recordId);
+      } catch (e) {
+        // Error handled by composable
+      } finally {
+        isFetching.value = false;
+      }
+    }
+  } else {
+    emit("closed");
+  }
+});
+
+// Submit handler
+const submit = async (data: Record<string, any>) => {
+  try {
+    const result = await update(props.recordId, data);
+    emit("updated", result);
+    isOpen.value = false;
+  } catch (e) {
+    emit("error", e);
+  }
+};
+</script>
+
+<template>
+  <UModal v-model:open="isOpen">
+    <UButton
+      :label="triggerLabel"
+      :icon="triggerIcon"
+      :color="triggerColor"
+      :variant="triggerVariant"
+    />
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ computedModalTitle }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="p-4 space-y-4">
+        <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>
+
+        <div v-else>
+          <slot
+            :submit="submit"
+            :loading="loading"
+            :error="errorState"
+            :data="formData"
+            :isDirty="isFormDirty"
+            :isFetching="isFetching"
+          />
+        </div>
+
+        <div
+          v-if="errorState"
+          class="rounded bg-red-50 p-3 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400"
+        >
+          {{ errorState }}
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/layouts/default.vue

@@ -1,103 +1,108 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
+import type { NavigationMenuItem } from "@nuxt/ui";
 
-const route = useRoute()
+const route = useRoute();
 
 const links = ref<NavigationMenuItem[][]>([
   [
     {
-      to: '/',
-      icon: 'i-lucide-home',
-      label: 'Overview'
+      to: "/",
+      icon: "i-lucide-home",
+      label: "Overview",
     },
     {
-      to: '/playground',
-      icon: 'i-lucide-blocks',
-      label: 'Playground',
+      to: "/playground",
+      icon: "i-lucide-blocks",
+      label: "Playground",
       open: true,
       children: [
         {
-          to: '/playground',
-          icon: 'i-lucide-layout-grid',
-          label: 'Components'
+          to: "/playground",
+          icon: "i-lucide-layout-grid",
+          label: "Components",
         },
         {
-          to: '/playground/cards',
-          icon: 'i-lucide-credit-card',
-          label: 'Cards'
+          to: "/playground/cards",
+          icon: "i-lucide-credit-card",
+          label: "Cards",
         },
         {
-          to: '/playground/charts',
-          icon: 'i-lucide-bar-chart-3',
-          label: 'Charts'
+          to: "/playground/charts",
+          icon: "i-lucide-bar-chart-3",
+          label: "Charts",
         },
         {
-          to: '/playground/blocks',
-          icon: 'i-lucide-layout-template',
-          label: 'Blocks'
+          to: "/playground/blocks",
+          icon: "i-lucide-layout-template",
+          label: "Blocks",
         },
         {
-          to: '/playground/dashboard',
-          icon: 'i-lucide-layout-dashboard',
-          label: 'Dashboard'
+          to: "/playground/dashboard",
+          icon: "i-lucide-layout-dashboard",
+          label: "Dashboard",
         },
         {
-          to: '/playground/tables',
-          icon: 'i-lucide-table-2',
-          label: 'Tables'
+          to: "/playground/tables",
+          icon: "i-lucide-table-2",
+          label: "Tables",
         },
         {
-          to: '/playground/base',
-          icon: 'i-lucide-box',
-          label: 'Base Components'
+          to: "/playground/base",
+          icon: "i-lucide-box",
+          label: "Base Components",
         },
         {
-          to: '/playground/buttons',
-          icon: 'i-lucide-mouse-pointer-click',
-          label: 'Buttons'
+          to: "/playground/buttons",
+          icon: "i-lucide-mouse-pointer-click",
+          label: "Buttons",
         },
         {
-          to: '/playground/formatters',
-          icon: 'i-lucide-text-cursor-input',
-          label: 'Formatters'
+          to: "/playground/formatters",
+          icon: "i-lucide-text-cursor-input",
+          label: "Formatters",
         },
         {
-          to: '/playground/states',
-          icon: 'i-lucide-loader',
-          label: 'States'
+          to: "/playground/states",
+          icon: "i-lucide-loader",
+          label: "States",
         },
         {
-          to: '/playground/modals',
-          icon: 'i-lucide-panel-right',
-          label: 'Modals'
-        }
-      ]
-    }
-  ]
-])
+          to: "/playground/modals",
+          icon: "i-lucide-panel-right",
+          label: "Modals",
+        },
+        {
+          to: "/playground/crud",
+          icon: "i-lucide-database",
+          label: "CRUD",
+        },
+      ],
+    },
+  ],
+]);
 
 const groups = computed(() => [
   {
-    id: 'links',
-    label: 'Go to',
-    items: links.value.flat()
+    id: "links",
+    label: "Go to",
+    items: links.value.flat(),
   },
   {
-    id: 'code',
-    label: 'Code',
+    id: "code",
+    label: "Code",
     items: [
       {
-        id: 'source',
-        label: 'View page source',
-        icon: 'i-simple-icons-github',
+        id: "source",
+        label: "View page source",
+        icon: "i-simple-icons-github",
         to: `https://github.com/nuxt-ui-templates/dashboard/blob/main/app/pages${
-          route.path === '/' ? '/index' : route.path
+          route.path === "/" ? "/index" : route.path
         }.vue`,
-        target: '_blank'
-      }
-    ]
-  }
-])
+        target: "_blank",
+      },
+    ],
+  },
+]);
 </script>
 
 <template>
@@ -114,18 +119,22 @@ const groups = computed(() => [
           class="flex items-center gap-2 px-3 py-2"
           :class="collapsed ? 'justify-center' : ''"
         >
-          <div class="size-8 rounded-lg bg-primary-500/10 flex items-center justify-center shrink-0">
-            <UIcon name="i-lucide-layout-dashboard" class="size-5 text-primary-500" />
+          <div
+            class="size-8 rounded-lg bg-primary-500/10 flex items-center justify-center shrink-0"
+          >
+            <UIcon
+              name="i-lucide-layout-dashboard"
+              class="size-5 text-primary-500"
+            />
           </div>
-          <span v-if="!collapsed" class="font-semibold text-lg truncate">VA Playground</span>
+          <span v-if="!collapsed" class="font-semibold text-lg truncate"
+            >VA Playground</span
+          >
         </div>
       </template>
 
       <template #default="{ collapsed }">
-        <VaLayoutSideNav
-          :items="links[0]!"
-          :collapsed="collapsed"
-        />
+        <VaLayoutSideNav :items="links[0]!" :collapsed="collapsed" />
 
         <!-- Accounts section commented out - requires /analytics.svg asset
         <div class="space-y-1 mt-4">
@@ -155,7 +164,6 @@ const groups = computed(() => [
           </div>
         </div>
         -->
-
       </template>
 
       <template #footer="{ collapsed }">