@vueuse/integrations 9.4.0 → 9.6.0

package/README.md

@@ -21,6 +21,7 @@ npm i <b>@vueuse/integrations</b>
   - [`useDrauu`](https://vueuse.org/integrations/useDrauu/) — reactive instance for [drauu](https://github.com/antfu/drauu)
   - [`useFocusTrap`](https://vueuse.org/integrations/useFocusTrap/) — reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap)
   - [`useFuse`](https://vueuse.org/integrations/useFuse/) — easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse)
+  - [`useIDBKeyval`](https://vueuse.org/integrations/useIDBKeyval/) — wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval)
   - [`useJwt`](https://vueuse.org/integrations/useJwt/) — wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode)
   - [`useNProgress`](https://vueuse.org/integrations/useNProgress/) — reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress)
   - [`useQRCode`](https://vueuse.org/integrations/useQRCode/) — wrapper for [`qrcode`](https://github.com/soldair/node-qrcode)

package/index.cjs

@@ -10,25 +10,26 @@ var drauu = require('drauu');
 var core = require('@vueuse/core');
 var focusTrap = require('focus-trap');
 var Fuse = require('fuse.js');
+var idbKeyval = require('idb-keyval');
 var jwt_decode = require('jwt-decode');
 var nprogress = require('nprogress');
 var QRCode = require('qrcode');
 
-var __defProp$4 = Object.defineProperty;
+var __defProp$5 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -72,28 +73,28 @@ function useAsyncValidator(value, rules, options = {}) {
       shared.until(isFinished).toBe(true).then(() => resolve(shell)).catch((error) => reject(error));
     });
   }
-  return __spreadProps$2(__spreadValues$4({}, shell), {
+  return __spreadProps$2(__spreadValues$5({}, shell), {
     then(onFulfilled, onRejected) {
       return waitUntilFinished().then(onFulfilled, onRejected);
     }
   });
 }
 
-var __defProp$3 = Object.defineProperty;
+var __defProp$4 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
@@ -144,7 +145,7 @@ function useAxios(...args) {
     error.value = void 0;
     const _url = typeof executeUrl === "string" ? executeUrl : url != null ? url : "";
     loading(true);
-    instance(_url, __spreadProps$1(__spreadValues$3(__spreadValues$3({}, defaultConfig), typeof executeUrl === "object" ? executeUrl : config), { cancelToken: cancelToken.token })).then((r) => {
+    instance(_url, __spreadProps$1(__spreadValues$4(__spreadValues$4({}, defaultConfig), typeof executeUrl === "object" ? executeUrl : config), { cancelToken: cancelToken.token })).then((r) => {
       response.value = r;
       data.value = r.data;
     }).catch((e) => {
@@ -170,7 +171,7 @@ function useAxios(...args) {
     abort,
     execute
   };
-  return __spreadProps$1(__spreadValues$3({}, result), {
+  return __spreadProps$1(__spreadValues$4({}, result), {
     then
   });
 }
@@ -204,19 +205,19 @@ function useChangeCase(input, type, options) {
   });
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
@@ -243,11 +244,11 @@ function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies =
       if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
         watchingDependencies.push(args[0]);
       touches.value;
-      return cookies.get(args[0], __spreadValues$2({ doNotParse }, args[1]));
+      return cookies.get(args[0], __spreadValues$3({ doNotParse }, args[1]));
     },
     getAll: (...args) => {
       touches.value;
-      return cookies.getAll(__spreadValues$2({ doNotParse }, args[0]));
+      return cookies.getAll(__spreadValues$3({ doNotParse }, args[0]));
     },
     set: (...args) => cookies.set(...args),
     remove: (...args) => cookies.remove(...args),
@@ -265,19 +266,19 @@ function shouldUpdate(dependencies, newCookies, oldCookies) {
   return false;
 }
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -351,7 +352,7 @@ function useDrauu(target, options) {
       return;
     if (drauuInstance.value)
       cleanup();
-    drauuInstance.value = drauu.createDrauu(__spreadValues$1({ el }, options));
+    drauuInstance.value = drauu.createDrauu(__spreadValues$2({ el }, options));
     syncStatus();
     disposables = [
       drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
@@ -384,21 +385,21 @@ function useDrauu(target, options) {
   };
 }
 
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
@@ -406,11 +407,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -437,7 +438,7 @@ function useFocusTrap(target, options = {}) {
   vueDemi.watch(() => core.unrefElement(target), (el) => {
     if (!el)
       return;
-    trap = focusTrap.createFocusTrap(el, __spreadProps(__spreadValues({}, focusTrapOptions), {
+    trap = focusTrap.createFocusTrap(el, __spreadProps(__spreadValues$1({}, focusTrapOptions), {
       onActivate() {
         hasFocus.value = true;
         if (options.onActivate)
@@ -491,6 +492,67 @@ function useFuse(search, data, options) {
   };
 }
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function useIDBKeyval(key, initialValue, options = {}) {
+  const {
+    flush = "pre",
+    deep = true,
+    shallow,
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
+  const rawInit = shared.resolveUnref(initialValue);
+  async function read() {
+    try {
+      const rawValue = await idbKeyval.get(key);
+      if (rawValue === void 0) {
+        if (rawInit !== void 0 && rawInit !== null)
+          await idbKeyval.set(key, rawInit);
+      } else {
+        data.value = rawValue;
+      }
+    } catch (e) {
+      onError(e);
+    }
+  }
+  read();
+  async function write() {
+    try {
+      if (data.value == null) {
+        await idbKeyval.del(key);
+      } else {
+        if (Array.isArray(data.value))
+          await idbKeyval.update(key, () => JSON.parse(JSON.stringify(data.value)));
+        else if (typeof data.value === "object")
+          await idbKeyval.update(key, () => __spreadValues({}, data.value));
+        else
+          await idbKeyval.update(key, () => data.value);
+      }
+    } catch (e) {
+      onError(e);
+    }
+  }
+  vueDemi.watch(data, () => write(), { flush, deep });
+  return data;
+}
+
 function useJwt(encodedJwt, options = {}) {
   const {
     onError,
@@ -560,6 +622,7 @@ exports.useCookies = useCookies;
 exports.useDrauu = useDrauu;
 exports.useFocusTrap = useFocusTrap;
 exports.useFuse = useFuse;
+exports.useIDBKeyval = useIDBKeyval;
 exports.useJwt = useJwt;
 exports.useNProgress = useNProgress;
 exports.useQRCode = useQRCode;

package/index.d.ts

@@ -1,4 +1,4 @@
-import { MaybeComputedRef, MaybeRef } from '@vueuse/shared';
+import { MaybeComputedRef, 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';
@@ -308,6 +308,34 @@ declare function useFuse<DataItem>(search: MaybeComputedRef<string>, data: Maybe
 };
 declare type UseFuseReturn = ReturnType<typeof useFuse>;
 
+interface UseIDBOptions extends ConfigurableFlush {
+    /**
+     * Watch for deep changes
+     *
+     * @default true
+     */
+    deep?: boolean;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
+    /**
+     * Use shallow ref as reference
+     *
+     * @default false
+     */
+    shallow?: boolean;
+}
+/**
+ *
+ * @param key
+ * @param initialValue
+ * @param options
+ */
+declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeComputedRef<T>, options?: UseIDBOptions): RemovableRef<T>;
+
 interface UseJwtOptions<Fallback> {
     /**
      * Value returned when encounter error on decoding
@@ -356,4 +384,4 @@ declare type UseNProgressReturn = ReturnType<typeof useNProgress>;
  */
 declare function useQRCode(text: MaybeComputedRef<string>, options?: QRCode.QRCodeToDataURLOptions): vue_demi.Ref<string>;
 
-export { AsyncValidatorError, ChangeCaseType, EasyUseAxiosReturn, FuseOptions, StrictUseAxiosReturn, UseAsyncValidatorOptions, UseAsyncValidatorReturn, UseAxiosOptions, UseAxiosReturn, UseDrauuOptions, UseDrauuReturn, UseFocusTrapOptions, UseFocusTrapReturn, UseFuseOptions, UseFuseReturn, UseJwtOptions, UseJwtReturn, UseNProgressOptions, UseNProgressReturn, createCookies, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useJwt, useNProgress, useQRCode };
+export { AsyncValidatorError, ChangeCaseType, EasyUseAxiosReturn, FuseOptions, StrictUseAxiosReturn, UseAsyncValidatorOptions, UseAsyncValidatorReturn, UseAxiosOptions, UseAxiosReturn, UseDrauuOptions, UseDrauuReturn, UseFocusTrapOptions, UseFocusTrapReturn, UseFuseOptions, UseFuseReturn, UseIDBOptions, UseJwtOptions, UseJwtReturn, UseNProgressOptions, UseNProgressReturn, createCookies, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode };