@veristone/nuxt-v-app 0.2.1 → 0.2.3

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/composables/useVCrud.ts

@@ -1,7 +1,7 @@
 /**
  * useVCrud - Veristone CRUD Composable
  * Optimized for V-App data flows.
- * 
+ *
  * Uses $fetch for mutations (POST, PUT, PATCH, DELETE) to avoid Nuxt's useFetch caching issues.
  * Uses useVFetch only for initial data loading (SSR compatible).
  */
@@ -156,8 +156,7 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     onUpdated,
     onDeleted,
   } = options
-  
-  
+
   // Renamed internal state for clarity
   const isBusy = useState<boolean>(`v-crud-busy-${endpoint}`, () => false)
   const lastError = useState<string | null>(`v-crud-error-${endpoint}`, () => null)
@@ -222,12 +221,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
       'Content-Type': 'application/json',
       'X-Client-Version': 'v-app-1.0'
     }
-    
+
     const token = getAuthToken()
     if (token) {
       headers['Authorization'] = `Bearer ${token}`
     }
-    
+
     return headers
   }
 
@@ -344,7 +343,7 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     isBusy.value = true
     lastError.value = null
     isCreating.value = true
-    
+
     try {
       const hasFile = payload instanceof FormData || Object.values(payload || {}).some((v: any) => v instanceof File || v instanceof FileList)
       let body: any = payload
@@ -599,6 +598,44 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
       isBusy.value = false
     }
   }
+  // CUSTOM - For nested resource operations like /tapes/:id/loans
+const custom = async <T = any>(
+  subPath: string,
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' = 'GET',
+  payload?: any,
+  id?: string | number
+) => {
+  isBusy.value = true
+  lastError.value = null
+  try {
+    const url = id !== undefined
+      ? `${constructUrl(endpoint, id)}/${subPath}`
+      : `${constructUrl(endpoint)}/${subPath}`
+
+    const hasFile = payload instanceof FormData || Object.values(payload || {}).some((v: any) => v instanceof File || v instanceof FileList)
+    let body: any = payload
+    if (hasFile && !(payload instanceof FormData)) {
+      body = new FormData()
+      Object.entries(payload || {}).forEach(([k, v]: any) => {
+        if (v instanceof FileList) Array.from(v).forEach(f => body.append(k, f))
+        else if (v instanceof File) body.append(k, v)
+        else if (v !== undefined && v !== null) body.append(k, String(v))
+      })
+    }
+    const result = await $fetch<T>(url, {
+      method,
+      baseURL: getBaseUrl(),
+      headers: getMutationHeaders(body),
+      body: method !== 'GET' ? body : undefined,
+      params: method === 'GET' && payload ? payload : undefined
+    })
+    return result
+  } catch (err) {
+    handleError(`Custom ${method}`, err)
+  } finally {
+    isBusy.value = false
+  }
+}
 
   // Auto-refresh list view when list inputs change.
   watch([filterValues, searchTerm, sortConfig], async () => {
@@ -632,6 +669,7 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     patch,
     remove,
     bulkRemove,
+    custom,
     loading: isBusy, // Alias internal 'isBusy' to public 'loading'
     errorState: lastError, // Alias internal 'lastError' to public 'errorState'
 

package/app/pages/test-api-auth.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 const endpoint = "http://localhost:3002/admin/portfolio/loans";
+const tapesEndpoint = "http://localhost:3002/admin/portfolio/tapes";
 
 const crud = useVCrud(endpoint, { immediate: false });
+const tapesCrud = useVCrud(tapesEndpoint, { immediate: false });
 
 // Store results for each method
 const results = ref<Record<string, any>>({});
@@ -100,6 +102,22 @@ const testDelete = async () => {
   }
 };
 
+// Test CUSTOM - nested resource (tapes/:id/loans)
+const testCustom = async () => {
+  const tapeId = "5e8523a8-43bf-44ac-a682-7b48e1c823e8";
+  loading.value.custom = true;
+  errors.value.custom = "";
+  try {
+    // This will call: POST /admin/portfolio/tapes/5e8523a8-43bf-44ac-a682-7b48e1c823e8/loans
+    const data = await tapesCrud.custom("loans", "POST", {}, tapeId);
+    results.value.custom = data;
+  } catch (err: any) {
+    errors.value.custom = err.message || "Failed";
+  } finally {
+    loading.value.custom = false;
+  }
+};
+
 // Run all tests
 const testAll = async () => {
   await testGet();
@@ -266,5 +284,33 @@ const testAll = async () => {
         >{{ JSON.stringify(results.delete, null, 2) }}</pre
       >
     </div>
+
+    <!-- CUSTOM (nested resource) -->
+    <div class="border-2 border-indigo-500 p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">CUSTOM (nested resource)</h2>
+        <button
+          @click="testCustom"
+          :disabled="loading.custom"
+          class="px-3 py-1 bg-indigo-500 text-white rounded hover:bg-indigo-600 disabled:opacity-50"
+        >
+          {{ loading.custom ? "Loading..." : "Test CUSTOM" }}
+        </button>
+      </div>
+      <div class="text-sm text-gray-500 mb-2">
+        POST /admin/portfolio/tapes/5e8523a8-43bf-44ac-a682-7b48e1c823e8/loans
+      </div>
+      <div class="text-xs text-gray-400 mb-2">
+        Using: tapesCrud.custom("loans", "POST", {}, tapeId)
+      </div>
+      <div v-if="errors.custom" class="text-red-500 mb-2">
+        Error: {{ errors.custom }}
+      </div>
+      <pre
+        v-if="results.custom"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.custom, null, 2) }}</pre
+      >
+    </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "keywords": [