@vueuse/components 13.1.0 → 13.3.0

package/index.d.mts

@@ -404,7 +404,7 @@ interface UseElementHoverOptions extends ConfigurableWindow {
 type BindingValueFunction$7 = (state: boolean) => void;
 declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$7 | [handler: BindingValueFunction$7, options: UseElementHoverOptions]>;
 
-declare const UseElementSize: vue.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const UseElementSize: vue.DefineComponent<Partial<ElementSize$1> & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Partial<ElementSize$1> & UseResizeObserverOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
 interface ElementSize {
     width: number;

package/index.iife.js

@@ -1,7 +1,7 @@
 (function (exports, core, vue, shared) {
   'use strict';
 
-  const OnClickOutside = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const OnClickOutside = /* @__PURE__ */ vue.defineComponent({
     name: "OnClickOutside",
     props: ["as", "options"],
     emits: ["trigger"],
@@ -82,8 +82,8 @@
     if (shared.isIOS && !_iOSWorkaround) {
       _iOSWorkaround = true;
       const listenerOptions = { passive: true };
-      Array.from(window.document.body.children).forEach((el) => useEventListener(el, "click", shared.noop, listenerOptions));
-      useEventListener(window.document.documentElement, "click", shared.noop, listenerOptions);
+      Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop, listenerOptions));
+      window.document.documentElement.addEventListener("click", shared.noop, listenerOptions);
     }
     let shouldListen = true;
     const shouldIgnore = (event) => {
@@ -165,18 +165,27 @@
     return stop;
   }
 
+  const stopClickOutsideMap = /* @__PURE__ */ new WeakMap();
   const vOnClickOutside = {
     mounted(el, binding) {
       const capture = !binding.modifiers.bubble;
+      let stop;
       if (typeof binding.value === "function") {
-        el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
+        stop = onClickOutside(el, binding.value, { capture });
       } else {
         const [handler, options] = binding.value;
-        el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
+        stop = onClickOutside(el, handler, Object.assign({ capture }, options));
       }
+      stopClickOutsideMap.set(el, stop);
     },
     unmounted(el) {
-      el.__onClickOutside_stop();
+      const stop = stopClickOutsideMap.get(el);
+      if (stop && typeof stop === "function") {
+        stop();
+      } else {
+        stop == null ? void 0 : stop.stop();
+      }
+      stopClickOutsideMap.delete(el);
     }
   };
 
@@ -330,7 +339,7 @@
     return stop;
   }
 
-  const OnLongPress = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const OnLongPress = /* @__PURE__ */ vue.defineComponent({
     name: "OnLongPress",
     props: ["as", "options"],
     emits: ["trigger"],
@@ -359,7 +368,7 @@
     }
   };
 
-  const UseActiveElement = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseActiveElement = /* @__PURE__ */ vue.defineComponent({
     name: "UseActiveElement",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -372,7 +381,7 @@
     }
   });
 
-  const UseBattery = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseBattery = /* @__PURE__ */ vue.defineComponent({
     name: "UseBattery",
     setup(props, { slots }) {
       const data = vue.reactive(core.useBattery(props));
@@ -383,7 +392,7 @@
     }
   });
 
-  const UseBrowserLocation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseBrowserLocation = /* @__PURE__ */ vue.defineComponent({
     name: "UseBrowserLocation",
     setup(props, { slots }) {
       const data = vue.reactive(core.useBrowserLocation());
@@ -394,7 +403,7 @@
     }
   });
 
-  const UseClipboard = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseClipboard = /* @__PURE__ */ vue.defineComponent({
     name: "UseClipboard",
     props: [
       "source",
@@ -568,18 +577,33 @@
       { flush, deep, eventFilter }
     );
     vue.watch(keyComputed, () => update(), { flush });
+    let firstMounted = false;
+    const onStorageEvent = (ev) => {
+      if (initOnMounted && !firstMounted) {
+        return;
+      }
+      update(ev);
+    };
+    const onStorageCustomEvent = (ev) => {
+      if (initOnMounted && !firstMounted) {
+        return;
+      }
+      updateFromCustomEvent(ev);
+    };
     if (window && listenToStorageChanges) {
+      if (storage instanceof Storage)
+        useEventListener(window, "storage", onStorageEvent, { passive: true });
+      else
+        useEventListener(window, customStorageEventName, onStorageCustomEvent);
+    }
+    if (initOnMounted) {
       shared.tryOnMounted(() => {
-        if (storage instanceof Storage)
-          useEventListener(window, "storage", update, { passive: true });
-        else
-          useEventListener(window, customStorageEventName, updateFromCustomEvent);
-        if (initOnMounted)
-          update();
+        firstMounted = true;
+        update();
       });
-    }
-    if (!initOnMounted)
+    } else {
       update();
+    }
     function dispatchWriteEvent(oldValue, newValue) {
       if (window) {
         const payload = {
@@ -747,7 +771,7 @@
     return Object.assign(auto, { store, system, state });
   }
 
-  const UseColorMode = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseColorMode = /* @__PURE__ */ vue.defineComponent({
     name: "UseColorMode",
     props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
     setup(props, { slots }) {
@@ -764,7 +788,7 @@
     }
   });
 
-  const UseDark = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDark = /* @__PURE__ */ vue.defineComponent({
     name: "UseDark",
     props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
     setup(props, { slots }) {
@@ -780,7 +804,7 @@
     }
   });
 
-  const UseDeviceMotion = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDeviceMotion = /* @__PURE__ */ vue.defineComponent({
     name: "UseDeviceMotion",
     setup(props, { slots }) {
       const data = core.useDeviceMotion();
@@ -791,7 +815,7 @@
     }
   });
 
-  const UseDeviceOrientation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDeviceOrientation = /* @__PURE__ */ vue.defineComponent({
     name: "UseDeviceOrientation",
     setup(props, { slots }) {
       const data = vue.reactive(core.useDeviceOrientation());
@@ -802,7 +826,7 @@
     }
   });
 
-  const UseDevicePixelRatio = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDevicePixelRatio = /* @__PURE__ */ vue.defineComponent({
     name: "UseDevicePixelRatio",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -815,7 +839,7 @@
     }
   });
 
-  const UseDevicesList = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDevicesList = /* @__PURE__ */ vue.defineComponent({
     name: "UseDevicesList",
     props: ["onUpdated", "requestPermissions", "constraints"],
     setup(props, { slots }) {
@@ -827,7 +851,7 @@
     }
   });
 
-  const UseDocumentVisibility = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDocumentVisibility = /* @__PURE__ */ vue.defineComponent({
     name: "UseDocumentVisibility",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -840,7 +864,7 @@
     }
   });
 
-  const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseDraggable = /* @__PURE__ */ vue.defineComponent({
     name: "UseDraggable",
     props: [
       "storageKey",
@@ -864,7 +888,7 @@
       const target = vue.shallowRef();
       const handle = vue.computed(() => {
         var _a;
-        return (_a = props.handle) != null ? _a : target.value;
+        return (_a = vue.toValue(props.handle)) != null ? _a : target.value;
       });
       const containerElement = vue.computed(() => {
         var _a;
@@ -900,7 +924,7 @@
     }
   });
 
-  const UseElementBounding = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseElementBounding = /* @__PURE__ */ vue.defineComponent({
     name: "UseElementBounding",
     props: ["box", "as"],
     setup(props, { slots }) {
@@ -1171,12 +1195,13 @@
     }
   };
 
-  const UseElementSize = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseElementSize = /* @__PURE__ */ vue.defineComponent({
     name: "UseElementSize",
     props: ["width", "height", "box", "as"],
     setup(props, { slots }) {
-      const target = vue.ref();
-      const data = vue.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
+      var _a, _b;
+      const target = vue.shallowRef();
+      const data = vue.reactive(core.useElementSize(target, { width: (_a = props.width) != null ? _a : 0, height: (_b = props.height) != null ? _b : 0 }, { box: props.box }));
       return () => {
         if (slots.default)
           return vue.h(props.as || "div", { ref: target }, slots.default(data));
@@ -1251,11 +1276,11 @@
     }
   };
 
-  const UseElementVisibility = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseElementVisibility = /* @__PURE__ */ vue.defineComponent({
     name: "UseElementVisibility",
     props: ["as"],
     setup(props, { slots }) {
-      const target = vue.ref();
+      const target = vue.shallowRef();
       const data = vue.reactive({
         isVisible: core.useElementVisibility(target)
       });
@@ -1376,7 +1401,7 @@
     }
   };
 
-  const UseEyeDropper = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseEyeDropper = /* @__PURE__ */ vue.defineComponent({
     name: "UseEyeDropper",
     props: {
       sRGBHex: String
@@ -1390,11 +1415,11 @@
     }
   });
 
-  const UseFullscreen = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseFullscreen = /* @__PURE__ */ vue.defineComponent({
     name: "UseFullscreen",
     props: ["as"],
     setup(props, { slots }) {
-      const target = vue.ref();
+      const target = vue.shallowRef();
       const data = vue.reactive(core.useFullscreen(target));
       return () => {
         if (slots.default)
@@ -1403,7 +1428,7 @@
     }
   });
 
-  const UseGeolocation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseGeolocation = /* @__PURE__ */ vue.defineComponent({
     name: "UseGeolocation",
     props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
     setup(props, { slots }) {
@@ -1415,7 +1440,7 @@
     }
   });
 
-  const UseIdle = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseIdle = /* @__PURE__ */ vue.defineComponent({
     name: "UseIdle",
     props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
     setup(props, { slots }) {
@@ -1538,7 +1563,7 @@
     return state;
   }
 
-  const UseImage = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseImage = /* @__PURE__ */ vue.defineComponent({
     name: "UseImage",
     props: [
       "src",
@@ -1817,7 +1842,7 @@
     }
   };
 
-  const UseMouse = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseMouse = /* @__PURE__ */ vue.defineComponent({
     name: "UseMouse",
     props: ["touch", "resetOnTouchEnds", "initialValue"],
     setup(props, { slots }) {
@@ -1829,11 +1854,11 @@
     }
   });
 
-  const UseMouseInElement = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseMouseInElement = /* @__PURE__ */ vue.defineComponent({
     name: "UseMouseElement",
     props: ["handleOutside", "as"],
     setup(props, { slots }) {
-      const target = vue.ref();
+      const target = vue.shallowRef();
       const data = vue.reactive(core.useMouseInElement(target, props));
       return () => {
         if (slots.default)
@@ -1995,11 +2020,11 @@
     }
   };
 
-  const UseMousePressed = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseMousePressed = /* @__PURE__ */ vue.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
     setup(props, { slots }) {
-      const target = vue.ref();
+      const target = vue.shallowRef();
       const data = vue.reactive(core.useMousePressed({ ...props, target }));
       return () => {
         if (slots.default)
@@ -2008,7 +2033,7 @@
     }
   });
 
-  const UseNetwork = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseNetwork = /* @__PURE__ */ vue.defineComponent({
     name: "UseNetwork",
     setup(props, { slots }) {
       const data = vue.reactive(core.useNetwork());
@@ -2019,7 +2044,7 @@
     }
   });
 
-  const UseNow = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseNow = /* @__PURE__ */ vue.defineComponent({
     name: "UseNow",
     props: ["interval"],
     setup(props, { slots }) {
@@ -2031,7 +2056,7 @@
     }
   });
 
-  const UseObjectUrl = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseObjectUrl = /* @__PURE__ */ vue.defineComponent({
     name: "UseObjectUrl",
     props: [
       "object"
@@ -2046,7 +2071,7 @@
     }
   });
 
-  const UseOffsetPagination = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseOffsetPagination = /* @__PURE__ */ vue.defineComponent({
     name: "UseOffsetPagination",
     props: [
       "total",
@@ -2087,7 +2112,7 @@
     }
   });
 
-  const UseOnline = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseOnline = /* @__PURE__ */ vue.defineComponent({
     name: "UseOnline",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2100,7 +2125,7 @@
     }
   });
 
-  const UsePageLeave = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePageLeave = /* @__PURE__ */ vue.defineComponent({
     name: "UsePageLeave",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2113,7 +2138,7 @@
     }
   });
 
-  const UsePointer = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePointer = /* @__PURE__ */ vue.defineComponent({
     name: "UsePointer",
     props: [
       "pointerTypes",
@@ -2137,7 +2162,7 @@
     name: "UsePointerLock",
     props: ["as"],
     setup(props, { slots }) {
-      const target = vue.ref();
+      const target = vue.shallowRef();
       const data = vue.reactive(core.usePointerLock(target));
       return () => {
         if (slots.default)
@@ -2146,7 +2171,7 @@
     }
   });
 
-  const UsePreferredColorScheme = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePreferredColorScheme = /* @__PURE__ */ vue.defineComponent({
     name: "UsePreferredColorScheme",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2159,7 +2184,7 @@
     }
   });
 
-  const UsePreferredContrast = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePreferredContrast = /* @__PURE__ */ vue.defineComponent({
     name: "UsePreferredContrast",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2172,7 +2197,7 @@
     }
   });
 
-  const UsePreferredDark = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePreferredDark = /* @__PURE__ */ vue.defineComponent({
     name: "UsePreferredDark",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2185,7 +2210,7 @@
     }
   });
 
-  const UsePreferredLanguages = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePreferredLanguages = /* @__PURE__ */ vue.defineComponent({
     name: "UsePreferredLanguages",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2198,7 +2223,7 @@
     }
   });
 
-  const UsePreferredReducedMotion = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePreferredReducedMotion = /* @__PURE__ */ vue.defineComponent({
     name: "UsePreferredReducedMotion",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2211,7 +2236,7 @@
     }
   });
 
-  const UsePreferredReducedTransparency = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UsePreferredReducedTransparency = /* @__PURE__ */ vue.defineComponent({
     name: "UsePreferredReducedTransparency",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2319,7 +2344,7 @@
     return getComputedStyle(document.documentElement).getPropertyValue(position);
   }
 
-  const UseScreenSafeArea = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseScreenSafeArea = /* @__PURE__ */ vue.defineComponent({
     name: "UseScreenSafeArea",
     props: {
       top: Boolean,
@@ -2481,7 +2506,7 @@
   }
   const vScrollLock = onScrollLock();
 
-  const UseTimeAgo = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseTimeAgo = /* @__PURE__ */ vue.defineComponent({
     name: "UseTimeAgo",
     props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
     setup(props, { slots }) {
@@ -2493,7 +2518,7 @@
     }
   });
 
-  const UseTimestamp = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseTimestamp = /* @__PURE__ */ vue.defineComponent({
     name: "UseTimestamp",
     props: ["immediate", "interval", "offset"],
     setup(props, { slots }) {
@@ -2505,7 +2530,7 @@
     }
   });
 
-  const UseVirtualList = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseVirtualList = /* @__PURE__ */ vue.defineComponent({
     name: "UseVirtualList",
     props: [
       "list",
@@ -2524,7 +2549,7 @@
     }
   });
 
-  const UseWindowFocus = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseWindowFocus = /* @__PURE__ */ vue.defineComponent({
     name: "UseWindowFocus",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2537,7 +2562,7 @@
     }
   });
 
-  const UseWindowSize = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
+  const UseWindowSize = /* @__PURE__ */ vue.defineComponent({
     name: "UseWindowSize",
     props: ["initialWidth", "initialHeight"],
     setup(props, { slots }) {

package/index.iife.min.js

@@ -1 +1 @@
-(function(y,C,o,S){"use strict";const ge=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const a=o.shallowRef();return C.onClickOutside(a,l=>{n("trigger",l)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:a},t.default())}}}),A=S.isClient?window:void 0;function T(e){var t;const n=o.toValue(e);return(t=n?.$el)!=null?t:n}function D(...e){const t=[],n=()=>{t.forEach(s=>s()),t.length=0},a=(s,c,f,u)=>(s.addEventListener(c,f,u),()=>s.removeEventListener(c,f,u)),l=o.computed(()=>{const s=S.toArray(o.toValue(e[0])).filter(c=>c!=null);return s.every(c=>typeof c!="string")?s:void 0}),r=S.watchImmediate(()=>{var s,c;return[(c=(s=l.value)==null?void 0:s.map(f=>T(f)))!=null?c:[A].filter(f=>f!=null),S.toArray(o.toValue(l.value?e[1]:e[0])),S.toArray(o.unref(l.value?e[2]:e[1])),o.toValue(l.value?e[3]:e[2])]},([s,c,f,u])=>{if(n(),!s?.length||!c?.length||!f?.length)return;const d=S.isObject(u)?{...u}:u;t.push(...s.flatMap(p=>c.flatMap(U=>f.map(g=>a(p,U,g,d)))))},{flush:"post"}),i=()=>{r(),n()};return S.tryOnScopeDispose(n),i}let Q=!1;function Z(e,t,n={}){const{window:a=A,ignore:l=[],capture:r=!0,detectIframe:i=!1,controls:s=!1}=n;if(!a)return s?{stop:S.noop,cancel:S.noop,trigger:S.noop}:S.noop;if(S.isIOS&&!Q){Q=!0;const h={passive:!0};Array.from(a.document.body.children).forEach(m=>D(m,"click",S.noop,h)),D(a.document.documentElement,"click",S.noop,h)}let c=!0;const f=h=>o.toValue(l).some(m=>{if(typeof m=="string")return Array.from(a.document.querySelectorAll(m)).some(w=>w===h.target||h.composedPath().includes(w));{const w=T(m);return w&&(h.target===w||h.composedPath().includes(w))}});function u(h){const m=o.toValue(h);return m&&m.$.subTree.shapeFlag===16}function d(h,m){const w=o.toValue(h),R=w.$.subTree&&w.$.subTree.children;return R==null||!Array.isArray(R)?!1:R.some(E=>E.el===m.target||m.composedPath().includes(E.el))}const p=h=>{const m=T(e);if(h.target!=null&&!(!(m instanceof Element)&&u(e)&&d(e,h))&&!(!m||m===h.target||h.composedPath().includes(m))){if("detail"in h&&h.detail===0&&(c=!f(h)),!c){c=!0;return}t(h)}};let U=!1;const g=[D(a,"click",h=>{U||(U=!0,setTimeout(()=>{U=!1},0),p(h))},{passive:!0,capture:r}),D(a,"pointerdown",h=>{const m=T(e);c=!f(h)&&!!(m&&!h.composedPath().includes(m))},{passive:!0}),i&&D(a,"blur",h=>{setTimeout(()=>{var m;const w=T(e);((m=a.document.activeElement)==null?void 0:m.tagName)==="IFRAME"&&!w?.contains(a.document.activeElement)&&t(h)},0)},{passive:!0})].filter(Boolean),b=()=>g.forEach(h=>h());return s?{stop:b,cancel:()=>{c=!1},trigger:h=>{c=!0,p(h),c=!1}}:b}const ee={mounted(e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=Z(e,t.value,{capture:n});else{const[a,l]=t.value;e.__onClickOutside_stop=Z(e,a,Object.assign({capture:n},l))}},unmounted(e){e.__onClickOutside_stop()}};function ye(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function te(...e){let t,n,a={};e.length===3?(t=e[0],n=e[1],a=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],a=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:l=A,eventName:r="keydown",passive:i=!1,dedupe:s=!1}=a,c=ye(t);return D(l,r,u=>{u.repeat&&o.toValue(s)||c(u)&&n(u)},i)}const we={mounted(e,t){var n,a;const l=(a=(n=t.arg)==null?void 0:n.split(","))!=null?a:!0;if(typeof t.value=="function")te(l,t.value,{target:e});else{const[r,i]=t.value;te(l,r,{target:e,...i})}}},Ue=500,Se=10;function X(e,t,n){var a,l;const r=o.computed(()=>T(e));let i,s,c,f=!1;function u(){i&&(clearTimeout(i),i=void 0),s=void 0,c=void 0,f=!1}function d(m){var w,R,E;const[V,L,v]=[c,s,f];if(u(),!n?.onMouseUp||!L||!V||(w=n?.modifiers)!=null&&w.self&&m.target!==r.value)return;(R=n?.modifiers)!=null&&R.prevent&&m.preventDefault(),(E=n?.modifiers)!=null&&E.stop&&m.stopPropagation();const k=m.x-L.x,_=m.y-L.y,I=Math.sqrt(k*k+_*_);n.onMouseUp(m.timeStamp-V,I,v)}function p(m){var w,R,E,V;(w=n?.modifiers)!=null&&w.self&&m.target!==r.value||(u(),(R=n?.modifiers)!=null&&R.prevent&&m.preventDefault(),(E=n?.modifiers)!=null&&E.stop&&m.stopPropagation(),s={x:m.x,y:m.y},c=m.timeStamp,i=setTimeout(()=>{f=!0,t(m)},(V=n?.delay)!=null?V:Ue))}function U(m){var w,R,E,V;if((w=n?.modifiers)!=null&&w.self&&m.target!==r.value||!s||n?.distanceThreshold===!1)return;(R=n?.modifiers)!=null&&R.prevent&&m.preventDefault(),(E=n?.modifiers)!=null&&E.stop&&m.stopPropagation();const L=m.x-s.x,v=m.y-s.y;Math.sqrt(L*L+v*v)>=((V=n?.distanceThreshold)!=null?V:Se)&&u()}const g={capture:(a=n?.modifiers)==null?void 0:a.capture,once:(l=n?.modifiers)==null?void 0:l.once},b=[D(r,"pointerdown",p,g),D(r,"pointermove",U,g),D(r,["pointerup","pointerleave"],d,g)];return()=>b.forEach(m=>m())}const be=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const a=o.shallowRef();return X(a,l=>{n("trigger",l)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:a},t.default())}}}),ne={mounted(e,t){typeof t.value=="function"?X(e,t.value,{modifiers:t.modifiers}):X(e,...t.value)}},Ce=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:C.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),Ee=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(C.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),Oe=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(C.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),Re=o.defineComponent({name:"UseClipboard",props:["source","read","navigator","copiedDuring","legacy"],setup(e,{slots:t}){const n=o.reactive(C.useClipboard(e));return()=>{var a;return(a=t.default)==null?void 0:a.call(t,n)}}}),B=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},H="__vueuse_ssr_handlers__",Pe=Ve();function Ve(){return H in B||(B[H]=B[H]||{}),B[H]}function oe(e,t){return Pe[e]||t}const Me=Symbol("vueuse-ssr-width");function De(){const e=o.hasInjectionContext()?S.injectLocal(Me,null):null;return typeof e=="number"?e:void 0}function _e(){const e=o.shallowRef(!1),t=o.getCurrentInstance();return t&&o.onMounted(()=>{e.value=!0},t),e}function N(e){const t=_e();return o.computed(()=>(t.value,!!e()))}function Te(e,t={}){const{window:n=A,ssrWidth:a=De()}=t,l=N(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function"),r=o.shallowRef(typeof a=="number"),i=o.shallowRef(),s=o.shallowRef(!1),c=f=>{s.value=f.matches};return o.watchEffect(()=>{if(r.value){r.value=!l.value;const f=o.toValue(e).split(",");s.value=f.some(u=>{const d=u.includes("not all"),p=u.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),U=u.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);let g=!!(p||U);return p&&g&&(g=a>=S.pxValue(p[1])),U&&g&&(g=a<=S.pxValue(U[1])),d?!g:g});return}l.value&&(i.value=n.matchMedia(o.toValue(e)),s.value=i.value.matches)}),D(i,"change",c,{passive:!0}),o.computed(()=>s.value)}function ke(e){return Te("(prefers-color-scheme: dark)",e)}function Le(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Ae={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},ae="vueuse-storage";function Ie(e,t,n,a={}){var l;const{flush:r="pre",deep:i=!0,listenToStorageChanges:s=!0,writeDefaults:c=!0,mergeDefaults:f=!1,shallow:u,window:d=A,eventFilter:p,onError:U=O=>{console.error(O)},initOnMounted:g}=a,b=(u?o.shallowRef:o.ref)(typeof t=="function"?t():t),h=o.computed(()=>o.toValue(e));if(!n)try{n=oe("getDefaultStorage",()=>{var O;return(O=A)==null?void 0:O.localStorage})()}catch(O){U(O)}if(!n)return b;const m=o.toValue(t),w=Le(m),R=(l=a.serializer)!=null?l:Ae[w],{pause:E,resume:V}=S.pausableWatch(b,()=>v(b.value),{flush:r,deep:i,eventFilter:p});o.watch(h,()=>_(),{flush:r}),d&&s&&S.tryOnMounted(()=>{n instanceof Storage?D(d,"storage",_,{passive:!0}):D(d,ae,I),g&&_()}),g||_();function L(O,M){if(d){const P={key:h.value,oldValue:O,newValue:M,storageArea:n};d.dispatchEvent(n instanceof Storage?new StorageEvent("storage",P):new CustomEvent(ae,{detail:P}))}}function v(O){try{const M=n.getItem(h.value);if(O==null)L(M,null),n.removeItem(h.value);else{const P=R.write(O);M!==P&&(n.setItem(h.value,P),L(M,P))}}catch(M){U(M)}}function k(O){const M=O?O.newValue:n.getItem(h.value);if(M==null)return c&&m!=null&&n.setItem(h.value,R.write(m)),m;if(!O&&f){const P=R.read(M);return typeof f=="function"?f(P,m):w==="object"&&!Array.isArray(P)?{...m,...P}:P}else return typeof M!="string"?M:R.read(M)}function _(O){if(!(O&&O.storageArea!==n)){if(O&&O.key==null){b.value=m;return}if(!(O&&O.key!==h.value)){E();try{O?.newValue!==R.write(b.value)&&(b.value=k(O))}catch(M){U(M)}finally{O?o.nextTick(V):V()}}}}function I(O){_(O.detail)}return b}const ze="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";function We(e={}){const{selector:t="html",attribute:n="class",initialValue:a="auto",window:l=A,storage:r,storageKey:i="vueuse-color-scheme",listenToStorageChanges:s=!0,storageRef:c,emitAuto:f,disableTransition:u=!0}=e,d={auto:"",light:"light",dark:"dark",...e.modes||{}},p=ke({window:l}),U=o.computed(()=>p.value?"dark":"light"),g=c||(i==null?S.toRef(a):Ie(i,a,r,{window:l,listenToStorageChanges:s})),b=o.computed(()=>g.value==="auto"?U.value:g.value),h=oe("updateHTMLAttrs",(E,V,L)=>{const v=typeof E=="string"?l?.document.querySelector(E):T(E);if(!v)return;const k=new Set,_=new Set;let I=null;if(V==="class"){const M=L.split(/\s/g);Object.values(d).flatMap(P=>(P||"").split(/\s/g)).filter(Boolean).forEach(P=>{M.includes(P)?k.add(P):_.add(P)})}else I={key:V,value:L};if(k.size===0&&_.size===0&&I===null)return;let O;u&&(O=l.document.createElement("style"),O.appendChild(document.createTextNode(ze)),l.document.head.appendChild(O));for(const M of k)v.classList.add(M);for(const M of _)v.classList.remove(M);I&&v.setAttribute(I.key,I.value),u&&(l.getComputedStyle(O).opacity,document.head.removeChild(O))});function m(E){var V;h(t,n,(V=d[E])!=null?V:E)}function w(E){e.onChanged?e.onChanged(E,m):m(E)}o.watch(b,w,{flush:"post",immediate:!0}),S.tryOnMounted(()=>w(b.value));const R=o.computed({get(){return f?g.value:b.value},set(E){g.value=E}});return Object.assign(R,{store:g,system:U,state:b})}const Be=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=We(e),a=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(a)}}}),He=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=C.useDark(e),a=o.reactive({isDark:n,toggleDark:S.useToggle(n)});return()=>{if(t.default)return t.default(a)}}}),Ne=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=C.useDeviceMotion();return()=>{if(t.default)return t.default(n)}}}),Fe=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(C.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),je=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:C.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),Ye=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(C.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),xe=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:C.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),Xe=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd","disabled","buttons","containerElement"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.computed(()=>{var u;return(u=e.handle)!=null?u:n.value}),l=o.computed(()=>{var u;return(u=e.containerElement)!=null?u:void 0}),r=o.computed(()=>!!e.disabled),i=e.storageKey&&C.useStorage(e.storageKey,o.toValue(e.initialValue)||{x:0,y:0},C.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),s=i||e.initialValue||{x:0,y:0},c=(u,d)=>{var p;(p=e.onEnd)==null||p.call(e,u,d),i&&(i.value.x=u.x,i.value.y=u.y)},f=o.reactive(C.useDraggable(n,{...e,handle:a,initialValue:s,onEnd:c,disabled:r,containerElement:l}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${f.style}`},t.default(f))}}}),Ke=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive(C.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}});function K(e,t,n={}){const{window:a=A,...l}=n;let r;const i=N(()=>a&&"MutationObserver"in a),s=()=>{r&&(r.disconnect(),r=void 0)},c=o.computed(()=>{const p=o.toValue(e),U=S.toArray(p).map(T).filter(S.notNullish);return new Set(U)}),f=o.watch(()=>c.value,p=>{s(),i.value&&p.size&&(r=new MutationObserver(t),p.forEach(U=>r.observe(U,l)))},{immediate:!0,flush:"post"}),u=()=>r?.takeRecords(),d=()=>{f(),s()};return S.tryOnScopeDispose(d),{isSupported:i,stop:d,takeRecords:u}}function F(e,t,n={}){const{window:a=A,...l}=n;let r;const i=N(()=>a&&"ResizeObserver"in a),s=()=>{r&&(r.disconnect(),r=void 0)},c=o.computed(()=>{const d=o.toValue(e);return Array.isArray(d)?d.map(p=>T(p)):[T(d)]}),f=o.watch(c,d=>{if(s(),i.value&&a){r=new ResizeObserver(t);for(const p of d)p&&r.observe(p,l)}},{immediate:!0,flush:"post"}),u=()=>{s(),f()};return S.tryOnScopeDispose(u),{isSupported:i,stop:u}}function Ge(e,t={}){const{reset:n=!0,windowResize:a=!0,windowScroll:l=!0,immediate:r=!0,updateTiming:i="sync"}=t,s=o.shallowRef(0),c=o.shallowRef(0),f=o.shallowRef(0),u=o.shallowRef(0),d=o.shallowRef(0),p=o.shallowRef(0),U=o.shallowRef(0),g=o.shallowRef(0);function b(){const m=T(e);if(!m){n&&(s.value=0,c.value=0,f.value=0,u.value=0,d.value=0,p.value=0,U.value=0,g.value=0);return}const w=m.getBoundingClientRect();s.value=w.height,c.value=w.bottom,f.value=w.left,u.value=w.right,d.value=w.top,p.value=w.width,U.value=w.x,g.value=w.y}function h(){i==="sync"?b():i==="next-frame"&&requestAnimationFrame(()=>b())}return F(e,h),o.watch(()=>T(e),m=>!m&&h()),K(e,h,{attributeFilter:["style","class"]}),l&&D("scroll",h,{capture:!0,passive:!0}),a&&D("resize",h,{passive:!0}),S.tryOnMounted(()=>{r&&h()}),{height:s,bottom:c,left:f,right:u,top:d,width:p,x:U,y:g,update:h}}const Je={mounted(e,t){const[n,a]=typeof t.value=="function"?[t.value,{}]:t.value,{height:l,bottom:r,left:i,right:s,top:c,width:f,x:u,y:d}=Ge(e,a);o.watch([l,r,i,s,c,f,u,d],()=>n({height:l,bottom:r,left:i,right:s,top:c,width:f,x:u,y:d}))}};function $e(e,t,n={}){const{window:a=A,document:l=a?.document,flush:r="sync"}=n;if(!a||!l)return S.noop;let i;const s=u=>{i?.(),i=u},c=o.watchEffect(()=>{const u=T(e);if(u){const{stop:d}=K(l,p=>{p.map(g=>[...g.removedNodes]).flat().some(g=>g===u||g.contains(u))&&t(p)},{window:a,childList:!0,subtree:!0});s(d)}},{flush:r}),f=()=>{c(),s()};return S.tryOnScopeDispose(f),f}function le(e,t={}){const{delayEnter:n=0,delayLeave:a=0,triggerOnRemoval:l=!1,window:r=A}=t,i=o.shallowRef(!1);let s;const c=f=>{const u=f?n:a;s&&(clearTimeout(s),s=void 0),u?s=setTimeout(()=>i.value=f,u):i.value=f};return r&&(D(e,"mouseenter",()=>c(!0),{passive:!0}),D(e,"mouseleave",()=>c(!1),{passive:!0}),l&&$e(o.computed(()=>T(e)),()=>c(!1))),i}const qe={mounted(e,t){const n=t.value;if(typeof n=="function"){const a=le(e);o.watch(a,l=>n(l))}else{const[a,l]=n,r=le(e,l);o.watch(r,i=>a(i))}}},Qe=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),a=o.reactive(C.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}});function Ze(e,t={width:0,height:0},n={}){const{window:a=A,box:l="content-box"}=n,r=o.computed(()=>{var d,p;return(p=(d=T(e))==null?void 0:d.namespaceURI)==null?void 0:p.includes("svg")}),i=o.shallowRef(t.width),s=o.shallowRef(t.height),{stop:c}=F(e,([d])=>{const p=l==="border-box"?d.borderBoxSize:l==="content-box"?d.contentBoxSize:d.devicePixelContentBoxSize;if(a&&r.value){const U=T(e);if(U){const g=U.getBoundingClientRect();i.value=g.width,s.value=g.height}}else if(p){const U=S.toArray(p);i.value=U.reduce((g,{inlineSize:b})=>g+b,0),s.value=U.reduce((g,{blockSize:b})=>g+b,0)}else i.value=d.contentRect.width,s.value=d.contentRect.height},n);S.tryOnMounted(()=>{const d=T(e);d&&(i.value="offsetWidth"in d?d.offsetWidth:t.width,s.value="offsetHeight"in d?d.offsetHeight:t.height)});const f=o.watch(()=>T(e),d=>{i.value=d?t.width:0,s.value=d?t.height:0});function u(){c(),f()}return{width:i,height:s,stop:u}}const et={mounted(e,t){var n;const a=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],l=typeof t.value=="function"?[]:t.value.slice(1),{width:r,height:i}=Ze(e,...l);o.watch([r,i],([s,c])=>a({width:s,height:c}))}},tt=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),a=o.reactive({isVisible:C.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}});function G(e,t,n={}){const{root:a,rootMargin:l="0px",threshold:r=0,window:i=A,immediate:s=!0}=n,c=N(()=>i&&"IntersectionObserver"in i),f=o.computed(()=>{const g=o.toValue(e);return S.toArray(g).map(T).filter(S.notNullish)});let u=S.noop;const d=o.shallowRef(s),p=c.value?o.watch(()=>[f.value,T(a),d.value],([g,b])=>{if(u(),!d.value||!g.length)return;const h=new IntersectionObserver(t,{root:T(b),rootMargin:l,threshold:r});g.forEach(m=>m&&h.observe(m)),u=()=>{h.disconnect(),u=S.noop}},{immediate:s,flush:"post"}):S.noop,U=()=>{u(),p(),d.value=!1};return S.tryOnScopeDispose(U),{isSupported:c,isActive:d,pause(){u(),d.value=!1},resume(){d.value=!0},stop:U}}function J(e,t={}){const{window:n=A,scrollTarget:a,threshold:l=0,rootMargin:r,once:i=!1}=t,s=o.shallowRef(!1),{stop:c}=G(e,f=>{let u=s.value,d=0;for(const p of f)p.time>=d&&(d=p.time,u=p.isIntersecting);s.value=u,i&&S.watchOnce(s,()=>{c()})},{root:a,window:n,threshold:l,rootMargin:o.toValue(r)});return s}const nt={mounted(e,t){if(typeof t.value=="function"){const n=t.value,a=J(e);o.watch(a,l=>n(l),{immediate:!0})}else{const[n,a]=t.value,l=J(e,a);o.watch(l,r=>n(r),{immediate:!0})}}},ot=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(C.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),at=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),a=o.reactive(C.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),lt=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(C.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),st=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(C.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function rt(e,t,n){const{immediate:a=!0,delay:l=0,onError:r=S.noop,onSuccess:i=S.noop,resetOnExecute:s=!0,shallow:c=!0,throwError:f}=n??{},u=c?o.shallowRef(t):o.ref(t),d=o.shallowRef(!1),p=o.shallowRef(!1),U=o.shallowRef(void 0);async function g(m=0,...w){s&&(u.value=t),U.value=void 0,d.value=!1,p.value=!0,m>0&&await S.promiseTimeout(m);const R=typeof e=="function"?e(...w):e;try{const E=await R;u.value=E,d.value=!0,i(E)}catch(E){if(U.value=E,r(E),f)throw E}finally{p.value=!1}return u.value}a&&g(l);const b={state:u,isReady:d,isLoading:p,error:U,execute:g};function h(){return new Promise((m,w)=>{S.until(p).toBe(!1).then(()=>m(b)).catch(w)})}return{...b,then(m,w){return h().then(m,w)}}}async function it(e){return new Promise((t,n)=>{const a=new Image,{src:l,srcset:r,sizes:i,class:s,loading:c,crossorigin:f,referrerPolicy:u,width:d,height:p,decoding:U,fetchPriority:g,ismap:b,usemap:h}=e;a.src=l,r!=null&&(a.srcset=r),i!=null&&(a.sizes=i),s!=null&&(a.className=s),c!=null&&(a.loading=c),f!=null&&(a.crossOrigin=f),u!=null&&(a.referrerPolicy=u),d!=null&&(a.width=d),p!=null&&(a.height=p),U!=null&&(a.decoding=U),g!=null&&(a.fetchPriority=g),b!=null&&(a.isMap=b),h!=null&&(a.useMap=h),a.onload=()=>t(a),a.onerror=n})}function ut(e,t={}){const n=rt(()=>it(o.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>o.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const ct=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy","width","height","decoding","fetchPriority","ismap","usemap"],setup(e,{slots:t}){const n=o.reactive(ut(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}});function j(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}const se=1;function $(e,t={}){const{throttle:n=0,idle:a=200,onStop:l=S.noop,onScroll:r=S.noop,offset:i={left:0,right:0,top:0,bottom:0},eventListenerOptions:s={capture:!1,passive:!0},behavior:c="auto",window:f=A,onError:u=v=>{console.error(v)}}=t,d=o.shallowRef(0),p=o.shallowRef(0),U=o.computed({get(){return d.value},set(v){b(v,void 0)}}),g=o.computed({get(){return p.value},set(v){b(void 0,v)}});function b(v,k){var _,I,O,M;if(!f)return;const P=o.toValue(e);if(!P)return;(O=P instanceof Document?f.document.body:P)==null||O.scrollTo({top:(_=o.toValue(k))!=null?_:g.value,left:(I=o.toValue(v))!=null?I:U.value,behavior:o.toValue(c)});const z=((M=P?.document)==null?void 0:M.documentElement)||P?.documentElement||P;U!=null&&(d.value=z.scrollLeft),g!=null&&(p.value=z.scrollTop)}const h=o.shallowRef(!1),m=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),w=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),R=v=>{h.value&&(h.value=!1,w.left=!1,w.right=!1,w.top=!1,w.bottom=!1,l(v))},E=S.useDebounceFn(R,n+a),V=v=>{var k;if(!f)return;const _=((k=v?.document)==null?void 0:k.documentElement)||v?.documentElement||T(v),{display:I,flexDirection:O,direction:M}=getComputedStyle(_),P=M==="rtl"?-1:1,z=_.scrollLeft;w.left=z<d.value,w.right=z>d.value;const me=Math.abs(z*P)<=(i.left||0),pe=Math.abs(z*P)+_.clientWidth>=_.scrollWidth-(i.right||0)-se;I==="flex"&&O==="row-reverse"?(m.left=pe,m.right=me):(m.left=me,m.right=pe),d.value=z;let W=_.scrollTop;v===f.document&&!W&&(W=f.document.body.scrollTop),w.top=W<p.value,w.bottom=W>p.value;const he=Math.abs(W)<=(i.top||0),ve=Math.abs(W)+_.clientHeight>=_.scrollHeight-(i.bottom||0)-se;I==="flex"&&O==="column-reverse"?(m.top=ve,m.bottom=he):(m.top=he,m.bottom=ve),p.value=W},L=v=>{var k;if(!f)return;const _=(k=v.target.documentElement)!=null?k:v.target;V(_),h.value=!0,E(v),r(v)};return D(e,"scroll",n?S.useThrottleFn(L,n,!0,!1):L,s),S.tryOnMounted(()=>{try{const v=o.toValue(e);if(!v)return;V(v)}catch(v){u(v)}}),D(e,"scrollend",R,s),{x:U,y:g,isScrolling:h,arrivedState:m,directions:w,measure(){const v=o.toValue(e);f&&v&&V(v)}}}function re(e,t,n={}){var a;const{direction:l="bottom",interval:r=100,canLoadMore:i=()=>!0}=n,s=o.reactive($(e,{...n,offset:{[l]:(a=n.distance)!=null?a:0,...n.offset}})),c=o.ref(),f=o.computed(()=>!!c.value),u=o.computed(()=>j(o.toValue(e))),d=J(u);function p(){if(s.measure(),!u.value||!d.value||!i(u.value))return;const{scrollHeight:g,clientHeight:b,scrollWidth:h,clientWidth:m}=u.value,w=l==="bottom"||l==="top"?g<=b:h<=m;(s.arrivedState[l]||w)&&(c.value||(c.value=Promise.all([t(s),new Promise(R=>setTimeout(R,r))]).finally(()=>{c.value=null,o.nextTick(()=>p())})))}const U=o.watch(()=>[s.arrivedState[l],d.value],p,{immediate:!0});return S.tryOnUnmounted(U),{isLoading:f,reset(){o.nextTick(()=>p())}}}const ft={mounted(e,t){typeof t.value=="function"?re(e,t.value):re(e,...t.value)}},dt={mounted(e,t){typeof t.value=="function"?G(e,t.value):G(e,...t.value)}},mt=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(C.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),pt=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),a=o.reactive(C.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),ht={page:e=>[e.pageX,e.pageY],client:e=>[e.clientX,e.clientY],screen:e=>[e.screenX,e.screenY],movement:e=>e instanceof MouseEvent?[e.movementX,e.movementY]:null};function vt(e={}){const{type:t="page",touch:n=!0,resetOnTouchEnds:a=!1,initialValue:l={x:0,y:0},window:r=A,target:i=r,scroll:s=!0,eventFilter:c}=e;let f=null,u=0,d=0;const p=o.shallowRef(l.x),U=o.shallowRef(l.y),g=o.shallowRef(null),b=typeof t=="function"?t:ht[t],h=v=>{const k=b(v);f=v,k&&([p.value,U.value]=k,g.value="mouse"),r&&(u=r.scrollX,d=r.scrollY)},m=v=>{if(v.touches.length>0){const k=b(v.touches[0]);k&&([p.value,U.value]=k,g.value="touch")}},w=()=>{if(!f||!r)return;const v=b(f);f instanceof MouseEvent&&v&&(p.value=v[0]+r.scrollX-u,U.value=v[1]+r.scrollY-d)},R=()=>{p.value=l.x,U.value=l.y},E=c?v=>c(()=>h(v),{}):v=>h(v),V=c?v=>c(()=>m(v),{}):v=>m(v),L=c?()=>c(()=>w(),{}):()=>w();if(i){const v={passive:!0};D(i,["mousemove","dragover"],E,v),n&&t!=="movement"&&(D(i,["touchstart","touchmove"],V,v),a&&D(i,"touchend",R,v)),s&&t==="page"&&D(r,"scroll",L,v)}return{x:p,y:U,sourceType:g}}function gt(e,t={}){const{handleOutside:n=!0,window:a=A}=t,l=t.type||"page",{x:r,y:i,sourceType:s}=vt(t),c=o.shallowRef(e??a?.document.body),f=o.shallowRef(0),u=o.shallowRef(0),d=o.shallowRef(0),p=o.shallowRef(0),U=o.shallowRef(0),g=o.shallowRef(0),b=o.shallowRef(!0);let h=()=>{};return a&&(h=o.watch([c,r,i],()=>{const m=T(c);if(!m||!(m instanceof Element))return;const{left:w,top:R,width:E,height:V}=m.getBoundingClientRect();d.value=w+(l==="page"?a.pageXOffset:0),p.value=R+(l==="page"?a.pageYOffset:0),U.value=V,g.value=E;const L=r.value-d.value,v=i.value-p.value;b.value=E===0||V===0||L<0||v<0||L>E||v>V,(n||!b.value)&&(f.value=L,u.value=v)},{immediate:!0}),D(document,"mouseleave",()=>b.value=!0,{passive:!0})),{x:r,y:i,sourceType:s,elementX:f,elementY:u,elementPositionX:d,elementPositionY:p,elementHeight:U,elementWidth:g,isOutside:b,stop:h}}const yt={mounted(e,t){const[n,a]=typeof t.value=="function"?[t.value,{}]:t.value,l=S.reactiveOmit(o.reactive(gt(e,a)),"stop");o.watch(l,r=>n(r))}},wt=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),a=o.reactive(C.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),Ut=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(C.useNetwork());return()=>{if(t.default)return t.default(n)}}}),St=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(C.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),bt=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=S.toRef(e,"object"),a=C.useObjectUrl(n);return()=>{if(t.default&&a.value)return t.default(a)}}}),Ct=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const a=o.reactive(C.useOffsetPagination({...e,onPageChange(...l){var r;(r=e.onPageChange)==null||r.call(e,...l),n("page-change",...l)},onPageSizeChange(...l){var r;(r=e.onPageSizeChange)==null||r.call(e,...l),n("page-size-change",...l)},onPageCountChange(...l){var r;(r=e.onPageCountChange)==null||r.call(e,...l),n("page-count-change",...l)}}));return()=>{if(t.default)return t.default(a)}}}),Et=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:C.useOnline()});return()=>{if(t.default)return t.default(n)}}}),Ot=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:C.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),Rt=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.shallowRef(null),a=o.reactive(C.usePointer({...e,target:e.target==="self"?n:A}));return()=>{if(t.default)return t.default(a,{ref:n})}}}),Pt=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),a=o.reactive(C.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),Vt=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:C.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),Mt=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:C.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),Dt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:C.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),_t=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:C.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),Tt=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:C.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}}),kt=o.defineComponent({name:"UsePreferredReducedTransparency",setup(e,{slots:t}){const n=o.reactive({transparency:C.usePreferredReducedTransparency()});return()=>{if(t.default)return t.default(n)}}}),Lt={mounted(e,t){typeof t.value=="function"?F(e,t.value):F(e,...t.value)}};function Y(e,t,n={}){const{window:a=A,initialValue:l,observe:r=!1}=n,i=o.shallowRef(l),s=o.computed(()=>{var f;return T(t)||((f=a?.document)==null?void 0:f.documentElement)});function c(){var f;const u=o.toValue(e),d=o.toValue(s);if(d&&a&&u){const p=(f=a.getComputedStyle(d).getPropertyValue(u))==null?void 0:f.trim();i.value=p||i.value||l}}return r&&K(s,c,{attributeFilter:["style","class"],window:a}),o.watch([s,()=>o.toValue(e)],(f,u)=>{u[0]&&u[1]&&u[0].style.removeProperty(u[1]),c()},{immediate:!0}),o.watch([i,s],([f,u])=>{const d=o.toValue(e);u?.style&&d&&(f==null?u.style.removeProperty(d):u.style.setProperty(d,f))},{immediate:!0}),i}const ie="--vueuse-safe-area-top",ue="--vueuse-safe-area-right",ce="--vueuse-safe-area-bottom",fe="--vueuse-safe-area-left";function At(){const e=o.shallowRef(""),t=o.shallowRef(""),n=o.shallowRef(""),a=o.shallowRef("");if(S.isClient){const r=Y(ie),i=Y(ue),s=Y(ce),c=Y(fe);r.value="env(safe-area-inset-top, 0px)",i.value="env(safe-area-inset-right, 0px)",s.value="env(safe-area-inset-bottom, 0px)",c.value="env(safe-area-inset-left, 0px)",l(),D("resize",S.useDebounceFn(l),{passive:!0})}function l(){e.value=x(ie),t.value=x(ue),n.value=x(ce),a.value=x(fe)}return{top:e,right:t,bottom:n,left:a,update:l}}function x(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const It=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:a,bottom:l,left:r}=At();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?a.value:"",paddingBottom:e.bottom?l.value:"",paddingLeft:e.left?r.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),zt={mounted(e,t){if(typeof t.value=="function"){const n=t.value,a=$(e,{onScroll(){n(a)},onStop(){n(a)}})}else{const[n,a]=t.value,l=$(e,{...a,onScroll(r){var i;(i=a.onScroll)==null||i.call(a,r),n(l)},onStop(r){var i;(i=a.onStop)==null||i.call(a,r),n(l)}})}}};function de(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:de(n)}}function Wt(e){const t=e||window.event,n=t.target;return de(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const q=new WeakMap;function Bt(e,t=!1){const n=o.shallowRef(t);let a=null,l="";o.watch(S.toRef(e),s=>{const c=j(o.toValue(s));if(c){const f=c;if(q.get(f)||q.set(f,f.style.overflow),f.style.overflow!=="hidden"&&(l=f.style.overflow),f.style.overflow==="hidden")return n.value=!0;if(n.value)return f.style.overflow="hidden"}},{immediate:!0});const r=()=>{const s=j(o.toValue(e));!s||n.value||(S.isIOS&&(a=D(s,"touchmove",c=>{Wt(c)},{passive:!1})),s.style.overflow="hidden",n.value=!0)},i=()=>{const s=j(o.toValue(e));!s||!n.value||(S.isIOS&&a?.(),s.style.overflow=l,q.delete(s),n.value=!1)};return S.tryOnScopeDispose(i),o.computed({get(){return n.value},set(s){s?r():i()}})}function Ht(){let e=!1;const t=o.shallowRef(!1);return(n,a)=>{if(t.value=a.value,e)return;e=!0;const l=Bt(n,a.value);o.watch(t,r=>l.value=r)}}const Nt=Ht(),Ft=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(C.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),jt=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(C.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Yt=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:a}=o.toRefs(e),{list:l,containerProps:r,wrapperProps:i,scrollTo:s}=C.useVirtualList(a,e.options);return n({scrollTo:s}),r.style&&typeof r.style=="object"&&!Array.isArray(r.style)&&(r.style.height=e.height||"300px"),()=>o.h("div",{...r},[o.h("div",{...i.value},l.value.map(c=>o.h("div",{style:{overflow:"hidden",height:c.height}},t.default?t.default(c):"Please set content!")))])}}),xt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:C.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),Xt=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(C.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});y.OnClickOutside=ge,y.OnLongPress=be,y.UseActiveElement=Ce,y.UseBattery=Ee,y.UseBrowserLocation=Oe,y.UseClipboard=Re,y.UseColorMode=Be,y.UseDark=He,y.UseDeviceMotion=Ne,y.UseDeviceOrientation=Fe,y.UseDevicePixelRatio=je,y.UseDevicesList=Ye,y.UseDocumentVisibility=xe,y.UseDraggable=Xe,y.UseElementBounding=Ke,y.UseElementSize=Qe,y.UseElementVisibility=tt,y.UseEyeDropper=ot,y.UseFullscreen=at,y.UseGeolocation=lt,y.UseIdle=st,y.UseImage=ct,y.UseMouse=mt,y.UseMouseInElement=pt,y.UseMousePressed=wt,y.UseNetwork=Ut,y.UseNow=St,y.UseObjectUrl=bt,y.UseOffsetPagination=Ct,y.UseOnline=Et,y.UsePageLeave=Ot,y.UsePointer=Rt,y.UsePointerLock=Pt,y.UsePreferredColorScheme=Vt,y.UsePreferredContrast=Mt,y.UsePreferredDark=Dt,y.UsePreferredLanguages=_t,y.UsePreferredReducedMotion=Tt,y.UsePreferredReducedTransparency=kt,y.UseScreenSafeArea=It,y.UseTimeAgo=Ft,y.UseTimestamp=jt,y.UseVirtualList=Yt,y.UseWindowFocus=xt,y.UseWindowSize=Xt,y.VOnClickOutside=ee,y.VOnLongPress=ne,y.vElementBounding=Je,y.vElementHover=qe,y.vElementSize=et,y.vElementVisibility=nt,y.vInfiniteScroll=ft,y.vIntersectionObserver=dt,y.vMouseInElement=yt,y.vOnClickOutside=ee,y.vOnKeyStroke=we,y.vOnLongPress=ne,y.vResizeObserver=Lt,y.vScroll=zt,y.vScrollLock=Nt})(this.VueUse=this.VueUse||{},VueUse,Vue,VueUse);
+(function(y,C,o,S){"use strict";const ye=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const a=o.shallowRef();return C.onClickOutside(a,l=>{n("trigger",l)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:a},t.default())}}}),k=S.isClient?window:void 0;function V(e){var t;const n=o.toValue(e);return(t=n?.$el)!=null?t:n}function M(...e){const t=[],n=()=>{t.forEach(r=>r()),t.length=0},a=(r,c,f,u)=>(r.addEventListener(c,f,u),()=>r.removeEventListener(c,f,u)),l=o.computed(()=>{const r=S.toArray(o.toValue(e[0])).filter(c=>c!=null);return r.every(c=>typeof c!="string")?r:void 0}),s=S.watchImmediate(()=>{var r,c;return[(c=(r=l.value)==null?void 0:r.map(f=>V(f)))!=null?c:[k].filter(f=>f!=null),S.toArray(o.toValue(l.value?e[1]:e[0])),S.toArray(o.unref(l.value?e[2]:e[1])),o.toValue(l.value?e[3]:e[2])]},([r,c,f,u])=>{if(n(),!r?.length||!c?.length||!f?.length)return;const d=S.isObject(u)?{...u}:u;t.push(...r.flatMap(p=>c.flatMap(U=>f.map(g=>a(p,U,g,d)))))},{flush:"post"}),i=()=>{s(),n()};return S.tryOnScopeDispose(n),i}let te=!1;function ne(e,t,n={}){const{window:a=k,ignore:l=[],capture:s=!0,detectIframe:i=!1,controls:r=!1}=n;if(!a)return r?{stop:S.noop,cancel:S.noop,trigger:S.noop}:S.noop;if(S.isIOS&&!te){te=!0;const h={passive:!0};Array.from(a.document.body.children).forEach(m=>m.addEventListener("click",S.noop,h)),a.document.documentElement.addEventListener("click",S.noop,h)}let c=!0;const f=h=>o.toValue(l).some(m=>{if(typeof m=="string")return Array.from(a.document.querySelectorAll(m)).some(w=>w===h.target||h.composedPath().includes(w));{const w=V(m);return w&&(h.target===w||h.composedPath().includes(w))}});function u(h){const m=o.toValue(h);return m&&m.$.subTree.shapeFlag===16}function d(h,m){const w=o.toValue(h),O=w.$.subTree&&w.$.subTree.children;return O==null||!Array.isArray(O)?!1:O.some(R=>R.el===m.target||m.composedPath().includes(R.el))}const p=h=>{const m=V(e);if(h.target!=null&&!(!(m instanceof Element)&&u(e)&&d(e,h))&&!(!m||m===h.target||h.composedPath().includes(m))){if("detail"in h&&h.detail===0&&(c=!f(h)),!c){c=!0;return}t(h)}};let U=!1;const g=[M(a,"click",h=>{U||(U=!0,setTimeout(()=>{U=!1},0),p(h))},{passive:!0,capture:s}),M(a,"pointerdown",h=>{const m=V(e);c=!f(h)&&!!(m&&!h.composedPath().includes(m))},{passive:!0}),i&&M(a,"blur",h=>{setTimeout(()=>{var m;const w=V(e);((m=a.document.activeElement)==null?void 0:m.tagName)==="IFRAME"&&!w?.contains(a.document.activeElement)&&t(h)},0)},{passive:!0})].filter(Boolean),b=()=>g.forEach(h=>h());return r?{stop:b,cancel:()=>{c=!1},trigger:h=>{c=!0,p(h),c=!1}}:b}const G=new WeakMap,oe={mounted(e,t){const n=!t.modifiers.bubble;let a;if(typeof t.value=="function")a=ne(e,t.value,{capture:n});else{const[l,s]=t.value;a=ne(e,l,Object.assign({capture:n},s))}G.set(e,a)},unmounted(e){const t=G.get(e);t&&typeof t=="function"?t():t?.stop(),G.delete(e)}};function we(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function ae(...e){let t,n,a={};e.length===3?(t=e[0],n=e[1],a=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],a=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:l=k,eventName:s="keydown",passive:i=!1,dedupe:r=!1}=a,c=we(t);return M(l,s,u=>{u.repeat&&o.toValue(r)||c(u)&&n(u)},i)}const Ue={mounted(e,t){var n,a;const l=(a=(n=t.arg)==null?void 0:n.split(","))!=null?a:!0;if(typeof t.value=="function")ae(l,t.value,{target:e});else{const[s,i]=t.value;ae(l,s,{target:e,...i})}}},Se=500,be=10;function J(e,t,n){var a,l;const s=o.computed(()=>V(e));let i,r,c,f=!1;function u(){i&&(clearTimeout(i),i=void 0),r=void 0,c=void 0,f=!1}function d(m){var w,O,R;const[P,T,v]=[c,r,f];if(u(),!n?.onMouseUp||!T||!P||(w=n?.modifiers)!=null&&w.self&&m.target!==s.value)return;(O=n?.modifiers)!=null&&O.prevent&&m.preventDefault(),(R=n?.modifiers)!=null&&R.stop&&m.stopPropagation();const D=m.x-T.x,L=m.y-T.y,W=Math.sqrt(D*D+L*L);n.onMouseUp(m.timeStamp-P,W,v)}function p(m){var w,O,R,P;(w=n?.modifiers)!=null&&w.self&&m.target!==s.value||(u(),(O=n?.modifiers)!=null&&O.prevent&&m.preventDefault(),(R=n?.modifiers)!=null&&R.stop&&m.stopPropagation(),r={x:m.x,y:m.y},c=m.timeStamp,i=setTimeout(()=>{f=!0,t(m)},(P=n?.delay)!=null?P:Se))}function U(m){var w,O,R,P;if((w=n?.modifiers)!=null&&w.self&&m.target!==s.value||!r||n?.distanceThreshold===!1)return;(O=n?.modifiers)!=null&&O.prevent&&m.preventDefault(),(R=n?.modifiers)!=null&&R.stop&&m.stopPropagation();const T=m.x-r.x,v=m.y-r.y;Math.sqrt(T*T+v*v)>=((P=n?.distanceThreshold)!=null?P:be)&&u()}const g={capture:(a=n?.modifiers)==null?void 0:a.capture,once:(l=n?.modifiers)==null?void 0:l.once},b=[M(s,"pointerdown",p,g),M(s,"pointermove",U,g),M(s,["pointerup","pointerleave"],d,g)];return()=>b.forEach(m=>m())}const Ce=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const a=o.shallowRef();return J(a,l=>{n("trigger",l)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:a},t.default())}}}),le={mounted(e,t){typeof t.value=="function"?J(e,t.value,{modifiers:t.modifiers}):J(e,...t.value)}},Ee=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:C.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),Re=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(C.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),Oe=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(C.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),Pe=o.defineComponent({name:"UseClipboard",props:["source","read","navigator","copiedDuring","legacy"],setup(e,{slots:t}){const n=o.reactive(C.useClipboard(e));return()=>{var a;return(a=t.default)==null?void 0:a.call(t,n)}}}),N=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},F="__vueuse_ssr_handlers__",Ve=Me();function Me(){return F in N||(N[F]=N[F]||{}),N[F]}function se(e,t){return Ve[e]||t}const De=Symbol("vueuse-ssr-width");function Te(){const e=o.hasInjectionContext()?S.injectLocal(De,null):null;return typeof e=="number"?e:void 0}function Le(){const e=o.shallowRef(!1),t=o.getCurrentInstance();return t&&o.onMounted(()=>{e.value=!0},t),e}function j(e){const t=Le();return o.computed(()=>(t.value,!!e()))}function ke(e,t={}){const{window:n=k,ssrWidth:a=Te()}=t,l=j(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function"),s=o.shallowRef(typeof a=="number"),i=o.shallowRef(),r=o.shallowRef(!1),c=f=>{r.value=f.matches};return o.watchEffect(()=>{if(s.value){s.value=!l.value;const f=o.toValue(e).split(",");r.value=f.some(u=>{const d=u.includes("not all"),p=u.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),U=u.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);let g=!!(p||U);return p&&g&&(g=a>=S.pxValue(p[1])),U&&g&&(g=a<=S.pxValue(U[1])),d?!g:g});return}l.value&&(i.value=n.matchMedia(o.toValue(e)),r.value=i.value.matches)}),M(i,"change",c,{passive:!0}),o.computed(()=>r.value)}function _e(e){return ke("(prefers-color-scheme: dark)",e)}function Ae(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Ie={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},re="vueuse-storage";function We(e,t,n,a={}){var l;const{flush:s="pre",deep:i=!0,listenToStorageChanges:r=!0,writeDefaults:c=!0,mergeDefaults:f=!1,shallow:u,window:d=k,eventFilter:p,onError:U=E=>{console.error(E)},initOnMounted:g}=a,b=(u?o.shallowRef:o.ref)(typeof t=="function"?t():t),h=o.computed(()=>o.toValue(e));if(!n)try{n=se("getDefaultStorage",()=>{var E;return(E=k)==null?void 0:E.localStorage})()}catch(E){U(E)}if(!n)return b;const m=o.toValue(t),w=Ae(m),O=(l=a.serializer)!=null?l:Ie[w],{pause:R,resume:P}=S.pausableWatch(b,()=>W(b.value),{flush:s,deep:i,eventFilter:p});o.watch(h,()=>I(),{flush:s});let T=!1;const v=E=>{g&&!T||I(E)},D=E=>{g&&!T||_(E)};d&&r&&(n instanceof Storage?M(d,"storage",v,{passive:!0}):M(d,re,D)),g?S.tryOnMounted(()=>{T=!0,I()}):I();function L(E,A){if(d){const z={key:h.value,oldValue:E,newValue:A,storageArea:n};d.dispatchEvent(n instanceof Storage?new StorageEvent("storage",z):new CustomEvent(re,{detail:z}))}}function W(E){try{const A=n.getItem(h.value);if(E==null)L(A,null),n.removeItem(h.value);else{const z=O.write(E);A!==z&&(n.setItem(h.value,z),L(A,z))}}catch(A){U(A)}}function B(E){const A=E?E.newValue:n.getItem(h.value);if(A==null)return c&&m!=null&&n.setItem(h.value,O.write(m)),m;if(!E&&f){const z=O.read(A);return typeof f=="function"?f(z,m):w==="object"&&!Array.isArray(z)?{...m,...z}:z}else return typeof A!="string"?A:O.read(A)}function I(E){if(!(E&&E.storageArea!==n)){if(E&&E.key==null){b.value=m;return}if(!(E&&E.key!==h.value)){R();try{E?.newValue!==O.write(b.value)&&(b.value=B(E))}catch(A){U(A)}finally{E?o.nextTick(P):P()}}}}function _(E){I(E.detail)}return b}const ze="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";function Be(e={}){const{selector:t="html",attribute:n="class",initialValue:a="auto",window:l=k,storage:s,storageKey:i="vueuse-color-scheme",listenToStorageChanges:r=!0,storageRef:c,emitAuto:f,disableTransition:u=!0}=e,d={auto:"",light:"light",dark:"dark",...e.modes||{}},p=_e({window:l}),U=o.computed(()=>p.value?"dark":"light"),g=c||(i==null?S.toRef(a):We(i,a,s,{window:l,listenToStorageChanges:r})),b=o.computed(()=>g.value==="auto"?U.value:g.value),h=se("updateHTMLAttrs",(R,P,T)=>{const v=typeof R=="string"?l?.document.querySelector(R):V(R);if(!v)return;const D=new Set,L=new Set;let W=null;if(P==="class"){const I=T.split(/\s/g);Object.values(d).flatMap(_=>(_||"").split(/\s/g)).filter(Boolean).forEach(_=>{I.includes(_)?D.add(_):L.add(_)})}else W={key:P,value:T};if(D.size===0&&L.size===0&&W===null)return;let B;u&&(B=l.document.createElement("style"),B.appendChild(document.createTextNode(ze)),l.document.head.appendChild(B));for(const I of D)v.classList.add(I);for(const I of L)v.classList.remove(I);W&&v.setAttribute(W.key,W.value),u&&(l.getComputedStyle(B).opacity,document.head.removeChild(B))});function m(R){var P;h(t,n,(P=d[R])!=null?P:R)}function w(R){e.onChanged?e.onChanged(R,m):m(R)}o.watch(b,w,{flush:"post",immediate:!0}),S.tryOnMounted(()=>w(b.value));const O=o.computed({get(){return f?g.value:b.value},set(R){g.value=R}});return Object.assign(O,{store:g,system:U,state:b})}const He=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=Be(e),a=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(a)}}}),Ne=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=C.useDark(e),a=o.reactive({isDark:n,toggleDark:S.useToggle(n)});return()=>{if(t.default)return t.default(a)}}}),Fe=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=C.useDeviceMotion();return()=>{if(t.default)return t.default(n)}}}),je=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(C.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),Ye=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:C.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),xe=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(C.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Xe=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:C.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),Ke=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd","disabled","buttons","containerElement"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.computed(()=>{var u;return(u=o.toValue(e.handle))!=null?u:n.value}),l=o.computed(()=>{var u;return(u=e.containerElement)!=null?u:void 0}),s=o.computed(()=>!!e.disabled),i=e.storageKey&&C.useStorage(e.storageKey,o.toValue(e.initialValue)||{x:0,y:0},C.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),r=i||e.initialValue||{x:0,y:0},c=(u,d)=>{var p;(p=e.onEnd)==null||p.call(e,u,d),i&&(i.value.x=u.x,i.value.y=u.y)},f=o.reactive(C.useDraggable(n,{...e,handle:a,initialValue:r,onEnd:c,disabled:s,containerElement:l}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${f.style}`},t.default(f))}}}),Ge=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive(C.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}});function $(e,t,n={}){const{window:a=k,...l}=n;let s;const i=j(()=>a&&"MutationObserver"in a),r=()=>{s&&(s.disconnect(),s=void 0)},c=o.computed(()=>{const p=o.toValue(e),U=S.toArray(p).map(V).filter(S.notNullish);return new Set(U)}),f=o.watch(()=>c.value,p=>{r(),i.value&&p.size&&(s=new MutationObserver(t),p.forEach(U=>s.observe(U,l)))},{immediate:!0,flush:"post"}),u=()=>s?.takeRecords(),d=()=>{f(),r()};return S.tryOnScopeDispose(d),{isSupported:i,stop:d,takeRecords:u}}function Y(e,t,n={}){const{window:a=k,...l}=n;let s;const i=j(()=>a&&"ResizeObserver"in a),r=()=>{s&&(s.disconnect(),s=void 0)},c=o.computed(()=>{const d=o.toValue(e);return Array.isArray(d)?d.map(p=>V(p)):[V(d)]}),f=o.watch(c,d=>{if(r(),i.value&&a){s=new ResizeObserver(t);for(const p of d)p&&s.observe(p,l)}},{immediate:!0,flush:"post"}),u=()=>{r(),f()};return S.tryOnScopeDispose(u),{isSupported:i,stop:u}}function Je(e,t={}){const{reset:n=!0,windowResize:a=!0,windowScroll:l=!0,immediate:s=!0,updateTiming:i="sync"}=t,r=o.shallowRef(0),c=o.shallowRef(0),f=o.shallowRef(0),u=o.shallowRef(0),d=o.shallowRef(0),p=o.shallowRef(0),U=o.shallowRef(0),g=o.shallowRef(0);function b(){const m=V(e);if(!m){n&&(r.value=0,c.value=0,f.value=0,u.value=0,d.value=0,p.value=0,U.value=0,g.value=0);return}const w=m.getBoundingClientRect();r.value=w.height,c.value=w.bottom,f.value=w.left,u.value=w.right,d.value=w.top,p.value=w.width,U.value=w.x,g.value=w.y}function h(){i==="sync"?b():i==="next-frame"&&requestAnimationFrame(()=>b())}return Y(e,h),o.watch(()=>V(e),m=>!m&&h()),$(e,h,{attributeFilter:["style","class"]}),l&&M("scroll",h,{capture:!0,passive:!0}),a&&M("resize",h,{passive:!0}),S.tryOnMounted(()=>{s&&h()}),{height:r,bottom:c,left:f,right:u,top:d,width:p,x:U,y:g,update:h}}const $e={mounted(e,t){const[n,a]=typeof t.value=="function"?[t.value,{}]:t.value,{height:l,bottom:s,left:i,right:r,top:c,width:f,x:u,y:d}=Je(e,a);o.watch([l,s,i,r,c,f,u,d],()=>n({height:l,bottom:s,left:i,right:r,top:c,width:f,x:u,y:d}))}};function qe(e,t,n={}){const{window:a=k,document:l=a?.document,flush:s="sync"}=n;if(!a||!l)return S.noop;let i;const r=u=>{i?.(),i=u},c=o.watchEffect(()=>{const u=V(e);if(u){const{stop:d}=$(l,p=>{p.map(g=>[...g.removedNodes]).flat().some(g=>g===u||g.contains(u))&&t(p)},{window:a,childList:!0,subtree:!0});r(d)}},{flush:s}),f=()=>{c(),r()};return S.tryOnScopeDispose(f),f}function ie(e,t={}){const{delayEnter:n=0,delayLeave:a=0,triggerOnRemoval:l=!1,window:s=k}=t,i=o.shallowRef(!1);let r;const c=f=>{const u=f?n:a;r&&(clearTimeout(r),r=void 0),u?r=setTimeout(()=>i.value=f,u):i.value=f};return s&&(M(e,"mouseenter",()=>c(!0),{passive:!0}),M(e,"mouseleave",()=>c(!1),{passive:!0}),l&&qe(o.computed(()=>V(e)),()=>c(!1))),i}const Qe={mounted(e,t){const n=t.value;if(typeof n=="function"){const a=ie(e);o.watch(a,l=>n(l))}else{const[a,l]=n,s=ie(e,l);o.watch(s,i=>a(i))}}},Ze=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){var n,a;const l=o.shallowRef(),s=o.reactive(C.useElementSize(l,{width:(n=e.width)!=null?n:0,height:(a=e.height)!=null?a:0},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:l},t.default(s))}}});function et(e,t={width:0,height:0},n={}){const{window:a=k,box:l="content-box"}=n,s=o.computed(()=>{var d,p;return(p=(d=V(e))==null?void 0:d.namespaceURI)==null?void 0:p.includes("svg")}),i=o.shallowRef(t.width),r=o.shallowRef(t.height),{stop:c}=Y(e,([d])=>{const p=l==="border-box"?d.borderBoxSize:l==="content-box"?d.contentBoxSize:d.devicePixelContentBoxSize;if(a&&s.value){const U=V(e);if(U){const g=U.getBoundingClientRect();i.value=g.width,r.value=g.height}}else if(p){const U=S.toArray(p);i.value=U.reduce((g,{inlineSize:b})=>g+b,0),r.value=U.reduce((g,{blockSize:b})=>g+b,0)}else i.value=d.contentRect.width,r.value=d.contentRect.height},n);S.tryOnMounted(()=>{const d=V(e);d&&(i.value="offsetWidth"in d?d.offsetWidth:t.width,r.value="offsetHeight"in d?d.offsetHeight:t.height)});const f=o.watch(()=>V(e),d=>{i.value=d?t.width:0,r.value=d?t.height:0});function u(){c(),f()}return{width:i,height:r,stop:u}}const tt={mounted(e,t){var n;const a=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],l=typeof t.value=="function"?[]:t.value.slice(1),{width:s,height:i}=et(e,...l);o.watch([s,i],([r,c])=>a({width:r,height:c}))}},nt=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive({isVisible:C.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}});function q(e,t,n={}){const{root:a,rootMargin:l="0px",threshold:s=0,window:i=k,immediate:r=!0}=n,c=j(()=>i&&"IntersectionObserver"in i),f=o.computed(()=>{const g=o.toValue(e);return S.toArray(g).map(V).filter(S.notNullish)});let u=S.noop;const d=o.shallowRef(r),p=c.value?o.watch(()=>[f.value,V(a),d.value],([g,b])=>{if(u(),!d.value||!g.length)return;const h=new IntersectionObserver(t,{root:V(b),rootMargin:l,threshold:s});g.forEach(m=>m&&h.observe(m)),u=()=>{h.disconnect(),u=S.noop}},{immediate:r,flush:"post"}):S.noop,U=()=>{u(),p(),d.value=!1};return S.tryOnScopeDispose(U),{isSupported:c,isActive:d,pause(){u(),d.value=!1},resume(){d.value=!0},stop:U}}function Q(e,t={}){const{window:n=k,scrollTarget:a,threshold:l=0,rootMargin:s,once:i=!1}=t,r=o.shallowRef(!1),{stop:c}=q(e,f=>{let u=r.value,d=0;for(const p of f)p.time>=d&&(d=p.time,u=p.isIntersecting);r.value=u,i&&S.watchOnce(r,()=>{c()})},{root:a,window:n,threshold:l,rootMargin:o.toValue(s)});return r}const ot={mounted(e,t){if(typeof t.value=="function"){const n=t.value,a=Q(e);o.watch(a,l=>n(l),{immediate:!0})}else{const[n,a]=t.value,l=Q(e,a);o.watch(l,s=>n(s),{immediate:!0})}}},at=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(C.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),lt=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive(C.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),st=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(C.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),rt=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(C.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function it(e,t,n){const{immediate:a=!0,delay:l=0,onError:s=S.noop,onSuccess:i=S.noop,resetOnExecute:r=!0,shallow:c=!0,throwError:f}=n??{},u=c?o.shallowRef(t):o.ref(t),d=o.shallowRef(!1),p=o.shallowRef(!1),U=o.shallowRef(void 0);async function g(m=0,...w){r&&(u.value=t),U.value=void 0,d.value=!1,p.value=!0,m>0&&await S.promiseTimeout(m);const O=typeof e=="function"?e(...w):e;try{const R=await O;u.value=R,d.value=!0,i(R)}catch(R){if(U.value=R,s(R),f)throw R}finally{p.value=!1}return u.value}a&&g(l);const b={state:u,isReady:d,isLoading:p,error:U,execute:g};function h(){return new Promise((m,w)=>{S.until(p).toBe(!1).then(()=>m(b)).catch(w)})}return{...b,then(m,w){return h().then(m,w)}}}async function ut(e){return new Promise((t,n)=>{const a=new Image,{src:l,srcset:s,sizes:i,class:r,loading:c,crossorigin:f,referrerPolicy:u,width:d,height:p,decoding:U,fetchPriority:g,ismap:b,usemap:h}=e;a.src=l,s!=null&&(a.srcset=s),i!=null&&(a.sizes=i),r!=null&&(a.className=r),c!=null&&(a.loading=c),f!=null&&(a.crossOrigin=f),u!=null&&(a.referrerPolicy=u),d!=null&&(a.width=d),p!=null&&(a.height=p),U!=null&&(a.decoding=U),g!=null&&(a.fetchPriority=g),b!=null&&(a.isMap=b),h!=null&&(a.useMap=h),a.onload=()=>t(a),a.onerror=n})}function ct(e,t={}){const n=it(()=>ut(o.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>o.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const ft=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy","width","height","decoding","fetchPriority","ismap","usemap"],setup(e,{slots:t}){const n=o.reactive(ct(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}});function x(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}const ue=1;function Z(e,t={}){const{throttle:n=0,idle:a=200,onStop:l=S.noop,onScroll:s=S.noop,offset:i={left:0,right:0,top:0,bottom:0},eventListenerOptions:r={capture:!1,passive:!0},behavior:c="auto",window:f=k,onError:u=v=>{console.error(v)}}=t,d=o.shallowRef(0),p=o.shallowRef(0),U=o.computed({get(){return d.value},set(v){b(v,void 0)}}),g=o.computed({get(){return p.value},set(v){b(void 0,v)}});function b(v,D){var L,W,B,I;if(!f)return;const _=o.toValue(e);if(!_)return;(B=_ instanceof Document?f.document.body:_)==null||B.scrollTo({top:(L=o.toValue(D))!=null?L:g.value,left:(W=o.toValue(v))!=null?W:U.value,behavior:o.toValue(c)});const E=((I=_?.document)==null?void 0:I.documentElement)||_?.documentElement||_;U!=null&&(d.value=E.scrollLeft),g!=null&&(p.value=E.scrollTop)}const h=o.shallowRef(!1),m=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),w=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),O=v=>{h.value&&(h.value=!1,w.left=!1,w.right=!1,w.top=!1,w.bottom=!1,l(v))},R=S.useDebounceFn(O,n+a),P=v=>{var D;if(!f)return;const L=((D=v?.document)==null?void 0:D.documentElement)||v?.documentElement||V(v),{display:W,flexDirection:B,direction:I}=getComputedStyle(L),_=I==="rtl"?-1:1,E=L.scrollLeft;w.left=E<d.value,w.right=E>d.value;const A=Math.abs(E*_)<=(i.left||0),z=Math.abs(E*_)+L.clientWidth>=L.scrollWidth-(i.right||0)-ue;W==="flex"&&B==="row-reverse"?(m.left=z,m.right=A):(m.left=A,m.right=z),d.value=E;let H=L.scrollTop;v===f.document&&!H&&(H=f.document.body.scrollTop),w.top=H<p.value,w.bottom=H>p.value;const ve=Math.abs(H)<=(i.top||0),ge=Math.abs(H)+L.clientHeight>=L.scrollHeight-(i.bottom||0)-ue;W==="flex"&&B==="column-reverse"?(m.top=ge,m.bottom=ve):(m.top=ve,m.bottom=ge),p.value=H},T=v=>{var D;if(!f)return;const L=(D=v.target.documentElement)!=null?D:v.target;P(L),h.value=!0,R(v),s(v)};return M(e,"scroll",n?S.useThrottleFn(T,n,!0,!1):T,r),S.tryOnMounted(()=>{try{const v=o.toValue(e);if(!v)return;P(v)}catch(v){u(v)}}),M(e,"scrollend",O,r),{x:U,y:g,isScrolling:h,arrivedState:m,directions:w,measure(){const v=o.toValue(e);f&&v&&P(v)}}}function ce(e,t,n={}){var a;const{direction:l="bottom",interval:s=100,canLoadMore:i=()=>!0}=n,r=o.reactive(Z(e,{...n,offset:{[l]:(a=n.distance)!=null?a:0,...n.offset}})),c=o.ref(),f=o.computed(()=>!!c.value),u=o.computed(()=>x(o.toValue(e))),d=Q(u);function p(){if(r.measure(),!u.value||!d.value||!i(u.value))return;const{scrollHeight:g,clientHeight:b,scrollWidth:h,clientWidth:m}=u.value,w=l==="bottom"||l==="top"?g<=b:h<=m;(r.arrivedState[l]||w)&&(c.value||(c.value=Promise.all([t(r),new Promise(O=>setTimeout(O,s))]).finally(()=>{c.value=null,o.nextTick(()=>p())})))}const U=o.watch(()=>[r.arrivedState[l],d.value],p,{immediate:!0});return S.tryOnUnmounted(U),{isLoading:f,reset(){o.nextTick(()=>p())}}}const dt={mounted(e,t){typeof t.value=="function"?ce(e,t.value):ce(e,...t.value)}},mt={mounted(e,t){typeof t.value=="function"?q(e,t.value):q(e,...t.value)}},pt=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(C.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),ht=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive(C.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),vt={page:e=>[e.pageX,e.pageY],client:e=>[e.clientX,e.clientY],screen:e=>[e.screenX,e.screenY],movement:e=>e instanceof MouseEvent?[e.movementX,e.movementY]:null};function gt(e={}){const{type:t="page",touch:n=!0,resetOnTouchEnds:a=!1,initialValue:l={x:0,y:0},window:s=k,target:i=s,scroll:r=!0,eventFilter:c}=e;let f=null,u=0,d=0;const p=o.shallowRef(l.x),U=o.shallowRef(l.y),g=o.shallowRef(null),b=typeof t=="function"?t:vt[t],h=v=>{const D=b(v);f=v,D&&([p.value,U.value]=D,g.value="mouse"),s&&(u=s.scrollX,d=s.scrollY)},m=v=>{if(v.touches.length>0){const D=b(v.touches[0]);D&&([p.value,U.value]=D,g.value="touch")}},w=()=>{if(!f||!s)return;const v=b(f);f instanceof MouseEvent&&v&&(p.value=v[0]+s.scrollX-u,U.value=v[1]+s.scrollY-d)},O=()=>{p.value=l.x,U.value=l.y},R=c?v=>c(()=>h(v),{}):v=>h(v),P=c?v=>c(()=>m(v),{}):v=>m(v),T=c?()=>c(()=>w(),{}):()=>w();if(i){const v={passive:!0};M(i,["mousemove","dragover"],R,v),n&&t!=="movement"&&(M(i,["touchstart","touchmove"],P,v),a&&M(i,"touchend",O,v)),r&&t==="page"&&M(s,"scroll",T,v)}return{x:p,y:U,sourceType:g}}function yt(e,t={}){const{handleOutside:n=!0,window:a=k}=t,l=t.type||"page",{x:s,y:i,sourceType:r}=gt(t),c=o.shallowRef(e??a?.document.body),f=o.shallowRef(0),u=o.shallowRef(0),d=o.shallowRef(0),p=o.shallowRef(0),U=o.shallowRef(0),g=o.shallowRef(0),b=o.shallowRef(!0);let h=()=>{};return a&&(h=o.watch([c,s,i],()=>{const m=V(c);if(!m||!(m instanceof Element))return;const{left:w,top:O,width:R,height:P}=m.getBoundingClientRect();d.value=w+(l==="page"?a.pageXOffset:0),p.value=O+(l==="page"?a.pageYOffset:0),U.value=P,g.value=R;const T=s.value-d.value,v=i.value-p.value;b.value=R===0||P===0||T<0||v<0||T>R||v>P,(n||!b.value)&&(f.value=T,u.value=v)},{immediate:!0}),M(document,"mouseleave",()=>b.value=!0,{passive:!0})),{x:s,y:i,sourceType:r,elementX:f,elementY:u,elementPositionX:d,elementPositionY:p,elementHeight:U,elementWidth:g,isOutside:b,stop:h}}const wt={mounted(e,t){const[n,a]=typeof t.value=="function"?[t.value,{}]:t.value,l=S.reactiveOmit(o.reactive(yt(e,a)),"stop");o.watch(l,s=>n(s))}},Ut=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive(C.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),St=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(C.useNetwork());return()=>{if(t.default)return t.default(n)}}}),bt=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(C.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Ct=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=S.toRef(e,"object"),a=C.useObjectUrl(n);return()=>{if(t.default&&a.value)return t.default(a)}}}),Et=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const a=o.reactive(C.useOffsetPagination({...e,onPageChange(...l){var s;(s=e.onPageChange)==null||s.call(e,...l),n("page-change",...l)},onPageSizeChange(...l){var s;(s=e.onPageSizeChange)==null||s.call(e,...l),n("page-size-change",...l)},onPageCountChange(...l){var s;(s=e.onPageCountChange)==null||s.call(e,...l),n("page-count-change",...l)}}));return()=>{if(t.default)return t.default(a)}}}),Rt=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:C.useOnline()});return()=>{if(t.default)return t.default(n)}}}),Ot=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:C.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),Pt=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.shallowRef(null),a=o.reactive(C.usePointer({...e,target:e.target==="self"?n:k}));return()=>{if(t.default)return t.default(a,{ref:n})}}}),Vt=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.shallowRef(),a=o.reactive(C.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(a))}}}),Mt=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:C.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),Dt=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:C.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),Tt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:C.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),Lt=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:C.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),kt=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:C.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}}),_t=o.defineComponent({name:"UsePreferredReducedTransparency",setup(e,{slots:t}){const n=o.reactive({transparency:C.usePreferredReducedTransparency()});return()=>{if(t.default)return t.default(n)}}}),At={mounted(e,t){typeof t.value=="function"?Y(e,t.value):Y(e,...t.value)}};function X(e,t,n={}){const{window:a=k,initialValue:l,observe:s=!1}=n,i=o.shallowRef(l),r=o.computed(()=>{var f;return V(t)||((f=a?.document)==null?void 0:f.documentElement)});function c(){var f;const u=o.toValue(e),d=o.toValue(r);if(d&&a&&u){const p=(f=a.getComputedStyle(d).getPropertyValue(u))==null?void 0:f.trim();i.value=p||i.value||l}}return s&&$(r,c,{attributeFilter:["style","class"],window:a}),o.watch([r,()=>o.toValue(e)],(f,u)=>{u[0]&&u[1]&&u[0].style.removeProperty(u[1]),c()},{immediate:!0}),o.watch([i,r],([f,u])=>{const d=o.toValue(e);u?.style&&d&&(f==null?u.style.removeProperty(d):u.style.setProperty(d,f))},{immediate:!0}),i}const fe="--vueuse-safe-area-top",de="--vueuse-safe-area-right",me="--vueuse-safe-area-bottom",pe="--vueuse-safe-area-left";function It(){const e=o.shallowRef(""),t=o.shallowRef(""),n=o.shallowRef(""),a=o.shallowRef("");if(S.isClient){const s=X(fe),i=X(de),r=X(me),c=X(pe);s.value="env(safe-area-inset-top, 0px)",i.value="env(safe-area-inset-right, 0px)",r.value="env(safe-area-inset-bottom, 0px)",c.value="env(safe-area-inset-left, 0px)",l(),M("resize",S.useDebounceFn(l),{passive:!0})}function l(){e.value=K(fe),t.value=K(de),n.value=K(me),a.value=K(pe)}return{top:e,right:t,bottom:n,left:a,update:l}}function K(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const Wt=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:a,bottom:l,left:s}=It();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?a.value:"",paddingBottom:e.bottom?l.value:"",paddingLeft:e.left?s.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),zt={mounted(e,t){if(typeof t.value=="function"){const n=t.value,a=Z(e,{onScroll(){n(a)},onStop(){n(a)}})}else{const[n,a]=t.value,l=Z(e,{...a,onScroll(s){var i;(i=a.onScroll)==null||i.call(a,s),n(l)},onStop(s){var i;(i=a.onStop)==null||i.call(a,s),n(l)}})}}};function he(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:he(n)}}function Bt(e){const t=e||window.event,n=t.target;return he(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const ee=new WeakMap;function Ht(e,t=!1){const n=o.shallowRef(t);let a=null,l="";o.watch(S.toRef(e),r=>{const c=x(o.toValue(r));if(c){const f=c;if(ee.get(f)||ee.set(f,f.style.overflow),f.style.overflow!=="hidden"&&(l=f.style.overflow),f.style.overflow==="hidden")return n.value=!0;if(n.value)return f.style.overflow="hidden"}},{immediate:!0});const s=()=>{const r=x(o.toValue(e));!r||n.value||(S.isIOS&&(a=M(r,"touchmove",c=>{Bt(c)},{passive:!1})),r.style.overflow="hidden",n.value=!0)},i=()=>{const r=x(o.toValue(e));!r||!n.value||(S.isIOS&&a?.(),r.style.overflow=l,ee.delete(r),n.value=!1)};return S.tryOnScopeDispose(i),o.computed({get(){return n.value},set(r){r?s():i()}})}function Nt(){let e=!1;const t=o.shallowRef(!1);return(n,a)=>{if(t.value=a.value,e)return;e=!0;const l=Ht(n,a.value);o.watch(t,s=>l.value=s)}}const Ft=Nt(),jt=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(C.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Yt=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(C.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),xt=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:a}=o.toRefs(e),{list:l,containerProps:s,wrapperProps:i,scrollTo:r}=C.useVirtualList(a,e.options);return n({scrollTo:r}),s.style&&typeof s.style=="object"&&!Array.isArray(s.style)&&(s.style.height=e.height||"300px"),()=>o.h("div",{...s},[o.h("div",{...i.value},l.value.map(c=>o.h("div",{style:{overflow:"hidden",height:c.height}},t.default?t.default(c):"Please set content!")))])}}),Xt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:C.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),Kt=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(C.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});y.OnClickOutside=ye,y.OnLongPress=Ce,y.UseActiveElement=Ee,y.UseBattery=Re,y.UseBrowserLocation=Oe,y.UseClipboard=Pe,y.UseColorMode=He,y.UseDark=Ne,y.UseDeviceMotion=Fe,y.UseDeviceOrientation=je,y.UseDevicePixelRatio=Ye,y.UseDevicesList=xe,y.UseDocumentVisibility=Xe,y.UseDraggable=Ke,y.UseElementBounding=Ge,y.UseElementSize=Ze,y.UseElementVisibility=nt,y.UseEyeDropper=at,y.UseFullscreen=lt,y.UseGeolocation=st,y.UseIdle=rt,y.UseImage=ft,y.UseMouse=pt,y.UseMouseInElement=ht,y.UseMousePressed=Ut,y.UseNetwork=St,y.UseNow=bt,y.UseObjectUrl=Ct,y.UseOffsetPagination=Et,y.UseOnline=Rt,y.UsePageLeave=Ot,y.UsePointer=Pt,y.UsePointerLock=Vt,y.UsePreferredColorScheme=Mt,y.UsePreferredContrast=Dt,y.UsePreferredDark=Tt,y.UsePreferredLanguages=Lt,y.UsePreferredReducedMotion=kt,y.UsePreferredReducedTransparency=_t,y.UseScreenSafeArea=Wt,y.UseTimeAgo=jt,y.UseTimestamp=Yt,y.UseVirtualList=xt,y.UseWindowFocus=Xt,y.UseWindowSize=Kt,y.VOnClickOutside=oe,y.VOnLongPress=le,y.vElementBounding=$e,y.vElementHover=Qe,y.vElementSize=tt,y.vElementVisibility=ot,y.vInfiniteScroll=dt,y.vIntersectionObserver=mt,y.vMouseInElement=wt,y.vOnClickOutside=oe,y.vOnKeyStroke=Ue,y.vOnLongPress=le,y.vResizeObserver=At,y.vScroll=zt,y.vScrollLock=Ft})(this.VueUse=this.VueUse||{},VueUse,Vue,VueUse);

package/index.mjs

@@ -2,7 +2,7 @@ import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBr
 import { defineComponent, shallowRef, h, toValue, computed, unref, reactive, hasInjectionContext, getCurrentInstance, onMounted, watchEffect, ref, watch, nextTick, toRefs } from 'vue';
 import { isClient, toArray, watchImmediate, isObject, tryOnScopeDispose, noop, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, watchOnce, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted, reactiveOmit } from '@vueuse/shared';
 
-const OnClickOutside = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const OnClickOutside = /* @__PURE__ */ defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -83,8 +83,8 @@ function onClickOutside(target, handler, options = {}) {
   if (isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true;
     const listenerOptions = { passive: true };
-    Array.from(window.document.body.children).forEach((el) => useEventListener(el, "click", noop, listenerOptions));
-    useEventListener(window.document.documentElement, "click", noop, listenerOptions);
+    Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop, listenerOptions));
+    window.document.documentElement.addEventListener("click", noop, listenerOptions);
   }
   let shouldListen = true;
   const shouldIgnore = (event) => {
@@ -166,18 +166,27 @@ function onClickOutside(target, handler, options = {}) {
   return stop;
 }
 
+const stopClickOutsideMap = /* @__PURE__ */ new WeakMap();
 const vOnClickOutside = {
   mounted(el, binding) {
     const capture = !binding.modifiers.bubble;
+    let stop;
     if (typeof binding.value === "function") {
-      el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
+      stop = onClickOutside(el, binding.value, { capture });
     } else {
       const [handler, options] = binding.value;
-      el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
+      stop = onClickOutside(el, handler, Object.assign({ capture }, options));
     }
+    stopClickOutsideMap.set(el, stop);
   },
   unmounted(el) {
-    el.__onClickOutside_stop();
+    const stop = stopClickOutsideMap.get(el);
+    if (stop && typeof stop === "function") {
+      stop();
+    } else {
+      stop == null ? void 0 : stop.stop();
+    }
+    stopClickOutsideMap.delete(el);
   }
 };
 
@@ -331,7 +340,7 @@ function onLongPress(target, handler, options) {
   return stop;
 }
 
-const OnLongPress = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const OnLongPress = /* @__PURE__ */ defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -360,7 +369,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseActiveElement = /* @__PURE__ */ defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = reactive({
@@ -373,7 +382,7 @@ const UseActiveElement = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseBattery = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseBattery = /* @__PURE__ */ defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = reactive(useBattery(props));
@@ -384,7 +393,7 @@ const UseBattery = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseBrowserLocation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = reactive(useBrowserLocation());
@@ -395,7 +404,7 @@ const UseBrowserLocation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseClipboard = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseClipboard = /* @__PURE__ */ defineComponent({
   name: "UseClipboard",
   props: [
     "source",
@@ -569,18 +578,33 @@ function useStorage(key, defaults, storage, options = {}) {
     { flush, deep, eventFilter }
   );
   watch(keyComputed, () => update(), { flush });
+  let firstMounted = false;
+  const onStorageEvent = (ev) => {
+    if (initOnMounted && !firstMounted) {
+      return;
+    }
+    update(ev);
+  };
+  const onStorageCustomEvent = (ev) => {
+    if (initOnMounted && !firstMounted) {
+      return;
+    }
+    updateFromCustomEvent(ev);
+  };
   if (window && listenToStorageChanges) {
+    if (storage instanceof Storage)
+      useEventListener(window, "storage", onStorageEvent, { passive: true });
+    else
+      useEventListener(window, customStorageEventName, onStorageCustomEvent);
+  }
+  if (initOnMounted) {
     tryOnMounted(() => {
-      if (storage instanceof Storage)
-        useEventListener(window, "storage", update, { passive: true });
-      else
-        useEventListener(window, customStorageEventName, updateFromCustomEvent);
-      if (initOnMounted)
-        update();
+      firstMounted = true;
+      update();
     });
-  }
-  if (!initOnMounted)
+  } else {
     update();
+  }
   function dispatchWriteEvent(oldValue, newValue) {
     if (window) {
       const payload = {
@@ -748,7 +772,7 @@ function useColorMode(options = {}) {
   return Object.assign(auto, { store, system, state });
 }
 
-const UseColorMode = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseColorMode = /* @__PURE__ */ defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -765,7 +789,7 @@ const UseColorMode = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDark = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDark = /* @__PURE__ */ defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -781,7 +805,7 @@ const UseDark = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDeviceMotion = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = useDeviceMotion();
@@ -792,7 +816,7 @@ const UseDeviceMotion = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDeviceOrientation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = reactive(useDeviceOrientation());
@@ -803,7 +827,7 @@ const UseDeviceOrientation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDevicePixelRatio = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = reactive({
@@ -816,7 +840,7 @@ const UseDevicePixelRatio = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDevicesList = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDevicesList = /* @__PURE__ */ defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -828,7 +852,7 @@ const UseDevicesList = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDocumentVisibility = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = reactive({
@@ -841,7 +865,7 @@ const UseDocumentVisibility = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseDraggable = /* @__PURE__ */ defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -865,7 +889,7 @@ const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
     const target = shallowRef();
     const handle = computed(() => {
       var _a;
-      return (_a = props.handle) != null ? _a : target.value;
+      return (_a = toValue(props.handle)) != null ? _a : target.value;
     });
     const containerElement = computed(() => {
       var _a;
@@ -901,7 +925,7 @@ const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseElementBounding = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseElementBounding = /* @__PURE__ */ defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
@@ -1172,12 +1196,13 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseElementSize = /* @__PURE__ */ defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box", "as"],
   setup(props, { slots }) {
-    const target = ref();
-    const data = reactive(useElementSize$1(target, { width: props.width, height: props.height }, { box: props.box }));
+    var _a, _b;
+    const target = shallowRef();
+    const data = reactive(useElementSize$1(target, { width: (_a = props.width) != null ? _a : 0, height: (_b = props.height) != null ? _b : 0 }, { box: props.box }));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -1252,11 +1277,11 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseElementVisibility = /* @__PURE__ */ defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
-    const target = ref();
+    const target = shallowRef();
     const data = reactive({
       isVisible: useElementVisibility$1(target)
     });
@@ -1377,7 +1402,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseEyeDropper = /* @__PURE__ */ defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -1391,11 +1416,11 @@ const UseEyeDropper = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseFullscreen = /* @__PURE__ */ defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
-    const target = ref();
+    const target = shallowRef();
     const data = reactive(useFullscreen(target));
     return () => {
       if (slots.default)
@@ -1404,7 +1429,7 @@ const UseFullscreen = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseGeolocation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseGeolocation = /* @__PURE__ */ defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -1416,7 +1441,7 @@ const UseGeolocation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseIdle = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseIdle = /* @__PURE__ */ defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1539,7 +1564,7 @@ function useImage(options, asyncStateOptions = {}) {
   return state;
 }
 
-const UseImage = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseImage = /* @__PURE__ */ defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1818,7 +1843,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseMouse = /* @__PURE__ */ defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1830,11 +1855,11 @@ const UseMouse = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseMouseInElement = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseMouseInElement = /* @__PURE__ */ defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
-    const target = ref();
+    const target = shallowRef();
     const data = reactive(useMouseInElement$1(target, props));
     return () => {
       if (slots.default)
@@ -1996,11 +2021,11 @@ const vMouseInElement = {
   }
 };
 
-const UseMousePressed = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseMousePressed = /* @__PURE__ */ defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
-    const target = ref();
+    const target = shallowRef();
     const data = reactive(useMousePressed({ ...props, target }));
     return () => {
       if (slots.default)
@@ -2009,7 +2034,7 @@ const UseMousePressed = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseNetwork = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseNetwork = /* @__PURE__ */ defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = reactive(useNetwork());
@@ -2020,7 +2045,7 @@ const UseNetwork = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseNow = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseNow = /* @__PURE__ */ defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -2032,7 +2057,7 @@ const UseNow = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseObjectUrl = /* @__PURE__ */ defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -2047,7 +2072,7 @@ const UseObjectUrl = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseOffsetPagination = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -2088,7 +2113,7 @@ const UseOffsetPagination = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseOnline = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseOnline = /* @__PURE__ */ defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = reactive({
@@ -2101,7 +2126,7 @@ const UseOnline = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePageLeave = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePageLeave = /* @__PURE__ */ defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = reactive({
@@ -2114,7 +2139,7 @@ const UsePageLeave = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePointer = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePointer = /* @__PURE__ */ defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -2138,7 +2163,7 @@ const UsePointerLock = /*@__PURE__*/ defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
-    const target = ref();
+    const target = shallowRef();
     const data = reactive(usePointerLock(target));
     return () => {
       if (slots.default)
@@ -2147,7 +2172,7 @@ const UsePointerLock = /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePreferredColorScheme = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePreferredColorScheme = /* @__PURE__ */ defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = reactive({
@@ -2160,7 +2185,7 @@ const UsePreferredColorScheme = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePreferredContrast = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = reactive({
@@ -2173,7 +2198,7 @@ const UsePreferredContrast = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePreferredDark = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePreferredDark = /* @__PURE__ */ defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = reactive({
@@ -2186,7 +2211,7 @@ const UsePreferredDark = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePreferredLanguages = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = reactive({
@@ -2199,7 +2224,7 @@ const UsePreferredLanguages = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UsePreferredReducedMotion = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = reactive({
@@ -2212,7 +2237,7 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /*@__PURE__*/ defineComponent(
   }
 });
 
-const UsePreferredReducedTransparency = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UsePreferredReducedTransparency = /* @__PURE__ */ defineComponent({
   name: "UsePreferredReducedTransparency",
   setup(props, { slots }) {
     const data = reactive({
@@ -2320,7 +2345,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -2482,7 +2507,7 @@ function onScrollLock() {
 }
 const vScrollLock = onScrollLock();
 
-const UseTimeAgo = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseTimeAgo = /* @__PURE__ */ defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -2494,7 +2519,7 @@ const UseTimeAgo = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseTimestamp = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseTimestamp = /* @__PURE__ */ defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -2506,7 +2531,7 @@ const UseTimestamp = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseVirtualList = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseVirtualList = /* @__PURE__ */ defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -2525,7 +2550,7 @@ const UseVirtualList = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseWindowFocus = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseWindowFocus = /* @__PURE__ */ defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = reactive({
@@ -2538,7 +2563,7 @@ const UseWindowFocus = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   }
 });
 
-const UseWindowSize = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
+const UseWindowSize = /* @__PURE__ */ defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/components",
   "type": "module",
-  "version": "13.1.0",
+  "version": "13.3.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -38,8 +38,8 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@vueuse/shared": "13.1.0",
-    "@vueuse/core": "13.1.0"
+    "@vueuse/shared": "13.3.0",
+    "@vueuse/core": "13.3.0"
   },
   "scripts": {
     "build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild",