@vueuse/components 10.6.1 → 10.7.0

package/index.cjs

@@ -209,15 +209,18 @@ const vOnKeyStroke = {
 };
 
 const DEFAULT_DELAY = 500;
+const DEFAULT_THRESHOLD = 10;
 function onLongPress(target, handler, options) {
   var _a, _b;
   const elementRef = vueDemi.computed(() => unrefElement(target));
   let timeout;
+  let posStart;
   function clear() {
     if (timeout) {
       clearTimeout(timeout);
       timeout = void 0;
     }
+    posStart = void 0;
   }
   function onDown(ev) {
     var _a2, _b2, _c, _d;
@@ -228,19 +231,40 @@ function onLongPress(target, handler, options) {
       ev.preventDefault();
     if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
+    posStart = {
+      x: ev.x,
+      y: ev.y
+    };
     timeout = setTimeout(
       () => handler(ev),
       (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
+  function onMove(ev) {
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      return;
+    if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
+      return;
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      ev.preventDefault();
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      ev.stopPropagation();
+    const dx = ev.x - posStart.x;
+    const dy = ev.y - posStart.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
+      clear();
+  }
   const listenerOptions = {
     capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
     once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
   };
   const cleanup = [
     useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
+    useEventListener(elementRef, "pointermove", onMove, listenerOptions),
     useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
-  ].filter(Boolean);
+  ];
   const stop = () => cleanup.forEach((fn) => fn());
   return stop;
 }
@@ -454,7 +478,7 @@ function useStorage(key, defaults, storage, options = {}) {
   function read(event) {
     const rawValue = event ? event.newValue : storage.getItem(key);
     if (rawValue == null) {
-      if (writeDefaults && rawInit !== null)
+      if (writeDefaults && rawInit != null)
         storage.setItem(key, serializer.write(rawInit));
       return rawInit;
     } else if (!event && mergeDefaults) {
@@ -1018,7 +1042,15 @@ function useElementVisibility(element, options = {}) {
   const elementIsVisible = vueDemi.ref(false);
   useIntersectionObserver(
     element,
-    ([{ isIntersecting }]) => {
+    (intersectionObserverEntries) => {
+      let isIntersecting = elementIsVisible.value;
+      let latestTime = 0;
+      for (const entry of intersectionObserverEntries) {
+        if (entry.time >= latestTime) {
+          latestTime = entry.time;
+          isIntersecting = entry.isIntersecting;
+        }
+      }
       elementIsVisible.value = isIntersecting;
     },
     {
@@ -1384,7 +1416,8 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   var _a;
   const {
     direction = "bottom",
-    interval = 100
+    interval = 100,
+    canLoadMore = () => true
   } = options;
   const state = vueDemi.reactive(useScroll(
     element,
@@ -1404,7 +1437,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   const isElementVisible = useElementVisibility(observedElement);
   function checkAndLoad() {
     state.measure();
-    if (!observedElement.value || !isElementVisible.value)
+    if (!observedElement.value || !isElementVisible.value || !canLoadMore(observedElement.value))
       return;
     const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value;
     const isNarrower = direction === "bottom" || direction === "top" ? scrollHeight <= clientHeight : scrollWidth <= clientWidth;

package/index.d.cts

@@ -75,6 +75,12 @@ interface OnLongPressOptions {
      */
     delay?: number;
     modifiers?: OnLongPressModifiers;
+    /**
+     * Allowance of moving distance in pixels,
+     * The action will get canceled When moving too far from the pointerdown position.
+     * @default 10
+     */
+    distanceThreshold?: number | false;
 }
 interface OnLongPressModifiers {
     stop?: boolean;
@@ -444,7 +450,8 @@ declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement |
 };
 type UseScrollReturn = ReturnType<typeof useScroll>;
 
-interface UseInfiniteScrollOptions extends UseScrollOptions {
+type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined;
+interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement> extends UseScrollOptions {
     /**
      * The minimum distance between the bottom of the element and the bottom of the viewport
      *
@@ -463,13 +470,19 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      * @default 100
      */
     interval?: number;
+    /**
+     * A function that determines whether more content can be loaded for a specific element.
+     * Should return `true` if loading more content is allowed for the given element,
+     * and `false` otherwise.
+     */
+    canLoadMore?: (el: T) => boolean;
 }
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions): {
+declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): {
     isLoading: vue_demi.ComputedRef<boolean>;
 };
 

package/index.d.mts

@@ -75,6 +75,12 @@ interface OnLongPressOptions {
      */
     delay?: number;
     modifiers?: OnLongPressModifiers;
+    /**
+     * Allowance of moving distance in pixels,
+     * The action will get canceled When moving too far from the pointerdown position.
+     * @default 10
+     */
+    distanceThreshold?: number | false;
 }
 interface OnLongPressModifiers {
     stop?: boolean;
@@ -444,7 +450,8 @@ declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement |
 };
 type UseScrollReturn = ReturnType<typeof useScroll>;
 
-interface UseInfiniteScrollOptions extends UseScrollOptions {
+type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined;
+interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement> extends UseScrollOptions {
     /**
      * The minimum distance between the bottom of the element and the bottom of the viewport
      *
@@ -463,13 +470,19 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      * @default 100
      */
     interval?: number;
+    /**
+     * A function that determines whether more content can be loaded for a specific element.
+     * Should return `true` if loading more content is allowed for the given element,
+     * and `false` otherwise.
+     */
+    canLoadMore?: (el: T) => boolean;
 }
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions): {
+declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): {
     isLoading: vue_demi.ComputedRef<boolean>;
 };
 

package/index.d.ts

@@ -75,6 +75,12 @@ interface OnLongPressOptions {
      */
     delay?: number;
     modifiers?: OnLongPressModifiers;
+    /**
+     * Allowance of moving distance in pixels,
+     * The action will get canceled When moving too far from the pointerdown position.
+     * @default 10
+     */
+    distanceThreshold?: number | false;
 }
 interface OnLongPressModifiers {
     stop?: boolean;
@@ -444,7 +450,8 @@ declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement |
 };
 type UseScrollReturn = ReturnType<typeof useScroll>;
 
-interface UseInfiniteScrollOptions extends UseScrollOptions {
+type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined;
+interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement> extends UseScrollOptions {
     /**
      * The minimum distance between the bottom of the element and the bottom of the viewport
      *
@@ -463,13 +470,19 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      * @default 100
      */
     interval?: number;
+    /**
+     * A function that determines whether more content can be loaded for a specific element.
+     * Should return `true` if loading more content is allowed for the given element,
+     * and `false` otherwise.
+     */
+    canLoadMore?: (el: T) => boolean;
 }
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions): {
+declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): {
     isLoading: vue_demi.ComputedRef<boolean>;
 };
 

package/index.iife.js

@@ -322,15 +322,18 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   };
 
   const DEFAULT_DELAY = 500;
+  const DEFAULT_THRESHOLD = 10;
   function onLongPress(target, handler, options) {
     var _a, _b;
     const elementRef = vueDemi.computed(() => unrefElement(target));
     let timeout;
+    let posStart;
     function clear() {
       if (timeout) {
         clearTimeout(timeout);
         timeout = void 0;
       }
+      posStart = void 0;
     }
     function onDown(ev) {
       var _a2, _b2, _c, _d;
@@ -341,19 +344,40 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         ev.preventDefault();
       if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
         ev.stopPropagation();
+      posStart = {
+        x: ev.x,
+        y: ev.y
+      };
       timeout = setTimeout(
         () => handler(ev),
         (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
       );
     }
+    function onMove(ev) {
+      var _a2, _b2, _c, _d;
+      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+        return;
+      if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
+        return;
+      if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+        ev.preventDefault();
+      if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+        ev.stopPropagation();
+      const dx = ev.x - posStart.x;
+      const dy = ev.y - posStart.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
+        clear();
+    }
     const listenerOptions = {
       capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
       once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
     };
     const cleanup = [
       useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
+      useEventListener(elementRef, "pointermove", onMove, listenerOptions),
       useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
-    ].filter(Boolean);
+    ];
     const stop = () => cleanup.forEach((fn) => fn());
     return stop;
   }
@@ -567,7 +591,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     function read(event) {
       const rawValue = event ? event.newValue : storage.getItem(key);
       if (rawValue == null) {
-        if (writeDefaults && rawInit !== null)
+        if (writeDefaults && rawInit != null)
           storage.setItem(key, serializer.write(rawInit));
         return rawInit;
       } else if (!event && mergeDefaults) {
@@ -1131,7 +1155,15 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const elementIsVisible = vueDemi.ref(false);
     useIntersectionObserver(
       element,
-      ([{ isIntersecting }]) => {
+      (intersectionObserverEntries) => {
+        let isIntersecting = elementIsVisible.value;
+        let latestTime = 0;
+        for (const entry of intersectionObserverEntries) {
+          if (entry.time >= latestTime) {
+            latestTime = entry.time;
+            isIntersecting = entry.isIntersecting;
+          }
+        }
         elementIsVisible.value = isIntersecting;
       },
       {
@@ -1497,7 +1529,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     var _a;
     const {
       direction = "bottom",
-      interval = 100
+      interval = 100,
+      canLoadMore = () => true
     } = options;
     const state = vueDemi.reactive(useScroll(
       element,
@@ -1517,7 +1550,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const isElementVisible = useElementVisibility(observedElement);
     function checkAndLoad() {
       state.measure();
-      if (!observedElement.value || !isElementVisible.value)
+      if (!observedElement.value || !isElementVisible.value || !canLoadMore(observedElement.value))
         return;
       const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value;
       const isNarrower = direction === "bottom" || direction === "top" ? scrollHeight <= clientHeight : scrollWidth <= clientWidth;

package/index.iife.min.js

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

package/index.mjs

@@ -207,15 +207,18 @@ const vOnKeyStroke = {
 };
 
 const DEFAULT_DELAY = 500;
+const DEFAULT_THRESHOLD = 10;
 function onLongPress(target, handler, options) {
   var _a, _b;
   const elementRef = computed(() => unrefElement(target));
   let timeout;
+  let posStart;
   function clear() {
     if (timeout) {
       clearTimeout(timeout);
       timeout = void 0;
     }
+    posStart = void 0;
   }
   function onDown(ev) {
     var _a2, _b2, _c, _d;
@@ -226,19 +229,40 @@ function onLongPress(target, handler, options) {
       ev.preventDefault();
     if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
+    posStart = {
+      x: ev.x,
+      y: ev.y
+    };
     timeout = setTimeout(
       () => handler(ev),
       (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
+  function onMove(ev) {
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      return;
+    if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
+      return;
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      ev.preventDefault();
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      ev.stopPropagation();
+    const dx = ev.x - posStart.x;
+    const dy = ev.y - posStart.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
+      clear();
+  }
   const listenerOptions = {
     capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
     once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
   };
   const cleanup = [
     useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
+    useEventListener(elementRef, "pointermove", onMove, listenerOptions),
     useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
-  ].filter(Boolean);
+  ];
   const stop = () => cleanup.forEach((fn) => fn());
   return stop;
 }
@@ -452,7 +476,7 @@ function useStorage(key, defaults, storage, options = {}) {
   function read(event) {
     const rawValue = event ? event.newValue : storage.getItem(key);
     if (rawValue == null) {
-      if (writeDefaults && rawInit !== null)
+      if (writeDefaults && rawInit != null)
         storage.setItem(key, serializer.write(rawInit));
       return rawInit;
     } else if (!event && mergeDefaults) {
@@ -1016,7 +1040,15 @@ function useElementVisibility(element, options = {}) {
   const elementIsVisible = ref(false);
   useIntersectionObserver(
     element,
-    ([{ isIntersecting }]) => {
+    (intersectionObserverEntries) => {
+      let isIntersecting = elementIsVisible.value;
+      let latestTime = 0;
+      for (const entry of intersectionObserverEntries) {
+        if (entry.time >= latestTime) {
+          latestTime = entry.time;
+          isIntersecting = entry.isIntersecting;
+        }
+      }
       elementIsVisible.value = isIntersecting;
     },
     {
@@ -1382,7 +1414,8 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   var _a;
   const {
     direction = "bottom",
-    interval = 100
+    interval = 100,
+    canLoadMore = () => true
   } = options;
   const state = reactive(useScroll(
     element,
@@ -1402,7 +1435,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   const isElementVisible = useElementVisibility(observedElement);
   function checkAndLoad() {
     state.measure();
-    if (!observedElement.value || !isElementVisible.value)
+    if (!observedElement.value || !isElementVisible.value || !canLoadMore(observedElement.value))
       return;
     const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value;
     const isNarrower = direction === "bottom" || direction === "top" ? scrollHeight <= clientHeight : scrollWidth <= clientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "10.6.1",
+  "version": "10.7.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": "10.6.1",
-    "@vueuse/shared": "10.6.1",
+    "@vueuse/core": "10.7.0",
+    "@vueuse/shared": "10.7.0",
     "vue-demi": ">=0.14.6"
   }
 }