@vueuse/components 9.11.1 → 9.13.0

package/index.cjs

@@ -4,7 +4,7 @@ var vueDemi = require('vue-demi');
 var core = require('@vueuse/core');
 var shared = require('@vueuse/shared');
 
-const OnClickOutside = /* @__PURE__ */ vueDemi.defineComponent({
+const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -50,16 +50,16 @@ function useEventListener(...args) {
     cleanups.forEach((fn) => fn());
     cleanups.length = 0;
   };
-  const register = (el, event, listener) => {
-    el.addEventListener(event, listener, options);
-    return () => el.removeEventListener(event, listener, options);
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
   };
-  const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
+  const stopWatch = vueDemi.watch(() => [unrefElement(target), shared.resolveUnref(options)], ([el, options2]) => {
     cleanup();
     if (!el)
       return;
     cleanups.push(...events.flatMap((event) => {
-      return listeners.map((listener) => register(el, event, listener));
+      return listeners.map((listener) => register(el, event, listener, options2));
     }));
   }, { immediate: true, flush: "post" });
   const stop = () => {
@@ -70,12 +70,16 @@ function useEventListener(...args) {
   return stop;
 }
 
+let _iOSWorkaround = false;
 function onClickOutside(target, handler, options = {}) {
   const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
   if (!window)
     return;
+  if (shared.isIOS && !_iOSWorkaround) {
+    _iOSWorkaround = true;
+    Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop));
+  }
   let shouldListen = true;
-  let fallback;
   const shouldIgnore = (event) => {
     return ignore.some((target2) => {
       if (typeof target2 === "string") {
@@ -87,7 +91,6 @@ function onClickOutside(target, handler, options = {}) {
     });
   };
   const listener = (event) => {
-    window.clearTimeout(fallback);
     const el = unrefElement(target);
     if (!el || el === event.target || event.composedPath().includes(el))
       return;
@@ -106,13 +109,6 @@ function onClickOutside(target, handler, options = {}) {
       if (el)
         shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
     }, { passive: true }),
-    useEventListener(window, "pointerup", (e) => {
-      if (e.button === 0) {
-        const path = e.composedPath();
-        e.composedPath = () => path;
-        fallback = window.setTimeout(() => listener(e), 50);
-      }
-    }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
       var _a;
       const el = unrefElement(target);
@@ -242,7 +238,7 @@ function onLongPress(target, handler, options) {
   useEventListener(elementRef, "pointerleave", clear, listenerOptions);
 }
 
-const OnLongPress = /* @__PURE__ */ vueDemi.defineComponent({
+const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -267,7 +263,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = /* @__PURE__ */ vueDemi.defineComponent({
+const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -280,7 +276,7 @@ const UseActiveElement = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseBattery = /* @__PURE__ */ vueDemi.defineComponent({
+const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useBattery(props));
@@ -291,7 +287,7 @@ const UseBattery = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseBrowserLocation = /* @__PURE__ */ vueDemi.defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useBrowserLocation());
@@ -364,6 +360,7 @@ const StorageSerializers = {
     write: (v) => v.toISOString()
   }
 };
+const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
   var _a;
   const {
@@ -396,8 +393,10 @@ function useStorage(key, defaults, storage, options = {}) {
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
-  if (window && listenToStorageChanges)
+  if (window && listenToStorageChanges) {
     useEventListener(window, "storage", update);
+    useEventListener(window, customStorageEventName, updateFromCustomEvent);
+  }
   update();
   return data;
   function write(v) {
@@ -410,11 +409,13 @@ function useStorage(key, defaults, storage, options = {}) {
         if (oldValue !== serialized) {
           storage.setItem(key, serialized);
           if (window) {
-            window == null ? void 0 : window.dispatchEvent(new StorageEvent("storage", {
-              key,
-              oldValue,
-              newValue: serialized,
-              storageArea: storage
+            window.dispatchEvent(new CustomEvent(customStorageEventName, {
+              detail: {
+                key,
+                oldValue,
+                newValue: serialized,
+                storageArea: storage
+              }
             }));
           }
         }
@@ -442,6 +443,9 @@ function useStorage(key, defaults, storage, options = {}) {
       return serializer.read(rawValue);
     }
   }
+  function updateFromCustomEvent(event) {
+    update(event.detail);
+  }
   function update(event) {
     if (event && event.storageArea !== storage)
       return;
@@ -584,7 +588,7 @@ function useColorMode(options = {}) {
   return state;
 }
 
-const UseColorMode = /* @__PURE__ */ vueDemi.defineComponent({
+const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -599,7 +603,7 @@ const UseColorMode = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDark = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -615,7 +619,7 @@ const UseDark = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDeviceMotion = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useDeviceMotion());
@@ -626,7 +630,7 @@ const UseDeviceMotion = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDeviceOrientation = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useDeviceOrientation());
@@ -637,7 +641,7 @@ const UseDeviceOrientation = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDevicePixelRatio = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -650,7 +654,7 @@ const UseDevicePixelRatio = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDevicesList = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -662,7 +666,7 @@ const UseDevicesList = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDocumentVisibility = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -694,7 +698,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const UseDraggable = /* @__PURE__ */ vueDemi.defineComponent({
+const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -733,7 +737,7 @@ const UseDraggable = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
+const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
@@ -746,10 +750,26 @@ const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-function useElementHover(el) {
+function useElementHover(el, options = {}) {
+  const delayEnter = options ? options.delayEnter : 0;
+  const delayLeave = options ? options.delayLeave : 0;
   const isHovered = vueDemi.ref(false);
-  useEventListener(el, "mouseenter", () => isHovered.value = true);
-  useEventListener(el, "mouseleave", () => isHovered.value = false);
+  let timer;
+  const toggle = (entering) => {
+    const delay = entering ? delayEnter : delayLeave;
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+    if (delay)
+      timer = setTimeout(() => isHovered.value = entering, delay);
+    else
+      isHovered.value = entering;
+  };
+  if (!window)
+    return isHovered;
+  useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
+  useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
   return isHovered;
 }
 
@@ -762,7 +782,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = /* @__PURE__ */ vueDemi.defineComponent({
+const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box"],
   setup(props, { slots }) {
@@ -819,17 +839,31 @@ function useResizeObserver(target, callback, options = {}) {
 }
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
-  const { box = "content-box" } = options;
+  const { window = defaultWindow, box = "content-box" } = options;
+  const isSVG = vueDemi.computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
   useResizeObserver(target, ([entry]) => {
     const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
-    if (boxSize) {
-      width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
-      height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+    if (window && isSVG.value) {
+      const $elem = unrefElement(target);
+      if ($elem) {
+        const styles = window.getComputedStyle($elem);
+        width.value = parseFloat(styles.width);
+        height.value = parseFloat(styles.height);
+      }
     } else {
-      width.value = entry.contentRect.width;
-      height.value = entry.contentRect.height;
+      if (boxSize) {
+        const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+        width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+        height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+      } else {
+        width.value = entry.contentRect.width;
+        height.value = entry.contentRect.height;
+      }
     }
   }, options);
   vueDemi.watch(() => unrefElement(target), (ele) => {
@@ -852,7 +886,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ vueDemi.defineComponent({
+const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -905,7 +939,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
+const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -919,7 +953,7 @@ const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
+const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -932,7 +966,7 @@ const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseGeolocation = /* @__PURE__ */ vueDemi.defineComponent({
+const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -944,7 +978,7 @@ const UseGeolocation = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseIdle = /* @__PURE__ */ vueDemi.defineComponent({
+const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1042,7 +1076,7 @@ const useImage = (options, asyncStateOptions = {}) => {
   return state;
 };
 
-const UseImage = /* @__PURE__ */ vueDemi.defineComponent({
+const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1125,14 +1159,17 @@ function useScroll(element, options = {}) {
     top: false,
     bottom: false
   });
-  const onScrollEnd = shared.useDebounceFn((e) => {
+  const onScrollEnd = (e) => {
+    if (!isScrolling.value)
+      return;
     isScrolling.value = false;
     directions.left = false;
     directions.right = false;
     directions.top = false;
     directions.bottom = false;
     onStop(e);
-  }, throttle + idle);
+  };
+  const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
     const scrollLeft = eventTarget.scrollLeft;
@@ -1150,10 +1187,11 @@ function useScroll(element, options = {}) {
     arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     internalY.value = scrollTop;
     isScrolling.value = true;
-    onScrollEnd(e);
+    onScrollEndDebounced(e);
     onScroll(e);
   };
   useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
+  useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
   return {
     x,
     y,
@@ -1267,7 +1305,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
+const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1279,7 +1317,7 @@ const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseMouseInElement = /* @__PURE__ */ vueDemi.defineComponent({
+const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
@@ -1311,7 +1349,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const UseMousePressed = /* @__PURE__ */ vueDemi.defineComponent({
+const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
@@ -1324,7 +1362,7 @@ const UseMousePressed = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseNetwork = /* @__PURE__ */ vueDemi.defineComponent({
+const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useNetwork());
@@ -1354,7 +1392,7 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const UseNow = /* @__PURE__ */ vueDemi.defineComponent({
+const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -1366,7 +1404,7 @@ const UseNow = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ vueDemi.defineComponent({
+const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -1400,7 +1438,7 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const UseOffsetPagination = /* @__PURE__ */ vueDemi.defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -1440,7 +1478,7 @@ const UseOffsetPagination = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseOnline = /* @__PURE__ */ vueDemi.defineComponent({
+const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1453,7 +1491,7 @@ const UseOnline = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePageLeave = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1485,7 +1523,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const UsePointer = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -1504,7 +1542,7 @@ const UsePointer = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePointerLock = vueDemi.defineComponent({
+const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
@@ -1517,7 +1555,7 @@ const UsePointerLock = vueDemi.defineComponent({
   }
 });
 
-const UsePreferredColorScheme = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1530,7 +1568,7 @@ const UsePreferredColorScheme = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePreferredContrast = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1543,7 +1581,7 @@ const UsePreferredContrast = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePreferredDark = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1556,7 +1594,7 @@ const UsePreferredDark = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePreferredLanguages = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1569,7 +1607,7 @@ const UsePreferredLanguages = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePreferredReducedMotion = /* @__PURE__ */ vueDemi.defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1642,7 +1680,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = /* @__PURE__ */ vueDemi.defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -1727,7 +1765,7 @@ const vScroll = {
 
 function checkOverflowScroll(ele) {
   const style = window.getComputedStyle(ele);
-  if (style.overflowX === "scroll" || style.overflowY === "scroll") {
+  if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientHeight < ele.scrollHeight || style.overflowY === "auto" && ele.clientWidth < ele.scrollWidth) {
     return true;
   } else {
     const parent = ele.parentNode;
@@ -1828,7 +1866,7 @@ var __spreadValues$2 = (a, b) => {
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const UseTimeAgo = /* @__PURE__ */ vueDemi.defineComponent({
+const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -1859,7 +1897,7 @@ var __spreadValues$1 = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const UseTimestamp = /* @__PURE__ */ vueDemi.defineComponent({
+const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -1887,7 +1925,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
+const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -1905,7 +1943,7 @@ const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseWindowFocus = /* @__PURE__ */ vueDemi.defineComponent({
+const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1918,7 +1956,7 @@ const UseWindowFocus = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseWindowSize = /* @__PURE__ */ vueDemi.defineComponent({
+const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {