@cloudcome/utils-vue 1.4.0 → 1.6.0

package/dist/async.cjs

@@ -3,10 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("@cloudcome/utils-core/type");
 const vue = require("vue");
 function useAsync(fn, options) {
+  const times = vue.ref(0);
   const loading = vue.ref(false);
   const data = vue.ref(null);
   const error = vue.ref(null);
   const state = vue.computed(() => ({
+    times: times.value,
     loading: loading.value,
     data: data.value,
     error: error.value
@@ -16,6 +18,7 @@ function useAsync(fn, options) {
     loading.value = true;
     error.value = null;
     try {
+      times.value++;
       (_a = options == null ? void 0 : options.onBefore) == null ? void 0 : _a.call(options, ...inputs);
       data.value = await fn(...inputs);
       (_b = options == null ? void 0 : options.onSuccess) == null ? void 0 : _b.call(options, data.value, ...inputs);

package/dist/async.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"async.cjs","sources":["../src/async.ts"],"sourcesContent":["import { isFunction, isNullish } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport { type ComputedGetter, type ComputedRef, type Ref, computed, nextTick } from 'vue';\nimport { onMounted, ref } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n  /**\n   * 异步操作开始前的回调函数。\n   * 可用于执行初始化逻辑或显示加载状态。\n   */\n  onBefore?: (...inputs: I) => unknown;\n\n  /**\n   * 异步操作成功后的回调函数。\n   * @param data 异步操作返回的数据。\n   * 可用于处理成功后的数据更新或通知。\n   */\n  onSuccess?: (data: O, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作失败后的回调函数。\n   * @param err 异步操作抛出的错误。\n   * 可用于记录错误日志或显示错误提示。\n   */\n  onError?: (err: unknown, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作结束后的回调函数（无论成功或失败）。\n   * 可用于清理操作或触发后续逻辑。\n   */\n  onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState<O> = {\n  loading: boolean;\n  error: unknown;\n  data: O | null;\n};\n\nexport type UseAsyncReturns<I extends AnyArray, O> = {\n  state: ComputedRef<UseAsyncState<O>>;\n  loading: Ref<boolean>;\n  data: Ref<O | null>;\n  error: Ref<unknown>;\n  run: (...inputs: I) => void;\n  runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数，接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象：\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n *   const response = await fetch(`/api/user/${id}`);\n *   return response.json();\n * }, {\n *   onBefore: () => console.log('Fetching user data...'),\n *   onSuccess: (data) => console.log('User data fetched:', data),\n *   onError: (err) => console.error('Failed to fetch user data:', err),\n *   onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n  fn: (...inputs: I) => Promise<O>,\n  options?: UseAsyncOptions<I, O>,\n): UseAsyncReturns<I, O> {\n  const loading = ref(false);\n  const data = ref<O | null>(null) as Ref<O | null>;\n  const error = ref<unknown>(null);\n  const state = computed(() => ({\n    loading: loading.value,\n    data: data.value,\n    error: error.value,\n  }));\n\n  const runAsync = async (...inputs: I): Promise<O> => {\n    loading.value = true;\n    error.value = null;\n\n    try {\n      options?.onBefore?.(...inputs);\n      data.value = await fn(...inputs);\n      options?.onSuccess?.(data.value, ...inputs);\n      return data.value;\n    } catch (err) {\n      error.value = err;\n      options?.onError?.(err, ...inputs);\n      throw err;\n    } finally {\n      loading.value = false;\n      options?.onAfter?.(...inputs);\n    }\n  };\n\n  const run = (...inputs: I) => {\n    runAsync(...inputs).then();\n  };\n\n  return {\n    state,\n    /**\n     * 是否正在加载。\n     */\n    loading,\n\n    /**\n     * 异步操作返回的数据。\n     */\n    data,\n\n    /**\n     * 异步操作抛出的错误。\n     */\n    error,\n\n    /**\n     * 执行异步操作并返回 Promise。\n     * @param inputs 异步函数的参数。\n     * @returns 异步操作的结果。\n     */\n    runAsync,\n\n    /**\n     * 执行异步操作但不返回 Promise。\n     * @param inputs 异步函数的参数。\n     */\n    run,\n  };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"names":["ref","computed"],"mappings":";;;;AA6EgB,SAAA,SACd,IACA,SACuB;AACjB,QAAA,UAAUA,QAAI,KAAK;AACnB,QAAA,OAAOA,QAAc,IAAI;AACzB,QAAA,QAAQA,QAAa,IAAI;AACzB,QAAA,QAAQC,IAAAA,SAAS,OAAO;AAAA,IAC5B,SAAS,QAAQ;AAAA,IACjB,MAAM,KAAK;AAAA,IACX,OAAO,MAAM;AAAA,EAAA,EACb;AAEI,QAAA,WAAW,UAAU,WAA0B;;AACnD,YAAQ,QAAQ;AAChB,UAAM,QAAQ;AAEV,QAAA;AACO,+CAAA,aAAA,iCAAW,GAAG;AACvB,WAAK,QAAQ,MAAM,GAAG,GAAG,MAAM;AAC/B,+CAAS,cAAT,iCAAqB,KAAK,OAAO,GAAG;AACpC,aAAO,KAAK;AAAA,aACL,KAAK;AACZ,YAAM,QAAQ;AACL,+CAAA,YAAA,iCAAU,KAAK,GAAG;AACrB,YAAA;AAAA,IAAA,UACN;AACA,cAAQ,QAAQ;AACP,+CAAA,YAAA,iCAAU,GAAG;AAAA,IAAM;AAAA,EAEhC;AAEM,QAAA,MAAM,IAAI,WAAc;AACnB,aAAA,GAAG,MAAM,EAAE,KAAK;AAAA,EAC3B;AAEO,SAAA;AAAA,IACL;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACF;AACF;;"}
+{"version":3,"file":"async.cjs","sources":["../src/async.ts"],"sourcesContent":["import { isFunction, isNullish } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport { type ComputedGetter, type ComputedRef, type Ref, computed, nextTick } from 'vue';\nimport { onMounted, ref } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n  /**\n   * 异步操作开始前的回调函数。\n   * 可用于执行初始化逻辑或显示加载状态。\n   */\n  onBefore?: (...inputs: I) => unknown;\n\n  /**\n   * 异步操作成功后的回调函数。\n   * @param data 异步操作返回的数据。\n   * 可用于处理成功后的数据更新或通知。\n   */\n  onSuccess?: (data: O, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作失败后的回调函数。\n   * @param err 异步操作抛出的错误。\n   * 可用于记录错误日志或显示错误提示。\n   */\n  onError?: (err: unknown, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作结束后的回调函数（无论成功或失败）。\n   * 可用于清理操作或触发后续逻辑。\n   */\n  onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState<O> = {\n  times: number;\n  loading: boolean;\n  error: unknown;\n  data: O | null;\n};\n\nexport type UseAsyncReturns<I extends AnyArray, O> = {\n  state: ComputedRef<UseAsyncState<O>>;\n  loading: Ref<boolean>;\n  data: Ref<O | null>;\n  error: Ref<unknown>;\n  run: (...inputs: I) => void;\n  runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数，接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象：\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n *   const response = await fetch(`/api/user/${id}`);\n *   return response.json();\n * }, {\n *   onBefore: () => console.log('Fetching user data...'),\n *   onSuccess: (data) => console.log('User data fetched:', data),\n *   onError: (err) => console.error('Failed to fetch user data:', err),\n *   onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n  fn: (...inputs: I) => Promise<O>,\n  options?: UseAsyncOptions<I, O>,\n): UseAsyncReturns<I, O> {\n  const times = ref(0);\n  const loading = ref(false);\n  const data = ref<O | null>(null) as Ref<O | null>;\n  const error = ref<unknown>(null);\n  const state = computed(() => ({\n    times: times.value,\n    loading: loading.value,\n    data: data.value,\n    error: error.value,\n  }));\n\n  const runAsync = async (...inputs: I): Promise<O> => {\n    loading.value = true;\n    error.value = null;\n\n    try {\n      times.value++;\n      options?.onBefore?.(...inputs);\n      data.value = await fn(...inputs);\n      options?.onSuccess?.(data.value, ...inputs);\n      return data.value;\n    } catch (err) {\n      error.value = err;\n      options?.onError?.(err, ...inputs);\n      throw err;\n    } finally {\n      loading.value = false;\n      options?.onAfter?.(...inputs);\n    }\n  };\n\n  const run = (...inputs: I) => {\n    runAsync(...inputs).then();\n  };\n\n  return {\n    state,\n    /**\n     * 是否正在加载。\n     */\n    loading,\n\n    /**\n     * 异步操作返回的数据。\n     */\n    data,\n\n    /**\n     * 异步操作抛出的错误。\n     */\n    error,\n\n    /**\n     * 执行异步操作并返回 Promise。\n     * @param inputs 异步函数的参数。\n     * @returns 异步操作的结果。\n     */\n    runAsync,\n\n    /**\n     * 执行异步操作但不返回 Promise。\n     * @param inputs 异步函数的参数。\n     */\n    run,\n  };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"names":["ref","computed"],"mappings":";;;;AA8EgB,SAAA,SACd,IACA,SACuB;AACjB,QAAA,QAAQA,QAAI,CAAC;AACb,QAAA,UAAUA,QAAI,KAAK;AACnB,QAAA,OAAOA,QAAc,IAAI;AACzB,QAAA,QAAQA,QAAa,IAAI;AACzB,QAAA,QAAQC,IAAAA,SAAS,OAAO;AAAA,IAC5B,OAAO,MAAM;AAAA,IACb,SAAS,QAAQ;AAAA,IACjB,MAAM,KAAK;AAAA,IACX,OAAO,MAAM;AAAA,EAAA,EACb;AAEI,QAAA,WAAW,UAAU,WAA0B;;AACnD,YAAQ,QAAQ;AAChB,UAAM,QAAQ;AAEV,QAAA;AACI,YAAA;AACG,+CAAA,aAAA,iCAAW,GAAG;AACvB,WAAK,QAAQ,MAAM,GAAG,GAAG,MAAM;AAC/B,+CAAS,cAAT,iCAAqB,KAAK,OAAO,GAAG;AACpC,aAAO,KAAK;AAAA,aACL,KAAK;AACZ,YAAM,QAAQ;AACL,+CAAA,YAAA,iCAAU,KAAK,GAAG;AACrB,YAAA;AAAA,IAAA,UACN;AACA,cAAQ,QAAQ;AACP,+CAAA,YAAA,iCAAU,GAAG;AAAA,IAAM;AAAA,EAEhC;AAEM,QAAA,MAAM,IAAI,WAAc;AACnB,aAAA,GAAG,MAAM,EAAE,KAAK;AAAA,EAC3B;AAEO,SAAA;AAAA,IACL;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACF;AACF;;"}

package/dist/async.d.ts

@@ -30,6 +30,7 @@ export type UseAsyncOptions<I extends AnyArray, O> = {
     onAfter?: (...inputs: I) => unknown;
 };
 export type UseAsyncState<O> = {
+    times: number;
     loading: boolean;
     error: unknown;
     data: O | null;

package/dist/async.mjs

@@ -1,10 +1,12 @@
 import "@cloudcome/utils-core/type";
 import { ref, computed } from "vue";
 function useAsync(fn, options) {
+  const times = ref(0);
   const loading = ref(false);
   const data = ref(null);
   const error = ref(null);
   const state = computed(() => ({
+    times: times.value,
     loading: loading.value,
     data: data.value,
     error: error.value
@@ -14,6 +16,7 @@ function useAsync(fn, options) {
     loading.value = true;
     error.value = null;
     try {
+      times.value++;
       (_a = options == null ? void 0 : options.onBefore) == null ? void 0 : _a.call(options, ...inputs);
       data.value = await fn(...inputs);
       (_b = options == null ? void 0 : options.onSuccess) == null ? void 0 : _b.call(options, data.value, ...inputs);

package/dist/async.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"async.mjs","sources":["../src/async.ts"],"sourcesContent":["import { isFunction, isNullish } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport { type ComputedGetter, type ComputedRef, type Ref, computed, nextTick } from 'vue';\nimport { onMounted, ref } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n  /**\n   * 异步操作开始前的回调函数。\n   * 可用于执行初始化逻辑或显示加载状态。\n   */\n  onBefore?: (...inputs: I) => unknown;\n\n  /**\n   * 异步操作成功后的回调函数。\n   * @param data 异步操作返回的数据。\n   * 可用于处理成功后的数据更新或通知。\n   */\n  onSuccess?: (data: O, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作失败后的回调函数。\n   * @param err 异步操作抛出的错误。\n   * 可用于记录错误日志或显示错误提示。\n   */\n  onError?: (err: unknown, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作结束后的回调函数（无论成功或失败）。\n   * 可用于清理操作或触发后续逻辑。\n   */\n  onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState<O> = {\n  loading: boolean;\n  error: unknown;\n  data: O | null;\n};\n\nexport type UseAsyncReturns<I extends AnyArray, O> = {\n  state: ComputedRef<UseAsyncState<O>>;\n  loading: Ref<boolean>;\n  data: Ref<O | null>;\n  error: Ref<unknown>;\n  run: (...inputs: I) => void;\n  runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数，接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象：\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n *   const response = await fetch(`/api/user/${id}`);\n *   return response.json();\n * }, {\n *   onBefore: () => console.log('Fetching user data...'),\n *   onSuccess: (data) => console.log('User data fetched:', data),\n *   onError: (err) => console.error('Failed to fetch user data:', err),\n *   onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n  fn: (...inputs: I) => Promise<O>,\n  options?: UseAsyncOptions<I, O>,\n): UseAsyncReturns<I, O> {\n  const loading = ref(false);\n  const data = ref<O | null>(null) as Ref<O | null>;\n  const error = ref<unknown>(null);\n  const state = computed(() => ({\n    loading: loading.value,\n    data: data.value,\n    error: error.value,\n  }));\n\n  const runAsync = async (...inputs: I): Promise<O> => {\n    loading.value = true;\n    error.value = null;\n\n    try {\n      options?.onBefore?.(...inputs);\n      data.value = await fn(...inputs);\n      options?.onSuccess?.(data.value, ...inputs);\n      return data.value;\n    } catch (err) {\n      error.value = err;\n      options?.onError?.(err, ...inputs);\n      throw err;\n    } finally {\n      loading.value = false;\n      options?.onAfter?.(...inputs);\n    }\n  };\n\n  const run = (...inputs: I) => {\n    runAsync(...inputs).then();\n  };\n\n  return {\n    state,\n    /**\n     * 是否正在加载。\n     */\n    loading,\n\n    /**\n     * 异步操作返回的数据。\n     */\n    data,\n\n    /**\n     * 异步操作抛出的错误。\n     */\n    error,\n\n    /**\n     * 执行异步操作并返回 Promise。\n     * @param inputs 异步函数的参数。\n     * @returns 异步操作的结果。\n     */\n    runAsync,\n\n    /**\n     * 执行异步操作但不返回 Promise。\n     * @param inputs 异步函数的参数。\n     */\n    run,\n  };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"names":[],"mappings":";;AA6EgB,SAAA,SACd,IACA,SACuB;AACjB,QAAA,UAAU,IAAI,KAAK;AACnB,QAAA,OAAO,IAAc,IAAI;AACzB,QAAA,QAAQ,IAAa,IAAI;AACzB,QAAA,QAAQ,SAAS,OAAO;AAAA,IAC5B,SAAS,QAAQ;AAAA,IACjB,MAAM,KAAK;AAAA,IACX,OAAO,MAAM;AAAA,EAAA,EACb;AAEI,QAAA,WAAW,UAAU,WAA0B;;AACnD,YAAQ,QAAQ;AAChB,UAAM,QAAQ;AAEV,QAAA;AACO,+CAAA,aAAA,iCAAW,GAAG;AACvB,WAAK,QAAQ,MAAM,GAAG,GAAG,MAAM;AAC/B,+CAAS,cAAT,iCAAqB,KAAK,OAAO,GAAG;AACpC,aAAO,KAAK;AAAA,aACL,KAAK;AACZ,YAAM,QAAQ;AACL,+CAAA,YAAA,iCAAU,KAAK,GAAG;AACrB,YAAA;AAAA,IAAA,UACN;AACA,cAAQ,QAAQ;AACP,+CAAA,YAAA,iCAAU,GAAG;AAAA,IAAM;AAAA,EAEhC;AAEM,QAAA,MAAM,IAAI,WAAc;AACnB,aAAA,GAAG,MAAM,EAAE,KAAK;AAAA,EAC3B;AAEO,SAAA;AAAA,IACL;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACF;AACF;"}
+{"version":3,"file":"async.mjs","sources":["../src/async.ts"],"sourcesContent":["import { isFunction, isNullish } from '@cloudcome/utils-core/type';\nimport type { AnyArray, MaybeCallable } from '@cloudcome/utils-core/types';\nimport { type ComputedGetter, type ComputedRef, type Ref, computed, nextTick } from 'vue';\nimport { onMounted, ref } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n  /**\n   * 异步操作开始前的回调函数。\n   * 可用于执行初始化逻辑或显示加载状态。\n   */\n  onBefore?: (...inputs: I) => unknown;\n\n  /**\n   * 异步操作成功后的回调函数。\n   * @param data 异步操作返回的数据。\n   * 可用于处理成功后的数据更新或通知。\n   */\n  onSuccess?: (data: O, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作失败后的回调函数。\n   * @param err 异步操作抛出的错误。\n   * 可用于记录错误日志或显示错误提示。\n   */\n  onError?: (err: unknown, ...inputs: I) => unknown;\n\n  /**\n   * 异步操作结束后的回调函数（无论成功或失败）。\n   * 可用于清理操作或触发后续逻辑。\n   */\n  onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState<O> = {\n  times: number;\n  loading: boolean;\n  error: unknown;\n  data: O | null;\n};\n\nexport type UseAsyncReturns<I extends AnyArray, O> = {\n  state: ComputedRef<UseAsyncState<O>>;\n  loading: Ref<boolean>;\n  data: Ref<O | null>;\n  error: Ref<unknown>;\n  run: (...inputs: I) => void;\n  runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数，接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象：\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n *   const response = await fetch(`/api/user/${id}`);\n *   return response.json();\n * }, {\n *   onBefore: () => console.log('Fetching user data...'),\n *   onSuccess: (data) => console.log('User data fetched:', data),\n *   onError: (err) => console.error('Failed to fetch user data:', err),\n *   onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n  fn: (...inputs: I) => Promise<O>,\n  options?: UseAsyncOptions<I, O>,\n): UseAsyncReturns<I, O> {\n  const times = ref(0);\n  const loading = ref(false);\n  const data = ref<O | null>(null) as Ref<O | null>;\n  const error = ref<unknown>(null);\n  const state = computed(() => ({\n    times: times.value,\n    loading: loading.value,\n    data: data.value,\n    error: error.value,\n  }));\n\n  const runAsync = async (...inputs: I): Promise<O> => {\n    loading.value = true;\n    error.value = null;\n\n    try {\n      times.value++;\n      options?.onBefore?.(...inputs);\n      data.value = await fn(...inputs);\n      options?.onSuccess?.(data.value, ...inputs);\n      return data.value;\n    } catch (err) {\n      error.value = err;\n      options?.onError?.(err, ...inputs);\n      throw err;\n    } finally {\n      loading.value = false;\n      options?.onAfter?.(...inputs);\n    }\n  };\n\n  const run = (...inputs: I) => {\n    runAsync(...inputs).then();\n  };\n\n  return {\n    state,\n    /**\n     * 是否正在加载。\n     */\n    loading,\n\n    /**\n     * 异步操作返回的数据。\n     */\n    data,\n\n    /**\n     * 异步操作抛出的错误。\n     */\n    error,\n\n    /**\n     * 执行异步操作并返回 Promise。\n     * @param inputs 异步函数的参数。\n     * @returns 异步操作的结果。\n     */\n    runAsync,\n\n    /**\n     * 执行异步操作但不返回 Promise。\n     * @param inputs 异步函数的参数。\n     */\n    run,\n  };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"names":[],"mappings":";;AA8EgB,SAAA,SACd,IACA,SACuB;AACjB,QAAA,QAAQ,IAAI,CAAC;AACb,QAAA,UAAU,IAAI,KAAK;AACnB,QAAA,OAAO,IAAc,IAAI;AACzB,QAAA,QAAQ,IAAa,IAAI;AACzB,QAAA,QAAQ,SAAS,OAAO;AAAA,IAC5B,OAAO,MAAM;AAAA,IACb,SAAS,QAAQ;AAAA,IACjB,MAAM,KAAK;AAAA,IACX,OAAO,MAAM;AAAA,EAAA,EACb;AAEI,QAAA,WAAW,UAAU,WAA0B;;AACnD,YAAQ,QAAQ;AAChB,UAAM,QAAQ;AAEV,QAAA;AACI,YAAA;AACG,+CAAA,aAAA,iCAAW,GAAG;AACvB,WAAK,QAAQ,MAAM,GAAG,GAAG,MAAM;AAC/B,+CAAS,cAAT,iCAAqB,KAAK,OAAO,GAAG;AACpC,aAAO,KAAK;AAAA,aACL,KAAK;AACZ,YAAM,QAAQ;AACL,+CAAA,YAAA,iCAAU,KAAK,GAAG;AACrB,YAAA;AAAA,IAAA,UACN;AACA,cAAQ,QAAQ;AACP,+CAAA,YAAA,iCAAU,GAAG;AAAA,IAAM;AAAA,EAEhC;AAEM,QAAA,MAAM,IAAI,WAAc;AACnB,aAAA,GAAG,MAAM,EAAE,KAAK;AAAA,EAC3B;AAEO,SAAA;AAAA,IACL;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACF;AACF;"}

package/dist/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const VERSION = "1.3.1";
+const VERSION = "1.5.0";
 exports.VERSION = VERSION;
 //# sourceMappingURL=index.cjs.map

package/dist/index.mjs

@@ -1,4 +1,4 @@
-const VERSION = "1.3.1";
+const VERSION = "1.5.0";
 export {
   VERSION
 };

package/dist/lazy.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+function useLazyValue(boolean, delay) {
+  const scope = vue.effectScope();
+  const lazyBoolean = vue.ref(boolean.value);
+  let changedAt = 0;
+  let t;
+  scope.run(() => {
+    vue.watch(boolean, (value) => {
+      const delayValue = vue.toValue(delay) || 100;
+      clearTimeout(t);
+      if (changedAt > 0 && Date.now() - changedAt > delayValue) {
+        lazyBoolean.value = value;
+      } else {
+        t = setTimeout(() => {
+          lazyBoolean.value = value;
+        }, delayValue);
+      }
+      changedAt = Date.now();
+    });
+  });
+  vue.onScopeDispose(() => {
+    clearTimeout(t);
+    scope.stop();
+  });
+  return vue.computed(() => {
+    return lazyBoolean.value;
+  });
+}
+exports.useLazyValue = useLazyValue;
+//# sourceMappingURL=lazy.cjs.map

package/dist/lazy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.cjs","sources":["../src/lazy.ts"],"sourcesContent":["import { type Ref, computed, effectScope, onScopeDispose, ref, toValue, watch } from 'vue';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值，当原始值发生变化时，\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化，\n * 则会重新计算延迟时间。\n *\n * @param boolean 原始响应式值，类型为Ref<T>\n * @param delay 延迟时间，可以是数字或响应式数字，默认为100毫秒\n * @returns 返回一个计算属性，其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(boolean: Ref<T>, delay?: number | Ref<number>) {\n  const scope = effectScope();\n  const lazyBoolean = ref(boolean.value);\n  let changedAt = 0;\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  let t: any;\n\n  scope.run(() => {\n    watch(boolean, (value) => {\n      const delayValue = toValue(delay) || 100;\n      clearTimeout(t);\n\n      if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n        lazyBoolean.value = value;\n      } else {\n        t = setTimeout(() => {\n          lazyBoolean.value = value;\n        }, delayValue);\n      }\n\n      changedAt = Date.now();\n    });\n  });\n\n  onScopeDispose(() => {\n    clearTimeout(t);\n    scope.stop();\n  });\n\n  return computed<T>(() => {\n    return lazyBoolean.value;\n  });\n}\n"],"names":["effectScope","ref","watch","toValue","onScopeDispose","computed"],"mappings":";;;AAagB,SAAA,aAAgB,SAAiB,OAA8B;AAC7E,QAAM,QAAQA,IAAAA,YAAY;AACpB,QAAA,cAAcC,IAAAA,IAAI,QAAQ,KAAK;AACrC,MAAI,YAAY;AAEZ,MAAA;AAEJ,QAAM,IAAI,MAAM;AACRC,cAAA,SAAS,CAAC,UAAU;AAClB,YAAA,aAAaC,IAAAA,QAAQ,KAAK,KAAK;AACrC,mBAAa,CAAC;AAEd,UAAI,YAAY,KAAK,KAAK,IAAI,IAAI,YAAY,YAAY;AACxD,oBAAY,QAAQ;AAAA,MAAA,OACf;AACL,YAAI,WAAW,MAAM;AACnB,sBAAY,QAAQ;AAAA,WACnB,UAAU;AAAA,MAAA;AAGf,kBAAY,KAAK,IAAI;AAAA,IAAA,CACtB;AAAA,EAAA,CACF;AAEDC,MAAAA,eAAe,MAAM;AACnB,iBAAa,CAAC;AACd,UAAM,KAAK;AAAA,EAAA,CACZ;AAED,SAAOC,aAAY,MAAM;AACvB,WAAO,YAAY;AAAA,EAAA,CACpB;AACH;;"}

package/dist/lazy.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+/**
+ * 创建一个延迟更新的响应式值
+ *
+ * 该函数创建一个基于原始响应式值的延迟更新值，当原始值发生变化时，
+ * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化，
+ * 则会重新计算延迟时间。
+ *
+ * @param boolean 原始响应式值，类型为Ref<T>
+ * @param delay 延迟时间，可以是数字或响应式数字，默认为100毫秒
+ * @returns 返回一个计算属性，其值会在延迟后更新为原始值
+ */
+export declare function useLazyValue<T>(boolean: Ref<T>, delay?: number | Ref<number>): import('vue').ComputedRef<T>;

package/dist/lazy.mjs

@@ -0,0 +1,32 @@
+import { effectScope, ref, watch, toValue, onScopeDispose, computed } from "vue";
+function useLazyValue(boolean, delay) {
+  const scope = effectScope();
+  const lazyBoolean = ref(boolean.value);
+  let changedAt = 0;
+  let t;
+  scope.run(() => {
+    watch(boolean, (value) => {
+      const delayValue = toValue(delay) || 100;
+      clearTimeout(t);
+      if (changedAt > 0 && Date.now() - changedAt > delayValue) {
+        lazyBoolean.value = value;
+      } else {
+        t = setTimeout(() => {
+          lazyBoolean.value = value;
+        }, delayValue);
+      }
+      changedAt = Date.now();
+    });
+  });
+  onScopeDispose(() => {
+    clearTimeout(t);
+    scope.stop();
+  });
+  return computed(() => {
+    return lazyBoolean.value;
+  });
+}
+export {
+  useLazyValue
+};
+//# sourceMappingURL=lazy.mjs.map

package/dist/lazy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.mjs","sources":["../src/lazy.ts"],"sourcesContent":["import { type Ref, computed, effectScope, onScopeDispose, ref, toValue, watch } from 'vue';\n\n/**\n * 创建一个延迟更新的响应式值\n *\n * 该函数创建一个基于原始响应式值的延迟更新值，当原始值发生变化时，\n * 延迟值会在指定的延迟时间后更新。如果在延迟期间原始值再次变化，\n * 则会重新计算延迟时间。\n *\n * @param boolean 原始响应式值，类型为Ref<T>\n * @param delay 延迟时间，可以是数字或响应式数字，默认为100毫秒\n * @returns 返回一个计算属性，其值会在延迟后更新为原始值\n */\nexport function useLazyValue<T>(boolean: Ref<T>, delay?: number | Ref<number>) {\n  const scope = effectScope();\n  const lazyBoolean = ref(boolean.value);\n  let changedAt = 0;\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  let t: any;\n\n  scope.run(() => {\n    watch(boolean, (value) => {\n      const delayValue = toValue(delay) || 100;\n      clearTimeout(t);\n\n      if (changedAt > 0 && Date.now() - changedAt > delayValue) {\n        lazyBoolean.value = value;\n      } else {\n        t = setTimeout(() => {\n          lazyBoolean.value = value;\n        }, delayValue);\n      }\n\n      changedAt = Date.now();\n    });\n  });\n\n  onScopeDispose(() => {\n    clearTimeout(t);\n    scope.stop();\n  });\n\n  return computed<T>(() => {\n    return lazyBoolean.value;\n  });\n}\n"],"names":[],"mappings":";AAagB,SAAA,aAAgB,SAAiB,OAA8B;AAC7E,QAAM,QAAQ,YAAY;AACpB,QAAA,cAAc,IAAI,QAAQ,KAAK;AACrC,MAAI,YAAY;AAEZ,MAAA;AAEJ,QAAM,IAAI,MAAM;AACR,UAAA,SAAS,CAAC,UAAU;AAClB,YAAA,aAAa,QAAQ,KAAK,KAAK;AACrC,mBAAa,CAAC;AAEd,UAAI,YAAY,KAAK,KAAK,IAAI,IAAI,YAAY,YAAY;AACxD,oBAAY,QAAQ;AAAA,MAAA,OACf;AACL,YAAI,WAAW,MAAM;AACnB,sBAAY,QAAQ;AAAA,WACnB,UAAU;AAAA,MAAA;AAGf,kBAAY,KAAK,IAAI;AAAA,IAAA,CACtB;AAAA,EAAA,CACF;AAED,iBAAe,MAAM;AACnB,iBAAa,CAAC;AACd,UAAM,KAAK;AAAA,EAAA,CACZ;AAED,SAAO,SAAY,MAAM;AACvB,WAAO,YAAY;AAAA,EAAA,CACpB;AACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcome/utils-vue",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "cloudcome utils for vue",
   "engines": {
     "node": ">=22"
@@ -29,6 +29,11 @@
       "import": "./dist/event.mjs",
       "require": "./dist/event.cjs"
     },
+    "./lazy": {
+      "types": "./dist/lazy.d.ts",
+      "import": "./dist/lazy.mjs",
+      "require": "./dist/lazy.cjs"
+    },
     "./page": {
       "types": "./dist/page.d.ts",
       "import": "./dist/page.mjs",
@@ -51,6 +56,9 @@
       "event": [
         "./dist/event.d.ts"
       ],
+      "lazy": [
+        "./dist/lazy.d.ts"
+      ],
       "page": [
         "./dist/page.d.ts"
       ],