@vueuse/components 9.12.0 → 10.0.0-beta.0

package/index.iife.js

@@ -115,7 +115,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 ;(function (exports, vueDemi, core, shared) {
   'use strict';
 
-  const OnClickOutside = /* @__PURE__ */ vueDemi.defineComponent({
+  const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "OnClickOutside",
     props: ["as", "options"],
     emits: ["trigger"],
@@ -161,16 +161,16 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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 = () => {
@@ -181,12 +181,16 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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") {
@@ -198,7 +202,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       });
     };
     const listener = (event) => {
-      window.clearTimeout(fallback);
       const el = unrefElement(target);
       if (!el || el === event.target || event.composedPath().includes(el))
         return;
@@ -217,13 +220,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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);
@@ -353,7 +349,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     useEventListener(elementRef, "pointerleave", clear, listenerOptions);
   }
 
-  const OnLongPress = /* @__PURE__ */ vueDemi.defineComponent({
+  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "OnLongPress",
     props: ["as", "options"],
     emits: ["trigger"],
@@ -378,7 +374,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseActiveElement = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseActiveElement",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -391,7 +387,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseBattery = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseBattery",
     setup(props, { slots }) {
       const data = vueDemi.reactive(core.useBattery(props));
@@ -402,7 +398,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseBrowserLocation = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseBrowserLocation",
     setup(props, { slots }) {
       const data = vueDemi.reactive(core.useBrowserLocation());
@@ -475,6 +471,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       write: (v) => v.toISOString()
     }
   };
+  const customStorageEventName = "vueuse-storage";
   function useStorage(key, defaults, storage, options = {}) {
     var _a;
     const {
@@ -507,8 +504,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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) {
@@ -521,11 +520,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           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
+                }
               }));
             }
           }
@@ -553,6 +554,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         return serializer.read(rawValue);
       }
     }
+    function updateFromCustomEvent(event) {
+      update(event.detail);
+    }
     function update(event) {
       if (event && event.storageArea !== storage)
         return;
@@ -643,7 +647,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       storageKey = "vueuse-color-scheme",
       listenToStorageChanges = true,
       storageRef,
-      emitAuto
+      emitAuto,
+      disableTransition = false
     } = options;
     const modes = __spreadValues$b({
       auto: "",
@@ -665,6 +670,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       const el = window == null ? void 0 : window.document.querySelector(selector2);
       if (!el)
         return;
+      let style;
+      if (disableTransition) {
+        style = window.document.createElement("style");
+        style.type = "text/css";
+        style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+        window.document.head.appendChild(style);
+      }
       if (attribute2 === "class") {
         const current = value.split(/\s/g);
         Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
@@ -676,6 +688,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       } else {
         el.setAttribute(attribute2, value);
       }
+      if (disableTransition) {
+        window.getComputedStyle(style).opacity;
+        document.head.removeChild(style);
+      }
     });
     function defaultOnChanged(mode) {
       var _a;
@@ -695,7 +711,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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 }) {
@@ -710,7 +726,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDark = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDark",
     props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
     setup(props, { slots }) {
@@ -726,7 +742,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDeviceMotion = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDeviceMotion",
     setup(props, { slots }) {
       const data = vueDemi.reactive(core.useDeviceMotion());
@@ -737,7 +753,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDeviceOrientation = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDeviceOrientation",
     setup(props, { slots }) {
       const data = vueDemi.reactive(core.useDeviceOrientation());
@@ -748,7 +764,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDevicePixelRatio = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDevicePixelRatio",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -761,7 +777,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDevicesList = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDevicesList",
     props: ["onUpdated", "requestPermissions", "constraints"],
     setup(props, { slots }) {
@@ -773,7 +789,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseDocumentVisibility = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDocumentVisibility",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -805,7 +821,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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",
@@ -844,7 +860,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseElementBounding",
     props: ["box", "as"],
     setup(props, { slots }) {
@@ -857,10 +873,29 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  function useElementHover(el) {
+  function useElementHover(el, options = {}) {
+    const {
+      delayEnter = 0,
+      delayLeave = 0,
+      window = defaultWindow
+    } = options;
     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;
   }
 
@@ -873,7 +908,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseElementSize = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseElementSize",
     props: ["width", "height", "box"],
     setup(props, { slots }) {
@@ -977,7 +1012,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseElementVisibility = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseElementVisibility",
     props: ["as"],
     setup(props, { slots }) {
@@ -1030,7 +1065,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseEyeDropper",
     props: {
       sRGBHex: String
@@ -1044,7 +1079,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseFullscreen",
     props: ["as"],
     setup(props, { slots }) {
@@ -1057,7 +1092,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseGeolocation = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseGeolocation",
     props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
     setup(props, { slots }) {
@@ -1069,7 +1104,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseIdle = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseIdle",
     props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
     setup(props, { slots }) {
@@ -1167,7 +1202,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return state;
   };
 
-  const UseImage = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseImage",
     props: [
       "src",
@@ -1250,14 +1285,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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;
@@ -1275,10 +1313,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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,
@@ -1392,7 +1431,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseMouse",
     props: ["touch", "resetOnTouchEnds", "initialValue"],
     setup(props, { slots }) {
@@ -1404,7 +1443,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseMouseInElement = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseMouseElement",
     props: ["handleOutside", "as"],
     setup(props, { slots }) {
@@ -1436,7 +1475,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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 }) {
@@ -1449,7 +1488,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseNetwork = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseNetwork",
     setup(props, { slots }) {
       const data = vueDemi.reactive(core.useNetwork());
@@ -1479,7 +1518,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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 }) {
@@ -1491,7 +1530,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseObjectUrl = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseObjectUrl",
     props: [
       "object"
@@ -1525,7 +1564,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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",
@@ -1565,7 +1604,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseOnline = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseOnline",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1578,7 +1617,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePageLeave = /* @__PURE__ */ vueDemi.defineComponent({
+  const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePageLeave",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1610,7 +1649,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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",
@@ -1629,7 +1668,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePointerLock = vueDemi.defineComponent({
+  const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePointerLock",
     props: ["as"],
     setup(props, { slots }) {
@@ -1642,7 +1681,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredColorScheme = /* @__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePreferredColorScheme",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1655,7 +1694,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredContrast = /* @__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePreferredContrast",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1668,7 +1707,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredDark = /* @__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePreferredDark",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1681,7 +1720,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredLanguages = /* @__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePreferredLanguages",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1694,7 +1733,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UsePreferredReducedMotion = /* @__PURE__ */ vueDemi.defineComponent({
+  const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePreferredReducedMotion",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -1707,19 +1746,29 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+  function useCssVar(prop, target, options = {}) {
+    const { window = defaultWindow, initialValue = "", observe = false } = options;
     const variable = vueDemi.ref(initialValue);
     const elRef = vueDemi.computed(() => {
       var _a;
       return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
     });
-    vueDemi.watch([elRef, () => shared.resolveUnref(prop)], ([el, prop2]) => {
+    function updateCssVar() {
       var _a;
+      const key = shared.resolveUnref(prop);
+      const el = shared.resolveUnref(elRef);
       if (el && window) {
-        const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
+        const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
         variable.value = value || initialValue;
       }
-    }, { immediate: true });
+    }
+    if (observe) {
+      core.useMutationObserver(elRef, updateCssVar, {
+        attributes: true,
+        window
+      });
+    }
+    vueDemi.watch([elRef, () => shared.resolveUnref(prop)], updateCssVar, { immediate: true });
     vueDemi.watch(variable, (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
@@ -1767,7 +1816,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return getComputedStyle(document.documentElement).getPropertyValue(position);
   }
 
-  const UseScreenSafeArea = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseScreenSafeArea",
     props: {
       top: Boolean,
@@ -1852,7 +1901,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   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;
@@ -1953,7 +2002,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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 }) {
@@ -1984,7 +2033,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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 }) {
@@ -2012,7 +2061,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     return a;
   };
-  const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseVirtualList",
     props: [
       "list",
@@ -2030,7 +2079,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseWindowFocus = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseWindowFocus",
     setup(props, { slots }) {
       const data = vueDemi.reactive({
@@ -2043,7 +2092,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  const UseWindowSize = /* @__PURE__ */ vueDemi.defineComponent({
+  const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseWindowSize",
     props: ["initialWidth", "initialHeight"],
     setup(props, { slots }) {