@vueuse/components 9.12.0 → 10.0.0-beta.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;
@@ -532,7 +536,8 @@ function useColorMode(options = {}) {
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
     storageRef,
-    emitAuto
+    emitAuto,
+    disableTransition = false
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -554,6 +559,13 @@ function useColorMode(options = {}) {
     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) => {
@@ -565,6 +577,10 @@ function useColorMode(options = {}) {
     } else {
       el.setAttribute(attribute2, value);
     }
+    if (disableTransition) {
+      window.getComputedStyle(style).opacity;
+      document.head.removeChild(style);
+    }
   });
   function defaultOnChanged(mode) {
     var _a;
@@ -584,7 +600,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 +615,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 +631,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 +642,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 +653,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 +666,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 +678,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 +710,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 +749,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 +762,29 @@ const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-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;
 }
 
@@ -762,7 +797,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = /* @__PURE__ */ vueDemi.defineComponent({
+const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box"],
   setup(props, { slots }) {
@@ -866,7 +901,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ vueDemi.defineComponent({
+const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -919,7 +954,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
+const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -933,7 +968,7 @@ const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
+const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -946,7 +981,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 }) {
@@ -958,7 +993,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 }) {
@@ -1056,7 +1091,7 @@ const useImage = (options, asyncStateOptions = {}) => {
   return state;
 };
 
-const UseImage = /* @__PURE__ */ vueDemi.defineComponent({
+const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1139,14 +1174,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;
@@ -1164,10 +1202,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,
@@ -1281,7 +1320,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
+const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1293,7 +1332,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 }) {
@@ -1325,7 +1364,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 }) {
@@ -1338,7 +1377,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());
@@ -1368,7 +1407,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 }) {
@@ -1380,7 +1419,7 @@ const UseNow = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ vueDemi.defineComponent({
+const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -1414,7 +1453,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",
@@ -1454,7 +1493,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({
@@ -1467,7 +1506,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({
@@ -1499,7 +1538,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",
@@ -1518,7 +1557,7 @@ const UsePointer = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePointerLock = vueDemi.defineComponent({
+const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
@@ -1531,7 +1570,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({
@@ -1544,7 +1583,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({
@@ -1557,7 +1596,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({
@@ -1570,7 +1609,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({
@@ -1583,7 +1622,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({
@@ -1596,19 +1635,29 @@ const UsePreferredReducedMotion = /* @__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-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)
@@ -1656,7 +1705,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,
@@ -1741,7 +1790,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;
@@ -1842,7 +1891,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 }) {
@@ -1873,7 +1922,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 }) {
@@ -1901,7 +1950,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
+const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -1919,7 +1968,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({
@@ -1932,7 +1981,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 }) {

package/index.d.ts

@@ -218,6 +218,13 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      * @default undefined
      */
     emitAuto?: boolean;
+    /**
+     * Disable transition on switch
+     *
+     * @see https://paco.me/writing/disable-theme-transitions
+     * @default false
+     */
+    disableTransition?: boolean;
 }
 
 declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorSchema>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorSchema>>, {}>;