@veristone/nuxt-v-app 0.1.0 → 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/composables/useVCrud.ts

@@ -207,12 +207,28 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     showError(title, message)
   }
 
-  // Get auth token for mutations
+  /**
+   * Get auth token from cookies
+   * Reads the stack_auth_access cookie for Bearer token
+   */
+  const getAuthToken = (): string | null => {
+    const tokenCookie = useCookie('stack_auth_access')
+    return tokenCookie.value || null
+  }
+
+  // Get auth headers with Bearer token
   const getAuthHeaders = () => {
-    return {
+    const headers: Record<string, string> = {
       'Content-Type': 'application/json',
       'X-Client-Version': 'v-app-1.0'
     }
+    
+    const token = getAuthToken()
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`
+    }
+    
+    return headers
   }
 
   // Get base URL
@@ -342,11 +358,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         })
       }
 
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint)}`, {
-        method: 'POST',
-        headers: getMutationHeaders(body),
-        body
-      })
+       const result = await $fetch<T>(constructUrl(endpoint), {
+         method: 'POST',
+         baseURL: getBaseUrl(),
+         headers: getMutationHeaders(body),
+         body
+       })
 
       notifyOk('Success', 'Record created successfully.')
       if (onCreated) onCreated(result)
@@ -394,11 +411,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         mergedParams.order = sortConfig.value.direction
       }
 
-      const response = await $fetch<any>(`${getBaseUrl()}${constructUrl(endpoint)}`, {
-        method: 'GET',
-        headers: getAuthHeaders(),
-        params: mergedParams
-      })
+       const response = await $fetch<any>(constructUrl(endpoint), {
+         method: 'GET',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders(),
+         params: mergedParams
+       })
 
       // Handle paginated responses: { data: [...], pagination: {...} }
       // Return just the data array if response is paginated, otherwise return as-is
@@ -429,10 +447,11 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     lastError.value = null
 
     try {
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'GET',
-        headers: getAuthHeaders()
-      })
+       const result = await $fetch<T>(constructUrl(endpoint, id), {
+         method: 'GET',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders()
+       })
 
       detailData.value = result
       syncFormData(result)
@@ -464,11 +483,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         })
       }
 
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'PUT',
-        headers: getMutationHeaders(body),
-        body
-      })
+       const result = await $fetch<T>(constructUrl(endpoint, id), {
+         method: 'PUT',
+         baseURL: getBaseUrl(),
+         headers: getMutationHeaders(body),
+         body
+       })
 
       detailData.value = result
       notifyOk('Saved', 'Changes saved successfully.')
@@ -502,11 +522,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         })
       }
 
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'PATCH',
-        headers: getMutationHeaders(body),
-        body
-      })
+       const result = await $fetch<T>(constructUrl(endpoint, id), {
+         method: 'PATCH',
+         baseURL: getBaseUrl(),
+         headers: getMutationHeaders(body),
+         body
+       })
 
       detailData.value = result
       notifyOk('Saved', 'Record updated.')
@@ -528,10 +549,11 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     isDeleting.value = true
 
     try {
-      await $fetch(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'DELETE',
-        headers: getAuthHeaders()
-      })
+       await $fetch(constructUrl(endpoint, id), {
+         method: 'DELETE',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders()
+       })
 
       notifyOk('Deleted', 'Record removed permanently.')
       if (onDeleted) onDeleted()
@@ -559,11 +581,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     isDeleting.value = true
 
     try {
-      await $fetch(`${getBaseUrl()}${constructUrl(endpoint)}/bulk-delete`, {
-        method: 'DELETE',
-        headers: getAuthHeaders(),
-        body: { ids }
-      })
+       await $fetch(constructUrl(endpoint) + '/bulk-delete', {
+         method: 'DELETE',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders(),
+         body: { ids }
+       })
 
       notifyOk('Batch Deleted', `${ids.length} records removed.`)
       if (onDeleted) onDeleted()

package/app/composables/useVFetch.ts

@@ -5,6 +5,31 @@
 import type { UseFetchOptions } from 'nuxt/app'
 import { useVToast } from './useVToast'
 
+/**
+ * Get auth token from cookies
+ * Reads the stack_auth_access cookie for Bearer token
+ */
+function getAuthToken(): string | null {
+  const tokenCookie = useCookie('stack_auth_access')
+  return tokenCookie.value || null
+}
+
+/**
+ * Get default auth headers including Bearer token
+ */
+function getAuthHeaders(): Record<string, string> {
+  const headers: Record<string, string> = {
+    'X-Client-Version': 'v-app-1.0'
+  }
+  
+  const token = getAuthToken()
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`
+  }
+  
+  return headers
+}
+
 export async function useVFetch<T>(
   endpoint: string,
   opts: UseFetchOptions<T> = {},
@@ -13,13 +38,13 @@ export async function useVFetch<T>(
   const { error: notifyError } = useVToast()
   const runtimeConfig = useRuntimeConfig()
 
-  // Construct Base Config
+  // Construct Base Config with auth headers
   const fetchConfig: UseFetchOptions<T> = {
     baseURL: (runtimeConfig.public.apiUrl as string) || '/',
     retry: 1,
     retryStatusCodes: [408, 409, 429, 500, 502, 503, 504], // Extended retry codes
     headers: {
-      'X-Client-Version': 'v-app-1.0',
+      ...getAuthHeaders(),
       ...opts.headers
     },