@vueuse/components 12.0.0 → 12.1.0

package/index.cjs

@@ -413,6 +413,12 @@ function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
 
+const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+function useSSRWidth() {
+  const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+
 function useMounted() {
   const isMounted = vue.ref(false);
   const instance = vue.getCurrentInstance();
@@ -433,8 +439,9 @@ function useSupported(callback) {
 }
 
 function useMediaQuery(query, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const ssrSupport = vue.ref(typeof ssrWidth === "number");
   let mediaQuery;
   const matches = vue.ref(false);
   const handler = (event) => {
@@ -449,6 +456,24 @@ function useMediaQuery(query, options = {}) {
       mediaQuery.removeListener(handler);
   };
   const stopWatch = vue.watchEffect(() => {
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      const queryStrings = shared.toValue(query).split(",");
+      matches.value = queryStrings.some((queryString) => {
+        const not = queryString.includes("not all");
+        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let res = Boolean(minWidth || maxWidth);
+        if (minWidth && res) {
+          res = ssrWidth >= shared.pxValue(minWidth[1]);
+        }
+        if (maxWidth && res) {
+          res = ssrWidth <= shared.pxValue(maxWidth[1]);
+        }
+        return not ? !res : res;
+      });
+      return;
+    }
     if (!isSupported.value)
       return;
     cleanup();
@@ -464,7 +489,7 @@ function useMediaQuery(query, options = {}) {
     cleanup();
     mediaQuery = void 0;
   });
-  return matches;
+  return vue.computed(() => matches.value);
 }
 
 function usePreferredDark(options) {
@@ -762,7 +787,7 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
 const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
-    const data = vue.reactive(core.useDeviceMotion());
+    const data = core.useDeviceMotion();
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1126,7 +1151,12 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
+  const {
+    window = defaultWindow,
+    scrollTarget,
+    threshold = 0,
+    rootMargin
+  } = options;
   const elementIsVisible = vue.ref(false);
   useIntersectionObserver(
     element,
@@ -1144,7 +1174,8 @@ function useElementVisibility(element, options = {}) {
     {
       root: scrollTarget,
       window,
-      threshold
+      threshold,
+      rootMargin: shared.toValue(rootMargin)
     }
   );
   return elementIsVisible;
@@ -1436,12 +1467,13 @@ function useScroll(element, options = {}) {
     if (!window)
       return;
     const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-    const { display, flexDirection } = getComputedStyle(el);
+    const { display, flexDirection, direction } = getComputedStyle(el);
+    const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= (offset.left || 0);
-    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const left = scrollLeft * directionMultipler <= (offset.left || 0);
+    const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1455,8 +1487,8 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = Math.abs(scrollTop) <= (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = scrollTop <= (offset.top || 0);
+    const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;

package/index.d.cts

@@ -381,6 +381,13 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
 }
 
 interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * The element that is used as the viewport for checking visibility of the target.
+     */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 

package/index.d.mts

@@ -381,6 +381,13 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
 }
 
 interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * The element that is used as the viewport for checking visibility of the target.
+     */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 

package/index.d.ts

@@ -381,6 +381,13 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
 }
 
 interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * The element that is used as the viewport for checking visibility of the target.
+     */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 

package/index.iife.js

@@ -410,6 +410,12 @@
     return handlers[key] || fallback;
   }
 
+  const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+  function useSSRWidth() {
+    const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
+    return typeof ssrWidth === "number" ? ssrWidth : void 0;
+  }
+
   function useMounted() {
     const isMounted = vue.ref(false);
     const instance = vue.getCurrentInstance();
@@ -430,8 +436,9 @@
   }
 
   function useMediaQuery(query, options = {}) {
-    const { window = defaultWindow } = options;
+    const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
     const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+    const ssrSupport = vue.ref(typeof ssrWidth === "number");
     let mediaQuery;
     const matches = vue.ref(false);
     const handler = (event) => {
@@ -446,6 +453,24 @@
         mediaQuery.removeListener(handler);
     };
     const stopWatch = vue.watchEffect(() => {
+      if (ssrSupport.value) {
+        ssrSupport.value = !isSupported.value;
+        const queryStrings = shared.toValue(query).split(",");
+        matches.value = queryStrings.some((queryString) => {
+          const not = queryString.includes("not all");
+          const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+          const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+          let res = Boolean(minWidth || maxWidth);
+          if (minWidth && res) {
+            res = ssrWidth >= shared.pxValue(minWidth[1]);
+          }
+          if (maxWidth && res) {
+            res = ssrWidth <= shared.pxValue(maxWidth[1]);
+          }
+          return not ? !res : res;
+        });
+        return;
+      }
       if (!isSupported.value)
         return;
       cleanup();
@@ -461,7 +486,7 @@
       cleanup();
       mediaQuery = void 0;
     });
-    return matches;
+    return vue.computed(() => matches.value);
   }
 
   function usePreferredDark(options) {
@@ -759,7 +784,7 @@
   const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDeviceMotion",
     setup(props, { slots }) {
-      const data = vue.reactive(core.useDeviceMotion());
+      const data = core.useDeviceMotion();
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1123,7 +1148,12 @@
   }
 
   function useElementVisibility(element, options = {}) {
-    const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
+    const {
+      window = defaultWindow,
+      scrollTarget,
+      threshold = 0,
+      rootMargin
+    } = options;
     const elementIsVisible = vue.ref(false);
     useIntersectionObserver(
       element,
@@ -1141,7 +1171,8 @@
       {
         root: scrollTarget,
         window,
-        threshold
+        threshold,
+        rootMargin: shared.toValue(rootMargin)
       }
     );
     return elementIsVisible;
@@ -1433,12 +1464,13 @@
       if (!window)
         return;
       const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-      const { display, flexDirection } = getComputedStyle(el);
+      const { display, flexDirection, direction } = getComputedStyle(el);
+      const directionMultipler = direction === "rtl" ? -1 : 1;
       const scrollLeft = el.scrollLeft;
       directions.left = scrollLeft < internalX.value;
       directions.right = scrollLeft > internalX.value;
-      const left = Math.abs(scrollLeft) <= (offset.left || 0);
-      const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const left = scrollLeft * directionMultipler <= (offset.left || 0);
+      const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "row-reverse") {
         arrivedState.left = right;
         arrivedState.right = left;
@@ -1452,8 +1484,8 @@
         scrollTop = window.document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
-      const top = Math.abs(scrollTop) <= (offset.top || 0);
-      const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const top = scrollTop <= (offset.top || 0);
+      const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "column-reverse") {
         arrivedState.top = bottom;
         arrivedState.bottom = top;

package/index.iife.min.js

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

package/index.mjs

@@ -1,6 +1,6 @@
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useClipboard, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { defineComponent, ref, h, watch, computed, reactive, getCurrentInstance, onMounted, watchEffect, shallowRef, nextTick, toRefs } from 'vue';
-import { isClient, toValue, noop, isObject, tryOnScopeDispose, isIOS, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted } from '@vueuse/shared';
+import { defineComponent, ref, h, watch, computed, reactive, hasInjectionContext, getCurrentInstance, onMounted, watchEffect, shallowRef, nextTick, toRefs } from 'vue';
+import { isClient, toValue, noop, isObject, tryOnScopeDispose, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -411,6 +411,12 @@ function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
 
+const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+function useSSRWidth() {
+  const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+
 function useMounted() {
   const isMounted = ref(false);
   const instance = getCurrentInstance();
@@ -431,8 +437,9 @@ function useSupported(callback) {
 }
 
 function useMediaQuery(query, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const ssrSupport = ref(typeof ssrWidth === "number");
   let mediaQuery;
   const matches = ref(false);
   const handler = (event) => {
@@ -447,6 +454,24 @@ function useMediaQuery(query, options = {}) {
       mediaQuery.removeListener(handler);
   };
   const stopWatch = watchEffect(() => {
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      const queryStrings = toValue(query).split(",");
+      matches.value = queryStrings.some((queryString) => {
+        const not = queryString.includes("not all");
+        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let res = Boolean(minWidth || maxWidth);
+        if (minWidth && res) {
+          res = ssrWidth >= pxValue(minWidth[1]);
+        }
+        if (maxWidth && res) {
+          res = ssrWidth <= pxValue(maxWidth[1]);
+        }
+        return not ? !res : res;
+      });
+      return;
+    }
     if (!isSupported.value)
       return;
     cleanup();
@@ -462,7 +487,7 @@ function useMediaQuery(query, options = {}) {
     cleanup();
     mediaQuery = void 0;
   });
-  return matches;
+  return computed(() => matches.value);
 }
 
 function usePreferredDark(options) {
@@ -760,7 +785,7 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
-    const data = reactive(useDeviceMotion());
+    const data = useDeviceMotion();
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1124,7 +1149,12 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
+  const {
+    window = defaultWindow,
+    scrollTarget,
+    threshold = 0,
+    rootMargin
+  } = options;
   const elementIsVisible = ref(false);
   useIntersectionObserver(
     element,
@@ -1142,7 +1172,8 @@ function useElementVisibility(element, options = {}) {
     {
       root: scrollTarget,
       window,
-      threshold
+      threshold,
+      rootMargin: toValue(rootMargin)
     }
   );
   return elementIsVisible;
@@ -1434,12 +1465,13 @@ function useScroll(element, options = {}) {
     if (!window)
       return;
     const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-    const { display, flexDirection } = getComputedStyle(el);
+    const { display, flexDirection, direction } = getComputedStyle(el);
+    const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= (offset.left || 0);
-    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const left = scrollLeft * directionMultipler <= (offset.left || 0);
+    const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1453,8 +1485,8 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = Math.abs(scrollTop) <= (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = scrollTop <= (offset.top || 0);
+    const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -32,8 +32,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.cts",
   "dependencies": {
-    "@vueuse/core": "12.0.0",
-    "@vueuse/shared": "12.0.0",
+    "@vueuse/core": "12.1.0",
+    "@vueuse/shared": "12.1.0",
     "vue": "^3.5.13"
   }
-}
+}