@vueuse/integrations 10.0.0-beta.2 → 10.0.0-beta.4

package/index.cjs

@@ -42,7 +42,7 @@ function useAsyncValidator(value, rules, options = {}) {
     immediate = true,
     manual = false
   } = options;
-  const valueRef = shared.resolveRef(value);
+  const valueRef = shared.toRef(value);
   const errorInfo = vueDemi.shallowRef(null);
   const isFinished = vueDemi.ref(true);
   const pass = vueDemi.ref(!immediate || manual);
@@ -54,7 +54,7 @@ function useAsyncValidator(value, rules, options = {}) {
     var _a;
     return ((_a = errorInfo.value) == null ? void 0 : _a.fields) || {};
   });
-  const validator = vueDemi.computed(() => new AsyncValidatorSchema(shared.resolveUnref(rules)));
+  const validator = vueDemi.computed(() => new AsyncValidatorSchema(shared.toValue(rules)));
   const execute = async () => {
     isFinished.value = false;
     pass.value = false;
@@ -75,7 +75,11 @@ function useAsyncValidator(value, rules, options = {}) {
     };
   };
   if (!manual) {
-    vueDemi.watch([valueRef, validator], () => execute(), { immediate, deep: true });
+    vueDemi.watch(
+      [valueRef, validator],
+      () => execute(),
+      { immediate, deep: true }
+    );
   }
   const shell = {
     isFinished,
@@ -138,8 +142,16 @@ function useAxios(...args) {
   }
   if (args.length === 2 + argsPlaceholder && !isAxiosInstance(args[1 + argsPlaceholder]) || args.length === 3 + argsPlaceholder)
     options = args[args.length - 1];
+  const {
+    initialData,
+    shallow,
+    onSuccess = shared.noop,
+    onError = shared.noop,
+    immediate,
+    resetOnExecute = false
+  } = options;
   const response = vueDemi.shallowRef();
-  const data = options.shallow ? vueDemi.shallowRef() : vueDemi.ref();
+  const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialData);
   const isFinished = vueDemi.ref(false);
   const isLoading = vueDemi.ref(false);
   const isAborted = vueDemi.ref(false);
@@ -159,58 +171,58 @@ function useAxios(...args) {
     isLoading.value = loading2;
     isFinished.value = !loading2;
   };
+  const resetData = () => {
+    if (resetOnExecute)
+      data.value = initialData;
+  };
   const waitUntilFinished = () => new Promise((resolve, reject) => {
-    shared.until(isFinished).toBe(true).then(() => resolve(result)).catch(reject);
+    shared.until(isFinished).toBe(true).then(() => error.value ? reject(error.value) : resolve(result));
   });
-  const then = (onFulfilled, onRejected) => waitUntilFinished().then(onFulfilled, onRejected);
+  const promise = {
+    then: (...args2) => waitUntilFinished().then(...args2),
+    catch: (...args2) => waitUntilFinished().catch(...args2)
+  };
   const execute = (executeUrl = url, config = {}) => {
     error.value = void 0;
     const _url = typeof executeUrl === "string" ? executeUrl : url != null ? url : config.url;
     if (_url === void 0) {
       error.value = new axios.AxiosError(axios.AxiosError.ERR_INVALID_URL);
       isFinished.value = true;
-      return { then };
+      return promise;
     }
+    resetData();
     abort();
     loading(true);
     instance(_url, __spreadProps$1(__spreadValues$5(__spreadValues$5({}, defaultConfig), typeof executeUrl === "object" ? executeUrl : config), { cancelToken: cancelToken.token })).then((r) => {
-      var _a;
       response.value = r;
       const result2 = r.data;
       data.value = result2;
-      (_a = options.onSuccess) == null ? void 0 : _a.call(options, result2);
+      onSuccess(result2);
     }).catch((e) => {
-      var _a;
       error.value = e;
-      (_a = options.onError) == null ? void 0 : _a.call(options, e);
+      onError(e);
     }).finally(() => {
       var _a;
       (_a = options.onFinish) == null ? void 0 : _a.call(options);
       loading(false);
     });
-    return { then };
+    return promise;
   };
-  if (options.immediate && url)
+  if (immediate && url)
     execute();
   const result = {
     response,
     data,
     error,
-    finished: isFinished,
-    loading: isLoading,
     isFinished,
     isLoading,
     cancel: abort,
     isAborted,
-    canceled: isAborted,
-    aborted: isAborted,
     isCanceled: isAborted,
     abort,
     execute
   };
-  return __spreadProps$1(__spreadValues$5({}, result), {
-    then
-  });
+  return __spreadValues$5(__spreadValues$5({}, result), promise);
 }
 
 var changeCase = /*#__PURE__*/Object.freeze({
@@ -230,7 +242,7 @@ var changeCase = /*#__PURE__*/Object.freeze({
 
 function useChangeCase(input, type, options) {
   if (shared.isFunction(input))
-    return vueDemi.computed(() => changeCase[type](shared.resolveUnref(input), options));
+    return vueDemi.computed(() => changeCase[type](shared.toValue(input), options));
   const text = vueDemi.ref(input);
   return vueDemi.computed({
     get() {
@@ -268,7 +280,11 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
   const touches = vueDemi.ref(0);
   const onChange = () => {
     const newCookies = cookies.getAll({ doNotParse: true });
-    if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies))
+    if (shouldUpdate(
+      watchingDependencies || null,
+      newCookies,
+      previousCookies
+    ))
       touches.value++;
     previousCookies = newCookies;
   };
@@ -277,12 +293,18 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
     cookies.removeChangeListener(onChange);
   });
   return {
+    /**
+     * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+     */
     get: (...args) => {
       if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
         watchingDependencies.push(args[0]);
       touches.value;
       return cookies.get(args[0], __spreadValues$4({ doNotParse }, args[1]));
     },
+    /**
+     * Reactive get all cookies
+     */
     getAll: (...args) => {
       touches.value;
       return cookies.getAll(__spreadValues$4({ doNotParse }, args[0]));
@@ -384,24 +406,28 @@ function useDrauu(target, options) {
       shiftPressed.value = drauuInstance.value.shiftPressed;
     }
   };
-  vueDemi.watch(() => core.unrefElement(target), (el) => {
-    if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
-      return;
-    if (drauuInstance.value)
-      cleanup();
-    drauuInstance.value = drauu.createDrauu(__spreadValues$3({ el }, options));
-    syncStatus();
-    disposables = [
-      drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
-      drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
-      drauuInstance.value.on("start", () => onStartHook.trigger()),
-      drauuInstance.value.on("end", () => onEndHook.trigger()),
-      drauuInstance.value.on("changed", () => {
-        syncStatus();
-        onChangedHook.trigger();
-      })
-    ];
-  }, { flush: "post" });
+  vueDemi.watch(
+    () => core.unrefElement(target),
+    (el) => {
+      if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
+        return;
+      if (drauuInstance.value)
+        cleanup();
+      drauuInstance.value = drauu.createDrauu(__spreadValues$3({ el }, options));
+      syncStatus();
+      disposables = [
+        drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+        drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
+        drauuInstance.value.on("start", () => onStartHook.trigger()),
+        drauuInstance.value.on("end", () => onEndHook.trigger()),
+        drauuInstance.value.on("changed", () => {
+          syncStatus();
+          onChangedHook.trigger();
+        })
+      ];
+    },
+    { flush: "post" }
+  );
   shared.tryOnScopeDispose(() => cleanup());
   return {
     drauuInstance,
@@ -472,24 +498,28 @@ function useFocusTrap(target, options = {}) {
       isPaused.value = false;
     }
   };
-  vueDemi.watch(() => core.unrefElement(target), (el) => {
-    if (!el)
-      return;
-    trap = focusTrap.createFocusTrap(el, __spreadProps(__spreadValues$2({}, focusTrapOptions), {
-      onActivate() {
-        hasFocus.value = true;
-        if (options.onActivate)
-          options.onActivate();
-      },
-      onDeactivate() {
-        hasFocus.value = false;
-        if (options.onDeactivate)
-          options.onDeactivate();
-      }
-    }));
-    if (immediate)
-      activate();
-  }, { flush: "post" });
+  vueDemi.watch(
+    () => core.unrefElement(target),
+    (el) => {
+      if (!el)
+        return;
+      trap = focusTrap.createFocusTrap(el, __spreadProps(__spreadValues$2({}, focusTrapOptions), {
+        onActivate() {
+          hasFocus.value = true;
+          if (options.onActivate)
+            options.onActivate();
+        },
+        onDeactivate() {
+          hasFocus.value = false;
+          if (options.onDeactivate)
+            options.onDeactivate();
+        }
+      }));
+      if (immediate)
+        activate();
+    },
+    { flush: "post" }
+  );
   core.tryOnScopeDispose(() => deactivate());
   return {
     hasFocus,
@@ -504,24 +534,35 @@ function useFocusTrap(target, options = {}) {
 function useFuse(search, data, options) {
   const createFuse = () => {
     var _a, _b;
-    return new Fuse((_a = shared.resolveUnref(data)) != null ? _a : [], (_b = shared.resolveUnref(options)) == null ? void 0 : _b.fuseOptions);
+    return new Fuse(
+      (_a = shared.toValue(data)) != null ? _a : [],
+      (_b = shared.toValue(options)) == null ? void 0 : _b.fuseOptions
+    );
   };
   const fuse = vueDemi.ref(createFuse());
-  vueDemi.watch(() => {
-    var _a;
-    return (_a = shared.resolveUnref(options)) == null ? void 0 : _a.fuseOptions;
-  }, () => {
-    fuse.value = createFuse();
-  }, { deep: true });
-  vueDemi.watch(() => shared.resolveUnref(data), (newData) => {
-    fuse.value.setCollection(newData);
-  }, { deep: true });
+  vueDemi.watch(
+    () => {
+      var _a;
+      return (_a = shared.toValue(options)) == null ? void 0 : _a.fuseOptions;
+    },
+    () => {
+      fuse.value = createFuse();
+    },
+    { deep: true }
+  );
+  vueDemi.watch(
+    () => shared.toValue(data),
+    (newData) => {
+      fuse.value.setCollection(newData);
+    },
+    { deep: true }
+  );
   const results = vueDemi.computed(() => {
-    const resolved = shared.resolveUnref(options);
-    if ((resolved == null ? void 0 : resolved.matchAllWhenSearchEmpty) && !vueDemi.unref(search))
-      return shared.resolveUnref(data).map((item, index) => ({ item, refIndex: index }));
+    const resolved = shared.toValue(options);
+    if ((resolved == null ? void 0 : resolved.matchAllWhenSearchEmpty) && !shared.toValue(search))
+      return shared.toValue(data).map((item, index) => ({ item, refIndex: index }));
     const limit = resolved == null ? void 0 : resolved.resultLimit;
-    return fuse.value.search(shared.resolveUnref(search), limit ? { limit } : void 0);
+    return fuse.value.search(shared.toValue(search), limit ? { limit } : void 0);
   });
   return {
     fuse,
@@ -557,7 +598,7 @@ function useIDBKeyval(key, initialValue, options = {}) {
   } = options;
   const isFinished = vueDemi.ref(false);
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
-  const rawInit = shared.resolveUnref(initialValue);
+  const rawInit = shared.toValue(initialValue);
   async function read() {
     try {
       const rawValue = await idbKeyval.get(key);
@@ -606,8 +647,8 @@ function useJwt(encodedJwt, options = {}) {
       return fallbackValue;
     }
   };
-  const header = vueDemi.computed(() => decodeWithFallback(shared.resolveUnref(encodedJwt), { header: true }));
-  const payload = vueDemi.computed(() => decodeWithFallback(shared.resolveUnref(encodedJwt)));
+  const header = vueDemi.computed(() => decodeWithFallback(shared.toValue(encodedJwt), { header: true }));
+  const payload = vueDemi.computed(() => decodeWithFallback(shared.toValue(encodedJwt)));
   return {
     header,
     payload
@@ -645,12 +686,16 @@ function useNProgress(currentProgress = null, options) {
 }
 
 function useQRCode(text, options) {
-  const src = shared.resolveRef(text);
+  const src = shared.toRef(text);
   const result = vueDemi.ref("");
-  vueDemi.watch(src, async (value) => {
-    if (src.value && shared.isClient)
-      result.value = await QRCode.toDataURL(value, options);
-  }, { immediate: true });
+  vueDemi.watch(
+    src,
+    async (value) => {
+      if (src.value && shared.isClient)
+        result.value = await QRCode.toDataURL(value, options);
+    },
+    { immediate: true }
+  );
   return result;
 }
 
@@ -702,9 +747,11 @@ function useSortable(el, list, options = {}) {
   return { stop, start };
 }
 function moveArrayElement(list, from, to) {
-  const array = core.resolveUnref(list);
-  if (to >= 0 && to < array.length)
-    array.splice(to, 0, array.splice(from, 1)[0]);
+  const array = core.toValue(list);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    vueDemi.nextTick(() => array.splice(to, 0, element));
+  }
 }
 
 exports.createCookies = createCookies;

package/index.d.ts

@@ -1,4 +1,4 @@
-import { MaybeComputedRef, MaybeRef, ConfigurableFlush, RemovableRef } from '@vueuse/shared';
+import { MaybeRefOrGetter, MaybeRef, ConfigurableFlush, RemovableRef } from '@vueuse/shared';
 import { ValidateError, ValidateOption, Rules } from 'async-validator';
 import * as vue_demi from 'vue-demi';
 import { Ref, ShallowRef, WritableComputedRef, ComputedRef } from 'vue-demi';
@@ -8,7 +8,7 @@ import * as universal_cookie from 'universal-cookie';
 import universal_cookie__default from 'universal-cookie';
 import { IncomingMessage } from 'node:http';
 import { Options as Options$1, Drauu, Brush } from 'drauu';
-import { EventHookOn, MaybeComputedElementRef, Fn, MaybeElementRef, ConfigurableDocument, MaybeComputedRef as MaybeComputedRef$1 } from '@vueuse/core';
+import { EventHookOn, MaybeComputedElementRef, Fn, MaybeElementRef, ConfigurableDocument, MaybeRefOrGetter as MaybeRefOrGetter$1 } from '@vueuse/core';
 import { Options as Options$2, ActivateOptions, DeactivateOptions } from 'focus-trap';
 import Fuse from 'fuse.js';
 import { JwtPayload, JwtHeader } from 'jwt-decode';
@@ -57,7 +57,7 @@ interface UseAsyncValidatorOptions {
  * @see https://vueuse.org/useAsyncValidator
  * @see https://github.com/yiminghe/async-validator
  */
-declare function useAsyncValidator(value: MaybeComputedRef<Record<string, any>>, rules: MaybeComputedRef<Rules>, options?: UseAsyncValidatorOptions): UseAsyncValidatorReturn & PromiseLike<UseAsyncValidatorReturn>;
+declare function useAsyncValidator(value: MaybeRefOrGetter<Record<string, any>>, rules: MaybeRefOrGetter<Rules>, options?: UseAsyncValidatorOptions): UseAsyncValidatorReturn & PromiseLike<UseAsyncValidatorReturn>;
 
 interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any> {
     /**
@@ -89,31 +89,11 @@ interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any> {
      */
     abort: (message?: string | undefined) => void;
     /**
-     * isFinished alias
-     * @deprecated use `isFinished` instead
-     */
-    finished: Ref<boolean>;
-    /**
-     * isLoading alias
-     * @deprecated use `isLoading` instead
-     */
-    loading: Ref<boolean>;
-    /**
-     * isAborted alias
-     * @deprecated use `isAborted` instead
-     */
-    aborted: Ref<boolean>;
-    /**
-     * abort alias
+     * Alias to `abort`
      */
     cancel: (message?: string | undefined) => void;
     /**
-     * isAborted alias
-     * @deprecated use `isCanceled` instead
-     */
-    canceled: Ref<boolean>;
-    /**
-     * isAborted alias
+     * Alice to `isAborted`
      */
     isCanceled: Ref<boolean>;
 }
@@ -121,13 +101,13 @@ interface StrictUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
     /**
      * Manually call the axios request
      */
-    execute: (url?: string | AxiosRequestConfig<D>, config?: AxiosRequestConfig<D>) => PromiseLike<StrictUseAxiosReturn<T, R, D>>;
+    execute: (url?: string | AxiosRequestConfig<D>, config?: AxiosRequestConfig<D>) => Promise<StrictUseAxiosReturn<T, R, D>>;
 }
 interface EasyUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
     /**
      * Manually call the axios request
      */
-    execute: (url: string, config?: AxiosRequestConfig<D>) => PromiseLike<EasyUseAxiosReturn<T, R, D>>;
+    execute: (url: string, config?: AxiosRequestConfig<D>) => Promise<EasyUseAxiosReturn<T, R, D>>;
 }
 interface UseAxiosOptions<T = any> {
     /**
@@ -149,17 +129,25 @@ interface UseAxiosOptions<T = any> {
      * Callback when success is caught.
      */
     onSuccess?: (data: T) => void;
+    /**
+     * Initial data to use
+     */
+    initialData?: T;
+    /**
+     * Sets the state to initialState before executing the promise.
+     */
+    resetOnExecute?: boolean;
     /**
      * Callback when request is finished.
      */
     onFinish?: () => void;
 }
-declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>, options?: UseAxiosOptions): StrictUseAxiosReturn<T, R, D> & PromiseLike<StrictUseAxiosReturn<T, R, D>>;
-declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(url: string, instance?: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn<T, R, D> & PromiseLike<StrictUseAxiosReturn<T, R, D>>;
-declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(url: string, config: AxiosRequestConfig<D>, instance: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn<T, R, D> & PromiseLike<StrictUseAxiosReturn<T, R, D>>;
-declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(config?: AxiosRequestConfig<D>): EasyUseAxiosReturn<T, R, D> & PromiseLike<EasyUseAxiosReturn<T, R, D>>;
-declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(instance?: AxiosInstance): EasyUseAxiosReturn<T, R, D> & PromiseLike<EasyUseAxiosReturn<T, R, D>>;
-declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(config?: AxiosRequestConfig<D>, instance?: AxiosInstance): EasyUseAxiosReturn<T, R, D> & PromiseLike<EasyUseAxiosReturn<T, R, D>>;
+declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>, options?: UseAxiosOptions): StrictUseAxiosReturn<T, R, D> & Promise<StrictUseAxiosReturn<T, R, D>>;
+declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(url: string, instance?: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn<T, R, D> & Promise<StrictUseAxiosReturn<T, R, D>>;
+declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(url: string, config: AxiosRequestConfig<D>, instance: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn<T, R, D> & Promise<StrictUseAxiosReturn<T, R, D>>;
+declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(config?: AxiosRequestConfig<D>): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>;
+declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(instance?: AxiosInstance): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>;
+declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(config?: AxiosRequestConfig<D>, instance?: AxiosInstance): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>;
 
 declare const changeCase_camelCase: typeof camelCase;
 declare const changeCase_capitalCase: typeof capitalCase;
@@ -190,7 +178,7 @@ declare namespace changeCase {
 
 type ChangeCaseType = keyof typeof changeCase;
 declare function useChangeCase(input: MaybeRef<string>, type: ChangeCaseType, options?: Options | undefined): WritableComputedRef<string>;
-declare function useChangeCase(input: MaybeComputedRef<string>, type: ChangeCaseType, options?: Options | undefined): ComputedRef<string>;
+declare function useChangeCase(input: MaybeRefOrGetter<string>, type: ChangeCaseType, options?: Options | undefined): ComputedRef<string>;
 
 /**
  * Creates a new {@link useCookies} function
@@ -326,7 +314,7 @@ interface UseFuseOptions<T> {
     resultLimit?: number;
     matchAllWhenSearchEmpty?: boolean;
 }
-declare function useFuse<DataItem>(search: MaybeComputedRef<string>, data: MaybeComputedRef<DataItem[]>, options?: MaybeComputedRef<UseFuseOptions<DataItem>>): {
+declare function useFuse<DataItem>(search: MaybeRefOrGetter<string>, data: MaybeRefOrGetter<DataItem[]>, options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>): {
     fuse: vue_demi.Ref<{
         search: <R = DataItem>(pattern: string | Fuse.Expression, options?: Fuse.FuseSearchOptions | undefined) => Fuse.FuseResult<R>[];
         setCollection: (docs: readonly DataItem[], index?: Fuse.FuseIndex<DataItem> | undefined) => void;
@@ -371,7 +359,7 @@ interface UseIDBOptions extends ConfigurableFlush {
  * @param initialValue
  * @param options
  */
-declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeComputedRef<T>, options?: UseIDBOptions): {
+declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeRefOrGetter<T>, options?: UseIDBOptions): {
     data: RemovableRef<T>;
     isFinished: Ref<boolean>;
 };
@@ -398,7 +386,7 @@ interface UseJwtReturn<Payload, Header, Fallback> {
  * @see https://vueuse.org/useJwt
  * @param jwt
  */
-declare function useJwt<Payload extends object = JwtPayload, Header extends object = JwtHeader, Fallback = null>(encodedJwt: MaybeComputedRef<string>, options?: UseJwtOptions<Fallback>): UseJwtReturn<Payload, Header, Fallback>;
+declare function useJwt<Payload extends object = JwtPayload, Header extends object = JwtHeader, Fallback = null>(encodedJwt: MaybeRefOrGetter<string>, options?: UseJwtOptions<Fallback>): UseJwtReturn<Payload, Header, Fallback>;
 
 type UseNProgressOptions = Partial<NProgressOptions>;
 /**
@@ -406,7 +394,7 @@ type UseNProgressOptions = Partial<NProgressOptions>;
  *
  * @see https://vueuse.org/useNProgress
  */
-declare function useNProgress(currentProgress?: MaybeComputedRef<number | null | undefined>, options?: UseNProgressOptions): {
+declare function useNProgress(currentProgress?: MaybeRefOrGetter<number | null | undefined>, options?: UseNProgressOptions): {
     isLoading: vue_demi.WritableComputedRef<boolean>;
     progress: vue_demi.Ref<number | (() => number | null | undefined) | null | undefined>;
     start: () => nprogress.NProgress;
@@ -422,7 +410,7 @@ type UseNProgressReturn = ReturnType<typeof useNProgress>;
  * @param text
  * @param options
  */
-declare function useQRCode(text: MaybeComputedRef<string>, options?: QRCode.QRCodeToDataURLOptions): vue_demi.Ref<string>;
+declare function useQRCode(text: MaybeRefOrGetter<string>, options?: QRCode.QRCodeToDataURLOptions): vue_demi.Ref<string>;
 
 interface UseSortableReturn {
     /**
@@ -435,8 +423,8 @@ interface UseSortableReturn {
     stop: () => void;
 }
 type UseSortableOptions = Options$3 & ConfigurableDocument;
-declare function useSortable<T>(selector: string, list: MaybeComputedRef$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function useSortable<T>(el: MaybeComputedRef$1<HTMLElement | null | undefined>, list: MaybeComputedRef$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeComputedRef$1<T[]>, from: number, to: number): void;
+declare function useSortable<T>(selector: string, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
+declare function useSortable<T>(el: MaybeRefOrGetter$1<HTMLElement | null | undefined>, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number): void;
 
 export { AsyncValidatorError, ChangeCaseType, EasyUseAxiosReturn, FuseOptions, StrictUseAxiosReturn, UseAsyncValidatorExecuteReturn, UseAsyncValidatorOptions, UseAsyncValidatorReturn, UseAxiosOptions, UseAxiosReturn, UseDrauuOptions, UseDrauuReturn, UseFocusTrapOptions, UseFocusTrapReturn, UseFuseOptions, UseFuseReturn, UseIDBOptions, UseJwtOptions, UseJwtReturn, UseNProgressOptions, UseNProgressReturn, UseSortableOptions, UseSortableReturn, createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };