@vueuse/components 9.11.1 → 9.13.0

package/index.mjs

@@ -1,8 +1,8 @@
 import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, watchEffect, toRef, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, isFunction, tryOnMounted, resolveRef, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
+import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, isFunction, tryOnMounted, resolveRef, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
-const OnClickOutside = /* @__PURE__ */ defineComponent({
+const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -48,16 +48,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 = watch(() => unrefElement(target), (el) => {
+  const stopWatch = watch(() => [unrefElement(target), 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 = () => {
@@ -68,12 +68,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 (isIOS && !_iOSWorkaround) {
+    _iOSWorkaround = true;
+    Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop));
+  }
   let shouldListen = true;
-  let fallback;
   const shouldIgnore = (event) => {
     return ignore.some((target2) => {
       if (typeof target2 === "string") {
@@ -85,7 +89,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;
@@ -104,13 +107,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);
@@ -240,7 +236,7 @@ function onLongPress(target, handler, options) {
   useEventListener(elementRef, "pointerleave", clear, listenerOptions);
 }
 
-const OnLongPress = /* @__PURE__ */ defineComponent({
+const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -265,7 +261,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = /* @__PURE__ */ defineComponent({
+const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = reactive({
@@ -278,7 +274,7 @@ const UseActiveElement = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseBattery = /* @__PURE__ */ defineComponent({
+const UseBattery = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = reactive(useBattery(props));
@@ -289,7 +285,7 @@ const UseBattery = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseBrowserLocation = /* @__PURE__ */ defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = reactive(useBrowserLocation());
@@ -362,6 +358,7 @@ const StorageSerializers = {
     write: (v) => v.toISOString()
   }
 };
+const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
   var _a;
   const {
@@ -394,8 +391,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 } = 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) {
@@ -408,11 +407,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
+              }
             }));
           }
         }
@@ -440,6 +441,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;
@@ -582,7 +586,7 @@ function useColorMode(options = {}) {
   return state;
 }
 
-const UseColorMode = /* @__PURE__ */ defineComponent({
+const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -597,7 +601,7 @@ const UseColorMode = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseDark = /* @__PURE__ */ defineComponent({
+const UseDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -613,7 +617,7 @@ const UseDark = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseDeviceMotion = /* @__PURE__ */ defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = reactive(useDeviceMotion());
@@ -624,7 +628,7 @@ const UseDeviceMotion = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseDeviceOrientation = /* @__PURE__ */ defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = reactive(useDeviceOrientation());
@@ -635,7 +639,7 @@ const UseDeviceOrientation = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseDevicePixelRatio = /* @__PURE__ */ defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = reactive({
@@ -648,7 +652,7 @@ const UseDevicePixelRatio = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseDevicesList = /* @__PURE__ */ defineComponent({
+const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -660,7 +664,7 @@ const UseDevicesList = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseDocumentVisibility = /* @__PURE__ */ defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = reactive({
@@ -692,7 +696,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const UseDraggable = /* @__PURE__ */ defineComponent({
+const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -731,7 +735,7 @@ const UseDraggable = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseElementBounding = /* @__PURE__ */ defineComponent({
+const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
@@ -744,10 +748,26 @@ const UseElementBounding = /* @__PURE__ */ defineComponent({
   }
 });
 
-function useElementHover(el) {
+function useElementHover(el, options = {}) {
+  const delayEnter = options ? options.delayEnter : 0;
+  const delayLeave = options ? options.delayLeave : 0;
   const isHovered = 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;
 }
 
@@ -760,7 +780,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = /* @__PURE__ */ defineComponent({
+const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box"],
   setup(props, { slots }) {
@@ -817,17 +837,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 = computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
   const width = ref(initialSize.width);
   const height = 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);
   watch(() => unrefElement(target), (ele) => {
@@ -850,7 +884,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ defineComponent({
+const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -903,7 +937,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ defineComponent({
+const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -917,7 +951,7 @@ const UseEyeDropper = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ defineComponent({
+const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -930,7 +964,7 @@ const UseFullscreen = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseGeolocation = /* @__PURE__ */ defineComponent({
+const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -942,7 +976,7 @@ const UseGeolocation = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseIdle = /* @__PURE__ */ defineComponent({
+const UseIdle = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1040,7 +1074,7 @@ const useImage = (options, asyncStateOptions = {}) => {
   return state;
 };
 
-const UseImage = /* @__PURE__ */ defineComponent({
+const UseImage = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1123,14 +1157,17 @@ function useScroll(element, options = {}) {
     top: false,
     bottom: false
   });
-  const onScrollEnd = 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 = useDebounceFn(onScrollEnd, throttle + idle);
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
     const scrollLeft = eventTarget.scrollLeft;
@@ -1148,10 +1185,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 ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
+  useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
   return {
     x,
     y,
@@ -1265,7 +1303,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ defineComponent({
+const UseMouse = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1277,7 +1315,7 @@ const UseMouse = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseMouseInElement = /* @__PURE__ */ defineComponent({
+const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
@@ -1309,7 +1347,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const UseMousePressed = /* @__PURE__ */ defineComponent({
+const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
@@ -1322,7 +1360,7 @@ const UseMousePressed = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseNetwork = /* @__PURE__ */ defineComponent({
+const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = reactive(useNetwork());
@@ -1352,7 +1390,7 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const UseNow = /* @__PURE__ */ defineComponent({
+const UseNow = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -1364,7 +1402,7 @@ const UseNow = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ defineComponent({
+const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -1398,7 +1436,7 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const UseOffsetPagination = /* @__PURE__ */ defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -1438,7 +1476,7 @@ const UseOffsetPagination = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseOnline = /* @__PURE__ */ defineComponent({
+const UseOnline = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = reactive({
@@ -1451,7 +1489,7 @@ const UseOnline = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UsePageLeave = /* @__PURE__ */ defineComponent({
+const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = reactive({
@@ -1483,7 +1521,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const UsePointer = /* @__PURE__ */ defineComponent({
+const UsePointer = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -1502,7 +1540,7 @@ const UsePointer = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UsePointerLock = defineComponent({
+const UsePointerLock = /* #__PURE__ */ defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
@@ -1515,7 +1553,7 @@ const UsePointerLock = defineComponent({
   }
 });
 
-const UsePreferredColorScheme = /* @__PURE__ */ defineComponent({
+const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = reactive({
@@ -1528,7 +1566,7 @@ const UsePreferredColorScheme = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredContrast = /* @__PURE__ */ defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = reactive({
@@ -1541,7 +1579,7 @@ const UsePreferredContrast = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredDark = /* @__PURE__ */ defineComponent({
+const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = reactive({
@@ -1554,7 +1592,7 @@ const UsePreferredDark = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredLanguages = /* @__PURE__ */ defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = reactive({
@@ -1567,7 +1605,7 @@ const UsePreferredLanguages = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredReducedMotion = /* @__PURE__ */ defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = reactive({
@@ -1640,7 +1678,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = /* @__PURE__ */ defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -1725,7 +1763,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;
@@ -1826,7 +1864,7 @@ var __spreadValues$2 = (a, b) => {
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const UseTimeAgo = /* @__PURE__ */ defineComponent({
+const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -1857,7 +1895,7 @@ var __spreadValues$1 = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const UseTimestamp = /* @__PURE__ */ defineComponent({
+const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -1885,7 +1923,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const UseVirtualList = /* @__PURE__ */ defineComponent({
+const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -1903,7 +1941,7 @@ const UseVirtualList = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseWindowFocus = /* @__PURE__ */ defineComponent({
+const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = reactive({
@@ -1916,7 +1954,7 @@ const UseWindowFocus = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UseWindowSize = /* @__PURE__ */ defineComponent({
+const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {

package/package.json

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