@vueuse/integrations 13.4.0 → 13.6.0

package/index.d.mts

@@ -202,6 +202,8 @@ declare function createCookies(req?: IncomingMessage): (dependencies?: string[]
  * @param options.doNotParse - don't try parse value as JSON
  * @param options.autoUpdateDependencies - automatically update watching dependencies
  * @param cookies - universal-cookie instance
+ *
+ * @__NO_SIDE_EFFECTS__
  */
 declare function useCookies(dependencies?: string[] | null, { doNotParse, autoUpdateDependencies }?: {
     doNotParse?: boolean | undefined;
@@ -295,7 +297,7 @@ interface UseFocusTrapReturn {
  *
  * @see https://vueuse.org/useFocusTrap
  */
-declare function useFocusTrap(target: Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>, options?: UseFocusTrapOptions): UseFocusTrapReturn;
+declare function useFocusTrap(target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>, options?: UseFocusTrapOptions): UseFocusTrapReturn;
 
 type FuseOptions<T> = IFuseOptions<T>;
 interface UseFuseOptions<T> {
@@ -323,7 +325,11 @@ declare function useFuse<DataItem>(search: MaybeRefOrGetter<string>, data: Maybe
 };
 type UseFuseReturn = ReturnType<typeof useFuse>;
 
-interface UseIDBOptions extends ConfigurableFlush {
+interface Serializer<T> {
+    read: (raw: unknown) => T;
+    write: (value: T) => unknown;
+}
+interface UseIDBOptions<T> extends ConfigurableFlush {
     /**
      * Watch for deep changes
      *
@@ -348,6 +354,10 @@ interface UseIDBOptions extends ConfigurableFlush {
      * @default true
      */
     writeDefaults?: boolean;
+    /**
+     * Custom data serialization
+     */
+    serializer?: Serializer<T>;
 }
 interface UseIDBKeyvalReturn<T> {
     data: RemovableRef<T>;
@@ -360,7 +370,7 @@ interface UseIDBKeyvalReturn<T> {
  * @param initialValue
  * @param options
  */
-declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeRefOrGetter<T>, options?: UseIDBOptions): UseIDBKeyvalReturn<T>;
+declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeRefOrGetter<T>, options?: UseIDBOptions<T>): UseIDBKeyvalReturn<T>;
 
 interface UseJwtOptions<Fallback> {
     /**

package/index.iife.js

@@ -209,6 +209,7 @@
     acc[name] = fn;
     return acc;
   }, {});
+  // @__NO_SIDE_EFFECTS__
   function useChangeCase(input, type, options) {
     const typeRef = vue.computed(() => {
       const t = vue.toValue(type);
@@ -231,8 +232,9 @@
 
   function createCookies(req) {
     const universalCookie = new Cookie(req ? req.headers.cookie : null);
-    return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
+    return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => /* @__PURE__ */ useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
   }
+  // @__NO_SIDE_EFFECTS__
   function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
     const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
     let previousCookies = cookies.getAll({ doNotParse: true });
@@ -424,21 +426,29 @@
       (els) => {
         if (!els.length)
           return;
-        trap = focusTrap.createFocusTrap(els, {
-          ...focusTrapOptions,
-          onActivate() {
-            hasFocus.value = true;
-            if (options.onActivate)
-              options.onActivate();
-          },
-          onDeactivate() {
-            hasFocus.value = false;
-            if (options.onDeactivate)
-              options.onDeactivate();
+        if (!trap) {
+          trap = focusTrap.createFocusTrap(els, {
+            ...focusTrapOptions,
+            onActivate() {
+              hasFocus.value = true;
+              if (options.onActivate)
+                options.onActivate();
+            },
+            onDeactivate() {
+              hasFocus.value = false;
+              if (options.onDeactivate)
+                options.onDeactivate();
+            }
+          });
+          if (immediate)
+            activate();
+        } else {
+          const isActive = trap == null ? void 0 : trap.active;
+          trap == null ? void 0 : trap.updateContainerElements(els);
+          if (!isActive && immediate) {
+            activate();
           }
-        });
-        if (immediate)
-          activate();
+        }
       },
       { flush: "post" }
     );
@@ -500,7 +510,11 @@
       onError = (e) => {
         console.error(e);
       },
-      writeDefaults = true
+      writeDefaults = true,
+      serializer = {
+        read: (raw) => raw,
+        write: (value) => value
+      }
     } = options;
     const isFinished = vue.shallowRef(false);
     const data = (shallow ? vue.shallowRef : vue.ref)(initialValue);
@@ -509,10 +523,12 @@
       try {
         const rawValue = await idbKeyval.get(key);
         if (rawValue === void 0) {
-          if (rawInit !== void 0 && rawInit !== null && writeDefaults)
-            await idbKeyval.set(key, rawInit);
+          if (rawInit !== void 0 && rawInit !== null && writeDefaults) {
+            const initValue = serializer.write(rawInit);
+            await idbKeyval.set(key, initValue);
+          }
         } else {
-          data.value = rawValue;
+          data.value = serializer.read(rawValue);
         }
       } catch (e) {
         onError(e);
@@ -525,7 +541,9 @@
         if (data.value == null) {
           await idbKeyval.del(key);
         } else {
-          await idbKeyval.update(key, () => vue.toRaw(data.value));
+          const rawValue = vue.toRaw(data.value);
+          const serializedValue = serializer.write(rawValue);
+          await idbKeyval.update(key, () => serializedValue);
         }
       } catch (e) {
         onError(e);

package/index.iife.min.js

@@ -1 +1 @@
-(function(w,C,U,n,L,$,k,p,K,X,Y,P,Z,V,x,ee){"use strict";function te(t){var o=Object.create(null);return t&&Object.keys(t).forEach(function(e){if(e!=="default"){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),o.default=t,Object.freeze(o)}var ne=te($);const ae=U.default||U;function oe(t,o,e={}){const{validateOption:a={},immediate:r=!0,manual:s=!1}=e,l=C.toRef(t),c=n.shallowRef(null),u=n.shallowRef(!0),d=n.shallowRef(!r||s),v=n.computed(()=>{var i;return((i=c.value)==null?void 0:i.errors)||[]}),g=n.computed(()=>{var i;return((i=c.value)==null?void 0:i.fields)||{}}),h=n.computed(()=>new ae(n.toValue(o))),y=async()=>{u.value=!1,d.value=!1;try{await h.value.validate(l.value,a),d.value=!0,c.value=null}catch(i){c.value=i}finally{u.value=!0}return{pass:d.value,errorInfo:c.value,errors:v.value,errorFields:g.value}};s||n.watch([l,h],()=>y(),{immediate:r,deep:!0});const R={isFinished:u,pass:d,errors:v,errorInfo:c,errorFields:g,execute:y};function E(){return new Promise((i,b)=>{C.until(u).toBe(!0).then(()=>i(R)).catch(A=>b(A))})}return{...R,then(i,b){return E().then(i,b)}}}function le(...t){const o=typeof t[0]=="string"?t[0]:void 0,e=typeof o=="string"?1:0,a={immediate:!!e,shallow:!0,abortPrevious:!0};let r={},s=L,l=a;const c=m=>!!m?.request;t.length>0+e&&(c(t[0+e])?s=t[0+e]:r=t[0+e]),t.length>1+e&&c(t[1+e])&&(s=t[1+e]),(t.length===2+e&&!c(t[1+e])||t.length===3+e)&&(l=t[t.length-1]||a);const{shallow:u,onSuccess:d=C.noop,onError:v=C.noop,immediate:g,resetOnExecute:h=!1}=l,y=l.initialData,R=n.shallowRef(),E=(u?n.shallowRef:n.ref)(y),i=n.shallowRef(!1),b=n.shallowRef(!1),A=n.shallowRef(!1),D=n.shallowRef();let S=new AbortController;const F=m=>{i.value||!b.value||(S.abort(m),S=new AbortController,A.value=!0,b.value=!1,i.value=!1)},f=m=>{b.value=m,i.value=!m},_=()=>{h&&(E.value=y)},Q=()=>new Promise((m,I)=>{C.until(i).toBe(!0).then(()=>D.value?I(D.value):m(q))}),H={then:(...m)=>Q().then(...m),catch:(...m)=>Q().catch(...m)};let j=0;const z=(m=o,I={})=>{D.value=void 0;const J=typeof m=="string"?m:o??I.url;if(J===void 0)return D.value=new L.AxiosError(L.AxiosError.ERR_INVALID_URL),i.value=!0,H;_(),l.abortPrevious!==!1&&F(),f(!0),j+=1;const pe=j;return A.value=!1,s(J,{...r,...typeof m=="object"?m:I,signal:S.signal}).then(O=>{if(A.value)return;R.value=O;const M=O.data;E.value=M,d(M)}).catch(O=>{D.value=O,v(O)}).finally(()=>{var O;(O=l.onFinish)==null||O.call(l),pe===j&&f(!1)}),H};g&&o&&z();const q={response:R,data:E,error:D,isFinished:i,isLoading:b,cancel:F,isAborted:A,isCanceled:A,abort:F,execute:z};return{...q,...H}}const N=Object.entries(ne).filter(([t,o])=>typeof o=="function"&&t.endsWith("Case")).reduce((t,[o,e])=>(t[o]=e,t),{});function re(t,o,e){const a=n.computed(()=>{const s=n.toValue(o);if(!N[s])throw new Error(`Invalid change case type "${s}"`);return s});if(typeof t=="function")return n.computed(()=>N[a.value](n.toValue(t),n.toValue(e)));const r=n.ref(t);return n.computed({get(){return N[a.value](r.value,n.toValue(e))},set(s){r.value=s}})}function se(t){const o=new k(t?t.headers.cookie:null);return(e,{doNotParse:a=!1,autoUpdateDependencies:r=!1}={})=>T(e,{doNotParse:a,autoUpdateDependencies:r},o)}function T(t,{doNotParse:o=!1,autoUpdateDependencies:e=!1}={},a=new k){const r=e?[...t||[]]:t;let s=a.getAll({doNotParse:!0});const l=n.shallowRef(0),c=()=>{const u=a.getAll({doNotParse:!0});ue(r||null,u,s)&&l.value++,s=u};return a.addChangeListener(c),C.tryOnScopeDispose(()=>{a.removeChangeListener(c)}),{get:(...u)=>(e&&r&&!r.includes(u[0])&&r.push(u[0]),l.value,a.get(u[0],{doNotParse:o,...u[1]})),getAll:(...u)=>(l.value,a.getAll({doNotParse:o,...u[0]})),set:(...u)=>a.set(...u),remove:(...u)=>a.remove(...u),addChangeListener:(...u)=>a.addChangeListener(...u),removeChangeListener:(...u)=>a.removeChangeListener(...u)}}function ue(t,o,e){if(!t)return!0;for(const a of t)if(o[a]!==e[a])return!0;return!1}function ce(t,o){const e=n.ref();let a=[];const r=p.createEventHook(),s=p.createEventHook(),l=p.createEventHook(),c=p.createEventHook(),u=p.createEventHook(),d=n.shallowRef(!1),v=n.shallowRef(!1),g=n.shallowRef(!1),h=n.shallowRef(!1),y=n.ref({color:"black",size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:"transparent",mode:"draw",...o?.brush});n.watch(y,()=>{const f=e.value;f&&(f.brush=y.value,f.mode=y.value.mode)},{deep:!0});const R=()=>{var f;return(f=e.value)==null?void 0:f.undo()},E=()=>{var f;return(f=e.value)==null?void 0:f.redo()},i=()=>{var f;return(f=e.value)==null?void 0:f.clear()},b=()=>{var f;return(f=e.value)==null?void 0:f.cancel()},A=f=>{var _;return(_=e.value)==null?void 0:_.load(f)},D=()=>{var f;return(f=e.value)==null?void 0:f.dump()},S=()=>{var f;a.forEach(_=>_()),(f=e.value)==null||f.unmount()},F=()=>{e.value&&(d.value=e.value.canUndo(),v.value=e.value.canRedo(),g.value=e.value.altPressed,h.value=e.value.shiftPressed)};return n.watch(()=>p.unrefElement(t),f=>{!f||typeof SVGSVGElement>"u"||!(f instanceof SVGSVGElement)||(e.value&&S(),e.value=K.createDrauu({el:f,...o}),F(),a=[e.value.on("canceled",()=>s.trigger()),e.value.on("committed",_=>l.trigger(_)),e.value.on("start",()=>c.trigger()),e.value.on("end",()=>u.trigger()),e.value.on("changed",()=>{F(),r.trigger()})])},{flush:"post"}),C.tryOnScopeDispose(()=>S()),{drauuInstance:e,load:A,dump:D,clear:i,cancel:b,undo:R,redo:E,canUndo:d,canRedo:v,brush:y,onChanged:r.on,onCommitted:l.on,onStart:c.on,onEnd:u.on,onCanceled:s.on}}function ie(t,o={}){let e;const{immediate:a,...r}=o,s=n.shallowRef(!1),l=n.shallowRef(!1),c=h=>e&&e.activate(h),u=h=>e&&e.deactivate(h),d=()=>{e&&(e.pause(),l.value=!0)},v=()=>{e&&(e.unpause(),l.value=!1)},g=n.computed(()=>{const h=n.toValue(t);return p.toArray(h).map(y=>{const R=n.toValue(y);return typeof R=="string"?R:p.unrefElement(R)}).filter(C.notNullish)});return n.watch(g,h=>{h.length&&(e=X.createFocusTrap(h,{...r,onActivate(){s.value=!0,o.onActivate&&o.onActivate()},onDeactivate(){s.value=!1,o.onDeactivate&&o.onDeactivate()}}),a&&c())},{flush:"post"}),p.tryOnScopeDispose(()=>u()),{hasFocus:s,isPaused:l,activate:c,deactivate:u,pause:d,unpause:v}}function fe(t,o,e){const a=()=>{var l,c;return new Y((l=n.toValue(o))!=null?l:[],(c=n.toValue(e))==null?void 0:c.fuseOptions)},r=n.ref(a());n.watch(()=>{var l;return(l=n.toValue(e))==null?void 0:l.fuseOptions},()=>{r.value=a()},{deep:!0}),n.watch(()=>n.toValue(o),l=>{r.value.setCollection(l)},{deep:!0});const s=n.computed(()=>{const l=n.toValue(e);if(l?.matchAllWhenSearchEmpty&&!n.toValue(t))return n.toValue(o).map((u,d)=>({item:u,refIndex:d}));const c=l?.resultLimit;return r.value.search(n.toValue(t),c?{limit:c}:void 0)});return{fuse:r,results:s}}function de(t,o,e={}){const{flush:a="pre",deep:r=!0,shallow:s=!1,onError:l=i=>{console.error(i)},writeDefaults:c=!0}=e,u=n.shallowRef(!1),d=(s?n.shallowRef:n.ref)(o),v=n.toValue(o);async function g(){try{const i=await P.get(t);i===void 0?v!=null&&c&&await P.set(t,v):d.value=i}catch(i){l(i)}u.value=!0}g();async function h(){try{d.value==null?await P.del(t):await P.update(t,()=>n.toRaw(d.value))}catch(i){l(i)}}const{pause:y,resume:R}=p.watchPausable(d,()=>h(),{flush:a,deep:r});async function E(i){y(),d.value=i,await h(),R()}return{set:E,isFinished:u,data:d}}function ve(t,o={}){const{onError:e,fallbackValue:a=null}=o,r=(c,u)=>{try{return Z.jwtDecode(c,u)}catch(d){return e?.(d),a}},s=n.computed(()=>r(n.toValue(t),{header:!0})),l=n.computed(()=>r(n.toValue(t)));return{header:s,payload:l}}function he(t=null,o){const e=C.toRef(t),a=n.computed({set:s=>s?V.start():V.done(),get:()=>typeof e.value=="number"&&e.value<1});o&&V.configure(o);const r=V.set;return V.set=s=>(e.value=s,r.call(V,s)),n.watchEffect(()=>{typeof e.value=="number"&&C.isClient&&r.call(V,e.value)}),C.tryOnScopeDispose(V.remove),{isLoading:a,progress:e,start:V.start,done:V.done,remove:()=>{e.value=null,V.remove()}}}function me(t,o){const e=C.toRef(t),a=n.shallowRef("");return n.watch(e,async r=>{e.value&&C.isClient&&(a.value=await x.toDataURL(r,o))},{immediate:!0}),a}function we(t,o,e={}){let a;const{document:r=p.defaultDocument,...s}=e,l={onUpdate:v=>{G(o,v.oldIndex,v.newIndex,v)}},c=()=>{const v=typeof t=="string"?r?.querySelector(t):p.unrefElement(t);!v||a!==void 0||(a=new ee(v,{...l,...s}))},u=()=>{a?.destroy(),a=void 0},d=(v,g)=>{if(g!==void 0)a?.option(v,g);else return a?.option(v)};return p.tryOnMounted(c),p.tryOnScopeDispose(u),{stop:u,start:c,option:d}}function B(t,o,e){const a=t.children[e];t.insertBefore(o,a)}function W(t){t.parentNode&&t.parentNode.removeChild(t)}function G(t,o,e,a=null){a!=null&&(W(a.item),B(a.from,a.item,o));const r=n.isRef(t),s=r?[...n.toValue(t)]:n.toValue(t);if(e>=0&&e<s.length){const l=s.splice(o,1)[0];n.nextTick(()=>{s.splice(e,0,l),r&&(t.value=s)})}}w.createCookies=se,w.insertNodeAt=B,w.moveArrayElement=G,w.removeNode=W,w.useAsyncValidator=oe,w.useAxios=le,w.useChangeCase=re,w.useCookies=T,w.useDrauu=ce,w.useFocusTrap=ie,w.useFuse=fe,w.useIDBKeyval=de,w.useJwt=ve,w.useNProgress=he,w.useQRCode=me,w.useSortable=we})(this.VueUse=this.VueUse||{},VueUse,AsyncValidator,Vue,axios,changeCase,UniversalCookie,VueUse,Drauu,focusTrap,Fuse,idbKeyval,jwt_decode,nprogress,QRCode,Sortable);
+(function(y,V,U,n,L,$,k,g,K,X,Y,P,Z,E,x,ee){"use strict";function te(t){var o=Object.create(null);return t&&Object.keys(t).forEach(function(e){if(e!=="default"){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),o.default=t,Object.freeze(o)}var ne=te($);const ae=U.default||U;function oe(t,o,e={}){const{validateOption:a={},immediate:r=!0,manual:u=!1}=e,l=V.toRef(t),c=n.shallowRef(null),s=n.shallowRef(!0),h=n.shallowRef(!r||u),d=n.computed(()=>{var v;return((v=c.value)==null?void 0:v.errors)||[]}),C=n.computed(()=>{var v;return((v=c.value)==null?void 0:v.fields)||{}}),m=n.computed(()=>new ae(n.toValue(o))),p=async()=>{s.value=!1,h.value=!1;try{await m.value.validate(l.value,a),h.value=!0,c.value=null}catch(v){c.value=v}finally{s.value=!0}return{pass:h.value,errorInfo:c.value,errors:d.value,errorFields:C.value}};u||n.watch([l,m],()=>p(),{immediate:r,deep:!0});const R={isFinished:s,pass:h,errors:d,errorInfo:c,errorFields:C,execute:p};function A(){return new Promise((v,f)=>{V.until(s).toBe(!0).then(()=>v(R)).catch(b=>f(b))})}return{...R,then(v,f){return A().then(v,f)}}}function le(...t){const o=typeof t[0]=="string"?t[0]:void 0,e=typeof o=="string"?1:0,a={immediate:!!e,shallow:!0,abortPrevious:!0};let r={},u=L,l=a;const c=w=>!!w?.request;t.length>0+e&&(c(t[0+e])?u=t[0+e]:r=t[0+e]),t.length>1+e&&c(t[1+e])&&(u=t[1+e]),(t.length===2+e&&!c(t[1+e])||t.length===3+e)&&(l=t[t.length-1]||a);const{shallow:s,onSuccess:h=V.noop,onError:d=V.noop,immediate:C,resetOnExecute:m=!1}=l,p=l.initialData,R=n.shallowRef(),A=(s?n.shallowRef:n.ref)(p),v=n.shallowRef(!1),f=n.shallowRef(!1),b=n.shallowRef(!1),D=n.shallowRef();let S=new AbortController;const F=w=>{v.value||!f.value||(S.abort(w),S=new AbortController,b.value=!0,f.value=!1,v.value=!1)},i=w=>{f.value=w,v.value=!w},_=()=>{m&&(A.value=p)},G=()=>new Promise((w,I)=>{V.until(v).toBe(!0).then(()=>D.value?I(D.value):w(q))}),H={then:(...w)=>G().then(...w),catch:(...w)=>G().catch(...w)};let j=0;const Q=(w=o,I={})=>{D.value=void 0;const J=typeof w=="string"?w:o??I.url;if(J===void 0)return D.value=new L.AxiosError(L.AxiosError.ERR_INVALID_URL),v.value=!0,H;_(),l.abortPrevious!==!1&&F(),i(!0),j+=1;const pe=j;return b.value=!1,u(J,{...r,...typeof w=="object"?w:I,signal:S.signal}).then(O=>{if(b.value)return;R.value=O;const M=O.data;A.value=M,h(M)}).catch(O=>{D.value=O,d(O)}).finally(()=>{var O;(O=l.onFinish)==null||O.call(l),pe===j&&i(!1)}),H};C&&o&&Q();const q={response:R,data:A,error:D,isFinished:v,isLoading:f,cancel:F,isAborted:b,isCanceled:b,abort:F,execute:Q};return{...q,...H}}const N=Object.entries(ne).filter(([t,o])=>typeof o=="function"&&t.endsWith("Case")).reduce((t,[o,e])=>(t[o]=e,t),{});function re(t,o,e){const a=n.computed(()=>{const u=n.toValue(o);if(!N[u])throw new Error(`Invalid change case type "${u}"`);return u});if(typeof t=="function")return n.computed(()=>N[a.value](n.toValue(t),n.toValue(e)));const r=n.ref(t);return n.computed({get(){return N[a.value](r.value,n.toValue(e))},set(u){r.value=u}})}function se(t){const o=new k(t?t.headers.cookie:null);return(e,{doNotParse:a=!1,autoUpdateDependencies:r=!1}={})=>T(e,{doNotParse:a,autoUpdateDependencies:r},o)}function T(t,{doNotParse:o=!1,autoUpdateDependencies:e=!1}={},a=new k){const r=e?[...t||[]]:t;let u=a.getAll({doNotParse:!0});const l=n.shallowRef(0),c=()=>{const s=a.getAll({doNotParse:!0});ue(r||null,s,u)&&l.value++,u=s};return a.addChangeListener(c),V.tryOnScopeDispose(()=>{a.removeChangeListener(c)}),{get:(...s)=>(e&&r&&!r.includes(s[0])&&r.push(s[0]),l.value,a.get(s[0],{doNotParse:o,...s[1]})),getAll:(...s)=>(l.value,a.getAll({doNotParse:o,...s[0]})),set:(...s)=>a.set(...s),remove:(...s)=>a.remove(...s),addChangeListener:(...s)=>a.addChangeListener(...s),removeChangeListener:(...s)=>a.removeChangeListener(...s)}}function ue(t,o,e){if(!t)return!0;for(const a of t)if(o[a]!==e[a])return!0;return!1}function ce(t,o){const e=n.ref();let a=[];const r=g.createEventHook(),u=g.createEventHook(),l=g.createEventHook(),c=g.createEventHook(),s=g.createEventHook(),h=n.shallowRef(!1),d=n.shallowRef(!1),C=n.shallowRef(!1),m=n.shallowRef(!1),p=n.ref({color:"black",size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:"transparent",mode:"draw",...o?.brush});n.watch(p,()=>{const i=e.value;i&&(i.brush=p.value,i.mode=p.value.mode)},{deep:!0});const R=()=>{var i;return(i=e.value)==null?void 0:i.undo()},A=()=>{var i;return(i=e.value)==null?void 0:i.redo()},v=()=>{var i;return(i=e.value)==null?void 0:i.clear()},f=()=>{var i;return(i=e.value)==null?void 0:i.cancel()},b=i=>{var _;return(_=e.value)==null?void 0:_.load(i)},D=()=>{var i;return(i=e.value)==null?void 0:i.dump()},S=()=>{var i;a.forEach(_=>_()),(i=e.value)==null||i.unmount()},F=()=>{e.value&&(h.value=e.value.canUndo(),d.value=e.value.canRedo(),C.value=e.value.altPressed,m.value=e.value.shiftPressed)};return n.watch(()=>g.unrefElement(t),i=>{!i||typeof SVGSVGElement>"u"||!(i instanceof SVGSVGElement)||(e.value&&S(),e.value=K.createDrauu({el:i,...o}),F(),a=[e.value.on("canceled",()=>u.trigger()),e.value.on("committed",_=>l.trigger(_)),e.value.on("start",()=>c.trigger()),e.value.on("end",()=>s.trigger()),e.value.on("changed",()=>{F(),r.trigger()})])},{flush:"post"}),V.tryOnScopeDispose(()=>S()),{drauuInstance:e,load:b,dump:D,clear:v,cancel:f,undo:R,redo:A,canUndo:h,canRedo:d,brush:p,onChanged:r.on,onCommitted:l.on,onStart:c.on,onEnd:s.on,onCanceled:u.on}}function ie(t,o={}){let e;const{immediate:a,...r}=o,u=n.shallowRef(!1),l=n.shallowRef(!1),c=m=>e&&e.activate(m),s=m=>e&&e.deactivate(m),h=()=>{e&&(e.pause(),l.value=!0)},d=()=>{e&&(e.unpause(),l.value=!1)},C=n.computed(()=>{const m=n.toValue(t);return g.toArray(m).map(p=>{const R=n.toValue(p);return typeof R=="string"?R:g.unrefElement(R)}).filter(V.notNullish)});return n.watch(C,m=>{if(m.length)if(!e)e=X.createFocusTrap(m,{...r,onActivate(){u.value=!0,o.onActivate&&o.onActivate()},onDeactivate(){u.value=!1,o.onDeactivate&&o.onDeactivate()}}),a&&c();else{const p=e?.active;e?.updateContainerElements(m),!p&&a&&c()}},{flush:"post"}),g.tryOnScopeDispose(()=>s()),{hasFocus:u,isPaused:l,activate:c,deactivate:s,pause:h,unpause:d}}function fe(t,o,e){const a=()=>{var l,c;return new Y((l=n.toValue(o))!=null?l:[],(c=n.toValue(e))==null?void 0:c.fuseOptions)},r=n.ref(a());n.watch(()=>{var l;return(l=n.toValue(e))==null?void 0:l.fuseOptions},()=>{r.value=a()},{deep:!0}),n.watch(()=>n.toValue(o),l=>{r.value.setCollection(l)},{deep:!0});const u=n.computed(()=>{const l=n.toValue(e);if(l?.matchAllWhenSearchEmpty&&!n.toValue(t))return n.toValue(o).map((s,h)=>({item:s,refIndex:h}));const c=l?.resultLimit;return r.value.search(n.toValue(t),c?{limit:c}:void 0)});return{fuse:r,results:u}}function de(t,o,e={}){const{flush:a="pre",deep:r=!0,shallow:u=!1,onError:l=f=>{console.error(f)},writeDefaults:c=!0,serializer:s={read:f=>f,write:f=>f}}=e,h=n.shallowRef(!1),d=(u?n.shallowRef:n.ref)(o),C=n.toValue(o);async function m(){try{const f=await P.get(t);if(f===void 0){if(C!=null&&c){const b=s.write(C);await P.set(t,b)}}else d.value=s.read(f)}catch(f){l(f)}h.value=!0}m();async function p(){try{if(d.value==null)await P.del(t);else{const f=n.toRaw(d.value),b=s.write(f);await P.update(t,()=>b)}}catch(f){l(f)}}const{pause:R,resume:A}=g.watchPausable(d,()=>p(),{flush:a,deep:r});async function v(f){R(),d.value=f,await p(),A()}return{set:v,isFinished:h,data:d}}function ve(t,o={}){const{onError:e,fallbackValue:a=null}=o,r=(c,s)=>{try{return Z.jwtDecode(c,s)}catch(h){return e?.(h),a}},u=n.computed(()=>r(n.toValue(t),{header:!0})),l=n.computed(()=>r(n.toValue(t)));return{header:u,payload:l}}function he(t=null,o){const e=V.toRef(t),a=n.computed({set:u=>u?E.start():E.done(),get:()=>typeof e.value=="number"&&e.value<1});o&&E.configure(o);const r=E.set;return E.set=u=>(e.value=u,r.call(E,u)),n.watchEffect(()=>{typeof e.value=="number"&&V.isClient&&r.call(E,e.value)}),V.tryOnScopeDispose(E.remove),{isLoading:a,progress:e,start:E.start,done:E.done,remove:()=>{e.value=null,E.remove()}}}function me(t,o){const e=V.toRef(t),a=n.shallowRef("");return n.watch(e,async r=>{e.value&&V.isClient&&(a.value=await x.toDataURL(r,o))},{immediate:!0}),a}function we(t,o,e={}){let a;const{document:r=g.defaultDocument,...u}=e,l={onUpdate:d=>{z(o,d.oldIndex,d.newIndex,d)}},c=()=>{const d=typeof t=="string"?r?.querySelector(t):g.unrefElement(t);!d||a!==void 0||(a=new ee(d,{...l,...u}))},s=()=>{a?.destroy(),a=void 0},h=(d,C)=>{if(C!==void 0)a?.option(d,C);else return a?.option(d)};return g.tryOnMounted(c),g.tryOnScopeDispose(s),{stop:s,start:c,option:h}}function B(t,o,e){const a=t.children[e];t.insertBefore(o,a)}function W(t){t.parentNode&&t.parentNode.removeChild(t)}function z(t,o,e,a=null){a!=null&&(W(a.item),B(a.from,a.item,o));const r=n.isRef(t),u=r?[...n.toValue(t)]:n.toValue(t);if(e>=0&&e<u.length){const l=u.splice(o,1)[0];n.nextTick(()=>{u.splice(e,0,l),r&&(t.value=u)})}}y.createCookies=se,y.insertNodeAt=B,y.moveArrayElement=z,y.removeNode=W,y.useAsyncValidator=oe,y.useAxios=le,y.useChangeCase=re,y.useCookies=T,y.useDrauu=ce,y.useFocusTrap=ie,y.useFuse=fe,y.useIDBKeyval=de,y.useJwt=ve,y.useNProgress=he,y.useQRCode=me,y.useSortable=we})(this.VueUse=this.VueUse||{},VueUse,AsyncValidator,Vue,axios,changeCase,UniversalCookie,VueUse,Drauu,focusTrap,Fuse,idbKeyval,jwt_decode,nprogress,QRCode,Sortable);

package/index.mjs

@@ -203,6 +203,7 @@ const changeCaseTransforms = /* @__PURE__ */ Object.entries(changeCase).filter((
   acc[name] = fn;
   return acc;
 }, {});
+// @__NO_SIDE_EFFECTS__
 function useChangeCase(input, type, options) {
   const typeRef = computed(() => {
     const t = toValue(type);
@@ -225,8 +226,9 @@ function useChangeCase(input, type, options) {
 
 function createCookies(req) {
   const universalCookie = new Cookie(req ? req.headers.cookie : null);
-  return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
+  return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => /* @__PURE__ */ useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
 }
+// @__NO_SIDE_EFFECTS__
 function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
   const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
   let previousCookies = cookies.getAll({ doNotParse: true });
@@ -418,21 +420,29 @@ function useFocusTrap(target, options = {}) {
     (els) => {
       if (!els.length)
         return;
-      trap = createFocusTrap(els, {
-        ...focusTrapOptions,
-        onActivate() {
-          hasFocus.value = true;
-          if (options.onActivate)
-            options.onActivate();
-        },
-        onDeactivate() {
-          hasFocus.value = false;
-          if (options.onDeactivate)
-            options.onDeactivate();
+      if (!trap) {
+        trap = createFocusTrap(els, {
+          ...focusTrapOptions,
+          onActivate() {
+            hasFocus.value = true;
+            if (options.onActivate)
+              options.onActivate();
+          },
+          onDeactivate() {
+            hasFocus.value = false;
+            if (options.onDeactivate)
+              options.onDeactivate();
+          }
+        });
+        if (immediate)
+          activate();
+      } else {
+        const isActive = trap == null ? void 0 : trap.active;
+        trap == null ? void 0 : trap.updateContainerElements(els);
+        if (!isActive && immediate) {
+          activate();
         }
-      });
-      if (immediate)
-        activate();
+      }
     },
     { flush: "post" }
   );
@@ -494,7 +504,11 @@ function useIDBKeyval(key, initialValue, options = {}) {
     onError = (e) => {
       console.error(e);
     },
-    writeDefaults = true
+    writeDefaults = true,
+    serializer = {
+      read: (raw) => raw,
+      write: (value) => value
+    }
   } = options;
   const isFinished = shallowRef(false);
   const data = (shallow ? shallowRef : ref)(initialValue);
@@ -503,10 +517,12 @@ function useIDBKeyval(key, initialValue, options = {}) {
     try {
       const rawValue = await get(key);
       if (rawValue === void 0) {
-        if (rawInit !== void 0 && rawInit !== null && writeDefaults)
-          await set(key, rawInit);
+        if (rawInit !== void 0 && rawInit !== null && writeDefaults) {
+          const initValue = serializer.write(rawInit);
+          await set(key, initValue);
+        }
       } else {
-        data.value = rawValue;
+        data.value = serializer.read(rawValue);
       }
     } catch (e) {
       onError(e);
@@ -519,7 +535,9 @@ function useIDBKeyval(key, initialValue, options = {}) {
       if (data.value == null) {
         await del(key);
       } else {
-        await update(key, () => toRaw(data.value));
+        const rawValue = toRaw(data.value);
+        const serializedValue = serializer.write(rawValue);
+        await update(key, () => serializedValue);
       }
     } catch (e) {
       onError(e);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/integrations",
   "type": "module",
-  "version": "13.4.0",
+  "version": "13.6.0",
   "description": "Integration wrappers for utility libraries",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
@@ -62,7 +62,7 @@
     "nprogress": "^0.2",
     "qrcode": "^1.5",
     "sortablejs": "^1",
-    "universal-cookie": "^7",
+    "universal-cookie": "^7 || ^8",
     "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
@@ -104,15 +104,15 @@
     }
   },
   "dependencies": {
-    "@vueuse/core": "13.4.0",
-    "@vueuse/shared": "13.4.0"
+    "@vueuse/shared": "13.6.0",
+    "@vueuse/core": "13.6.0"
   },
   "devDependencies": {
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
     "@types/sortablejs": "^1.15.8",
     "async-validator": "^4.2.5",
-    "axios": "^1.10.0",
+    "axios": "^1.11.0",
     "change-case": "^5.4.4",
     "drauu": "^0.4.3",
     "focus-trap": "^7.6.5",
@@ -122,7 +122,7 @@
     "nprogress": "^0.2.0",
     "qrcode": "^1.5.4",
     "sortablejs": "^1.15.6",
-    "universal-cookie": "^7.2.2"
+    "universal-cookie": "^8.0.1"
   },
   "scripts": {
     "build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild",

package/useChangeCase.iife.js

@@ -24,6 +24,7 @@
     acc[name] = fn;
     return acc;
   }, {});
+  // @__NO_SIDE_EFFECTS__
   function useChangeCase(input, type, options) {
     const typeRef = vue.computed(() => {
       const t = vue.toValue(type);

package/useChangeCase.mjs

@@ -5,6 +5,7 @@ const changeCaseTransforms = /* @__PURE__ */ Object.entries(changeCase).filter((
   acc[name] = fn;
   return acc;
 }, {});
+// @__NO_SIDE_EFFECTS__
 function useChangeCase(input, type, options) {
   const typeRef = computed(() => {
     const t = toValue(type);

package/useCookies.d.mts

@@ -32,6 +32,8 @@ declare function createCookies(req?: IncomingMessage): (dependencies?: string[]
  * @param options.doNotParse - don't try parse value as JSON
  * @param options.autoUpdateDependencies - automatically update watching dependencies
  * @param cookies - universal-cookie instance
+ *
+ * @__NO_SIDE_EFFECTS__
  */
 declare function useCookies(dependencies?: string[] | null, { doNotParse, autoUpdateDependencies }?: {
     doNotParse?: boolean | undefined;

package/useCookies.iife.js

@@ -3,8 +3,9 @@
 
   function createCookies(req) {
     const universalCookie = new Cookie(req ? req.headers.cookie : null);
-    return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
+    return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => /* @__PURE__ */ useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
   }
+  // @__NO_SIDE_EFFECTS__
   function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
     const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
     let previousCookies = cookies.getAll({ doNotParse: true });

package/useCookies.mjs

@@ -4,8 +4,9 @@ import { shallowRef } from 'vue';
 
 function createCookies(req) {
   const universalCookie = new Cookie(req ? req.headers.cookie : null);
-  return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
+  return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => /* @__PURE__ */ useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie);
 }
+// @__NO_SIDE_EFFECTS__
 function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
   const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
   let previousCookies = cookies.getAll({ doNotParse: true });

package/useFocusTrap.d.mts

@@ -49,7 +49,7 @@ interface UseFocusTrapReturn {
  *
  * @see https://vueuse.org/useFocusTrap
  */
-declare function useFocusTrap(target: Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>, options?: UseFocusTrapOptions): UseFocusTrapReturn;
+declare function useFocusTrap(target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>, options?: UseFocusTrapOptions): UseFocusTrapReturn;
 
 export { useFocusTrap };
 export type { UseFocusTrapOptions, UseFocusTrapReturn };

package/useFocusTrap.iife.js

@@ -32,21 +32,29 @@
       (els) => {
         if (!els.length)
           return;
-        trap = focusTrap.createFocusTrap(els, {
-          ...focusTrapOptions,
-          onActivate() {
-            hasFocus.value = true;
-            if (options.onActivate)
-              options.onActivate();
-          },
-          onDeactivate() {
-            hasFocus.value = false;
-            if (options.onDeactivate)
-              options.onDeactivate();
+        if (!trap) {
+          trap = focusTrap.createFocusTrap(els, {
+            ...focusTrapOptions,
+            onActivate() {
+              hasFocus.value = true;
+              if (options.onActivate)
+                options.onActivate();
+            },
+            onDeactivate() {
+              hasFocus.value = false;
+              if (options.onDeactivate)
+                options.onDeactivate();
+            }
+          });
+          if (immediate)
+            activate();
+        } else {
+          const isActive = trap == null ? void 0 : trap.active;
+          trap == null ? void 0 : trap.updateContainerElements(els);
+          if (!isActive && immediate) {
+            activate();
           }
-        });
-        if (immediate)
-          activate();
+        }
       },
       { flush: "post" }
     );

package/useFocusTrap.iife.min.js

@@ -1 +1 @@
-(function(l,u,f,p,a){"use strict";function h(v,s={}){let t;const{immediate:V,...d}=s,c=a.shallowRef(!1),n=a.shallowRef(!1),i=e=>t&&t.activate(e),r=e=>t&&t.deactivate(e),m=()=>{t&&(t.pause(),n.value=!0)},T=()=>{t&&(t.unpause(),n.value=!1)},g=a.computed(()=>{const e=a.toValue(v);return u.toArray(e).map(A=>{const o=a.toValue(A);return typeof o=="string"?o:u.unrefElement(o)}).filter(f.notNullish)});return a.watch(g,e=>{e.length&&(t=p.createFocusTrap(e,{...d,onActivate(){c.value=!0,s.onActivate&&s.onActivate()},onDeactivate(){c.value=!1,s.onDeactivate&&s.onDeactivate()}}),V&&i())},{flush:"post"}),u.tryOnScopeDispose(()=>r()),{hasFocus:c,isPaused:n,activate:i,deactivate:r,pause:m,unpause:T}}l.useFocusTrap=h})(this.VueUse=this.VueUse||{},VueUse,VueUse,focusTrap,Vue);
+(function(p,u,v,h,a){"use strict";function d(V,s={}){let e;const{immediate:r,...m}=s,n=a.shallowRef(!1),c=a.shallowRef(!1),i=t=>e&&e.activate(t),f=t=>e&&e.deactivate(t),A=()=>{e&&(e.pause(),c.value=!0)},T=()=>{e&&(e.unpause(),c.value=!1)},g=a.computed(()=>{const t=a.toValue(V);return u.toArray(t).map(o=>{const l=a.toValue(o);return typeof l=="string"?l:u.unrefElement(l)}).filter(v.notNullish)});return a.watch(g,t=>{if(t.length)if(!e)e=h.createFocusTrap(t,{...m,onActivate(){n.value=!0,s.onActivate&&s.onActivate()},onDeactivate(){n.value=!1,s.onDeactivate&&s.onDeactivate()}}),r&&i();else{const o=e?.active;e?.updateContainerElements(t),!o&&r&&i()}},{flush:"post"}),u.tryOnScopeDispose(()=>f()),{hasFocus:n,isPaused:c,activate:i,deactivate:f,pause:A,unpause:T}}p.useFocusTrap=d})(this.VueUse=this.VueUse||{},VueUse,VueUse,focusTrap,Vue);

package/useFocusTrap.mjs

@@ -34,21 +34,29 @@ function useFocusTrap(target, options = {}) {
     (els) => {
       if (!els.length)
         return;
-      trap = createFocusTrap(els, {
-        ...focusTrapOptions,
-        onActivate() {
-          hasFocus.value = true;
-          if (options.onActivate)
-            options.onActivate();
-        },
-        onDeactivate() {
-          hasFocus.value = false;
-          if (options.onDeactivate)
-            options.onDeactivate();
+      if (!trap) {
+        trap = createFocusTrap(els, {
+          ...focusTrapOptions,
+          onActivate() {
+            hasFocus.value = true;
+            if (options.onActivate)
+              options.onActivate();
+          },
+          onDeactivate() {
+            hasFocus.value = false;
+            if (options.onDeactivate)
+              options.onDeactivate();
+          }
+        });
+        if (immediate)
+          activate();
+      } else {
+        const isActive = trap == null ? void 0 : trap.active;
+        trap == null ? void 0 : trap.updateContainerElements(els);
+        if (!isActive && immediate) {
+          activate();
         }
-      });
-      if (immediate)
-        activate();
+      }
     },
     { flush: "post" }
   );

package/useIDBKeyval.d.mts

@@ -1,7 +1,11 @@
 import { ConfigurableFlush, RemovableRef } from '@vueuse/shared';
 import { ShallowRef, MaybeRefOrGetter } from 'vue';
 
-interface UseIDBOptions extends ConfigurableFlush {
+interface Serializer<T> {
+    read: (raw: unknown) => T;
+    write: (value: T) => unknown;
+}
+interface UseIDBOptions<T> extends ConfigurableFlush {
     /**
      * Watch for deep changes
      *
@@ -26,6 +30,10 @@ interface UseIDBOptions extends ConfigurableFlush {
      * @default true
      */
     writeDefaults?: boolean;
+    /**
+     * Custom data serialization
+     */
+    serializer?: Serializer<T>;
 }
 interface UseIDBKeyvalReturn<T> {
     data: RemovableRef<T>;
@@ -38,7 +46,7 @@ interface UseIDBKeyvalReturn<T> {
  * @param initialValue
  * @param options
  */
-declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeRefOrGetter<T>, options?: UseIDBOptions): UseIDBKeyvalReturn<T>;
+declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: MaybeRefOrGetter<T>, options?: UseIDBOptions<T>): UseIDBKeyvalReturn<T>;
 
 export { useIDBKeyval };
 export type { UseIDBKeyvalReturn, UseIDBOptions };

package/useIDBKeyval.iife.js

@@ -9,7 +9,11 @@
       onError = (e) => {
         console.error(e);
       },
-      writeDefaults = true
+      writeDefaults = true,
+      serializer = {
+        read: (raw) => raw,
+        write: (value) => value
+      }
     } = options;
     const isFinished = vue.shallowRef(false);
     const data = (shallow ? vue.shallowRef : vue.ref)(initialValue);
@@ -18,10 +22,12 @@
       try {
         const rawValue = await idbKeyval.get(key);
         if (rawValue === void 0) {
-          if (rawInit !== void 0 && rawInit !== null && writeDefaults)
-            await idbKeyval.set(key, rawInit);
+          if (rawInit !== void 0 && rawInit !== null && writeDefaults) {
+            const initValue = serializer.write(rawInit);
+            await idbKeyval.set(key, initValue);
+          }
         } else {
-          data.value = rawValue;
+          data.value = serializer.read(rawValue);
         }
       } catch (e) {
         onError(e);
@@ -34,7 +40,9 @@
         if (data.value == null) {
           await idbKeyval.del(key);
         } else {
-          await idbKeyval.update(key, () => vue.toRaw(data.value));
+          const rawValue = vue.toRaw(data.value);
+          const serializedValue = serializer.write(rawValue);
+          await idbKeyval.update(key, () => serializedValue);
         }
       } catch (e) {
         onError(e);

package/useIDBKeyval.iife.min.js

@@ -1 +1 @@
-(function(i,f,s,a){"use strict";function w(u,l,h={}){const{flush:d="pre",deep:p=!0,shallow:V=!1,onError:c=e=>{console.error(e)},writeDefaults:D=!0}=h,o=a.shallowRef(!1),t=(V?a.shallowRef:a.ref)(l),n=a.toValue(l);async function v(){try{const e=await s.get(u);e===void 0?n!=null&&D&&await s.set(u,n):t.value=e}catch(e){c(e)}o.value=!0}v();async function r(){try{t.value==null?await s.del(u):await s.update(u,()=>a.toRaw(t.value))}catch(e){c(e)}}const{pause:I,resume:R}=f.watchPausable(t,()=>r(),{flush:d,deep:p});async function U(e){I(),t.value=e,await r(),R()}return{set:U,isFinished:o,data:t}}i.useIDBKeyval=w})(this.VueUse=this.VueUse||{},VueUse,idbKeyval,Vue);
+(function(f,h,s,t){"use strict";function d(r,i,V={}){const{flush:p="pre",deep:D=!0,shallow:v=!1,onError:c=e=>{console.error(e)},writeDefaults:I=!0,serializer:u={read:e=>e,write:e=>e}}=V,o=t.shallowRef(!1),a=(v?t.shallowRef:t.ref)(i),l=t.toValue(i);async function R(){try{const e=await s.get(r);if(e===void 0){if(l!=null&&I){const n=u.write(l);await s.set(r,n)}}else a.value=u.read(e)}catch(e){c(e)}o.value=!0}R();async function w(){try{if(a.value==null)await s.del(r);else{const e=t.toRaw(a.value),n=u.write(e);await s.update(r,()=>n)}}catch(e){c(e)}}const{pause:U,resume:m}=h.watchPausable(a,()=>w(),{flush:p,deep:D});async function y(e){U(),a.value=e,await w(),m()}return{set:y,isFinished:o,data:a}}f.useIDBKeyval=d})(this.VueUse=this.VueUse||{},VueUse,idbKeyval,Vue);

package/useIDBKeyval.mjs

@@ -10,7 +10,11 @@ function useIDBKeyval(key, initialValue, options = {}) {
     onError = (e) => {
       console.error(e);
     },
-    writeDefaults = true
+    writeDefaults = true,
+    serializer = {
+      read: (raw) => raw,
+      write: (value) => value
+    }
   } = options;
   const isFinished = shallowRef(false);
   const data = (shallow ? shallowRef : ref)(initialValue);
@@ -19,10 +23,12 @@ function useIDBKeyval(key, initialValue, options = {}) {
     try {
       const rawValue = await get(key);
       if (rawValue === void 0) {
-        if (rawInit !== void 0 && rawInit !== null && writeDefaults)
-          await set(key, rawInit);
+        if (rawInit !== void 0 && rawInit !== null && writeDefaults) {
+          const initValue = serializer.write(rawInit);
+          await set(key, initValue);
+        }
       } else {
-        data.value = rawValue;
+        data.value = serializer.read(rawValue);
       }
     } catch (e) {
       onError(e);
@@ -35,7 +41,9 @@ function useIDBKeyval(key, initialValue, options = {}) {
       if (data.value == null) {
         await del(key);
       } else {
-        await update(key, () => toRaw(data.value));
+        const rawValue = toRaw(data.value);
+        const serializedValue = serializer.write(rawValue);
+        await update(key, () => serializedValue);
       }
     } catch (e) {
       onError(e);