@vesperjs/nuxt 0.3.2 → 0.4.0

package/app/composables/backend/api/use-mutation-api.ts

@@ -1,4 +1,4 @@
-import type { FetchOptions, FetchError, FetchResponse } from 'ofetch'
+import type { FetchContext, FetchOptions, FetchError, FetchResponse } from 'ofetch'
 
 import { useHttpHeaders } from './use-http-headers'
 import { useApiConstants } from './use-api-constants'
@@ -9,6 +9,12 @@ interface MutationAPIOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   body?: Record<string, any> | FormData
   token?: string | null
+  baseURL?: string | null
+  retry?: number | false
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  retryDelay?: number | ((context: FetchContext<any, 'json'>) => number)
+  retryStatusCodes?: number[]
+  timeout?: number
   onRequestError?: ({ error }: { error: Error }) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onResponseError?: ({ response }: { response: FetchResponse<any> }) => void
@@ -17,7 +23,18 @@ interface MutationAPIOptions {
 // eslint-disable-next-line
 export const useMutationApi = async function <T = unknown, E = any>(
   url: string,
-  { method, body = {}, token = null, onRequestError, onResponseError }: MutationAPIOptions,
+  {
+    method,
+    body = {},
+    token = null,
+    baseURL = null,
+    retry,
+    retryDelay,
+    retryStatusCodes,
+    timeout,
+    onRequestError,
+    onResponseError,
+  }: MutationAPIOptions,
 ): Promise<{
   token: string | null | undefined
   data: T | undefined
@@ -25,33 +42,30 @@ export const useMutationApi = async function <T = unknown, E = any>(
   pending: boolean
 }> {
   const { commonHeaders } = useHttpHeaders()
-  const { baseURL } = useApiConstants()
+  const { baseURL: baseUrl } = useApiConstants()
 
   const headers: Record<string, string> = commonHeaders.value
 
   const tokenRef = ref<string | null>()
 
-  if (token) {
-    headers.Authorization = `Bearer ${token}`
-  }
+  if (token) headers.Authorization = `Bearer ${token}`
 
   const options: FetchOptions<'json'> = {
-    baseURL: baseURL.value,
+    baseURL: baseURL ?? baseUrl.value,
     headers,
     method,
   }
 
-  if (onRequestError) {
-    options.onRequestError = onRequestError
-  }
+  if (retry) options.retry = retry
+  if (retryDelay) options.retryDelay = retryDelay
+  if (retryStatusCodes) options.retryStatusCodes = retryStatusCodes
 
-  if (onResponseError) {
-    options.onResponseError = onResponseError
-  }
+  if (timeout) options.timeout = timeout
 
-  if (method == 'post' || method == 'put') {
-    options.body = body
-  }
+  if (onRequestError) options.onRequestError = onRequestError
+  if (onResponseError) options.onResponseError = onResponseError
+
+  if (method == 'post' || method == 'put') options.body = body
 
   options.onResponse = ({ response }: { response: FetchResponse<T> }) => {
     tokenRef.value = response.headers.get('Authorization')?.split(' ')[1] ?? token

package/app/composables/backend/api/use-query-api.ts

@@ -1,6 +1,6 @@
 import { useAsyncData, useNuxtApp } from 'nuxt/app'
 
-import type { FetchOptions, FetchResponse } from 'ofetch'
+import type { FetchContext, FetchOptions, FetchResponse } from 'ofetch'
 
 import { ref } from '@vue/reactivity'
 
@@ -17,7 +17,13 @@ export type QueryAPIOptions = {
   key?: MaybeRefOrGetter<string>
   query?: SearchParams
   token?: string | null
+  baseURL?: string | null
   signal?: AbortSignal
+  retry?: number | false
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  retryDelay?: number | ((context: FetchContext<any, 'json'>) => number)
+  retryStatusCodes?: number[]
+  timeout?: number
   onRequestError?: ({ error }: { error: Error }) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onResponseError?: ({ response }: { response: FetchResponse<any> }) => void
@@ -33,7 +39,7 @@ export const useQueryApi = async function <T = unknown, E = any>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { $api } = useNuxtApp() as any
   const { commonHeaders } = useHttpHeaders()
-  const { baseURL } = useApiConstants()
+  const { baseURL: baseUrl } = useApiConstants()
 
   const key = options?.key ?? url
 
@@ -44,13 +50,11 @@ export const useQueryApi = async function <T = unknown, E = any>(
   const fresh: boolean = options?.fresh ?? false
   const cache: boolean = options?.cache ?? true
 
-  if (options?.token) {
-    headers.Authorization = `Bearer ${options.token}`
-  }
+  if (options?.token) headers.Authorization = `Bearer ${options.token}`
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getOptions: FetchOptions<'json', any> = {
-    baseURL: baseURL.value,
+    baseURL: options?.baseURL ?? baseUrl.value,
     method: 'get',
     query: options?.query ?? {},
     headers,
@@ -59,26 +63,23 @@ export const useQueryApi = async function <T = unknown, E = any>(
     },
   }
 
-  if (options?.signal) {
-    getOptions.signal = options.signal
-  }
+  if (options?.retry) getOptions.retry = options.retry
+  if (options?.retryDelay) getOptions.retryDelay = options.retryDelay
+  if (options?.retryStatusCodes) getOptions.retryStatusCodes = options.retryStatusCodes
 
-  if (options?.onRequestError) {
-    getOptions.onRequestError = options.onRequestError
-  }
+  if (options?.timeout) getOptions.timeout = options.timeout
 
-  if (options?.onResponseError) {
-    getOptions.onResponseError = options.onResponseError
-  }
+  if (options?.signal) getOptions.signal = options.signal
+
+  if (options?.onRequestError) getOptions.onRequestError = options.onRequestError
+  if (options?.onResponseError) getOptions.onResponseError = options.onResponseError
 
   if (cache) {
     const { data, error, refresh, pending } = await useAsyncData<T, E>(key, () =>
       $api(url, getOptions),
     )
 
-    if (fresh) {
-      await refresh()
-    }
+    if (fresh) await refresh()
 
     return {
       token: tokenRef.value,

package/app/composables/use-datetime-local.ts

@@ -2,19 +2,21 @@ import { parse, format } from '@formkit/tempo'
 
 import { useLocale } from './use-locale'
 
-export const useDatetimeLocal = function () {
+export const useDatetimeLocal = function (fmtDT = 'YYYY/MM/DD HH:mm') {
   const { locale } = useLocale()
 
+  const fmtISO8601 = 'YYYY-MM-DDTHH:mm'
+
   const parseDT = (datetime: string, format: string): Date => {
     return parse(datetime, format, locale.value)
   }
 
   const toISO8601 = (datetime: string): string => {
-    return format(parseDT(datetime, 'YYYY/MM/DD HH:mm'), 'YYYY-MM-DDTHH:mm', locale.value)
+    return format(parseDT(datetime, fmtDT), fmtISO8601, locale.value)
   }
 
   const fromISO8601 = (datetime: string): string => {
-    return format(parseDT(datetime, 'YYYY-MM-DDTHH:mm'), 'YYYY/MM/DD HH:mm', locale.value)
+    return format(parseDT(datetime, fmtISO8601), fmtDT, locale.value)
   }
 
   const upDTL = (datetime: string | null): string | null => {
@@ -26,9 +28,7 @@ export const useDatetimeLocal = function () {
   }
 
   const formatHTML = (datetime: string | null, fmt: string): string => {
-    return datetime
-      ? format(parse(datetime, 'YYYY/MM/DD HH:mm', locale.value), fmt, locale.value)
-      : ''
+    return datetime ? format(parse(datetime, fmtDT, locale.value), fmt, locale.value) : ''
   }
 
   return { upDTL, downDTL, toISO8601, formatHTML }

package/app/composables/use-time-zone.ts

@@ -17,10 +17,10 @@ interface TZOptions {
   value: string
 }
 
-export const useTimeZone = function () {
+export const useTimeZone = function (fmtDT = 'YYYY/MM/DD HH:mm') {
   const runtimeConfig = useRuntimeConfig()
   const { locale } = useLocale()
-  const { toISO8601, formatHTML } = useDatetimeLocal()
+  const { toISO8601, formatHTML } = useDatetimeLocal(fmtDT)
 
   const serverTimeZone = runtimeConfig.public.timeZone as string
 
@@ -47,7 +47,7 @@ export const useTimeZone = function () {
       : datetime
         ? format({
             date: tzServerDate(datetime),
-            format: 'YYYY/MM/DD HH:mm',
+            format: fmtDT,
             locale: locale.value,
             tz: timeZone.value.client,
           })
@@ -60,7 +60,7 @@ export const useTimeZone = function () {
       : datetime
         ? format({
             date: tzClientDate(datetime),
-            format: 'YYYY/MM/DD HH:mm',
+            format: fmtDT,
             locale: locale.value,
             tz: timeZone.value.server,
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesperjs/nuxt",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "keywords": [
     "nuxt",
     "vue.js"
@@ -22,14 +22,14 @@
   "devDependencies": {
     "@formkit/tempo": "^1.0.0",
     "@nuxt/eslint": "1.15.2",
-    "@nuxtjs/i18n": "^10.2.4",
+    "@nuxtjs/i18n": "^10.3.0",
     "@types/node": "^24.12.2",
-    "@vesperjs/shared": "0.3.2",
+    "@vesperjs/shared": "0.4.0",
     "eslint": "^10.2.1",
     "eslint-typegen": "2.3.1",
     "nuxt": "^4.3.1",
     "ofetch": "^1.5.1",
-    "oxfmt": "^0.46.0",
+    "oxfmt": "^0.47.0",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {