@vesperjs/nuxt 0.3.3 → 0.5.0

package/app/composables/backend/api/create-fetch.ts

@@ -1,3 +1,5 @@
-export const createFetch = function () {
-  return $fetch.create({})
+import type { $Fetch } from 'ofetch'
+
+export const createFetch = function (): $Fetch {
+  return $fetch.create({}) as $Fetch
 }

package/app/composables/backend/api/create-request-fetch.ts

@@ -1,5 +1,6 @@
 import { useRequestFetch } from 'nuxt/app'
+import type { $Fetch } from 'ofetch'
 
-export const createRequestFetch = function () {
-  return useRequestFetch()
+export const createRequestFetch = function (): $Fetch {
+  return useRequestFetch() as $Fetch
 }

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

@@ -1,15 +1,15 @@
 import { useRuntimeConfig } from 'nuxt/app'
 
-import { computed } from '@vue/reactivity'
-
-export const useApiConstants = function () {
+export const useApiConstants = function (): {
+  baseURL: ComputedRef<string>
+} {
   const runtimeConfig = useRuntimeConfig()
 
   const baseOrigin = computed<string | undefined>(() => {
     if (import.meta.client) {
       return runtimeConfig.public.backendApiOrigin as string
     } else if (import.meta.server) {
-      return runtimeConfig.backendApiOrigin as string
+      return (runtimeConfig.backendApiOrigin ?? runtimeConfig.public.backendApiOrigin) as string
     }
   })
 

package/app/composables/backend/api/use-http-headers.ts

@@ -3,7 +3,9 @@ import { computed, type Ref } from '@vue/reactivity'
 import { useLocale } from '../../use-locale'
 import { useTimeZone } from '../../use-time-zone'
 
-export const useHttpHeaders = function () {
+export const useHttpHeaders = function (): {
+  commonHeaders: Ref<Record<string, string>, Record<string, string>>
+} {
   const { locale } = useLocale()
   const { timeZone } = useTimeZone()
 

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'
@@ -10,22 +10,26 @@ interface MutationAPIOptions {
   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
 }
 
+/**
+ *
+ * @param url
+ * @param options
+ * @returns
+ */
 // eslint-disable-next-line
 export const useMutationApi = async function <T = unknown, E = any>(
   url: string,
-  {
-    method,
-    body = {},
-    token = null,
-    baseURL = null,
-    onRequestError,
-    onResponseError,
-  }: MutationAPIOptions,
+  options: MutationAPIOptions,
 ): Promise<{
   token: string | null | undefined
   data: T | undefined
@@ -35,37 +39,45 @@ export const useMutationApi = async function <T = unknown, E = any>(
   const { commonHeaders } = useHttpHeaders()
   const { baseURL: baseUrl } = useApiConstants()
 
+  const method = options.method
+  const body = options.body ?? {}
+  const token = options.token ?? null
+  const baseURL = options.baseURL ?? null
+  const retry = options.retry
+  const retryDelay = options.retryDelay
+  const retryStatusCodes = options.retryStatusCodes
+  const timeout = options.timeout
+  const onRequestError = options.onRequestError
+  const onResponseError = options.onResponseError
+
   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'> = {
+  const mutOptions: FetchOptions<'json'> = {
     baseURL: baseURL ?? baseUrl.value,
     headers,
     method,
   }
 
-  if (onRequestError) {
-    options.onRequestError = onRequestError
-  }
+  if (retry) mutOptions.retry = retry
+  if (retryDelay) mutOptions.retryDelay = retryDelay
+  if (retryStatusCodes) mutOptions.retryStatusCodes = retryStatusCodes
 
-  if (onResponseError) {
-    options.onResponseError = onResponseError
-  }
+  if (timeout) mutOptions.timeout = timeout
 
-  if (method == 'post' || method == 'put') {
-    options.body = body
-  }
+  if (onRequestError) mutOptions.onRequestError = onRequestError
+  if (onResponseError) mutOptions.onResponseError = onResponseError
+
+  if (method == 'post' || method == 'put') mutOptions.body = body
 
-  options.onResponse = ({ response }: { response: FetchResponse<T> }) => {
+  mutOptions.onResponse = ({ response }: { response: FetchResponse<T> }) => {
     tokenRef.value = response.headers.get('Authorization')?.split(' ')[1] ?? token
   }
 
-  const { data, error, pending } = await useOFetch<T, E>(url, options)
+  const { data, error, pending } = await useOFetch<T, E>(url, mutOptions)
 
   return { token: tokenRef.value, data, error, pending }
 }

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

@@ -4,7 +4,11 @@ import type { $Fetch, FetchOptions, FetchError } from 'ofetch'
 export const useOFetch = async function <T = unknown, E = any>(
   url: string,
   options?: FetchOptions<'json'>,
-) {
+): Promise<{
+  data: T | undefined
+  error: FetchError<E> | undefined
+  pending: boolean
+}> {
   const { $api } = useNuxtApp()
 
   const pending = ref(true)

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

@@ -1,6 +1,6 @@
-import { useAsyncData, useNuxtApp } from 'nuxt/app'
+import { useAsyncData, useNuxtApp, type NuxtError } from 'nuxt/app'
 
-import type { FetchOptions, FetchResponse } from 'ofetch'
+import type { FetchContext, FetchError, FetchOptions, FetchResponse } from 'ofetch'
 
 import { ref } from '@vue/reactivity'
 
@@ -8,6 +8,21 @@ import { useHttpHeaders } from './use-http-headers'
 import { useApiConstants } from './use-api-constants'
 import { useOFetch } from './use-ofetch'
 
+type KeysOf<T> = Array<T extends T ? (keyof T extends string ? keyof T : never) : never>
+
+type PickFrom<T, K extends Array<string>> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends Array<any>
+    ? T
+    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      T extends Record<string, any>
+      ? keyof T extends K[number]
+        ? T
+        : K[number] extends never
+          ? T
+          : Pick<T, K[number]>
+      : T
+
 interface SearchParams {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any
@@ -19,6 +34,11 @@ export type QueryAPIOptions = {
   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
@@ -30,7 +50,22 @@ export type QueryAPIOptions = {
 export const useQueryApi = async function <T = unknown, E = any>(
   url: string,
   options?: QueryAPIOptions,
-) {
+): Promise<
+  | {
+      token: string | null | undefined
+      data: PickFrom<T, KeysOf<T>> | undefined
+      error: (E extends Error | NuxtError<unknown> ? E : NuxtError<E>) | undefined
+      refresh: (opts?: never) => Promise<void>
+      pending: boolean
+    }
+  | {
+      token: string | null | undefined
+      data: T | undefined
+      error: FetchError<E> | undefined
+      pending: boolean
+      refresh?: undefined
+    }
+> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { $api } = useNuxtApp() as any
   const { commonHeaders } = useHttpHeaders()
@@ -45,12 +80,10 @@ 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> = {
+  const queryOptions: FetchOptions<'json', any> = {
     baseURL: options?.baseURL ?? baseUrl.value,
     method: 'get',
     query: options?.query ?? {},
@@ -60,26 +93,23 @@ export const useQueryApi = async function <T = unknown, E = any>(
     },
   }
 
-  if (options?.signal) {
-    getOptions.signal = options.signal
-  }
+  if (options?.retry) queryOptions.retry = options.retry
+  if (options?.retryDelay) queryOptions.retryDelay = options.retryDelay
+  if (options?.retryStatusCodes) queryOptions.retryStatusCodes = options.retryStatusCodes
 
-  if (options?.onRequestError) {
-    getOptions.onRequestError = options.onRequestError
-  }
+  if (options?.timeout) queryOptions.timeout = options.timeout
 
-  if (options?.onResponseError) {
-    getOptions.onResponseError = options.onResponseError
-  }
+  if (options?.signal) queryOptions.signal = options.signal
+
+  if (options?.onRequestError) queryOptions.onRequestError = options.onRequestError
+  if (options?.onResponseError) queryOptions.onResponseError = options.onResponseError
 
   if (cache) {
     const { data, error, refresh, pending } = await useAsyncData<T, E>(key, () =>
-      $api(url, getOptions),
+      $api(url, queryOptions),
     )
 
-    if (fresh) {
-      await refresh()
-    }
+    if (fresh) await refresh()
 
     return {
       token: tokenRef.value,
@@ -89,7 +119,7 @@ export const useQueryApi = async function <T = unknown, E = any>(
       pending: pending.value,
     }
   } else {
-    const { data, error, pending } = await useOFetch<T, E>(url, getOptions)
+    const { data, error, pending } = await useOFetch<T, E>(url, queryOptions)
 
     return { token: tokenRef.value, data, error, pending }
   }

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

@@ -2,19 +2,26 @@ 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'): {
+  upDTL: (datetime: string | null) => string | null
+  downDTL: (datetime: string | null) => string
+  toISO8601: (datetime: string) => string
+  formatHTML: (datetime: string | null, fmt: string) => string
+} {
   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 +33,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-locale.ts

@@ -1,10 +1,15 @@
 import { useNuxtApp } from 'nuxt/app'
 import { useBrowserLocale } from '#i18n'
 
-export const useLocale = function () {
+export const useLocale = function (): {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  locale: any
+  autodetect: () => void
+} {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { $i18n } = useNuxtApp() as any
   const { locale, availableLocales, fallbackLocale } = $i18n
+
   const autodetect = (): void => {
     const browserLocale: string | null = useBrowserLocale()?.split('-')[0] ?? null
     // console.log(browserLocale)

package/app/composables/use-more-scroll.ts

@@ -8,7 +8,16 @@ export const useMoreScroll = function ({
   key?: string | null
   page: number
   pages: number
-}) {
+}): {
+  currentPage: Ref<number>
+  pagePrev: Ref<boolean>
+  pageNext: Ref<boolean>
+  minPage: Ref<number>
+  maxPage: Ref<number>
+  init: () => void
+  decrement: () => void
+  increment: () => void
+} {
   const toFirstUpper = (str: string): string => {
     return str.charAt(0).toUpperCase() + str.slice(1)
   }

package/app/composables/use-referer.ts

@@ -1,6 +1,8 @@
 import { useState } from 'nuxt/app'
 
-export const useReferer = function () {
+export const useReferer = function (): {
+  referers: Ref<Record<string, string>>
+} {
   const referers = useState<Record<string, string>>('referers', () => {
     return {}
   })

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

@@ -17,10 +17,16 @@ interface TZOptions {
   value: string
 }
 
-export const useTimeZone = function () {
+export const useTimeZone = function (fmtDT = 'YYYY/MM/DD HH:mm'): {
+  timeZone: ComputedRef<TimeZone>
+  tzOptions: ComputedRef<TZOptions[]>
+  upTZ: (datetime: string | null) => string
+  downTZ: (datetime: string | null) => string
+  formatHtmlTZ: (datetime: string | null, fmt: string) => string
+} {
   const runtimeConfig = useRuntimeConfig()
   const { locale } = useLocale()
-  const { toISO8601, formatHTML } = useDatetimeLocal()
+  const { toISO8601, formatHTML } = useDatetimeLocal(fmtDT)
 
   const serverTimeZone = runtimeConfig.public.timeZone as string
 
@@ -47,7 +53,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 +66,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.3",
+  "version": "0.5.0",
   "keywords": [
     "nuxt",
     "vue.js"
@@ -24,8 +24,8 @@
     "@nuxt/eslint": "1.15.2",
     "@nuxtjs/i18n": "^10.3.0",
     "@types/node": "^24.12.2",
-    "@vesperjs/shared": "0.3.3",
-    "eslint": "^10.2.1",
+    "@vesperjs/shared": "0.5.0",
+    "eslint": "^10.3.0",
     "eslint-typegen": "2.3.1",
     "nuxt": "^4.3.1",
     "ofetch": "^1.5.1",