@vueuse/components 8.7.5 → 8.9.0

package/index.cjs

@@ -171,6 +171,7 @@ const vOnKeyStroke = {
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
+  var _a, _b;
   const elementRef = vueDemi.computed(() => unrefElement(target));
   let timeout = null;
   function clear() {
@@ -180,13 +181,23 @@ function onLongPress(target, handler, options) {
     }
   }
   function onDown(ev) {
-    var _a;
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      return;
     clear();
-    timeout = setTimeout(() => handler(ev), (_a = options == null ? void 0 : options.delay) != null ? _a : DEFAULT_DELAY);
+    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();
+    timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
   }
-  useEventListener(elementRef, "pointerdown", onDown);
-  useEventListener(elementRef, "pointerup", clear);
-  useEventListener(elementRef, "pointerleave", 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
+  };
+  useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
+  useEventListener(elementRef, "pointerup", clear, listenerOptions);
+  useEventListener(elementRef, "pointerleave", clear, listenerOptions);
 }
 
 const OnLongPress = vueDemi.defineComponent({
@@ -208,7 +219,7 @@ const OnLongPress = vueDemi.defineComponent({
 const vOnLongPress = {
   [shared.directiveHooks.mounted](el, binding) {
     if (typeof binding.value === "function")
-      onLongPress(el, binding.value);
+      onLongPress(el, binding.value, { modifiers: binding.modifiers });
     else
       onLongPress(el, ...binding.value);
   }
@@ -370,7 +381,7 @@ function useStorage(key, initialValue, storage, options = {}) {
 
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
-  const isSupported = Boolean(window && "matchMedia" in window);
+  const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = vueDemi.ref(false);
   const update = () => {
@@ -426,7 +437,8 @@ function useColorMode(options = {}) {
     storage,
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
-    storageRef
+    storageRef,
+    emitAuto
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -438,7 +450,7 @@ function useColorMode(options = {}) {
   const store = storageRef || (storageKey == null ? vueDemi.ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
   const state = vueDemi.computed({
     get() {
-      return store.value === "auto" ? preferredMode.value : store.value;
+      return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
     },
     set(v) {
       store.value = v;
@@ -462,7 +474,8 @@ function useColorMode(options = {}) {
   });
   function defaultOnChanged(mode) {
     var _a;
-    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -477,7 +490,7 @@ function useColorMode(options = {}) {
 
 const UseColorMode = vueDemi.defineComponent({
   name: "UseColorMode",
-  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage"],
+  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = vueDemi.reactive({
@@ -1199,6 +1212,21 @@ const UseNow = vueDemi.defineComponent({
   }
 });
 
+const UseObjectUrl = vueDemi.defineComponent({
+  name: "UseObjectUrl",
+  props: [
+    "object"
+  ],
+  setup(props, { slots }) {
+    const object = vueDemi.toRef(props, "object");
+    const url = core.useObjectUrl(object);
+    return () => {
+      if (slots.default && url.value)
+        return slots.default(url);
+    };
+  }
+});
+
 var __defProp$5 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -1368,8 +1396,9 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
   vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
+    var _a;
     if (el && window) {
-      const value = window.getComputedStyle(el).getPropertyValue(prop2);
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
   }, { immediate: true });
@@ -1718,6 +1747,7 @@ exports.UseMouseInElement = UseMouseInElement;
 exports.UseMousePressed = UseMousePressed;
 exports.UseNetwork = UseNetwork;
 exports.UseNow = UseNow;
+exports.UseObjectUrl = UseObjectUrl;
 exports.UseOffsetPagination = UseOffsetPagination;
 exports.UseOnline = UseOnline;
 exports.UsePageLeave = UsePageLeave;

package/index.d.ts

@@ -42,6 +42,14 @@ interface OnLongPressOptions {
      * @default 500
      */
     delay?: number;
+    modifiers?: OnLongPressModifiers;
+}
+interface OnLongPressModifiers {
+    stop?: boolean;
+    once?: boolean;
+    prevent?: boolean;
+    capture?: boolean;
+    self?: boolean;
 }
 
 interface OnLongPressProps extends RenderableComponent {
@@ -160,6 +168,15 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends Stora
      * @default localStorage
      */
     storage?: StorageLike;
+    /**
+     * Emit `auto` mode from state
+     *
+     * When set to `true`, preferred mode won't be translated into `light` or `dark`.
+     * This is useful when the fact that `auto` mode was selected needs to be known.
+     *
+     * @default undefined
+     */
+    emitAuto?: boolean;
 }
 
 declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorSchema>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorSchema>>, {}>;
@@ -406,6 +423,11 @@ declare const UseNetwork: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_
 
 declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}>;
 
+interface UseObjectUrlProps {
+    object: Blob | MediaSource | undefined;
+}
+declare const UseObjectUrl: vue_demi.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseObjectUrlProps>, {}>;
+
 interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
@@ -532,4 +554,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 
-export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/index.iife.js

@@ -255,6 +255,7 @@
 
   const DEFAULT_DELAY = 500;
   function onLongPress(target, handler, options) {
+    var _a, _b;
     const elementRef = vueDemi.computed(() => unrefElement(target));
     let timeout = null;
     function clear() {
@@ -264,13 +265,23 @@
       }
     }
     function onDown(ev) {
-      var _a;
+      var _a2, _b2, _c, _d;
+      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+        return;
       clear();
-      timeout = setTimeout(() => handler(ev), (_a = options == null ? void 0 : options.delay) != null ? _a : DEFAULT_DELAY);
+      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();
+      timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
     }
-    useEventListener(elementRef, "pointerdown", onDown);
-    useEventListener(elementRef, "pointerup", clear);
-    useEventListener(elementRef, "pointerleave", 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
+    };
+    useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
+    useEventListener(elementRef, "pointerup", clear, listenerOptions);
+    useEventListener(elementRef, "pointerleave", clear, listenerOptions);
   }
 
   const OnLongPress = vueDemi.defineComponent({
@@ -292,7 +303,7 @@
   const vOnLongPress = {
     [shared.directiveHooks.mounted](el, binding) {
       if (typeof binding.value === "function")
-        onLongPress(el, binding.value);
+        onLongPress(el, binding.value, { modifiers: binding.modifiers });
       else
         onLongPress(el, ...binding.value);
     }
@@ -454,7 +465,7 @@
 
   function useMediaQuery(query, options = {}) {
     const { window = defaultWindow } = options;
-    const isSupported = Boolean(window && "matchMedia" in window);
+    const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
     let mediaQuery;
     const matches = vueDemi.ref(false);
     const update = () => {
@@ -510,7 +521,8 @@
       storage,
       storageKey = "vueuse-color-scheme",
       listenToStorageChanges = true,
-      storageRef
+      storageRef,
+      emitAuto
     } = options;
     const modes = __spreadValues$b({
       auto: "",
@@ -522,7 +534,7 @@
     const store = storageRef || (storageKey == null ? vueDemi.ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
     const state = vueDemi.computed({
       get() {
-        return store.value === "auto" ? preferredMode.value : store.value;
+        return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
       },
       set(v) {
         store.value = v;
@@ -546,7 +558,8 @@
     });
     function defaultOnChanged(mode) {
       var _a;
-      updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+      const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+      updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
     }
     function onChanged(mode) {
       if (options.onChanged)
@@ -561,7 +574,7 @@
 
   const UseColorMode = vueDemi.defineComponent({
     name: "UseColorMode",
-    props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage"],
+    props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
     setup(props, { slots }) {
       const mode = useColorMode(props);
       const data = vueDemi.reactive({
@@ -1283,6 +1296,21 @@
     }
   });
 
+  const UseObjectUrl = vueDemi.defineComponent({
+    name: "UseObjectUrl",
+    props: [
+      "object"
+    ],
+    setup(props, { slots }) {
+      const object = vueDemi.toRef(props, "object");
+      const url = core.useObjectUrl(object);
+      return () => {
+        if (slots.default && url.value)
+          return slots.default(url);
+      };
+    }
+  });
+
   var __defProp$5 = Object.defineProperty;
   var __defProps$4 = Object.defineProperties;
   var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -1452,8 +1480,9 @@
       return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
     });
     vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
+      var _a;
       if (el && window) {
-        const value = window.getComputedStyle(el).getPropertyValue(prop2);
+        const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
         variable.value = value || initialValue;
       }
     }, { immediate: true });
@@ -1802,6 +1831,7 @@
   exports.UseMousePressed = UseMousePressed;
   exports.UseNetwork = UseNetwork;
   exports.UseNow = UseNow;
+  exports.UseObjectUrl = UseObjectUrl;
   exports.UseOffsetPagination = UseOffsetPagination;
   exports.UseOnline = UseOnline;
   exports.UsePageLeave = UsePageLeave;

package/index.iife.min.js

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

package/index.mjs

@@ -1,5 +1,5 @@
 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 { 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, useObjectUrl, 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, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
@@ -167,6 +167,7 @@ const vOnKeyStroke = {
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
+  var _a, _b;
   const elementRef = computed(() => unrefElement(target));
   let timeout = null;
   function clear() {
@@ -176,13 +177,23 @@ function onLongPress(target, handler, options) {
     }
   }
   function onDown(ev) {
-    var _a;
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      return;
     clear();
-    timeout = setTimeout(() => handler(ev), (_a = options == null ? void 0 : options.delay) != null ? _a : DEFAULT_DELAY);
+    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();
+    timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
   }
-  useEventListener(elementRef, "pointerdown", onDown);
-  useEventListener(elementRef, "pointerup", clear);
-  useEventListener(elementRef, "pointerleave", 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
+  };
+  useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
+  useEventListener(elementRef, "pointerup", clear, listenerOptions);
+  useEventListener(elementRef, "pointerleave", clear, listenerOptions);
 }
 
 const OnLongPress = defineComponent({
@@ -204,7 +215,7 @@ const OnLongPress = defineComponent({
 const vOnLongPress = {
   [directiveHooks.mounted](el, binding) {
     if (typeof binding.value === "function")
-      onLongPress(el, binding.value);
+      onLongPress(el, binding.value, { modifiers: binding.modifiers });
     else
       onLongPress(el, ...binding.value);
   }
@@ -366,7 +377,7 @@ function useStorage(key, initialValue, storage, options = {}) {
 
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
-  const isSupported = Boolean(window && "matchMedia" in window);
+  const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = ref(false);
   const update = () => {
@@ -422,7 +433,8 @@ function useColorMode(options = {}) {
     storage,
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
-    storageRef
+    storageRef,
+    emitAuto
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -434,7 +446,7 @@ function useColorMode(options = {}) {
   const store = storageRef || (storageKey == null ? ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
   const state = computed({
     get() {
-      return store.value === "auto" ? preferredMode.value : store.value;
+      return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
     },
     set(v) {
       store.value = v;
@@ -458,7 +470,8 @@ function useColorMode(options = {}) {
   });
   function defaultOnChanged(mode) {
     var _a;
-    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -473,7 +486,7 @@ function useColorMode(options = {}) {
 
 const UseColorMode = defineComponent({
   name: "UseColorMode",
-  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage"],
+  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = reactive({
@@ -1195,6 +1208,21 @@ const UseNow = defineComponent({
   }
 });
 
+const UseObjectUrl = defineComponent({
+  name: "UseObjectUrl",
+  props: [
+    "object"
+  ],
+  setup(props, { slots }) {
+    const object = toRef(props, "object");
+    const url = useObjectUrl(object);
+    return () => {
+      if (slots.default && url.value)
+        return slots.default(url);
+    };
+  }
+});
+
 var __defProp$5 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -1364,8 +1392,9 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
   watch([elRef, () => unref(prop)], ([el, prop2]) => {
+    var _a;
     if (el && window) {
-      const value = window.getComputedStyle(el).getPropertyValue(prop2);
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
   }, { immediate: true });
@@ -1688,4 +1717,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "8.7.5",
+  "version": "8.9.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "8.7.5",
-    "@vueuse/shared": "8.7.5",
+    "@vueuse/core": "8.9.0",
+    "@vueuse/shared": "8.9.0",
     "vue-demi": "*"
   }
 }