@vueuse/components 8.0.0-beta.2 → 8.0.0-beta.3

package/index.cjs

@@ -92,9 +92,18 @@ function onClickOutside(target, handler, options = {}) {
   return stop;
 }
 
-const VOnClickOutside = (el, binding) => {
-  onClickOutside(el, binding.value);
+const handler = () => {
+  let stop = null;
+  return (el, binding) => {
+    if (stop) {
+      stop();
+      stop = onClickOutside(el, binding.value);
+      return;
+    }
+    stop = onClickOutside(el, binding.value);
+  };
 };
+const vOnClickOutside = handler();
 
 const createKeyPredicate = (keyFilter) => {
   if (typeof keyFilter === "function")
@@ -119,17 +128,17 @@ function onKeyStroke(key, handler, options = {}) {
 }
 
 var __defProp$b = Object.defineProperty;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
+    if (__hasOwnProp$c.call(b, prop))
       __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
         __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
@@ -185,7 +194,7 @@ const OnLongPress = vueDemi.defineComponent({
   }
 });
 
-const VOnLongPress = (el, binding) => {
+const vOnLongPress = (el, binding) => {
   if (typeof binding.value === "function")
     onLongPress(el, binding.value);
   else
@@ -371,17 +380,17 @@ function usePreferredDark(options) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
+    if (__hasOwnProp$b.call(b, prop))
       __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
         __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
@@ -537,17 +546,17 @@ const UseDocumentVisibility = vueDemi.defineComponent({
 var __defProp$9 = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
+    if (__hasOwnProp$a.call(b, prop))
       __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
         __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
@@ -617,6 +626,74 @@ const UseElementSize = vueDemi.defineComponent({
   }
 });
 
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useResizeObserver(target, callback, options = {}) {
+  const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
+  let observer;
+  const isSupported = window && "ResizeObserver" in window;
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported && window && el) {
+      observer = new window.ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  shared.tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const width = vueDemi.ref(initialSize.width);
+  const height = vueDemi.ref(initialSize.height);
+  useResizeObserver(target, ([entry]) => {
+    width.value = entry.contentRect.width;
+    height.value = entry.contentRect.height;
+  }, options);
+  vueDemi.watch(() => unrefElement(target), (ele) => {
+    width.value = ele ? initialSize.width : 0;
+    height.value = ele ? initialSize.height : 0;
+  });
+  return {
+    width,
+    height
+  };
+}
+
+const vElementSize = (el, binding) => {
+  var _a;
+  const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+  const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+  const { width, height } = useElementSize(el, ...options);
+  vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+};
+
 const UseElementVisibility = vueDemi.defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
@@ -1464,11 +1541,14 @@ exports.UseTimestamp = UseTimestamp;
 exports.UseVirtualList = UseVirtualList;
 exports.UseWindowFocus = UseWindowFocus;
 exports.UseWindowSize = UseWindowSize;
-exports.VOnClickOutside = VOnClickOutside;
-exports.VOnLongPress = VOnLongPress;
+exports.VOnClickOutside = vOnClickOutside;
+exports.VOnLongPress = vOnLongPress;
 exports.vElementHover = vElementHover;
+exports.vElementSize = vElementSize;
 exports.vInfiniteScroll = vInfiniteScroll;
 exports.vIntersectionObserver = vIntersectionObserver;
+exports.vOnClickOutside = vOnClickOutside;
 exports.vOnKeyStroke = vOnKeyStroke;
+exports.vOnLongPress = vOnLongPress;
 exports.vScroll = vScroll;
 exports.vScrollLock = vScrollLock;

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
 import { FunctionDirective, Ref, ComponentPublicInstance, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
 import { MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, MaybeRef as MaybeRef$1, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, MaybeRef as MaybeRef$1, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -18,10 +18,7 @@ interface RenderableComponent {
 
 declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
-/**
- * TODO: Test that this actually works
- */
-declare const VOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void>;
+declare const vOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void>;
 
 declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
 interface KeyStrokeOptions {
@@ -30,9 +27,9 @@ interface KeyStrokeOptions {
     passive?: boolean;
 }
 
-declare type BindingValueFunction$5 = (event: KeyboardEvent) => void;
-declare type BindingValueArray$4 = [BindingValueFunction$5, KeyStrokeOptions];
-declare const vOnKeyStroke: FunctionDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$4>;
+declare type BindingValueFunction$6 = (event: KeyboardEvent) => void;
+declare type BindingValueArray$5 = [BindingValueFunction$6, KeyStrokeOptions];
+declare const vOnKeyStroke: FunctionDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$5>;
 
 interface OnLongPressOptions {
     /**
@@ -48,12 +45,12 @@ interface OnLongPressProps extends RenderableComponent {
 }
 declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
 
-declare type BindingValueFunction$4 = (evt: PointerEvent) => void;
-declare type BindingValueArray$3 = [
-    BindingValueFunction$4,
+declare type BindingValueFunction$5 = (evt: PointerEvent) => void;
+declare type BindingValueArray$4 = [
+    BindingValueFunction$5,
     OnLongPressOptions
 ];
-declare const VOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$3>;
+declare const vOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$4>;
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
@@ -212,10 +209,33 @@ interface ResizeObserverOptions extends ConfigurableWindow {
 
 declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ResizeObserverOptions & RenderableComponent>, {}>;
 
-declare type BindingValueFunction$3 = (state: boolean) => void;
-declare const vElementHover: FunctionDirective<HTMLElement, BindingValueFunction$3>;
+declare type BindingValueFunction$4 = (state: boolean) => void;
+declare const vElementHover: FunctionDirective<HTMLElement, BindingValueFunction$4>;
+
+declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & ResizeObserverOptions & RenderableComponent>, {}>;
+
+interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * Reactive size of an HTML element.
+ *
+ * @see https://vueuse.org/useElementSize
+ * @param target
+ * @param callback
+ * @param options
+ */
+declare function useElementSize(target: MaybeElementRef, initialSize?: ElementSize, options?: ResizeObserverOptions): {
+    width: vue_demi.Ref<number>;
+    height: vue_demi.Ref<number>;
+};
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize & ResizeObserverOptions & RenderableComponent>, {}>;
+declare type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
+declare type BindingValueFunction$3 = (size: ElementSize) => void;
+declare type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
+declare type BindingValueArray$3 = [BindingValueFunction$3, ...VElementSizeOptions];
+declare const vElementSize: FunctionDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
@@ -480,4 +500,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, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside, VOnLongPress, vElementHover, vInfiniteScroll, vIntersectionObserver, vOnKeyStroke, 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, 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, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/index.iife.js

@@ -148,9 +148,18 @@
     return stop;
   }
 
-  const VOnClickOutside = (el, binding) => {
-    onClickOutside(el, binding.value);
+  const handler = () => {
+    let stop = null;
+    return (el, binding) => {
+      if (stop) {
+        stop();
+        stop = onClickOutside(el, binding.value);
+        return;
+      }
+      stop = onClickOutside(el, binding.value);
+    };
   };
+  const vOnClickOutside = handler();
 
   const createKeyPredicate = (keyFilter) => {
     if (typeof keyFilter === "function")
@@ -175,17 +184,17 @@
   }
 
   var __defProp$b = Object.defineProperty;
-  var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-  var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-  var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$b = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$b.call(b, prop))
+      if (__hasOwnProp$c.call(b, prop))
         __defNormalProp$b(a, prop, b[prop]);
-    if (__getOwnPropSymbols$b)
-      for (var prop of __getOwnPropSymbols$b(b)) {
-        if (__propIsEnum$b.call(b, prop))
+    if (__getOwnPropSymbols$c)
+      for (var prop of __getOwnPropSymbols$c(b)) {
+        if (__propIsEnum$c.call(b, prop))
           __defNormalProp$b(a, prop, b[prop]);
       }
     return a;
@@ -241,7 +250,7 @@
     }
   });
 
-  const VOnLongPress = (el, binding) => {
+  const vOnLongPress = (el, binding) => {
     if (typeof binding.value === "function")
       onLongPress(el, binding.value);
     else
@@ -427,17 +436,17 @@
   }
 
   var __defProp$a = Object.defineProperty;
-  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+  var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+  var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$a = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$a.call(b, prop))
+      if (__hasOwnProp$b.call(b, prop))
         __defNormalProp$a(a, prop, b[prop]);
-    if (__getOwnPropSymbols$a)
-      for (var prop of __getOwnPropSymbols$a(b)) {
-        if (__propIsEnum$a.call(b, prop))
+    if (__getOwnPropSymbols$b)
+      for (var prop of __getOwnPropSymbols$b(b)) {
+        if (__propIsEnum$b.call(b, prop))
           __defNormalProp$a(a, prop, b[prop]);
       }
     return a;
@@ -593,17 +602,17 @@
   var __defProp$9 = Object.defineProperty;
   var __defProps$8 = Object.defineProperties;
   var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$9 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$9.call(b, prop))
+      if (__hasOwnProp$a.call(b, prop))
         __defNormalProp$9(a, prop, b[prop]);
-    if (__getOwnPropSymbols$9)
-      for (var prop of __getOwnPropSymbols$9(b)) {
-        if (__propIsEnum$9.call(b, prop))
+    if (__getOwnPropSymbols$a)
+      for (var prop of __getOwnPropSymbols$a(b)) {
+        if (__propIsEnum$a.call(b, prop))
           __defNormalProp$9(a, prop, b[prop]);
       }
     return a;
@@ -673,6 +682,74 @@
     }
   });
 
+  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols$9)
+      for (var prop of __getOwnPropSymbols$9(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
+  function useResizeObserver(target, callback, options = {}) {
+    const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
+    let observer;
+    const isSupported = window && "ResizeObserver" in window;
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    };
+    const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
+      cleanup();
+      if (isSupported && window && el) {
+        observer = new window.ResizeObserver(callback);
+        observer.observe(el, observerOptions);
+      }
+    }, { immediate: true, flush: "post" });
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    shared.tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
+
+  function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+    const width = vueDemi.ref(initialSize.width);
+    const height = vueDemi.ref(initialSize.height);
+    useResizeObserver(target, ([entry]) => {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }, options);
+    vueDemi.watch(() => unrefElement(target), (ele) => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
+    });
+    return {
+      width,
+      height
+    };
+  }
+
+  const vElementSize = (el, binding) => {
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+    const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+    const { width, height } = useElementSize(el, ...options);
+    vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+  };
+
   const UseElementVisibility = vueDemi.defineComponent({
     name: "UseElementVisibility",
     props: ["as"],
@@ -1520,12 +1597,15 @@
   exports.UseVirtualList = UseVirtualList;
   exports.UseWindowFocus = UseWindowFocus;
   exports.UseWindowSize = UseWindowSize;
-  exports.VOnClickOutside = VOnClickOutside;
-  exports.VOnLongPress = VOnLongPress;
+  exports.VOnClickOutside = vOnClickOutside;
+  exports.VOnLongPress = vOnLongPress;
   exports.vElementHover = vElementHover;
+  exports.vElementSize = vElementSize;
   exports.vInfiniteScroll = vInfiniteScroll;
   exports.vIntersectionObserver = vIntersectionObserver;
+  exports.vOnClickOutside = vOnClickOutside;
   exports.vOnKeyStroke = vOnKeyStroke;
+  exports.vOnLongPress = vOnLongPress;
   exports.vScroll = vScroll;
   exports.vScrollLock = vScrollLock;
 

package/index.iife.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Renderless components for VueUse",
   "keywords": [
     "vue",
@@ -33,8 +33,8 @@
   },
   "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "dependencies": {
-    "@vueuse/core": "8.0.0-beta.2",
-    "@vueuse/shared": "8.0.0-beta.2",
+    "@vueuse/core": "8.0.0-beta.3",
+    "@vueuse/shared": "8.0.0-beta.3",
     "vue-demi": "*"
   }
 }