@vueuse/components 8.5.0 → 8.6.0

package/index.cjs

@@ -589,6 +589,7 @@ const UseDraggable = vueDemi.defineComponent({
     "initialValue",
     "exact",
     "preventDefault",
+    "stopPropagation",
     "pointerTypes",
     "as"
   ],
@@ -906,15 +907,31 @@ var __spreadValues$8 = (a, b) => {
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function useInfiniteScroll(element, onLoadMore, options = {}) {
-  var _a;
+  var _a, _b;
+  const direction = (_a = options.direction) != null ? _a : "bottom";
   const state = vueDemi.reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
     offset: __spreadValues$8({
-      bottom: (_a = options.distance) != null ? _a : 0
+      [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   })));
-  vueDemi.watch(() => state.arrivedState.bottom, (v) => {
-    if (v)
-      onLoadMore(state);
+  vueDemi.watch(() => state.arrivedState[direction], async (v) => {
+    var _a2, _b2;
+    if (v) {
+      const elem = vueDemi.unref(element);
+      const previous = {
+        height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
+        width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
+      };
+      await onLoadMore(state);
+      if (options.preserveScrollPosition && elem) {
+        vueDemi.nextTick(() => {
+          elem.scrollTo({
+            top: elem.scrollHeight - previous.height,
+            left: elem.scrollWidth - previous.width
+          });
+        });
+      }
+    }
   });
 }
 
@@ -1235,15 +1252,17 @@ const UsePreferredLanguages = vueDemi.defineComponent({
   }
 });
 
-function useCssVar(prop, target, { window = defaultWindow } = {}) {
-  const variable = vueDemi.ref("");
+function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+  const variable = vueDemi.ref(initialValue);
   const elRef = vueDemi.computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
   vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
-    if (el && window)
-      variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
+    if (el && window) {
+      const value = window.getComputedStyle(el).getPropertyValue(prop2);
+      variable.value = value || initialValue;
+    }
   }, { immediate: true });
   vueDemi.watch(variable, (val) => {
     var _a;

package/index.d.ts

@@ -340,13 +340,25 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      * @default 0
      */
     distance?: number;
+    /**
+     * The direction in which to listen the scroll.
+     *
+     * @default 'bottom'
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Whether to preserve the current scroll position when loading more items.
+     *
+     * @default false
+     */
+    preserveScrollPosition?: boolean;
 }
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
 declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];

package/index.iife.js

@@ -3,7 +3,34 @@
     return VueDemi
   }
   if (Vue) {
-    if (Vue.version.slice(0, 2) === '2.') {
+    if (Vue.version.slice(0, 4) === '2.7.') {
+      for (var key in Vue) {
+        VueDemi[key] = Vue[key]
+      }
+      VueDemi.isVue2 = true
+      VueDemi.isVue3 = false
+      VueDemi.install = function (){}
+      VueDemi.Vue = Vue
+      VueDemi.Vue2 = Vue
+      VueDemi.version = Vue.version
+      VueDemi.set = function(target, key, val) {
+        if (Array.isArray(target)) {
+          target.length = Math.max(target.length, key)
+          target.splice(key, 1, val)
+          return val
+        }
+        Vue.set(target, key, val)
+        return val
+      }
+      VueDemi.del = function(target, key) {
+        if (Array.isArray(target)) {
+          target.splice(key, 1)
+          return
+        }
+        Vue.delete(target, key)
+      }
+    }
+    else if (Vue.version.slice(0, 2) === '2.') {
       if (VueCompositionAPI) {
         for (var key in VueCompositionAPI) {
           VueDemi[key] = VueCompositionAPI[key]
@@ -646,6 +673,7 @@
       "initialValue",
       "exact",
       "preventDefault",
+      "stopPropagation",
       "pointerTypes",
       "as"
     ],
@@ -963,15 +991,31 @@
   };
   var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
   function useInfiniteScroll(element, onLoadMore, options = {}) {
-    var _a;
+    var _a, _b;
+    const direction = (_a = options.direction) != null ? _a : "bottom";
     const state = vueDemi.reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
       offset: __spreadValues$8({
-        bottom: (_a = options.distance) != null ? _a : 0
+        [direction]: (_b = options.distance) != null ? _b : 0
       }, options.offset)
     })));
-    vueDemi.watch(() => state.arrivedState.bottom, (v) => {
-      if (v)
-        onLoadMore(state);
+    vueDemi.watch(() => state.arrivedState[direction], async (v) => {
+      var _a2, _b2;
+      if (v) {
+        const elem = vueDemi.unref(element);
+        const previous = {
+          height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
+          width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
+        };
+        await onLoadMore(state);
+        if (options.preserveScrollPosition && elem) {
+          vueDemi.nextTick(() => {
+            elem.scrollTo({
+              top: elem.scrollHeight - previous.height,
+              left: elem.scrollWidth - previous.width
+            });
+          });
+        }
+      }
     });
   }
 
@@ -1292,15 +1336,17 @@
     }
   });
 
-  function useCssVar(prop, target, { window = defaultWindow } = {}) {
-    const variable = vueDemi.ref("");
+  function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+    const variable = vueDemi.ref(initialValue);
     const elRef = vueDemi.computed(() => {
       var _a;
       return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
     });
     vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
-      if (el && window)
-        variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
+      if (el && window) {
+        const value = window.getComputedStyle(el).getPropertyValue(prop2);
+        variable.value = value || initialValue;
+      }
     }, { immediate: true });
     vueDemi.watch(variable, (val) => {
       var _a;

package/index.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(l,n,u){if(l.install)return l;if(n)if(n.version.slice(0,2)==="2.")if(u){for(var c in u)l[c]=u[c];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=n,l.Vue2=n,l.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var c in n)l[c]=n[c];l.isVue2=!1,l.isVue3=!0,l.install=function(){},l.Vue=n,l.Vue2=void 0,l.version=n.version,l.set=function($,O,P){return Array.isArray($)?($.length=Math.max($.length,O),$.splice(O,1,P),P):($[O]=P,P)},l.del=function($,O){if(Array.isArray($)){$.splice(O,1);return}delete $[O]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");return l}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(l,n,u,c){"use strict";const $=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return u.onClickOutside(o,a=>{r("trigger",a)}),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}});function O(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const P=c.isClient?window:void 0;function w(...t){let e,r,o,a;if(c.isString(t[0])?([r,o,a]=t,e=P):[e,r,o,a]=t,!e)return c.noop;let s=c.noop;const i=n.watch(()=>O(e),f=>{s(),!!f&&(f.addEventListener(r,o,a),s=()=>{f.removeEventListener(r,o,a),s=c.noop})},{immediate:!0,flush:"post"}),p=()=>{i(),s()};return c.tryOnScopeDispose(p),p}function z(t,e,r={}){const{window:o=P,ignore:a,capture:s=!0}=r;if(!o)return;const i=n.ref(!0);let p;const f=d=>{o.clearTimeout(p);const v=O(t),m=d.composedPath();!v||v===d.target||m.includes(v)||!i.value||a&&a.length>0&&a.some(U=>{const y=O(U);return y&&(d.target===y||m.includes(y))})||e(d)},b=[w(o,"click",f,{passive:!0,capture:s}),w(o,"pointerdown",d=>{const v=O(t);i.value=!!v&&!d.composedPath().includes(v)},{passive:!0}),w(o,"pointerup",d=>{p=o.setTimeout(()=>f(d),50)},{passive:!0})];return()=>b.forEach(d=>d())}const B=(()=>{let t=null;return(e,r)=>{if(t){t(),t=z(e,r.value);return}t=z(e,r.value)}})(),be=t=>typeof t=="function"?t:typeof t=="string"?e=>e.key===t:Array.isArray(t)?e=>t.includes(e.key):t?()=>!0:()=>!1;function R(t,e,r={}){const{target:o=P,eventName:a="keydown",passive:s=!1}=r,i=be(t);return w(o,a,f=>{i(f)&&e(f)},s)}var Se=Object.defineProperty,W=Object.getOwnPropertySymbols,Ue=Object.prototype.hasOwnProperty,$e=Object.prototype.propertyIsEnumerable,k=(t,e,r)=>e in t?Se(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ce=(t,e)=>{for(var r in e||(e={}))Ue.call(e,r)&&k(t,r,e[r]);if(W)for(var r of W(e))$e.call(e,r)&&k(t,r,e[r]);return t};const Ee={[c.directiveHooks.mounted](t,e){var r,o;const a=(o=(r=e.arg)==null?void 0:r.split(","))!=null?o:[];if(typeof e.value=="function")R(a,e.value,{target:t});else{const[s,i]=e.value;R(a,s,Ce({target:t},i))}}},Le=500;function M(t,e,r){const o=n.computed(()=>O(t));let a=null;function s(){a!=null&&(clearTimeout(a),a=null)}function i(p){var f;s(),a=setTimeout(()=>e(p),(f=r==null?void 0:r.delay)!=null?f:Le)}w(o,"pointerdown",i),w(o,"pointerup",s),w(o,"pointerleave",s)}const je=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return M(o,a=>{r("trigger",a)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}}),F={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?M(t,e.value):M(t,...e.value)}},Ve=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:u.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),Ie=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(u.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),Me=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(u.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),N=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},T="__vueuse_ssr_handlers__";N[T]=N[T]||{};const Ne=N[T];function K(t,e){return Ne[t]||e}function Te(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":t instanceof Date?"date":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const Ae={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t))},date:{read:t=>new Date(t),write:t=>t.toISOString()}};function He(t,e,r,o={}){var a;const{flush:s="pre",deep:i=!0,listenToStorageChanges:p=!0,writeDefaults:f=!0,shallow:b,window:h=P,eventFilter:d,onError:v=_=>{console.error(_)}}=o,m=(b?n.shallowRef:n.ref)(e);if(!r)try{r=K("getDefaultStorage",()=>{var _;return(_=P)==null?void 0:_.localStorage})()}catch(_){v(_)}if(!r)return m;const U=n.unref(e),y=Te(U),g=(a=o.serializer)!=null?a:Ae[y],{pause:S,resume:C}=c.pausableWatch(m,()=>j(m.value),{flush:s,deep:i,eventFilter:d});return h&&p&&w(h,"storage",E),E(),m;function j(_){try{_==null?r.removeItem(t):r.setItem(t,g.write(_))}catch(L){v(L)}}function H(_){if(!(_&&_.key!==t)){S();try{const L=_?_.newValue:r.getItem(t);return L==null?(f&&U!==null&&r.setItem(t,g.write(U)),U):typeof L!="string"?L:g.read(L)}catch(L){v(L)}finally{C()}}}function E(_){_&&_.key!==t||(m.value=H(_))}}function ze(t,e={}){const{window:r=P}=e,o=Boolean(r&&"matchMedia"in r);let a;const s=n.ref(!1),i=()=>{!o||(a||(a=r.matchMedia(t)),s.value=a.matches)};return c.tryOnBeforeMount(()=>{i(),!!a&&("addEventListener"in a?a.addEventListener("change",i):a.addListener(i),c.tryOnScopeDispose(()=>{"removeEventListener"in a?a.removeEventListener("change",i):a.removeListener(i)}))}),s}function Be(t){return ze("(prefers-color-scheme: dark)",t)}var Re=Object.defineProperty,J=Object.getOwnPropertySymbols,We=Object.prototype.hasOwnProperty,ke=Object.prototype.propertyIsEnumerable,G=(t,e,r)=>e in t?Re(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Fe=(t,e)=>{for(var r in e||(e={}))We.call(e,r)&&G(t,r,e[r]);if(J)for(var r of J(e))ke.call(e,r)&&G(t,r,e[r]);return t};function Ke(t={}){const{selector:e="html",attribute:r="class",window:o=P,storage:a,storageKey:s="vueuse-color-scheme",listenToStorageChanges:i=!0,storageRef:p}=t,f=Fe({auto:"",light:"light",dark:"dark"},t.modes||{}),b=Be({window:o}),h=n.computed(()=>b.value?"dark":"light"),d=p||(s==null?n.ref("auto"):He(s,"auto",a,{window:o,listenToStorageChanges:i})),v=n.computed({get(){return d.value==="auto"?h.value:d.value},set(g){d.value=g}}),m=K("updateHTMLAttrs",(g,S,C)=>{const j=o==null?void 0:o.document.querySelector(g);if(!!j)if(S==="class"){const H=C.split(/\s/g);Object.values(f).flatMap(E=>(E||"").split(/\s/g)).filter(Boolean).forEach(E=>{H.includes(E)?j.classList.add(E):j.classList.remove(E)})}else j.setAttribute(S,C)});function U(g){var S;m(e,r,(S=f[g])!=null?S:g)}function y(g){t.onChanged?t.onChanged(g,U):U(g)}return n.watch(v,y,{flush:"post",immediate:!0}),c.tryOnMounted(()=>y(v.value)),v}const Je=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=Ke(t),o=n.reactive({mode:r});return()=>{if(e.default)return e.default(o)}}}),Ge=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=u.useDark(t),o=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(o)}}}),qe=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(u.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),Qe=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(u.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),Ye=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:u.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),Xe=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(u.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),Ze=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:u.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var xe=Object.defineProperty,De=Object.defineProperties,et=Object.getOwnPropertyDescriptors,q=Object.getOwnPropertySymbols,tt=Object.prototype.hasOwnProperty,rt=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?xe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,nt=(t,e)=>{for(var r in e||(e={}))tt.call(e,r)&&Q(t,r,e[r]);if(q)for(var r of q(e))rt.call(e,r)&&Q(t,r,e[r]);return t},ot=(t,e)=>De(t,et(e));const at=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),o=t.storageKey?u.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},u.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},a=n.reactive(u.useDraggable(r,ot(nt({},t),{initialValue:o})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${a.style}`},e.default(a))}}}),st=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(u.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function lt(t){const e=n.ref(!1);return w(t,"mouseenter",()=>e.value=!0),w(t,"mouseleave",()=>e.value=!1),e}const it={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=lt(t);n.watch(r,o=>e.value(o))}}},ut=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(u.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var Y=Object.getOwnPropertySymbols,ct=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable,pt=(t,e)=>{var r={};for(var o in t)ct.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&Y)for(var o of Y(t))e.indexOf(o)<0&&ft.call(t,o)&&(r[o]=t[o]);return r};function dt(t,e,r={}){const o=r,{window:a=P}=o,s=pt(o,["window"]);let i;const p=a&&"ResizeObserver"in a,f=()=>{i&&(i.disconnect(),i=void 0)},b=n.watch(()=>O(t),d=>{f(),p&&a&&d&&(i=new ResizeObserver(e),i.observe(d,s))},{immediate:!0,flush:"post"}),h=()=>{f(),b()};return c.tryOnScopeDispose(h),{isSupported:p,stop:h}}function vt(t,e={width:0,height:0},r={}){const o=n.ref(e.width),a=n.ref(e.height);return dt(t,([s])=>{o.value=s.contentRect.width,a.value=s.contentRect.height},r),n.watch(()=>O(t),s=>{o.value=s?e.width:0,a.value=s?e.height:0}),{width:o,height:a}}const gt={[c.directiveHooks.mounted](t,e){var r;const o=typeof e.value=="function"?e.value:(r=e.value)==null?void 0:r[0],a=typeof e.value=="function"?[]:e.value.slice(1),{width:s,height:i}=vt(t,...a);n.watch([s,i],([p,f])=>o({width:p,height:f}))}},_t=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive({isVisible:u.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function X(t,{window:e=P,scrollTarget:r}={}){const o=n.ref(!1),a=()=>{if(!e)return;const s=e.document;if(!n.unref(t))o.value=!1;else{const i=n.unref(t).getBoundingClientRect();o.value=i.top<=(e.innerHeight||s.documentElement.clientHeight)&&i.left<=(e.innerWidth||s.documentElement.clientWidth)&&i.bottom>=0&&i.right>=0}};return c.tryOnMounted(a),e&&c.tryOnMounted(()=>w(n.unref(r)||e,"scroll",a,{capture:!1,passive:!0})),o}const Ot={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=X(t);n.watch(o,a=>r(a),{immediate:!0})}else{const[r,o]=e.value,a=X(t,o);n.watch(a,s=>r(s),{immediate:!0})}}},Pt=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(u.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),yt=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(u.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),ht=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(u.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),mt=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(u.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}});function A(t,e={}){const{throttle:r=0,idle:o=200,onStop:a=c.noop,onScroll:s=c.noop,offset:i={left:0,right:0,top:0,bottom:0},eventListenerOptions:p={capture:!1,passive:!0}}=e,f=n.ref(0),b=n.ref(0),h=n.ref(!1),d=n.reactive({left:!0,right:!1,top:!0,bottom:!1}),v=n.reactive({left:!1,right:!1,top:!1,bottom:!1});if(t){const m=c.useDebounceFn(y=>{h.value=!1,v.left=!1,v.right=!1,v.top=!1,v.bottom=!1,a(y)},r+o),U=y=>{const g=y.target===document?y.target.documentElement:y.target,S=g.scrollLeft;v.left=S<f.value,v.right=S>f.value,d.left=S<=0+(i.left||0),d.right=S+g.clientWidth>=g.scrollWidth-(i.right||0),f.value=S;const C=g.scrollTop;v.top=C<b.value,v.bottom=C>b.value,d.top=C<=0+(i.top||0),d.bottom=C+g.clientHeight>=g.scrollHeight-(i.bottom||0),b.value=C,h.value=!0,m(y),s(y)};w(t,"scroll",r?c.useThrottleFn(U,r):U,p)}return{x:f,y:b,isScrolling:h,arrivedState:d,directions:v}}var wt=Object.defineProperty,bt=Object.defineProperties,St=Object.getOwnPropertyDescriptors,Z=Object.getOwnPropertySymbols,Ut=Object.prototype.hasOwnProperty,$t=Object.prototype.propertyIsEnumerable,x=(t,e,r)=>e in t?wt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,D=(t,e)=>{for(var r in e||(e={}))Ut.call(e,r)&&x(t,r,e[r]);if(Z)for(var r of Z(e))$t.call(e,r)&&x(t,r,e[r]);return t},Ct=(t,e)=>bt(t,St(e));function ee(t,e,r={}){var o;const a=n.reactive(A(t,Ct(D({},r),{offset:D({bottom:(o=r.distance)!=null?o:0},r.offset)})));n.watch(()=>a.arrivedState.bottom,s=>{s&&e(a)})}const Et={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?ee(t,e.value):ee(t,...e.value)}};function te(t,e,r={}){const{root:o,rootMargin:a="0px",threshold:s=.1,window:i=P}=r,p=i&&"IntersectionObserver"in i;let f=c.noop;const b=p?n.watch(()=>({el:O(t),root:O(o)}),({el:d,root:v})=>{if(f(),!d)return;const m=new IntersectionObserver(e,{root:v,rootMargin:a,threshold:s});m.observe(d),f=()=>{m.disconnect(),f=c.noop}},{immediate:!0,flush:"post"}):c.noop,h=()=>{f(),b()};return c.tryOnScopeDispose(h),{isSupported:p,stop:h}}const Lt={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?te(t,e.value):te(t,...e.value)}},jt=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(u.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Vt=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(u.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var It=Object.defineProperty,Mt=Object.defineProperties,Nt=Object.getOwnPropertyDescriptors,re=Object.getOwnPropertySymbols,Tt=Object.prototype.hasOwnProperty,At=Object.prototype.propertyIsEnumerable,ne=(t,e,r)=>e in t?It(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ht=(t,e)=>{for(var r in e||(e={}))Tt.call(e,r)&&ne(t,r,e[r]);if(re)for(var r of re(e))At.call(e,r)&&ne(t,r,e[r]);return t},zt=(t,e)=>Mt(t,Nt(e));const Bt=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(u.useMousePressed(zt(Ht({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Rt=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(u.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Wt=Object.defineProperty,kt=Object.defineProperties,Ft=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertySymbols,Kt=Object.prototype.hasOwnProperty,Jt=Object.prototype.propertyIsEnumerable,ae=(t,e,r)=>e in t?Wt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Gt=(t,e)=>{for(var r in e||(e={}))Kt.call(e,r)&&ae(t,r,e[r]);if(oe)for(var r of oe(e))Jt.call(e,r)&&ae(t,r,e[r]);return t},qt=(t,e)=>kt(t,Ft(e));const Qt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(u.useNow(qt(Gt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Yt=Object.defineProperty,Xt=Object.defineProperties,Zt=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,xt=Object.prototype.hasOwnProperty,Dt=Object.prototype.propertyIsEnumerable,le=(t,e,r)=>e in t?Yt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,er=(t,e)=>{for(var r in e||(e={}))xt.call(e,r)&&le(t,r,e[r]);if(se)for(var r of se(e))Dt.call(e,r)&&le(t,r,e[r]);return t},tr=(t,e)=>Xt(t,Zt(e));const rr=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const o=n.reactive(u.useOffsetPagination(tr(er({},t),{onPageChange(...a){var s;(s=t.onPageChange)==null||s.call(t,...a),r("page-change",...a)},onPageSizeChange(...a){var s;(s=t.onPageSizeChange)==null||s.call(t,...a),r("page-size-change",...a)},onPageCountChange(...a){var s;(s=t.onPageCountChange)==null||s.call(t,...a),r("page-count-change",...a)}})));return()=>{if(e.default)return e.default(o)}}}),nr=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:u.useOnline()});return()=>{if(e.default)return e.default(r)}}}),or=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:u.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var ar=Object.defineProperty,sr=Object.defineProperties,lr=Object.getOwnPropertyDescriptors,ie=Object.getOwnPropertySymbols,ir=Object.prototype.hasOwnProperty,ur=Object.prototype.propertyIsEnumerable,ue=(t,e,r)=>e in t?ar(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,cr=(t,e)=>{for(var r in e||(e={}))ir.call(e,r)&&ue(t,r,e[r]);if(ie)for(var r of ie(e))ur.call(e,r)&&ue(t,r,e[r]);return t},fr=(t,e)=>sr(t,lr(e));const pr=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),o=n.reactive(u.usePointer(fr(cr({},t),{target:t.target==="self"?r:P})));return()=>{if(e.default)return e.default(o,{ref:r})}}}),dr=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:u.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),vr=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:u.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),gr=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:u.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function V(t,e,{window:r=P}={}){const o=n.ref(""),a=n.computed(()=>{var s;return O(e)||((s=r==null?void 0:r.document)==null?void 0:s.documentElement)});return n.watch([a,()=>n.unref(t)],([s,i])=>{s&&r&&(o.value=r.getComputedStyle(s).getPropertyValue(i))},{immediate:!0}),n.watch(o,s=>{var i;((i=a.value)==null?void 0:i.style)&&a.value.style.setProperty(n.unref(t),s)}),o}const ce="--vueuse-safe-area-top",fe="--vueuse-safe-area-right",pe="--vueuse-safe-area-bottom",de="--vueuse-safe-area-left";function _r(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),o=n.ref("");if(c.isClient){const s=V(ce),i=V(fe),p=V(pe),f=V(de);s.value="env(safe-area-inset-top, 0px)",i.value="env(safe-area-inset-right, 0px)",p.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),w("resize",c.useDebounceFn(a))}function a(){t.value=I(ce),e.value=I(fe),r.value=I(pe),o.value=I(de)}return{top:t,right:e,bottom:r,left:o,update:a}}function I(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const Or=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:o,bottom:a,left:s}=_r();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?o.value:"",paddingBottom:t.bottom?a.value:"",paddingLeft:t.left?s.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Pr=Object.defineProperty,yr=Object.defineProperties,hr=Object.getOwnPropertyDescriptors,ve=Object.getOwnPropertySymbols,mr=Object.prototype.hasOwnProperty,wr=Object.prototype.propertyIsEnumerable,ge=(t,e,r)=>e in t?Pr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,br=(t,e)=>{for(var r in e||(e={}))mr.call(e,r)&&ge(t,r,e[r]);if(ve)for(var r of ve(e))wr.call(e,r)&&ge(t,r,e[r]);return t},Sr=(t,e)=>yr(t,hr(e));const Ur={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=A(t,{onScroll(){r(o)},onStop(){r(o)}})}else{const[r,o]=e.value,a=A(t,Sr(br({},o),{onScroll(s){var i;(i=o.onScroll)==null||i.call(o,s),r(a)},onStop(s){var i;(i=o.onStop)==null||i.call(o,s),r(a)}}))}}};function $r(t){const e=t||window.event;return e.touches.length>1?!0:(e.preventDefault&&e.preventDefault(),!1)}function Cr(t,e=!1){const r=n.ref(e);let o=null,a;n.watch(()=>n.unref(t),p=>{if(p){const f=p;a=f.style.overflow,r.value&&(f.style.overflow="hidden")}},{immediate:!0});const s=()=>{const p=n.unref(t);!p||r.value||(c.isIOS&&(o=w(p,"touchmove",$r,{passive:!1})),p.style.overflow="hidden",r.value=!0)},i=()=>{const p=n.unref(t);!p||!r.value||(c.isIOS&&(o==null||o()),p.style.overflow=a,r.value=!1)};return c.tryOnScopeDispose(i),n.computed({get(){return r.value},set(p){p?s():i()}})}const Er=(()=>{let t=!1;const e=n.ref(!1);return(r,o)=>{if(e.value=o.value,t)return;t=!0;const a=Cr(r,o.value);n.watch(e,s=>a.value=s)}})();var Lr=Object.defineProperty,jr=Object.defineProperties,Vr=Object.getOwnPropertyDescriptors,_e=Object.getOwnPropertySymbols,Ir=Object.prototype.hasOwnProperty,Mr=Object.prototype.propertyIsEnumerable,Oe=(t,e,r)=>e in t?Lr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Nr=(t,e)=>{for(var r in e||(e={}))Ir.call(e,r)&&Oe(t,r,e[r]);if(_e)for(var r of _e(e))Mr.call(e,r)&&Oe(t,r,e[r]);return t},Tr=(t,e)=>jr(t,Vr(e));const Ar=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),o=n.reactive(u.useTimeAgo(r,Tr(Nr({},t),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var Hr=Object.defineProperty,zr=Object.defineProperties,Br=Object.getOwnPropertyDescriptors,Pe=Object.getOwnPropertySymbols,Rr=Object.prototype.hasOwnProperty,Wr=Object.prototype.propertyIsEnumerable,ye=(t,e,r)=>e in t?Hr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,kr=(t,e)=>{for(var r in e||(e={}))Rr.call(e,r)&&ye(t,r,e[r]);if(Pe)for(var r of Pe(e))Wr.call(e,r)&&ye(t,r,e[r]);return t},Fr=(t,e)=>zr(t,Br(e));const Kr=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(u.useTimestamp(Fr(kr({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Jr=Object.defineProperty,he=Object.getOwnPropertySymbols,Gr=Object.prototype.hasOwnProperty,qr=Object.prototype.propertyIsEnumerable,me=(t,e,r)=>e in t?Jr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,we=(t,e)=>{for(var r in e||(e={}))Gr.call(e,r)&&me(t,r,e[r]);if(he)for(var r of he(e))qr.call(e,r)&&me(t,r,e[r]);return t};const Qr=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:o,containerProps:a,wrapperProps:s}=u.useVirtualList(r,t.options);return a.style.height=t.height||"300px",()=>n.h("div",we({},a),[n.h("div",we({},s.value),o.value.map(i=>n.h("div",{style:{overFlow:"hidden",height:i.height}},e.default?e.default(i):"Please set content!")))])}}),Yr=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:u.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),Xr=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(u.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});l.OnClickOutside=$,l.OnLongPress=je,l.UseActiveElement=Ve,l.UseBattery=Ie,l.UseBrowserLocation=Me,l.UseColorMode=Je,l.UseDark=Ge,l.UseDeviceMotion=qe,l.UseDeviceOrientation=Qe,l.UseDevicePixelRatio=Ye,l.UseDevicesList=Xe,l.UseDocumentVisibility=Ze,l.UseDraggable=at,l.UseElementBounding=st,l.UseElementSize=ut,l.UseElementVisibility=_t,l.UseEyeDropper=Pt,l.UseFullscreen=yt,l.UseGeolocation=ht,l.UseIdle=mt,l.UseMouse=jt,l.UseMouseInElement=Vt,l.UseMousePressed=Bt,l.UseNetwork=Rt,l.UseNow=Qt,l.UseOffsetPagination=rr,l.UseOnline=nr,l.UsePageLeave=or,l.UsePointer=pr,l.UsePreferredColorScheme=dr,l.UsePreferredDark=vr,l.UsePreferredLanguages=gr,l.UseScreenSafeArea=Or,l.UseTimeAgo=Ar,l.UseTimestamp=Kr,l.UseVirtualList=Qr,l.UseWindowFocus=Yr,l.UseWindowSize=Xr,l.VOnClickOutside=B,l.VOnLongPress=F,l.vElementHover=it,l.vElementSize=gt,l.vElementVisibility=Ot,l.vInfiniteScroll=Et,l.vIntersectionObserver=Lt,l.vOnClickOutside=B,l.vOnKeyStroke=Ee,l.vOnLongPress=F,l.vScroll=Ur,l.vScrollLock=Er,Object.defineProperty(l,"__esModule",{value:!0})})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+var VueDemi=function(s,n,p){if(s.install)return s;if(n)if(n.version.slice(0,4)==="2.7."){for(var c in n)s[c]=n[c];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=n,s.Vue2=n,s.version=n.version,s.set=function(h,g,O){return Array.isArray(h)?(h.length=Math.max(h.length,g),h.splice(g,1,O),O):(n.set(h,g,O),O)},s.del=function(h,g){if(Array.isArray(h)){h.splice(g,1);return}n.delete(h,g)}}else if(n.version.slice(0,2)==="2.")if(p){for(var c in p)s[c]=p[c];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=n,s.Vue2=n,s.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var c in n)s[c]=n[c];s.isVue2=!1,s.isVue3=!0,s.install=function(){},s.Vue=n,s.Vue2=void 0,s.version=n.version,s.set=function(h,g,O){return Array.isArray(h)?(h.length=Math.max(h.length,g),h.splice(g,1,O),O):(h[g]=O,O)},s.del=function(h,g){if(Array.isArray(h)){h.splice(g,1);return}delete h[g]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");return s}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(s,n,p,c){"use strict";const h=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return p.onClickOutside(o,a=>{r("trigger",a)}),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}});function g(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const O=c.isClient?window:void 0;function S(...t){let e,r,o,a;if(c.isString(t[0])?([r,o,a]=t,e=O):[e,r,o,a]=t,!e)return c.noop;let l=c.noop;const i=n.watch(()=>g(e),f=>{l(),!!f&&(f.addEventListener(r,o,a),l=()=>{f.removeEventListener(r,o,a),l=c.noop})},{immediate:!0,flush:"post"}),u=()=>{i(),l()};return c.tryOnScopeDispose(u),u}function z(t,e,r={}){const{window:o=O,ignore:a,capture:l=!0}=r;if(!o)return;const i=n.ref(!0);let u;const f=d=>{o.clearTimeout(u);const v=g(t),b=d.composedPath();!v||v===d.target||b.includes(v)||!i.value||a&&a.length>0&&a.some($=>{const w=g($);return w&&(d.target===w||b.includes(w))})||e(d)},m=[S(o,"click",f,{passive:!0,capture:l}),S(o,"pointerdown",d=>{const v=g(t);i.value=!!v&&!d.composedPath().includes(v)},{passive:!0}),S(o,"pointerup",d=>{u=o.setTimeout(()=>f(d),50)},{passive:!0})];return()=>m.forEach(d=>d())}const B=(()=>{let t=null;return(e,r)=>{if(t){t(),t=z(e,r.value);return}t=z(e,r.value)}})(),be=t=>typeof t=="function"?t:typeof t=="string"?e=>e.key===t:Array.isArray(t)?e=>t.includes(e.key):t?()=>!0:()=>!1;function W(t,e,r={}){const{target:o=O,eventName:a="keydown",passive:l=!1}=r,i=be(t);return S(o,a,f=>{i(f)&&e(f)},l)}var Se=Object.defineProperty,R=Object.getOwnPropertySymbols,Ue=Object.prototype.hasOwnProperty,$e=Object.prototype.propertyIsEnumerable,k=(t,e,r)=>e in t?Se(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ce=(t,e)=>{for(var r in e||(e={}))Ue.call(e,r)&&k(t,r,e[r]);if(R)for(var r of R(e))$e.call(e,r)&&k(t,r,e[r]);return t};const Ee={[c.directiveHooks.mounted](t,e){var r,o;const a=(o=(r=e.arg)==null?void 0:r.split(","))!=null?o:[];if(typeof e.value=="function")W(a,e.value,{target:t});else{const[l,i]=e.value;W(a,l,Ce({target:t},i))}}},Le=500;function A(t,e,r){const o=n.computed(()=>g(t));let a=null;function l(){a!=null&&(clearTimeout(a),a=null)}function i(u){var f;l(),a=setTimeout(()=>e(u),(f=r==null?void 0:r.delay)!=null?f:Le)}S(o,"pointerdown",i),S(o,"pointerup",l),S(o,"pointerleave",l)}const je=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return A(o,a=>{r("trigger",a)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}}),F={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?A(t,e.value):A(t,...e.value)}},Ie=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:p.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),Me=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(p.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),Ae=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(p.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),N=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},T="__vueuse_ssr_handlers__";N[T]=N[T]||{};const Ne=N[T];function K(t,e){return Ne[t]||e}function Te(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":t instanceof Date?"date":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const Ve={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t))},date:{read:t=>new Date(t),write:t=>t.toISOString()}};function He(t,e,r,o={}){var a;const{flush:l="pre",deep:i=!0,listenToStorageChanges:u=!0,writeDefaults:f=!0,shallow:m,window:_=O,eventFilter:d,onError:v=y=>{console.error(y)}}=o,b=(m?n.shallowRef:n.ref)(e);if(!r)try{r=K("getDefaultStorage",()=>{var y;return(y=O)==null?void 0:y.localStorage})()}catch(y){v(y)}if(!r)return b;const $=n.unref(e),w=Te($),P=(a=o.serializer)!=null?a:Ve[w],{pause:U,resume:C}=c.pausableWatch(b,()=>j(b.value),{flush:l,deep:i,eventFilter:d});return _&&u&&S(_,"storage",E),E(),b;function j(y){try{y==null?r.removeItem(t):r.setItem(t,P.write(y))}catch(L){v(L)}}function H(y){if(!(y&&y.key!==t)){U();try{const L=y?y.newValue:r.getItem(t);return L==null?(f&&$!==null&&r.setItem(t,P.write($)),$):typeof L!="string"?L:P.read(L)}catch(L){v(L)}finally{C()}}}function E(y){y&&y.key!==t||(b.value=H(y))}}function ze(t,e={}){const{window:r=O}=e,o=Boolean(r&&"matchMedia"in r);let a;const l=n.ref(!1),i=()=>{!o||(a||(a=r.matchMedia(t)),l.value=a.matches)};return c.tryOnBeforeMount(()=>{i(),!!a&&("addEventListener"in a?a.addEventListener("change",i):a.addListener(i),c.tryOnScopeDispose(()=>{"removeEventListener"in a?a.removeEventListener("change",i):a.removeListener(i)}))}),l}function Be(t){return ze("(prefers-color-scheme: dark)",t)}var We=Object.defineProperty,J=Object.getOwnPropertySymbols,Re=Object.prototype.hasOwnProperty,ke=Object.prototype.propertyIsEnumerable,G=(t,e,r)=>e in t?We(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Fe=(t,e)=>{for(var r in e||(e={}))Re.call(e,r)&&G(t,r,e[r]);if(J)for(var r of J(e))ke.call(e,r)&&G(t,r,e[r]);return t};function Ke(t={}){const{selector:e="html",attribute:r="class",window:o=O,storage:a,storageKey:l="vueuse-color-scheme",listenToStorageChanges:i=!0,storageRef:u}=t,f=Fe({auto:"",light:"light",dark:"dark"},t.modes||{}),m=Be({window:o}),_=n.computed(()=>m.value?"dark":"light"),d=u||(l==null?n.ref("auto"):He(l,"auto",a,{window:o,listenToStorageChanges:i})),v=n.computed({get(){return d.value==="auto"?_.value:d.value},set(P){d.value=P}}),b=K("updateHTMLAttrs",(P,U,C)=>{const j=o==null?void 0:o.document.querySelector(P);if(!!j)if(U==="class"){const H=C.split(/\s/g);Object.values(f).flatMap(E=>(E||"").split(/\s/g)).filter(Boolean).forEach(E=>{H.includes(E)?j.classList.add(E):j.classList.remove(E)})}else j.setAttribute(U,C)});function $(P){var U;b(e,r,(U=f[P])!=null?U:P)}function w(P){t.onChanged?t.onChanged(P,$):$(P)}return n.watch(v,w,{flush:"post",immediate:!0}),c.tryOnMounted(()=>w(v.value)),v}const Je=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=Ke(t),o=n.reactive({mode:r});return()=>{if(e.default)return e.default(o)}}}),Ge=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=p.useDark(t),o=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(o)}}}),qe=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(p.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),Qe=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(p.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),Ye=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:p.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),Xe=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(p.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),Ze=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:p.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var xe=Object.defineProperty,De=Object.defineProperties,et=Object.getOwnPropertyDescriptors,q=Object.getOwnPropertySymbols,tt=Object.prototype.hasOwnProperty,rt=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?xe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,nt=(t,e)=>{for(var r in e||(e={}))tt.call(e,r)&&Q(t,r,e[r]);if(q)for(var r of q(e))rt.call(e,r)&&Q(t,r,e[r]);return t},ot=(t,e)=>De(t,et(e));const at=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),o=t.storageKey?p.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},p.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},a=n.reactive(p.useDraggable(r,ot(nt({},t),{initialValue:o})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${a.style}`},e.default(a))}}}),st=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(p.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function lt(t){const e=n.ref(!1);return S(t,"mouseenter",()=>e.value=!0),S(t,"mouseleave",()=>e.value=!1),e}const it={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=lt(t);n.watch(r,o=>e.value(o))}}},ct=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(p.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var Y=Object.getOwnPropertySymbols,ut=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable,pt=(t,e)=>{var r={};for(var o in t)ut.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&Y)for(var o of Y(t))e.indexOf(o)<0&&ft.call(t,o)&&(r[o]=t[o]);return r};function dt(t,e,r={}){const o=r,{window:a=O}=o,l=pt(o,["window"]);let i;const u=a&&"ResizeObserver"in a,f=()=>{i&&(i.disconnect(),i=void 0)},m=n.watch(()=>g(t),d=>{f(),u&&a&&d&&(i=new ResizeObserver(e),i.observe(d,l))},{immediate:!0,flush:"post"}),_=()=>{f(),m()};return c.tryOnScopeDispose(_),{isSupported:u,stop:_}}function vt(t,e={width:0,height:0},r={}){const o=n.ref(e.width),a=n.ref(e.height);return dt(t,([l])=>{o.value=l.contentRect.width,a.value=l.contentRect.height},r),n.watch(()=>g(t),l=>{o.value=l?e.width:0,a.value=l?e.height:0}),{width:o,height:a}}const gt={[c.directiveHooks.mounted](t,e){var r;const o=typeof e.value=="function"?e.value:(r=e.value)==null?void 0:r[0],a=typeof e.value=="function"?[]:e.value.slice(1),{width:l,height:i}=vt(t,...a);n.watch([l,i],([u,f])=>o({width:u,height:f}))}},_t=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive({isVisible:p.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function X(t,{window:e=O,scrollTarget:r}={}){const o=n.ref(!1),a=()=>{if(!e)return;const l=e.document;if(!n.unref(t))o.value=!1;else{const i=n.unref(t).getBoundingClientRect();o.value=i.top<=(e.innerHeight||l.documentElement.clientHeight)&&i.left<=(e.innerWidth||l.documentElement.clientWidth)&&i.bottom>=0&&i.right>=0}};return c.tryOnMounted(a),e&&c.tryOnMounted(()=>S(n.unref(r)||e,"scroll",a,{capture:!1,passive:!0})),o}const Ot={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=X(t);n.watch(o,a=>r(a),{immediate:!0})}else{const[r,o]=e.value,a=X(t,o);n.watch(a,l=>r(l),{immediate:!0})}}},ht=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(p.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),Pt=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(p.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),yt=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(p.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),mt=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(p.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}});function V(t,e={}){const{throttle:r=0,idle:o=200,onStop:a=c.noop,onScroll:l=c.noop,offset:i={left:0,right:0,top:0,bottom:0},eventListenerOptions:u={capture:!1,passive:!0}}=e,f=n.ref(0),m=n.ref(0),_=n.ref(!1),d=n.reactive({left:!0,right:!1,top:!0,bottom:!1}),v=n.reactive({left:!1,right:!1,top:!1,bottom:!1});if(t){const b=c.useDebounceFn(w=>{_.value=!1,v.left=!1,v.right=!1,v.top=!1,v.bottom=!1,a(w)},r+o),$=w=>{const P=w.target===document?w.target.documentElement:w.target,U=P.scrollLeft;v.left=U<f.value,v.right=U>f.value,d.left=U<=0+(i.left||0),d.right=U+P.clientWidth>=P.scrollWidth-(i.right||0),f.value=U;const C=P.scrollTop;v.top=C<m.value,v.bottom=C>m.value,d.top=C<=0+(i.top||0),d.bottom=C+P.clientHeight>=P.scrollHeight-(i.bottom||0),m.value=C,_.value=!0,b(w),l(w)};S(t,"scroll",r?c.useThrottleFn($,r):$,u)}return{x:f,y:m,isScrolling:_,arrivedState:d,directions:v}}var wt=Object.defineProperty,bt=Object.defineProperties,St=Object.getOwnPropertyDescriptors,Z=Object.getOwnPropertySymbols,Ut=Object.prototype.hasOwnProperty,$t=Object.prototype.propertyIsEnumerable,x=(t,e,r)=>e in t?wt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,D=(t,e)=>{for(var r in e||(e={}))Ut.call(e,r)&&x(t,r,e[r]);if(Z)for(var r of Z(e))$t.call(e,r)&&x(t,r,e[r]);return t},Ct=(t,e)=>bt(t,St(e));function ee(t,e,r={}){var o,a;const l=(o=r.direction)!=null?o:"bottom",i=n.reactive(V(t,Ct(D({},r),{offset:D({[l]:(a=r.distance)!=null?a:0},r.offset)})));n.watch(()=>i.arrivedState[l],async u=>{var f,m;if(u){const _=n.unref(t),d={height:(f=_==null?void 0:_.scrollHeight)!=null?f:0,width:(m=_==null?void 0:_.scrollWidth)!=null?m:0};await e(i),r.preserveScrollPosition&&_&&n.nextTick(()=>{_.scrollTo({top:_.scrollHeight-d.height,left:_.scrollWidth-d.width})})}})}const Et={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?ee(t,e.value):ee(t,...e.value)}};function te(t,e,r={}){const{root:o,rootMargin:a="0px",threshold:l=.1,window:i=O}=r,u=i&&"IntersectionObserver"in i;let f=c.noop;const m=u?n.watch(()=>({el:g(t),root:g(o)}),({el:d,root:v})=>{if(f(),!d)return;const b=new IntersectionObserver(e,{root:v,rootMargin:a,threshold:l});b.observe(d),f=()=>{b.disconnect(),f=c.noop}},{immediate:!0,flush:"post"}):c.noop,_=()=>{f(),m()};return c.tryOnScopeDispose(_),{isSupported:u,stop:_}}const Lt={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?te(t,e.value):te(t,...e.value)}},jt=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(p.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),It=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(p.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var Mt=Object.defineProperty,At=Object.defineProperties,Nt=Object.getOwnPropertyDescriptors,re=Object.getOwnPropertySymbols,Tt=Object.prototype.hasOwnProperty,Vt=Object.prototype.propertyIsEnumerable,ne=(t,e,r)=>e in t?Mt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ht=(t,e)=>{for(var r in e||(e={}))Tt.call(e,r)&&ne(t,r,e[r]);if(re)for(var r of re(e))Vt.call(e,r)&&ne(t,r,e[r]);return t},zt=(t,e)=>At(t,Nt(e));const Bt=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(p.useMousePressed(zt(Ht({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Wt=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(p.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Rt=Object.defineProperty,kt=Object.defineProperties,Ft=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertySymbols,Kt=Object.prototype.hasOwnProperty,Jt=Object.prototype.propertyIsEnumerable,ae=(t,e,r)=>e in t?Rt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Gt=(t,e)=>{for(var r in e||(e={}))Kt.call(e,r)&&ae(t,r,e[r]);if(oe)for(var r of oe(e))Jt.call(e,r)&&ae(t,r,e[r]);return t},qt=(t,e)=>kt(t,Ft(e));const Qt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(p.useNow(qt(Gt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Yt=Object.defineProperty,Xt=Object.defineProperties,Zt=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,xt=Object.prototype.hasOwnProperty,Dt=Object.prototype.propertyIsEnumerable,le=(t,e,r)=>e in t?Yt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,er=(t,e)=>{for(var r in e||(e={}))xt.call(e,r)&&le(t,r,e[r]);if(se)for(var r of se(e))Dt.call(e,r)&&le(t,r,e[r]);return t},tr=(t,e)=>Xt(t,Zt(e));const rr=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const o=n.reactive(p.useOffsetPagination(tr(er({},t),{onPageChange(...a){var l;(l=t.onPageChange)==null||l.call(t,...a),r("page-change",...a)},onPageSizeChange(...a){var l;(l=t.onPageSizeChange)==null||l.call(t,...a),r("page-size-change",...a)},onPageCountChange(...a){var l;(l=t.onPageCountChange)==null||l.call(t,...a),r("page-count-change",...a)}})));return()=>{if(e.default)return e.default(o)}}}),nr=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:p.useOnline()});return()=>{if(e.default)return e.default(r)}}}),or=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:p.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var ar=Object.defineProperty,sr=Object.defineProperties,lr=Object.getOwnPropertyDescriptors,ie=Object.getOwnPropertySymbols,ir=Object.prototype.hasOwnProperty,cr=Object.prototype.propertyIsEnumerable,ce=(t,e,r)=>e in t?ar(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ur=(t,e)=>{for(var r in e||(e={}))ir.call(e,r)&&ce(t,r,e[r]);if(ie)for(var r of ie(e))cr.call(e,r)&&ce(t,r,e[r]);return t},fr=(t,e)=>sr(t,lr(e));const pr=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),o=n.reactive(p.usePointer(fr(ur({},t),{target:t.target==="self"?r:O})));return()=>{if(e.default)return e.default(o,{ref:r})}}}),dr=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:p.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),vr=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:p.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),gr=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:p.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function I(t,e,{window:r=O,initialValue:o=""}={}){const a=n.ref(o),l=n.computed(()=>{var i;return g(e)||((i=r==null?void 0:r.document)==null?void 0:i.documentElement)});return n.watch([l,()=>n.unref(t)],([i,u])=>{if(i&&r){const f=r.getComputedStyle(i).getPropertyValue(u);a.value=f||o}},{immediate:!0}),n.watch(a,i=>{var u;((u=l.value)==null?void 0:u.style)&&l.value.style.setProperty(n.unref(t),i)}),a}const ue="--vueuse-safe-area-top",fe="--vueuse-safe-area-right",pe="--vueuse-safe-area-bottom",de="--vueuse-safe-area-left";function _r(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),o=n.ref("");if(c.isClient){const l=I(ue),i=I(fe),u=I(pe),f=I(de);l.value="env(safe-area-inset-top, 0px)",i.value="env(safe-area-inset-right, 0px)",u.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),S("resize",c.useDebounceFn(a))}function a(){t.value=M(ue),e.value=M(fe),r.value=M(pe),o.value=M(de)}return{top:t,right:e,bottom:r,left:o,update:a}}function M(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const Or=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:o,bottom:a,left:l}=_r();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?o.value:"",paddingBottom:t.bottom?a.value:"",paddingLeft:t.left?l.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var hr=Object.defineProperty,Pr=Object.defineProperties,yr=Object.getOwnPropertyDescriptors,ve=Object.getOwnPropertySymbols,mr=Object.prototype.hasOwnProperty,wr=Object.prototype.propertyIsEnumerable,ge=(t,e,r)=>e in t?hr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,br=(t,e)=>{for(var r in e||(e={}))mr.call(e,r)&&ge(t,r,e[r]);if(ve)for(var r of ve(e))wr.call(e,r)&&ge(t,r,e[r]);return t},Sr=(t,e)=>Pr(t,yr(e));const Ur={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=V(t,{onScroll(){r(o)},onStop(){r(o)}})}else{const[r,o]=e.value,a=V(t,Sr(br({},o),{onScroll(l){var i;(i=o.onScroll)==null||i.call(o,l),r(a)},onStop(l){var i;(i=o.onStop)==null||i.call(o,l),r(a)}}))}}};function $r(t){const e=t||window.event;return e.touches.length>1?!0:(e.preventDefault&&e.preventDefault(),!1)}function Cr(t,e=!1){const r=n.ref(e);let o=null,a;n.watch(()=>n.unref(t),u=>{if(u){const f=u;a=f.style.overflow,r.value&&(f.style.overflow="hidden")}},{immediate:!0});const l=()=>{const u=n.unref(t);!u||r.value||(c.isIOS&&(o=S(u,"touchmove",$r,{passive:!1})),u.style.overflow="hidden",r.value=!0)},i=()=>{const u=n.unref(t);!u||!r.value||(c.isIOS&&(o==null||o()),u.style.overflow=a,r.value=!1)};return c.tryOnScopeDispose(i),n.computed({get(){return r.value},set(u){u?l():i()}})}const Er=(()=>{let t=!1;const e=n.ref(!1);return(r,o)=>{if(e.value=o.value,t)return;t=!0;const a=Cr(r,o.value);n.watch(e,l=>a.value=l)}})();var Lr=Object.defineProperty,jr=Object.defineProperties,Ir=Object.getOwnPropertyDescriptors,_e=Object.getOwnPropertySymbols,Mr=Object.prototype.hasOwnProperty,Ar=Object.prototype.propertyIsEnumerable,Oe=(t,e,r)=>e in t?Lr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Nr=(t,e)=>{for(var r in e||(e={}))Mr.call(e,r)&&Oe(t,r,e[r]);if(_e)for(var r of _e(e))Ar.call(e,r)&&Oe(t,r,e[r]);return t},Tr=(t,e)=>jr(t,Ir(e));const Vr=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),o=n.reactive(p.useTimeAgo(r,Tr(Nr({},t),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var Hr=Object.defineProperty,zr=Object.defineProperties,Br=Object.getOwnPropertyDescriptors,he=Object.getOwnPropertySymbols,Wr=Object.prototype.hasOwnProperty,Rr=Object.prototype.propertyIsEnumerable,Pe=(t,e,r)=>e in t?Hr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,kr=(t,e)=>{for(var r in e||(e={}))Wr.call(e,r)&&Pe(t,r,e[r]);if(he)for(var r of he(e))Rr.call(e,r)&&Pe(t,r,e[r]);return t},Fr=(t,e)=>zr(t,Br(e));const Kr=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(p.useTimestamp(Fr(kr({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Jr=Object.defineProperty,ye=Object.getOwnPropertySymbols,Gr=Object.prototype.hasOwnProperty,qr=Object.prototype.propertyIsEnumerable,me=(t,e,r)=>e in t?Jr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,we=(t,e)=>{for(var r in e||(e={}))Gr.call(e,r)&&me(t,r,e[r]);if(ye)for(var r of ye(e))qr.call(e,r)&&me(t,r,e[r]);return t};const Qr=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:o,containerProps:a,wrapperProps:l}=p.useVirtualList(r,t.options);return a.style.height=t.height||"300px",()=>n.h("div",we({},a),[n.h("div",we({},l.value),o.value.map(i=>n.h("div",{style:{overFlow:"hidden",height:i.height}},e.default?e.default(i):"Please set content!")))])}}),Yr=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:p.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),Xr=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(p.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});s.OnClickOutside=h,s.OnLongPress=je,s.UseActiveElement=Ie,s.UseBattery=Me,s.UseBrowserLocation=Ae,s.UseColorMode=Je,s.UseDark=Ge,s.UseDeviceMotion=qe,s.UseDeviceOrientation=Qe,s.UseDevicePixelRatio=Ye,s.UseDevicesList=Xe,s.UseDocumentVisibility=Ze,s.UseDraggable=at,s.UseElementBounding=st,s.UseElementSize=ct,s.UseElementVisibility=_t,s.UseEyeDropper=ht,s.UseFullscreen=Pt,s.UseGeolocation=yt,s.UseIdle=mt,s.UseMouse=jt,s.UseMouseInElement=It,s.UseMousePressed=Bt,s.UseNetwork=Wt,s.UseNow=Qt,s.UseOffsetPagination=rr,s.UseOnline=nr,s.UsePageLeave=or,s.UsePointer=pr,s.UsePreferredColorScheme=dr,s.UsePreferredDark=vr,s.UsePreferredLanguages=gr,s.UseScreenSafeArea=Or,s.UseTimeAgo=Vr,s.UseTimestamp=Kr,s.UseVirtualList=Qr,s.UseWindowFocus=Yr,s.UseWindowSize=Xr,s.VOnClickOutside=B,s.VOnLongPress=F,s.vElementHover=it,s.vElementSize=gt,s.vElementVisibility=Ot,s.vInfiniteScroll=Et,s.vIntersectionObserver=Lt,s.vOnClickOutside=B,s.vOnKeyStroke=Ee,s.vOnLongPress=F,s.vScroll=Ur,s.vScrollLock=Er,Object.defineProperty(s,"__esModule",{value:!0})})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

package/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, nextTick, toRef, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, 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, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
 import { isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, tryOnBeforeMount, tryOnMounted, useToggle, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
 
@@ -585,6 +585,7 @@ const UseDraggable = defineComponent({
     "initialValue",
     "exact",
     "preventDefault",
+    "stopPropagation",
     "pointerTypes",
     "as"
   ],
@@ -902,15 +903,31 @@ var __spreadValues$8 = (a, b) => {
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function useInfiniteScroll(element, onLoadMore, options = {}) {
-  var _a;
+  var _a, _b;
+  const direction = (_a = options.direction) != null ? _a : "bottom";
   const state = reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
     offset: __spreadValues$8({
-      bottom: (_a = options.distance) != null ? _a : 0
+      [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   })));
-  watch(() => state.arrivedState.bottom, (v) => {
-    if (v)
-      onLoadMore(state);
+  watch(() => state.arrivedState[direction], async (v) => {
+    var _a2, _b2;
+    if (v) {
+      const elem = unref(element);
+      const previous = {
+        height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
+        width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
+      };
+      await onLoadMore(state);
+      if (options.preserveScrollPosition && elem) {
+        nextTick(() => {
+          elem.scrollTo({
+            top: elem.scrollHeight - previous.height,
+            left: elem.scrollWidth - previous.width
+          });
+        });
+      }
+    }
   });
 }
 
@@ -1231,15 +1248,17 @@ const UsePreferredLanguages = defineComponent({
   }
 });
 
-function useCssVar(prop, target, { window = defaultWindow } = {}) {
-  const variable = ref("");
+function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+  const variable = ref(initialValue);
   const elRef = computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
   watch([elRef, () => unref(prop)], ([el, prop2]) => {
-    if (el && window)
-      variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
+    if (el && window) {
+      const value = window.getComputedStyle(el).getPropertyValue(prop2);
+      variable.value = value || initialValue;
+    }
   }, { immediate: true });
   watch(variable, (val) => {
     var _a;

package/package.json

@@ -1,40 +1,40 @@
 {
   "name": "@vueuse/components",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "description": "Renderless components for VueUse",
-  "keywords": [
-    "vue",
-    "vue-use",
-    "utils"
-  ],
-  "license": "MIT",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
+  "license": "MIT",
+  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vueuse/vueuse.git",
     "directory": "packages/components"
   },
-  "main": "./index.cjs",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "unpkg": "./index.iife.min.js",
-  "jsdelivr": "./index.iife.min.js",
+  "bugs": {
+    "url": "https://github.com/vueuse/vueuse/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue-use",
+    "utils"
+  ],
+  "sideEffects": false,
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./index.mjs",
-      "require": "./index.cjs",
-      "types": "./index.d.ts"
+      "require": "./index.cjs"
     },
     "./*": "./*"
   },
-  "sideEffects": false,
-  "bugs": {
-    "url": "https://github.com/vueuse/vueuse/issues"
-  },
-  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "unpkg": "./index.iife.min.js",
+  "jsdelivr": "./index.iife.min.js",
+  "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "8.5.0",
-    "@vueuse/shared": "8.5.0",
+    "@vueuse/core": "8.6.0",
+    "@vueuse/shared": "8.6.0",
     "vue-demi": "*"
   }
 }