@vueuse/components 7.5.1 → 7.5.5

package/index.cjs

@@ -123,9 +123,10 @@ const UseBrowserLocation = vueDemi.defineComponent({
   }
 });
 
+const _global = typeof globalThis === "undefined" ? undefined : globalThis;
 const globalKey = "__vueuse_ssr_handlers__";
-globalThis[globalKey] = globalThis[globalKey] || {};
-const handlers = globalThis[globalKey];
+_global[globalKey] = _global[globalKey] || {};
+const handlers = _global[globalKey];
 function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
@@ -164,10 +165,7 @@ const StorageSerializers = {
     write: (v) => JSON.stringify(Array.from(v.entries()))
   }
 };
-function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
-  var _a;
-  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-})(), options = {}) {
+function useStorage(key, initialValue, storage, options = {}) {
   var _a;
   const {
     flush = "pre",
@@ -185,6 +183,16 @@ function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorag
   const type = guessSerializerType(rawInit);
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  if (!storage) {
+    try {
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a2;
+        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+      })();
+    } catch (e) {
+      onError(e);
+    }
+  }
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
@@ -279,10 +287,7 @@ function useColorMode(options = {}) {
     selector = "html",
     attribute = "class",
     window = defaultWindow,
-    storage = getSSRHandler("getDefaultStorage", () => {
-      var _a;
-      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-    })(),
+    storage,
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
     storageRef

package/index.d.ts

@@ -25,15 +25,15 @@ declare const VOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => voi
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseBattery: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 interface StorageLike {
     getItem(key: string): string | null;
@@ -41,10 +41,10 @@ interface StorageLike {
     removeItem(key: string): void;
 }
 
-declare type Serializer<T> = {
+interface Serializer<T> {
     read(raw: string): T;
     write(value: T): string;
-};
+}
 interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
      * Watch for deep changes
@@ -135,21 +135,21 @@ declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {},
 
 declare const UseDeviceMotion: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseDeviceOrientation: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseDevicePixelRatio: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseDevicesList: vue_demi.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDevicesListOptions>, {}>;
 
 declare const UseDocumentVisibility: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
     /**
@@ -185,11 +185,9 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
-    sRGBHex?: unknown;
-} & {} & {
-    sRGBHex?: string | undefined;
-}>, {}>;
+}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    sRGBHex: StringConstructor;
+}>>, {}>;
 
 declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
@@ -209,17 +207,17 @@ declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions
 
 declare const UseNetwork: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}>;
 
 declare const UseOnline: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePageLeave: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "target"> & {
     target: 'window' | 'self';
@@ -229,15 +227,15 @@ declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "targ
 
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePreferredDark: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePreferredLanguages: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     top: BooleanConstructor;
@@ -246,17 +244,12 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     left: BooleanConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
-    top?: unknown;
-    right?: unknown;
-    bottom?: unknown;
-    left?: unknown;
-} & {
-    left: boolean;
-    right: boolean;
-    top: boolean;
-    bottom: boolean;
-} & {}>, {
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    top: BooleanConstructor;
+    right: BooleanConstructor;
+    bottom: BooleanConstructor;
+    left: BooleanConstructor;
+}>>, {
     left: boolean;
     right: boolean;
     top: boolean;
@@ -294,7 +287,7 @@ declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {},
 
 declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 

package/index.iife.js

@@ -179,9 +179,10 @@
     }
   });
 
+  const _global = typeof globalThis === "undefined" ? undefined : globalThis;
   const globalKey = "__vueuse_ssr_handlers__";
-  globalThis[globalKey] = globalThis[globalKey] || {};
-  const handlers = globalThis[globalKey];
+  _global[globalKey] = _global[globalKey] || {};
+  const handlers = _global[globalKey];
   function getSSRHandler(key, fallback) {
     return handlers[key] || fallback;
   }
@@ -220,10 +221,7 @@
       write: (v) => JSON.stringify(Array.from(v.entries()))
     }
   };
-  function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
-    var _a;
-    return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-  })(), options = {}) {
+  function useStorage(key, initialValue, storage, options = {}) {
     var _a;
     const {
       flush = "pre",
@@ -241,6 +239,16 @@
     const type = guessSerializerType(rawInit);
     const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
     const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    if (!storage) {
+      try {
+        storage = getSSRHandler("getDefaultStorage", () => {
+          var _a2;
+          return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+        })();
+      } catch (e) {
+        onError(e);
+      }
+    }
     function read(event) {
       if (!storage || event && event.key !== key)
         return;
@@ -335,10 +343,7 @@
       selector = "html",
       attribute = "class",
       window = defaultWindow,
-      storage = getSSRHandler("getDefaultStorage", () => {
-        var _a;
-        return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-      })(),
+      storage,
       storageKey = "vueuse-color-scheme",
       listenToStorageChanges = true,
       storageRef

package/index.iife.min.js

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

package/index.mjs

@@ -119,9 +119,10 @@ const UseBrowserLocation = defineComponent({
   }
 });
 
+const _global = typeof globalThis === "undefined" ? undefined : globalThis;
 const globalKey = "__vueuse_ssr_handlers__";
-globalThis[globalKey] = globalThis[globalKey] || {};
-const handlers = globalThis[globalKey];
+_global[globalKey] = _global[globalKey] || {};
+const handlers = _global[globalKey];
 function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
@@ -160,10 +161,7 @@ const StorageSerializers = {
     write: (v) => JSON.stringify(Array.from(v.entries()))
   }
 };
-function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
-  var _a;
-  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-})(), options = {}) {
+function useStorage(key, initialValue, storage, options = {}) {
   var _a;
   const {
     flush = "pre",
@@ -181,6 +179,16 @@ function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorag
   const type = guessSerializerType(rawInit);
   const data = (shallow ? shallowRef : ref)(initialValue);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  if (!storage) {
+    try {
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a2;
+        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+      })();
+    } catch (e) {
+      onError(e);
+    }
+  }
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
@@ -275,10 +283,7 @@ function useColorMode(options = {}) {
     selector = "html",
     attribute = "class",
     window = defaultWindow,
-    storage = getSSRHandler("getDefaultStorage", () => {
-      var _a;
-      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-    })(),
+    storage,
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
     storageRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "7.5.1",
+  "version": "7.5.5",
   "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.5.1",
-    "@vueuse/shared": "7.5.1",
+    "@vueuse/core": "7.5.5",
+    "@vueuse/shared": "7.5.5",
     "vue-demi": "*"
   }
 }