@vueuse/components 7.4.0 → 7.4.1

package/index.cjs

@@ -123,6 +123,13 @@ const UseBrowserLocation = vueDemi.defineComponent({
   }
 });
 
+const globalKey = "__vueuse_ssr_handlers__";
+globalThis[globalKey] = globalThis[globalKey] || {};
+const handlers = globalThis[globalKey];
+function getSSRHandler(key, fallback) {
+  return handlers[key] || fallback;
+}
+
 function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
@@ -157,8 +164,11 @@ const StorageSerializers = {
     write: (v) => JSON.stringify(Array.from(v.entries()))
   }
 };
-function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) == null ? void 0 : _a.localStorage)(), options = {}) {
-  var _a2;
+function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
+  var _a;
+  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+})(), options = {}) {
+  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -174,7 +184,7 @@ function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) =
   const rawInit = vueDemi.unref(initialValue);
   const type = guessSerializerType(rawInit);
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
-  const serializer = (_a2 = options.serializer) != null ? _a2 : StorageSerializers[type];
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
@@ -184,6 +194,8 @@ function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) =
         data.value = rawInit;
         if (writeDefaults && rawInit !== null)
           storage.setItem(key, serializer.write(rawInit));
+      } else if (typeof rawValue !== "string") {
+        data.value = rawValue;
       } else {
         data.value = serializer.read(rawValue);
       }
@@ -263,12 +275,14 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 function useColorMode(options = {}) {
-  var _a;
   const {
     selector = "html",
     attribute = "class",
     window = defaultWindow,
-    storage = (_a = defaultWindow) == null ? void 0 : _a.localStorage,
+    storage = getSSRHandler("getDefaultStorage", () => {
+      var _a;
+      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+    })(),
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
     storageRef
@@ -289,12 +303,12 @@ function useColorMode(options = {}) {
       store.value = v;
     }
   });
-  function defaultOnChanged(value) {
-    const el = window == null ? void 0 : window.document.querySelector(selector);
+  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+    const el = window == null ? void 0 : window.document.querySelector(selector2);
     if (!el)
       return;
-    if (attribute === "class") {
-      const current = (modes[value] || "").split(/\s/g);
+    if (attribute2 === "class") {
+      const current = value.split(/\s/g);
       Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
         if (current.includes(v))
           el.classList.add(v);
@@ -302,8 +316,12 @@ function useColorMode(options = {}) {
           el.classList.remove(v);
       });
     } else {
-      el.setAttribute(attribute, value);
+      el.setAttribute(attribute2, value);
     }
+  });
+  function defaultOnChanged(mode) {
+    var _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -311,7 +329,7 @@ function useColorMode(options = {}) {
     else
       defaultOnChanged(mode);
   }
-  vueDemi.watch(state, onChanged, { flush: "post" });
+  vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
   shared.tryOnMounted(() => onChanged(state.value));
   return state;
 }

package/index.d.ts

@@ -35,15 +35,16 @@ declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VN
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 
-declare type Serializer<T> = {
-    read(raw: string): T;
-    write(value: T): string;
-};
 interface StorageLike {
     getItem(key: string): string | null;
     setItem(key: string, value: string): void;
     removeItem(key: string): void;
 }
+
+declare type Serializer<T> = {
+    read(raw: string): T;
+    write(value: T): string;
+};
 interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
      * Watch for deep changes

package/index.iife.js

@@ -179,6 +179,13 @@
     }
   });
 
+  const globalKey = "__vueuse_ssr_handlers__";
+  globalThis[globalKey] = globalThis[globalKey] || {};
+  const handlers = globalThis[globalKey];
+  function getSSRHandler(key, fallback) {
+    return handlers[key] || fallback;
+  }
+
   function guessSerializerType(rawInit) {
     return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
   }
@@ -213,8 +220,11 @@
       write: (v) => JSON.stringify(Array.from(v.entries()))
     }
   };
-  function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) == null ? void 0 : _a.localStorage)(), options = {}) {
-    var _a2;
+  function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
+    var _a;
+    return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+  })(), options = {}) {
+    var _a;
     const {
       flush = "pre",
       deep = true,
@@ -230,7 +240,7 @@
     const rawInit = vueDemi.unref(initialValue);
     const type = guessSerializerType(rawInit);
     const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
-    const serializer = (_a2 = options.serializer) != null ? _a2 : StorageSerializers[type];
+    const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
     function read(event) {
       if (!storage || event && event.key !== key)
         return;
@@ -240,6 +250,8 @@
           data.value = rawInit;
           if (writeDefaults && rawInit !== null)
             storage.setItem(key, serializer.write(rawInit));
+        } else if (typeof rawValue !== "string") {
+          data.value = rawValue;
         } else {
           data.value = serializer.read(rawValue);
         }
@@ -319,12 +331,14 @@
     return a;
   };
   function useColorMode(options = {}) {
-    var _a;
     const {
       selector = "html",
       attribute = "class",
       window = defaultWindow,
-      storage = (_a = defaultWindow) == null ? void 0 : _a.localStorage,
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a;
+        return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+      })(),
       storageKey = "vueuse-color-scheme",
       listenToStorageChanges = true,
       storageRef
@@ -345,12 +359,12 @@
         store.value = v;
       }
     });
-    function defaultOnChanged(value) {
-      const el = window == null ? void 0 : window.document.querySelector(selector);
+    const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+      const el = window == null ? void 0 : window.document.querySelector(selector2);
       if (!el)
         return;
-      if (attribute === "class") {
-        const current = (modes[value] || "").split(/\s/g);
+      if (attribute2 === "class") {
+        const current = value.split(/\s/g);
         Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
           if (current.includes(v))
             el.classList.add(v);
@@ -358,8 +372,12 @@
             el.classList.remove(v);
         });
       } else {
-        el.setAttribute(attribute, value);
+        el.setAttribute(attribute2, value);
       }
+    });
+    function defaultOnChanged(mode) {
+      var _a;
+      updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
     }
     function onChanged(mode) {
       if (options.onChanged)
@@ -367,7 +385,7 @@
       else
         defaultOnChanged(mode);
     }
-    vueDemi.watch(state, onChanged, { flush: "post" });
+    vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
     shared.tryOnMounted(() => onChanged(state.value));
     return state;
   }

package/index.iife.min.js

@@ -1 +1 @@
-(function(o){if(!o.VueDemi){var n={},s=o.Vue;if(s)if(s.version.slice(0,2)==="2."){var f=o.VueCompositionAPI;if(f){for(var h in f)n[h]=f[h];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=s,n.Vue2=s,n.version=s.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(s.version.slice(0,2)==="3."){for(var h in s)n[h]=s[h];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=s,n.Vue2=void 0,n.version=s.version,n.set=function(p,c,y){return Array.isArray(p)?(p.length=Math.max(p.length,c),p.splice(c,1,y),y):(p[c]=y,y)},n.del=function(p,c){if(Array.isArray(p)){p.splice(c,1);return}delete p[c]}}else console.error("[vue-demi] Vue version "+s.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");o.VueDemi=n}})(window),function(o,n,s,f){"use strict";const h=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const a=n.ref();return s.onClickOutside(a,i=>{r("trigger",i)}),()=>{if(e.default)return n.h(t.as||"div",{ref:a},e.default())}}});function p(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const c=f.isClient?window:void 0;function y(...t){let e,r,a,i;if(f.isString(t[0])?([r,a,i]=t,e=c):[e,r,a,i]=t,!e)return f.noop;let u=f.noop;const d=n.watch(()=>n.unref(e),l=>{u(),!!l&&(l.addEventListener(r,a,i),u=()=>{l.removeEventListener(r,a,i),u=f.noop})},{immediate:!0,flush:"post"}),v=()=>{d(),u()};return f.tryOnScopeDispose(v),v}function Y(t,e,r={}){const{window:a=c}=r;if(!a)return;const i=n.ref(!0),d=[y(a,"click",l=>{const m=p(t);!m||m===l.target||l.composedPath().includes(m)||!i.value||e(l)},{passive:!0,capture:!0}),y(a,"pointerdown",l=>{const m=p(t);i.value=!!m&&!l.composedPath().includes(m)},{passive:!0})];return()=>d.forEach(l=>l())}const Z=(t,e)=>{Y(t,e.value)},x=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:s.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),D=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(s.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),ee=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(s.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}});function te(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const re={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function ne(t,e,r=(i=>(i=c)==null?void 0:i.localStorage)(),a={}){var i;const{flush:u="pre",deep:d=!0,listenToStorageChanges:v=!0,writeDefaults:l=!0,shallow:m,window:S=c,eventFilter:$,onError:b=g=>{console.error(g)}}=a,U=n.unref(e),V=te(U),P=(m?n.shallowRef:n.ref)(e),_=(i=a.serializer)!=null?i:re[V];function w(g){if(!(!r||g&&g.key!==t))try{const O=g?g.newValue:r.getItem(t);O==null?(P.value=U,l&&U!==null&&r.setItem(t,_.write(U))):P.value=_.read(O)}catch(O){b(O)}}return w(),S&&v&&y(S,"storage",g=>setTimeout(()=>w(g),0)),r&&f.watchWithFilter(P,()=>{try{P.value==null?r.removeItem(t):r.setItem(t,_.write(P.value))}catch(g){b(g)}},{flush:u,deep:d,eventFilter:$}),P}function ae(t,e={}){const{window:r=c}=e;let a;const i=n.ref(!1),u=()=>{!r||(a||(a=r.matchMedia(t)),i.value=a.matches)};return f.tryOnMounted(()=>{u(),!!a&&("addEventListener"in a?a.addEventListener("change",u):a.addListener(u),f.tryOnScopeDispose(()=>{"removeEventListener"in u?a.removeEventListener("change",u):a.removeListener(u)}))}),i}function se(t){return ae("(prefers-color-scheme: dark)",t)}var oe=Object.defineProperty,E=Object.getOwnPropertySymbols,ie=Object.prototype.hasOwnProperty,ue=Object.prototype.propertyIsEnumerable,L=(t,e,r)=>e in t?oe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,le=(t,e)=>{for(var r in e||(e={}))ie.call(e,r)&&L(t,r,e[r]);if(E)for(var r of E(e))ue.call(e,r)&&L(t,r,e[r]);return t};function fe(t={}){var e;const{selector:r="html",attribute:a="class",window:i=c,storage:u=(e=c)==null?void 0:e.localStorage,storageKey:d="vueuse-color-scheme",listenToStorageChanges:v=!0,storageRef:l}=t,m=le({auto:"",light:"light",dark:"dark"},t.modes||{}),S=se({window:i}),$=n.computed(()=>S.value?"dark":"light"),b=l||(d==null?n.ref("auto"):ne(d,"auto",u,{window:i,listenToStorageChanges:v})),U=n.computed({get(){return b.value==="auto"?$.value:b.value},set(_){b.value=_}});function V(_){const w=i==null?void 0:i.document.querySelector(r);if(!!w)if(a==="class"){const g=(m[_]||"").split(/\s/g);Object.values(m).flatMap(O=>(O||"").split(/\s/g)).filter(Boolean).forEach(O=>{g.includes(O)?w.classList.add(O):w.classList.remove(O)})}else w.setAttribute(a,_)}function P(_){t.onChanged?t.onChanged(_,V):V(_)}return n.watch(U,P,{flush:"post"}),f.tryOnMounted(()=>P(U.value)),U}const ce=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=fe(t),a=n.reactive({mode:r});return()=>{if(e.default)return e.default(a)}}}),de=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=s.useDark(t),a=n.reactive({isDark:r,toggleDark:f.useToggle(r)});return()=>{if(e.default)return e.default(a)}}}),pe=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(s.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),ge=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(s.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),me=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:s.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),_e=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(s.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),Oe=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:s.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var ve=Object.defineProperty,Pe=Object.defineProperties,ye=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,Ue=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable,M=(t,e,r)=>e in t?ve(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,we=(t,e)=>{for(var r in e||(e={}))Ue.call(e,r)&&M(t,r,e[r]);if(j)for(var r of j(e))he.call(e,r)&&M(t,r,e[r]);return t},be=(t,e)=>Pe(t,ye(e));const Ce=n.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),a=t.storageKey?s.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},s.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},i=n.reactive(s.useDraggable(r,be(we({},t),{initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${i.style}`},e.default(i))}}}),Se=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ve=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),$e=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive({isVisible:s.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ee=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(s.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),Le=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),je=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(s.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),Me=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(s.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}}),Ne=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(s.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Ae=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}});var Ie=Object.defineProperty,Be=Object.defineProperties,Te=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertySymbols,Fe=Object.prototype.hasOwnProperty,ze=Object.prototype.propertyIsEnumerable,A=(t,e,r)=>e in t?Ie(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,We=(t,e)=>{for(var r in e||(e={}))Fe.call(e,r)&&A(t,r,e[r]);if(N)for(var r of N(e))ze.call(e,r)&&A(t,r,e[r]);return t},Re=(t,e)=>Be(t,Te(e));const ke=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useMousePressed(Re(We({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Je=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(s.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Ke=Object.defineProperty,Ge=Object.defineProperties,He=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,qe=Object.prototype.hasOwnProperty,Qe=Object.prototype.propertyIsEnumerable,B=(t,e,r)=>e in t?Ke(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Xe=(t,e)=>{for(var r in e||(e={}))qe.call(e,r)&&B(t,r,e[r]);if(I)for(var r of I(e))Qe.call(e,r)&&B(t,r,e[r]);return t},Ye=(t,e)=>Ge(t,He(e));const Ze=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(s.useNow(Ye(Xe({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}}),xe=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:s.useOnline()});return()=>{if(e.default)return e.default(r)}}}),De=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:s.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var et=Object.defineProperty,tt=Object.defineProperties,rt=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,nt=Object.prototype.hasOwnProperty,at=Object.prototype.propertyIsEnumerable,F=(t,e,r)=>e in t?et(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,st=(t,e)=>{for(var r in e||(e={}))nt.call(e,r)&&F(t,r,e[r]);if(T)for(var r of T(e))at.call(e,r)&&F(t,r,e[r]);return t},ot=(t,e)=>tt(t,rt(e));const it=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),a=n.reactive(s.usePointer(ot(st({},t),{target:t.target==="self"?r:c})));return()=>{if(e.default)return e.default(a,{ref:r})}}}),ut=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:s.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),lt=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:s.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),ft=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:s.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}}),z="--vueuse-safe-area-top",W="--vueuse-safe-area-right",R="--vueuse-safe-area-bottom",k="--vueuse-safe-area-left";function ct(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),a=n.ref("");if(s.isClient){const u=s.useCssVar(z),d=s.useCssVar(W),v=s.useCssVar(R),l=s.useCssVar(k);u.value="env(safe-area-inset-top, 0px)",d.value="env(safe-area-inset-right, 0px)",v.value="env(safe-area-inset-bottom, 0px)",l.value="env(safe-area-inset-left, 0px)",i(),s.useEventListener("resize",s.useDebounceFn(i))}function i(){t.value=C(z),e.value=C(W),r.value=C(R),a.value=C(k)}return{top:t,right:e,bottom:r,left:a,update:i}}function C(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const dt=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:a,bottom:i,left:u}=ct();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?a.value:"",paddingBottom:t.bottom?i.value:"",paddingLeft:t.left?u.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var pt=Object.defineProperty,gt=Object.defineProperties,mt=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertySymbols,_t=Object.prototype.hasOwnProperty,Ot=Object.prototype.propertyIsEnumerable,K=(t,e,r)=>e in t?pt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,vt=(t,e)=>{for(var r in e||(e={}))_t.call(e,r)&&K(t,r,e[r]);if(J)for(var r of J(e))Ot.call(e,r)&&K(t,r,e[r]);return t},Pt=(t,e)=>gt(t,mt(e));const yt=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),a=n.reactive(s.useTimeAgo(r,Pt(vt({},t),{controls:!0})));return()=>{if(e.default)return e.default(a)}}});var Ut=Object.defineProperty,ht=Object.defineProperties,wt=Object.getOwnPropertyDescriptors,G=Object.getOwnPropertySymbols,bt=Object.prototype.hasOwnProperty,Ct=Object.prototype.propertyIsEnumerable,H=(t,e,r)=>e in t?Ut(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,St=(t,e)=>{for(var r in e||(e={}))bt.call(e,r)&&H(t,r,e[r]);if(G)for(var r of G(e))Ct.call(e,r)&&H(t,r,e[r]);return t},Vt=(t,e)=>ht(t,wt(e));const $t=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(s.useTimestamp(Vt(St({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Et=Object.defineProperty,q=Object.getOwnPropertySymbols,Lt=Object.prototype.hasOwnProperty,jt=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?Et(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,X=(t,e)=>{for(var r in e||(e={}))Lt.call(e,r)&&Q(t,r,e[r]);if(q)for(var r of q(e))jt.call(e,r)&&Q(t,r,e[r]);return t};const Mt=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:a,containerProps:i,wrapperProps:u}=s.useVirtualList(r,t.options);return i.style.height=t.height||"300px",()=>n.h("div",X({},i),[n.h("div",X({},u.value),a.value.map(d=>n.h("div",{style:{overFlow:"hidden",height:d.height}},e.default?e.default(d):"Please set content!")))])}}),Nt=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:s.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),At=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(s.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});o.OnClickOutside=h,o.UseActiveElement=x,o.UseBattery=D,o.UseBrowserLocation=ee,o.UseColorMode=ce,o.UseDark=de,o.UseDeviceMotion=pe,o.UseDeviceOrientation=ge,o.UseDevicePixelRatio=me,o.UseDevicesList=_e,o.UseDocumentVisibility=Oe,o.UseDraggable=Ce,o.UseElementBounding=Se,o.UseElementSize=Ve,o.UseElementVisibility=$e,o.UseEyeDropper=Ee,o.UseFullscreen=Le,o.UseGeolocation=je,o.UseIdle=Me,o.UseMouse=Ne,o.UseMouseInElement=Ae,o.UseMousePressed=ke,o.UseNetwork=Je,o.UseNow=Ze,o.UseOnline=xe,o.UsePageLeave=De,o.UsePointer=it,o.UsePreferredColorScheme=ut,o.UsePreferredDark=lt,o.UsePreferredLanguages=ft,o.UseScreenSafeArea=dt,o.UseTimeAgo=yt,o.UseTimestamp=$t,o.UseVirtualList=Mt,o.UseWindowFocus=Nt,o.UseWindowSize=At,o.VOnClickOutside=Z,Object.defineProperty(o,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+(function(o){if(!o.VueDemi){var n={},s=o.Vue;if(s)if(s.version.slice(0,2)==="2."){var c=o.VueCompositionAPI;if(c){for(var U in c)n[U]=c[U];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=s,n.Vue2=s,n.version=s.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(s.version.slice(0,2)==="3."){for(var U in s)n[U]=s[U];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=s,n.Vue2=void 0,n.version=s.version,n.set=function(g,d,y){return Array.isArray(g)?(g.length=Math.max(g.length,d),g.splice(d,1,y),y):(g[d]=y,y)},n.del=function(g,d){if(Array.isArray(g)){g.splice(d,1);return}delete g[d]}}else console.error("[vue-demi] Vue version "+s.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");o.VueDemi=n}})(window),function(o,n,s,c){"use strict";const U=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const a=n.ref();return s.onClickOutside(a,i=>{r("trigger",i)}),()=>{if(e.default)return n.h(t.as||"div",{ref:a},e.default())}}});function g(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const d=c.isClient?window:void 0;function y(...t){let e,r,a,i;if(c.isString(t[0])?([r,a,i]=t,e=d):[e,r,a,i]=t,!e)return c.noop;let u=c.noop;const _=n.watch(()=>n.unref(e),l=>{u(),!!l&&(l.addEventListener(r,a,i),u=()=>{l.removeEventListener(r,a,i),u=c.noop})},{immediate:!0,flush:"post"}),P=()=>{_(),u()};return c.tryOnScopeDispose(P),P}function D(t,e,r={}){const{window:a=d}=r;if(!a)return;const i=n.ref(!0),_=[y(a,"click",l=>{const v=g(t);!v||v===l.target||l.composedPath().includes(v)||!i.value||e(l)},{passive:!0,capture:!0}),y(a,"pointerdown",l=>{const v=g(t);i.value=!!v&&!l.composedPath().includes(v)},{passive:!0})];return()=>_.forEach(l=>l())}const ee=(t,e)=>{D(t,e.value)},te=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:s.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),re=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(s.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),ne=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(s.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),L="__vueuse_ssr_handlers__";globalThis[L]=globalThis[L]||{};const ae=globalThis[L];function j(t,e){return ae[t]||e}function se(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const oe={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function ie(t,e,r=j("getDefaultStorage",()=>{var i;return(i=d)==null?void 0:i.localStorage})(),a={}){var i;const{flush:u="pre",deep:_=!0,listenToStorageChanges:P=!0,writeDefaults:l=!0,shallow:v,window:$=d,eventFilter:C,onError:w=p=>{console.error(p)}}=a,b=n.unref(e),E=se(b),O=(v?n.shallowRef:n.ref)(e),f=(i=a.serializer)!=null?i:oe[E];function h(p){if(!(!r||p&&p.key!==t))try{const m=p?p.newValue:r.getItem(t);m==null?(O.value=b,l&&b!==null&&r.setItem(t,f.write(b))):typeof m!="string"?O.value=m:O.value=f.read(m)}catch(m){w(m)}}return h(),$&&P&&y($,"storage",p=>setTimeout(()=>h(p),0)),r&&c.watchWithFilter(O,()=>{try{O.value==null?r.removeItem(t):r.setItem(t,f.write(O.value))}catch(p){w(p)}},{flush:u,deep:_,eventFilter:C}),O}function ue(t,e={}){const{window:r=d}=e;let a;const i=n.ref(!1),u=()=>{!r||(a||(a=r.matchMedia(t)),i.value=a.matches)};return c.tryOnMounted(()=>{u(),!!a&&("addEventListener"in a?a.addEventListener("change",u):a.addListener(u),c.tryOnScopeDispose(()=>{"removeEventListener"in u?a.removeEventListener("change",u):a.removeListener(u)}))}),i}function le(t){return ue("(prefers-color-scheme: dark)",t)}var fe=Object.defineProperty,M=Object.getOwnPropertySymbols,ce=Object.prototype.hasOwnProperty,de=Object.prototype.propertyIsEnumerable,N=(t,e,r)=>e in t?fe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,pe=(t,e)=>{for(var r in e||(e={}))ce.call(e,r)&&N(t,r,e[r]);if(M)for(var r of M(e))de.call(e,r)&&N(t,r,e[r]);return t};function ge(t={}){const{selector:e="html",attribute:r="class",window:a=d,storage:i=j("getDefaultStorage",()=>{var f;return(f=d)==null?void 0:f.localStorage})(),storageKey:u="vueuse-color-scheme",listenToStorageChanges:_=!0,storageRef:P}=t,l=pe({auto:"",light:"light",dark:"dark"},t.modes||{}),v=le({window:a}),$=n.computed(()=>v.value?"dark":"light"),C=P||(u==null?n.ref("auto"):ie(u,"auto",i,{window:a,listenToStorageChanges:_})),w=n.computed({get(){return C.value==="auto"?$.value:C.value},set(f){C.value=f}}),b=j("updateHTMLAttrs",(f,h,p)=>{const m=a==null?void 0:a.document.querySelector(f);if(!!m)if(h==="class"){const zt=p.split(/\s/g);Object.values(l).flatMap(S=>(S||"").split(/\s/g)).filter(Boolean).forEach(S=>{zt.includes(S)?m.classList.add(S):m.classList.remove(S)})}else m.setAttribute(h,p)});function E(f){var h;b(e,r,(h=l[f])!=null?h:f)}function O(f){t.onChanged?t.onChanged(f,E):E(f)}return n.watch(w,O,{flush:"post",immediate:!0}),c.tryOnMounted(()=>O(w.value)),w}const _e=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=ge(t),a=n.reactive({mode:r});return()=>{if(e.default)return e.default(a)}}}),me=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=s.useDark(t),a=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(a)}}}),ve=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(s.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),Oe=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(s.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),Pe=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:s.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),ye=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(s.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),he=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:s.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var Ue=Object.defineProperty,we=Object.defineProperties,be=Object.getOwnPropertyDescriptors,A=Object.getOwnPropertySymbols,Ce=Object.prototype.hasOwnProperty,Se=Object.prototype.propertyIsEnumerable,T=(t,e,r)=>e in t?Ue(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ve=(t,e)=>{for(var r in e||(e={}))Ce.call(e,r)&&T(t,r,e[r]);if(A)for(var r of A(e))Se.call(e,r)&&T(t,r,e[r]);return t},$e=(t,e)=>we(t,be(e));const Ee=n.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),a=t.storageKey?s.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},s.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},i=n.reactive(s.useDraggable(r,$e(Ve({},t),{initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${i.style}`},e.default(i))}}}),Le=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),je=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Me=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive({isVisible:s.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ne=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(s.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),Ae=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Te=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(s.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),Ie=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(s.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}}),Be=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(s.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Fe=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}});var ze=Object.defineProperty,Re=Object.defineProperties,We=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,ke=Object.prototype.hasOwnProperty,He=Object.prototype.propertyIsEnumerable,B=(t,e,r)=>e in t?ze(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ke=(t,e)=>{for(var r in e||(e={}))ke.call(e,r)&&B(t,r,e[r]);if(I)for(var r of I(e))He.call(e,r)&&B(t,r,e[r]);return t},Je=(t,e)=>Re(t,We(e));const Ge=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(s.useMousePressed(Je(Ke({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),qe=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(s.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Qe=Object.defineProperty,Xe=Object.defineProperties,Ye=Object.getOwnPropertyDescriptors,F=Object.getOwnPropertySymbols,Ze=Object.prototype.hasOwnProperty,xe=Object.prototype.propertyIsEnumerable,z=(t,e,r)=>e in t?Qe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,De=(t,e)=>{for(var r in e||(e={}))Ze.call(e,r)&&z(t,r,e[r]);if(F)for(var r of F(e))xe.call(e,r)&&z(t,r,e[r]);return t},et=(t,e)=>Xe(t,Ye(e));const tt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(s.useNow(et(De({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}}),rt=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:s.useOnline()});return()=>{if(e.default)return e.default(r)}}}),nt=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:s.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var at=Object.defineProperty,st=Object.defineProperties,ot=Object.getOwnPropertyDescriptors,R=Object.getOwnPropertySymbols,it=Object.prototype.hasOwnProperty,ut=Object.prototype.propertyIsEnumerable,W=(t,e,r)=>e in t?at(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,lt=(t,e)=>{for(var r in e||(e={}))it.call(e,r)&&W(t,r,e[r]);if(R)for(var r of R(e))ut.call(e,r)&&W(t,r,e[r]);return t},ft=(t,e)=>st(t,ot(e));const ct=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),a=n.reactive(s.usePointer(ft(lt({},t),{target:t.target==="self"?r:d})));return()=>{if(e.default)return e.default(a,{ref:r})}}}),dt=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:s.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),pt=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:s.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),gt=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:s.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}}),k="--vueuse-safe-area-top",H="--vueuse-safe-area-right",K="--vueuse-safe-area-bottom",J="--vueuse-safe-area-left";function _t(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),a=n.ref("");if(s.isClient){const u=s.useCssVar(k),_=s.useCssVar(H),P=s.useCssVar(K),l=s.useCssVar(J);u.value="env(safe-area-inset-top, 0px)",_.value="env(safe-area-inset-right, 0px)",P.value="env(safe-area-inset-bottom, 0px)",l.value="env(safe-area-inset-left, 0px)",i(),s.useEventListener("resize",s.useDebounceFn(i))}function i(){t.value=V(k),e.value=V(H),r.value=V(K),a.value=V(J)}return{top:t,right:e,bottom:r,left:a,update:i}}function V(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const mt=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:a,bottom:i,left:u}=_t();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?a.value:"",paddingBottom:t.bottom?i.value:"",paddingLeft:t.left?u.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var vt=Object.defineProperty,Ot=Object.defineProperties,Pt=Object.getOwnPropertyDescriptors,G=Object.getOwnPropertySymbols,yt=Object.prototype.hasOwnProperty,ht=Object.prototype.propertyIsEnumerable,q=(t,e,r)=>e in t?vt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ut=(t,e)=>{for(var r in e||(e={}))yt.call(e,r)&&q(t,r,e[r]);if(G)for(var r of G(e))ht.call(e,r)&&q(t,r,e[r]);return t},wt=(t,e)=>Ot(t,Pt(e));const bt=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),a=n.reactive(s.useTimeAgo(r,wt(Ut({},t),{controls:!0})));return()=>{if(e.default)return e.default(a)}}});var Ct=Object.defineProperty,St=Object.defineProperties,Vt=Object.getOwnPropertyDescriptors,Q=Object.getOwnPropertySymbols,$t=Object.prototype.hasOwnProperty,Et=Object.prototype.propertyIsEnumerable,X=(t,e,r)=>e in t?Ct(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Lt=(t,e)=>{for(var r in e||(e={}))$t.call(e,r)&&X(t,r,e[r]);if(Q)for(var r of Q(e))Et.call(e,r)&&X(t,r,e[r]);return t},jt=(t,e)=>St(t,Vt(e));const Mt=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(s.useTimestamp(jt(Lt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Nt=Object.defineProperty,Y=Object.getOwnPropertySymbols,At=Object.prototype.hasOwnProperty,Tt=Object.prototype.propertyIsEnumerable,Z=(t,e,r)=>e in t?Nt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,x=(t,e)=>{for(var r in e||(e={}))At.call(e,r)&&Z(t,r,e[r]);if(Y)for(var r of Y(e))Tt.call(e,r)&&Z(t,r,e[r]);return t};const It=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:a,containerProps:i,wrapperProps:u}=s.useVirtualList(r,t.options);return i.style.height=t.height||"300px",()=>n.h("div",x({},i),[n.h("div",x({},u.value),a.value.map(_=>n.h("div",{style:{overFlow:"hidden",height:_.height}},e.default?e.default(_):"Please set content!")))])}}),Bt=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:s.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),Ft=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(s.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});o.OnClickOutside=U,o.UseActiveElement=te,o.UseBattery=re,o.UseBrowserLocation=ne,o.UseColorMode=_e,o.UseDark=me,o.UseDeviceMotion=ve,o.UseDeviceOrientation=Oe,o.UseDevicePixelRatio=Pe,o.UseDevicesList=ye,o.UseDocumentVisibility=he,o.UseDraggable=Ee,o.UseElementBounding=Le,o.UseElementSize=je,o.UseElementVisibility=Me,o.UseEyeDropper=Ne,o.UseFullscreen=Ae,o.UseGeolocation=Te,o.UseIdle=Ie,o.UseMouse=Be,o.UseMouseInElement=Fe,o.UseMousePressed=Ge,o.UseNetwork=qe,o.UseNow=tt,o.UseOnline=rt,o.UsePageLeave=nt,o.UsePointer=ct,o.UsePreferredColorScheme=dt,o.UsePreferredDark=pt,o.UsePreferredLanguages=gt,o.UseScreenSafeArea=mt,o.UseTimeAgo=bt,o.UseTimestamp=Mt,o.UseVirtualList=It,o.UseWindowFocus=Bt,o.UseWindowSize=Ft,o.VOnClickOutside=ee,Object.defineProperty(o,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

package/index.mjs

@@ -119,6 +119,13 @@ const UseBrowserLocation = defineComponent({
   }
 });
 
+const globalKey = "__vueuse_ssr_handlers__";
+globalThis[globalKey] = globalThis[globalKey] || {};
+const handlers = globalThis[globalKey];
+function getSSRHandler(key, fallback) {
+  return handlers[key] || fallback;
+}
+
 function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
@@ -153,8 +160,11 @@ const StorageSerializers = {
     write: (v) => JSON.stringify(Array.from(v.entries()))
   }
 };
-function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) == null ? void 0 : _a.localStorage)(), options = {}) {
-  var _a2;
+function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
+  var _a;
+  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+})(), options = {}) {
+  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -170,7 +180,7 @@ function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) =
   const rawInit = unref(initialValue);
   const type = guessSerializerType(rawInit);
   const data = (shallow ? shallowRef : ref)(initialValue);
-  const serializer = (_a2 = options.serializer) != null ? _a2 : StorageSerializers[type];
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
@@ -180,6 +190,8 @@ function useStorage(key, initialValue, storage = ((_a) => (_a = defaultWindow) =
         data.value = rawInit;
         if (writeDefaults && rawInit !== null)
           storage.setItem(key, serializer.write(rawInit));
+      } else if (typeof rawValue !== "string") {
+        data.value = rawValue;
       } else {
         data.value = serializer.read(rawValue);
       }
@@ -259,12 +271,14 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 function useColorMode(options = {}) {
-  var _a;
   const {
     selector = "html",
     attribute = "class",
     window = defaultWindow,
-    storage = (_a = defaultWindow) == null ? void 0 : _a.localStorage,
+    storage = getSSRHandler("getDefaultStorage", () => {
+      var _a;
+      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
+    })(),
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
     storageRef
@@ -285,12 +299,12 @@ function useColorMode(options = {}) {
       store.value = v;
     }
   });
-  function defaultOnChanged(value) {
-    const el = window == null ? void 0 : window.document.querySelector(selector);
+  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
+    const el = window == null ? void 0 : window.document.querySelector(selector2);
     if (!el)
       return;
-    if (attribute === "class") {
-      const current = (modes[value] || "").split(/\s/g);
+    if (attribute2 === "class") {
+      const current = value.split(/\s/g);
       Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
         if (current.includes(v))
           el.classList.add(v);
@@ -298,8 +312,12 @@ function useColorMode(options = {}) {
           el.classList.remove(v);
       });
     } else {
-      el.setAttribute(attribute, value);
+      el.setAttribute(attribute2, value);
     }
+  });
+  function defaultOnChanged(mode) {
+    var _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -307,7 +325,7 @@ function useColorMode(options = {}) {
     else
       defaultOnChanged(mode);
   }
-  watch(state, onChanged, { flush: "post" });
+  watch(state, onChanged, { flush: "post", immediate: true });
   tryOnMounted(() => onChanged(state.value));
   return state;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "7.4.0",
+  "version": "7.4.1",
   "description": "Renderless components for VueUse",
   "keywords": [
     "vue",
@@ -33,8 +33,8 @@
   },
   "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "dependencies": {
-    "@vueuse/core": "7.4.0",
-    "@vueuse/shared": "7.4.0",
+    "@vueuse/core": "7.4.1",
+    "@vueuse/shared": "7.4.1",
     "vue-demi": "*"
   }
 }