vue-api-kit 1.10.7 → 1.10.8

package/README.md

@@ -235,7 +235,7 @@ async function handleSubmit() {
 - ✅ **POST Queries**: Support for both GET and POST methods in queries for complex data retrieval
 - ✅ **Modular APIs**: Merge queries and mutations from separate files with full type safety
 - ✅ **Multi-Level Nesting**: Organize queries and mutations in nested structures with full type safety
-- ✅ **File Upload**: Support for multipart/form-data in mutations
+- ✅ **File Upload**: Support for multipart/form-data with nested objects in mutations
 - ✅ **Path Parameters**: Automatic path parameter replacement
 - ✅ **Debouncing**: Built-in request debouncing
 - ✅ **CSRF Protection**: Automatic CSRF token refresh on 403/419 errors
@@ -434,7 +434,7 @@ const api = createApiClient({
     console.log('Request finished');
   },
 
-  onErrorRequest: (error) => {
+  onError: (error) => {
     // Global error handler
     console.error('API Error:', error.message);
   },
@@ -832,6 +832,66 @@ async function handleUpload(file: File) {
 }
 ```
 
+### Nested Objects in Multipart
+
+The multipart feature supports nested objects with automatic bracket notation flattening:
+
+```typescript
+const api = createApiClient({
+  baseURL: 'https://api.example.com',
+  mutations: {
+    createProduct: {
+      method: 'POST',
+      path: '/products',
+      isMultipart: true,
+      response: z.object({
+        id: z.number(),
+        success: z.boolean()
+      })
+    }
+  }
+});
+
+// In component
+const { mutate } = api.mutation.createProduct();
+
+async function handleSubmit(file: File) {
+  await mutate({
+    data: {
+      code: 'PROD001',
+      name: 'Product Name',
+      description: 'Product description',
+      // Nested objects are automatically flattened with bracket notation
+      image: {
+        file_url: 'https://example.com/existing.jpg',
+        file: file
+      }
+    }
+  });
+}
+
+// The FormData will be sent as:
+// code=PROD001
+// name=Product Name
+// description=Product description
+// image[file_url]=https://example.com/existing.jpg
+// image[file]=<File>
+```
+
+You can also use flat bracket notation directly:
+
+```typescript
+await mutate({
+  data: {
+    'image[file]': file,
+    'image[file_url]': 'https://example.com/existing.jpg',
+    code: 'PROD001'
+  }
+});
+```
+
+Both approaches work seamlessly together, giving you flexibility in how you structure your data.
+
 ## 🔒 CSRF Token Protection
 
 The client includes built-in CSRF token protection, perfect for Laravel Sanctum or similar CSRF-based authentication systems.

package/dist/core/types.d.ts

@@ -104,7 +104,22 @@ export type MutationHooksFromDefinitions<M> = {
  *   csrfRefreshEndpoint: "/auth/refresh-csrf",
  *   queries: { getUsers: { path: "/users" } },
  *   mutations: { createUser: { method: "POST", path: "/users" } },
- *   onErrorRequest: (error) => console.error(error.message)
+ *   onBeforeRequest: async (config) => {
+ *    // Modify config before request
+ *     return config;
+ *   },
+ *   onStartRequest: async () => {
+ *     console.log("Request started");
+ *   },
+ *   onFinishRequest: async () => {
+ *     console.log("Request finished");
+ *   },
+ *   onError: ({ err, message }) => {
+ *     console.error("API Error:", message);
+ *   },
+ *   onZodError: (zodError) => {
+ *     console.error("Validation Error:", zodError);
+ *   }
  * };
  * @example
  * // Nested structure

package/dist/index.js

@@ -1,18 +1,33 @@
-import A, { ZodError as F } from "zod";
-import * as G from "zod";
-import { ZodError as ae } from "zod";
-import U, { AxiosError as Z } from "axios";
-import { AxiosError as ie } from "axios";
-import { nextTick as _, ref as p, onMounted as N, watch as Q, onBeforeUnmount as z } from "vue";
-import { debounce as J } from "lodash-es";
-function H(e) {
+import A, { ZodError as Z } from "zod";
+import * as I from "zod";
+import { ZodError as ne } from "zod";
+import U, { AxiosError as $ } from "axios";
+import { AxiosError as ue } from "axios";
+import { nextTick as _, ref as g, onMounted as Q, watch as z, onBeforeUnmount as N } from "vue";
+import { debounce as H } from "lodash-es";
+function W(e) {
   return e && typeof e == "object" && e !== null && typeof e.path == "string";
 }
-function W(e) {
+function X(e) {
   return e && typeof e == "object" && e !== null && typeof e.path == "string" && typeof e.method == "string";
 }
-function Y(e) {
-  const h = U.create({
+function F(e, a, h = "") {
+  if (a instanceof File || a instanceof Blob)
+    e.append(h, a);
+  else if (Array.isArray(a))
+    a.forEach((l) => {
+      l instanceof File || l instanceof Blob ? e.append(h, l) : typeof l == "object" && l !== null ? F(e, l, h) : e.append(h, String(l));
+    });
+  else if (typeof a == "object" && a !== null)
+    for (const [l, B] of Object.entries(a)) {
+      const k = h ? `${h}[${l}]` : l;
+      F(e, B, k);
+    }
+  else
+    e.append(h, String(a));
+}
+function K(e) {
+  const a = U.create({
     baseURL: e.baseURL,
     headers: {
       "Content-Type": "application/json",
@@ -22,212 +37,210 @@ function Y(e) {
     withCredentials: e.withCredentials ?? !1,
     withXSRFToken: e.withXSRFToken ?? !1
   });
-  let B = !1, w = null;
-  e.onBeforeRequest && h.interceptors.request.use(
+  let h = !1, l = null;
+  e.onBeforeRequest && a.interceptors.request.use(
     async (r) => {
       try {
         return await e.onBeforeRequest(r) || r;
-      } catch (n) {
-        return Promise.reject(n);
+      } catch (u) {
+        return Promise.reject(u);
       }
     },
     (r) => Promise.reject(r)
-  ), e.onStartRequest && h.interceptors.request.use(
+  ), e.onStartRequest && a.interceptors.request.use(
     async (r) => {
       try {
         return await e.onStartRequest(), r;
-      } catch (n) {
-        return Promise.reject(n);
+      } catch (u) {
+        return Promise.reject(u);
       }
     },
     (r) => Promise.reject(r)
-  ), e.onFinishRequest && h.interceptors.response.use(
+  ), e.onFinishRequest && a.interceptors.response.use(
     (r) => (e.onFinishRequest(), r),
     (r) => (e.onFinishRequest(), Promise.reject(r))
-  ), h.interceptors.request.use((r) => {
+  ), a.interceptors.request.use((r) => {
     if (!r.url) return r;
-    const n = (m) => {
-      if (m)
-        for (const [c, s] of Object.entries(m)) {
-          const o = `{${c}}`;
-          r.url.includes(o) && (r.url = r.url.replace(
-            o,
-            encodeURIComponent(String(s))
-          ), delete m[c]);
+    const u = (v) => {
+      if (v)
+        for (const [m, o] of Object.entries(v)) {
+          const s = `{${m}}`;
+          r.url.includes(s) && (r.url = r.url.replace(
+            s,
+            encodeURIComponent(String(o))
+          ), delete v[m]);
         }
     };
-    return r.method !== "get" && r.data?.params && n(r.data.params), n(r.params), r;
-  }), e.csrfRefreshEndpoint && h.interceptors.response.use(
+    return r.method !== "get" && r.data?.params && u(r.data.params), u(r.params), r;
+  }), e.csrfRefreshEndpoint && a.interceptors.response.use(
     (r) => r,
     async (r) => {
-      const n = r.config;
-      if (n?.url === e.csrfRefreshEndpoint)
+      const u = r.config;
+      if (u?.url === e.csrfRefreshEndpoint)
         return Promise.reject(r);
-      if (r.response && (r.response.status === 403 || r.response.status === 419) && !n?._retry) {
-        n._retry = !0;
+      if (r.response && (r.response.status === 403 || r.response.status === 419) && !u?._retry) {
+        u._retry = !0;
         try {
-          return B && w ? await w : (B = !0, w = h.get(e.csrfRefreshEndpoint).then(() => {
-            B = !1, w = null;
-          }), await w), h.request(n);
-        } catch (m) {
-          return B = !1, w = null, Promise.reject(m);
+          return h && l ? await l : (h = !0, l = a.get(e.csrfRefreshEndpoint).then(() => {
+            h = !1, l = null;
+          }), await l), a.request(u);
+        } catch (v) {
+          return h = !1, l = null, Promise.reject(v);
         }
       }
       return Promise.reject(r);
     }
-  ), h.interceptors.response.use(
+  ), a.interceptors.response.use(
     (r) => r,
     (r) => (_(() => {
-      r.code;
+      r?.code;
     }), Promise.reject(r))
   );
-  function D(r) {
-    const n = {};
-    for (const m in r) {
-      const c = r[m];
-      if (c)
-        if (H(c)) {
-          const s = c;
-          n[m] = (o) => {
-            let a;
-            o && typeof o == "object" && ("loadOnMount" in o || "debounce" in o || "onResult" in o || "onError" in o || "onZodError" in o || "onBeforeRequest" in o || "params" in o || "data" in o ? a = o : a = { params: o });
-            const g = p(), v = p(), E = p(), C = p(!1), j = p(!1), k = p(!0);
+  function B(r) {
+    const u = {};
+    for (const v in r) {
+      const m = r[v];
+      if (m)
+        if (W(m)) {
+          const o = m;
+          u[v] = (s) => {
+            let n;
+            s && typeof s == "object" && ("loadOnMount" in s || "debounce" in s || "onResult" in s || "onError" in s || "onZodError" in s || "onBeforeRequest" in s || "params" in s || "data" in s ? n = s : n = { params: s });
+            const R = g(), E = g(), p = g(), C = g(!1), w = g(!1), M = g(!0);
             let P = new AbortController();
             const i = () => {
               P?.abort(), P = new AbortController();
-            }, l = async () => {
-              C.value && i(), C.value = !0, v.value = void 0;
+            }, f = async () => {
+              C.value && i(), C.value = !0, E.value = void 0;
               try {
-                s.params && a?.params && s.params.parse(a.params);
-                let t = a?.data;
-                s.data && t && s.data.parse(t);
-                const u = {
-                  method: s.method ?? "GET",
-                  url: s.path,
-                  params: a?.params,
+                o.params && n?.params && o.params.parse(n.params);
+                let t = n?.data;
+                o.data && t && o.data.parse(t);
+                const c = {
+                  method: o.method ?? "GET",
+                  url: o.path,
+                  params: n?.params,
                   signal: P.signal
                 };
-                if (s.method === "POST" && t && (u.data = t), s.onBeforeRequest) {
-                  const d = await s.onBeforeRequest(u);
-                  d !== void 0 && Object.assign(u, d);
+                if (o.method === "POST" && t && (c.data = t), o.onBeforeRequest) {
+                  const y = await o.onBeforeRequest(c);
+                  y !== void 0 && Object.assign(c, y);
                 }
-                if (a?.onBeforeRequest) {
-                  const d = await a.onBeforeRequest(u);
-                  d !== void 0 && Object.assign(u, d);
+                if (n?.onBeforeRequest) {
+                  const y = await n.onBeforeRequest(c);
+                  y !== void 0 && Object.assign(c, y);
                 }
-                v.value = void 0, E.value = void 0;
-                const b = await h.request(u), f = s.response ? s.response.parse(b.data) : b.data;
-                g.value = f, a?.onResult?.(f);
+                E.value = void 0, p.value = void 0;
+                const j = await a.request(c), d = o.response ? o.response.parse(j.data) : j.data;
+                R.value = d, n?.onResult?.(d);
               } catch (t) {
-                if (t instanceof Z) {
+                if (t instanceof $) {
                   if (t.code !== "ERR_CANCELED") {
-                    const u = t.response?.data?.message || t.message || "An error occurred";
-                    v.value = u, a?.onError?.(t), e.onError?.({ err: t, message: u });
+                    const c = t.response?.data?.message || t.message || "An error occurred";
+                    E.value = c, n?.onError?.(t), e.onError?.({ err: t, message: c });
                   }
-                } else if (t instanceof F) {
-                  E.value = A.flattenError(t);
-                  const u = Object.keys(E.value.fieldErrors).length, b = `${Object.values(E.value.fieldErrors).at(0)}.${u > 1 ? ` (and ${u - 1} more errors)` : ""}`;
-                  v.value = b, a?.onError?.(t), a?.onZodError?.(A.flattenError(t)), e.onError?.({ err: t, message: b }), e.onZodError && e.onZodError(A.flattenError(t));
+                } else if (t instanceof Z) {
+                  p.value = A.flattenError(t);
+                  const c = Object.keys(p.value.fieldErrors).length, j = `${Object.values(p.value.fieldErrors).at(0)}.${c > 1 ? ` (and ${c - 1} more errors)` : ""}`;
+                  E.value = j, n?.onError?.(t), n?.onZodError?.(A.flattenError(t)), e.onError?.({ err: t, message: j }), e.onZodError && e.onZodError(A.flattenError(t));
                 } else {
-                  const u = t.message || "An error occurred";
-                  v.value = u, a?.onError?.(u), e.onError?.({ err: t, message: u });
+                  const c = t.message || "An error occurred";
+                  E.value = c, n?.onError?.(c), e.onError?.({ err: t, message: c });
                 }
               } finally {
-                C.value = !1, j.value = !0;
+                C.value = !1, w.value = !0;
               }
-            }, R = a?.debounce ? J(l, a.debounce) : l;
-            let q = null;
-            return (a?.params || a?.data) && (N(() => {
-              q && q(), q = Q(
-                () => JSON.stringify({ params: a.params, data: a.data }),
+            }, q = n?.debounce ? H(f, n.debounce) : f;
+            let b = null;
+            return (n?.params || n?.data) && (Q(() => {
+              b && b(), b = z(
+                () => JSON.stringify({ params: n.params, data: n.data }),
                 () => {
-                  R();
+                  q();
                 },
                 { immediate: !1 }
               );
-            }), z(() => {
-              q && q(), P?.abort();
-            })), (a?.loadOnMount === void 0 || a.loadOnMount) && !j.value && (k.value ? (k.value = !1, l()) : R()), { result: g, errorMessage: v, zodError: E, isLoading: C, isDone: j, refetch: l };
+            }), N(() => {
+              b && b(), P?.abort();
+            })), (n?.loadOnMount === void 0 || n.loadOnMount) && !w.value && (M.value ? (M.value = !1, f()) : q()), { result: R, errorMessage: E, zodError: p, isLoading: C, isDone: w, refetch: f };
           };
-        } else typeof c == "object" && (n[m] = D(c));
+        } else typeof m == "object" && (u[v] = B(m));
     }
-    return n;
+    return u;
   }
-  const x = e.queries ?? {}, L = D(x);
+  const k = e.queries ?? {}, x = B(k);
   function S(r) {
-    const n = {};
-    for (const m in r) {
-      const c = r[m];
-      if (c)
-        if (W(c)) {
-          const s = c;
-          n[m] = (o) => {
-            const a = p(), g = p(), v = p(), E = p(!1), C = p(!1), j = p(0);
-            return { result: a, errorMessage: g, zodError: v, isLoading: E, isDone: C, uploadProgress: j, mutate: async (P) => {
-              if (!E.value) {
-                E.value = !0, g.value = void 0, j.value = 0;
+    const u = {};
+    for (const v in r) {
+      const m = r[v];
+      if (m)
+        if (X(m)) {
+          const o = m;
+          u[v] = (s) => {
+            const n = g(), R = g(), E = g(), p = g(!1), C = g(!1), w = g(0);
+            return { result: n, errorMessage: R, zodError: E, isLoading: p, isDone: C, uploadProgress: w, mutate: async (P) => {
+              if (!p.value) {
+                p.value = !0, R.value = void 0, w.value = 0;
                 try {
-                  const { data: i = {}, params: l } = P ?? {};
-                  let R = i ?? {}, q = {};
-                  if (s.isMultipart) {
-                    const f = new FormData();
-                    for (const [d, y] of Object.entries(i))
-                      y instanceof File || y instanceof Blob ? f.append(d, y) : Array.isArray(y) ? y.forEach((M) => {
-                        M instanceof File || M instanceof Blob ? f.append(d, M) : f.append(d, JSON.stringify(M));
-                      }) : typeof y == "object" && y !== null ? f.append(d, JSON.stringify(y)) : f.append(d, String(y));
-                    R = f, q["Content-Type"] = "multipart/form-data";
-                  } else s.data && s.data.parse(i);
-                  s.params && l && s.params.parse(l);
+                  const { data: i = {}, params: f } = P ?? {};
+                  let q = i ?? {}, b = {};
+                  if (o.isMultipart) {
+                    const d = new FormData();
+                    for (const [y, D] of Object.entries(i))
+                      F(d, D, y);
+                    q = d, b["Content-Type"] = "multipart/form-data";
+                  } else o.data && o.data.parse(i);
+                  o.params && f && o.params.parse(f);
                   const t = {
-                    method: s.method,
-                    url: s.path,
-                    data: R,
-                    params: l,
-                    headers: q,
-                    onUploadProgress: (f) => {
-                      if (f.total) {
-                        const d = Math.round(f.loaded * 100 / f.total);
-                        j.value = d, o?.onUploadProgress?.(d);
+                    method: o.method,
+                    url: o.path,
+                    data: q,
+                    params: f,
+                    headers: b,
+                    onUploadProgress: (d) => {
+                      if (d.total) {
+                        const y = Math.round(d.loaded * 100 / d.total);
+                        w.value = y, s?.onUploadProgress?.(y);
                       }
                     }
                   };
-                  if (s.onBeforeRequest) {
-                    const f = await s.onBeforeRequest(t);
-                    f !== void 0 && Object.assign(t, f);
+                  if (o.onBeforeRequest) {
+                    const d = await o.onBeforeRequest(t);
+                    d !== void 0 && Object.assign(t, d);
                   }
-                  if (o?.onBeforeRequest) {
-                    const f = await o.onBeforeRequest(t);
-                    f !== void 0 && Object.assign(t, f);
+                  if (s?.onBeforeRequest) {
+                    const d = await s.onBeforeRequest(t);
+                    d !== void 0 && Object.assign(t, d);
                   }
-                  g.value = void 0, v.value = void 0;
-                  const u = await h.request(t), b = s.response ? s.response.parse(u.data) : u.data;
-                  a.value = b, o?.onResult?.(b);
+                  R.value = void 0, E.value = void 0;
+                  const c = await a.request(t), j = o.response ? o.response.parse(c.data) : c.data;
+                  n.value = j, s?.onResult?.(j);
                 } catch (i) {
-                  if (i instanceof Z) {
-                    const l = i.response?.data?.message || i.message || "An error occurred";
-                    g.value = l, o?.onError?.(i), e.onError?.({ err: i, message: l });
-                  } else if (i instanceof F) {
-                    v.value = A.flattenError(i);
-                    const l = Object.keys(v.value.fieldErrors).length, R = `${Object.values(v.value.fieldErrors).at(0)}.${l > 1 ? ` (and ${l - 1} more errors)` : ""}`;
-                    g.value = R, o?.onError?.(i), o?.onZodError?.(A.flattenError(i)), e.onError?.({ err: i, message: R }), e.onZodError && e.onZodError(A.flattenError(i));
+                  if (i instanceof $) {
+                    const f = i.response?.data?.message || i.message || "An error occurred";
+                    R.value = f, s?.onError?.(i), e.onError?.({ err: i, message: f });
+                  } else if (i instanceof Z) {
+                    E.value = A.flattenError(i);
+                    const f = Object.keys(E.value.fieldErrors).length, q = `${Object.values(E.value.fieldErrors).at(0)}.${f > 1 ? ` (and ${f - 1} more errors)` : ""}`;
+                    R.value = q, s?.onError?.(i), s?.onZodError?.(A.flattenError(i)), e.onError?.({ err: i, message: q }), e.onZodError && e.onZodError(A.flattenError(i));
                   } else {
-                    const l = i.message || "An error occurred";
-                    g.value = l, o?.onError?.(i), e.onError?.({ err: i, message: l });
+                    const f = i.message || "An error occurred";
+                    R.value = f, s?.onError?.(i), e.onError?.({ err: i, message: f });
                   }
                 } finally {
-                  E.value = !1, C.value = !0;
+                  p.value = !1, C.value = !0;
                 }
               }
             } };
           };
-        } else typeof c == "object" && (n[m] = S(c));
+        } else typeof m == "object" && (u[v] = S(m));
     }
-    return n;
+    return u;
   }
-  const T = e.mutations ?? {}, $ = S(T);
+  const T = e.mutations ?? {}, L = S(T);
   return {
-    query: L,
-    mutation: $
+    query: x,
+    mutation: L
   };
 }
 function O(e) {
@@ -243,12 +256,12 @@ function te(...e) {
   return Object.assign({}, ...e);
 }
 export {
-  ie as AxiosError,
-  ae as ZodError,
-  Y as createApiClient,
+  ue as AxiosError,
+  ne as ZodError,
+  K as createApiClient,
   ee as defineMutation,
   O as defineQuery,
   te as mergeMutations,
   re as mergeQueries,
-  G as z
+  I as z
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-api-kit",
   "type": "module",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "A powerful and flexible API client for Vue 3 applications, built with TypeScript and Zod for type-safe API interactions.",
   "keywords": [
     "vue3",