@vesperjs/nuxt 0.4.0 → 0.6.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

@@ -20,21 +20,16 @@ interface MutationAPIOptions {
   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,
-    retry,
-    retryDelay,
-    retryStatusCodes,
-    timeout,
-    onRequestError,
-    onResponseError,
-  }: MutationAPIOptions,
+  options: MutationAPIOptions,
 ): Promise<{
   token: string | null | undefined
   data: T | undefined
@@ -44,34 +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}`
 
-  const options: FetchOptions<'json'> = {
+  const mutOptions: FetchOptions<'json'> = {
     baseURL: baseURL ?? baseUrl.value,
     headers,
     method,
   }
 
-  if (retry) options.retry = retry
-  if (retryDelay) options.retryDelay = retryDelay
-  if (retryStatusCodes) options.retryStatusCodes = retryStatusCodes
+  if (retry) mutOptions.retry = retry
+  if (retryDelay) mutOptions.retryDelay = retryDelay
+  if (retryStatusCodes) mutOptions.retryStatusCodes = retryStatusCodes
 
-  if (timeout) options.timeout = timeout
+  if (timeout) mutOptions.timeout = timeout
 
-  if (onRequestError) options.onRequestError = onRequestError
-  if (onResponseError) options.onResponseError = onResponseError
+  if (onRequestError) mutOptions.onRequestError = onRequestError
+  if (onResponseError) mutOptions.onResponseError = onResponseError
 
-  if (method == 'post' || method == 'put') options.body = body
+  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 { FetchContext, FetchOptions, FetchResponse } from 'ofetch'
+import type { FetchContext, FetchError, FetchOptions, FetchResponse } from 'ofetch'
 
 import { ref } from '@vue/reactivity'
 
@@ -8,14 +8,32 @@ 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
 }
 
 export type QueryAPIOptions = {
+  method?: 'get' | 'query'
   key?: MaybeRefOrGetter<string>
   query?: SearchParams
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  body?: Record<string, any> | FormData
   token?: string | null
   baseURL?: string | null
   signal?: AbortSignal
@@ -35,7 +53,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()
@@ -53,30 +86,43 @@ export const useQueryApi = async function <T = unknown, E = any>(
   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 ?? {},
     headers,
     onResponse({ response }: { response: FetchResponse<T> }) {
       tokenRef.value = response.headers.get('Authorization')?.split(' ')[1] ?? options?.token
     },
   }
 
-  if (options?.retry) getOptions.retry = options.retry
-  if (options?.retryDelay) getOptions.retryDelay = options.retryDelay
-  if (options?.retryStatusCodes) getOptions.retryStatusCodes = options.retryStatusCodes
+  if (options?.method) {
+    queryOptions.method = options.method
+
+    if (options.method === 'get') queryOptions.query = options.query ?? {}
+    if (options.method === 'query') queryOptions.body = options.body ?? {}
+  } else {
+    if (options?.query) {
+      queryOptions.method = 'get'
+      queryOptions.query = options.query
+    } else if (options?.body) {
+      queryOptions.method = 'query'
+      queryOptions.body = options.body
+    }
+  }
+
+  if (options?.retry) queryOptions.retry = options.retry
+  if (options?.retryDelay) queryOptions.retryDelay = options.retryDelay
+  if (options?.retryStatusCodes) queryOptions.retryStatusCodes = options.retryStatusCodes
 
-  if (options?.timeout) getOptions.timeout = options.timeout
+  if (options?.timeout) queryOptions.timeout = options.timeout
 
-  if (options?.signal) getOptions.signal = options.signal
+  if (options?.signal) queryOptions.signal = options.signal
 
-  if (options?.onRequestError) getOptions.onRequestError = options.onRequestError
-  if (options?.onResponseError) getOptions.onResponseError = options.onResponseError
+  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()
@@ -89,7 +135,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,7 +2,12 @@ import { parse, format } from '@formkit/tempo'
 
 import { useLocale } from './use-locale'
 
-export const useDatetimeLocal = function (fmtDT = 'YYYY/MM/DD HH:mm') {
+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'

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,7 +17,13 @@ interface TZOptions {
   value: string
 }
 
-export const useTimeZone = function (fmtDT = 'YYYY/MM/DD HH:mm') {
+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(fmtDT)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesperjs/nuxt",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "keywords": [
     "nuxt",
     "vue.js"
@@ -24,16 +24,16 @@
     "@nuxt/eslint": "1.15.2",
     "@nuxtjs/i18n": "^10.3.0",
     "@types/node": "^24.12.2",
-    "@vesperjs/shared": "0.4.0",
-    "eslint": "^10.2.1",
+    "@vesperjs/shared": "0.6.0",
+    "eslint": "^10.3.0",
     "eslint-typegen": "2.3.1",
     "nuxt": "^4.3.1",
     "ofetch": "^1.5.1",
-    "oxfmt": "^0.47.0",
+    "oxfmt": "^0.48.0",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "vue": "^3.5.33 || ^3.6.0-beta.10"
+    "vue": "^3.5.34 || ^3.6.0-beta.10"
   },
   "scripts": {
     "dev": "nuxi dev .playground",