@vueuse/components 10.0.1 → 10.1.0

package/index.iife.js

@@ -112,7 +112,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   this.VueCompositionAPI || (typeof VueCompositionAPI !== 'undefined' ? VueCompositionAPI : undefined)
 );
 ;
-;(function (exports, vueDemi, core, shared, reactivity) {
+;(function (exports, vueDemi, core, shared) {
   'use strict';
 
   const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -298,19 +298,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return useEventListener(target, eventName, listener, passive);
   }
 
-  var __defProp$d = Object.defineProperty;
-  var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-  var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-  var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$d = (a, b) => {
+  var __defProp$e = Object.defineProperty;
+  var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+  var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+  var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$e = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$e.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    if (__getOwnPropSymbols$e)
-      for (var prop of __getOwnPropSymbols$e(b)) {
-        if (__propIsEnum$e.call(b, prop))
-          __defNormalProp$d(a, prop, b[prop]);
+      if (__hasOwnProp$g.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
+    if (__getOwnPropSymbols$g)
+      for (var prop of __getOwnPropSymbols$g(b)) {
+        if (__propIsEnum$g.call(b, prop))
+          __defNormalProp$e(a, prop, b[prop]);
       }
     return a;
   };
@@ -324,7 +324,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         });
       } else {
         const [handler, options] = binding.value;
-        onKeyStroke(keys, handler, __spreadValues$d({
+        onKeyStroke(keys, handler, __spreadValues$e({
           target: el
         }, options));
       }
@@ -445,19 +445,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
   }
 
-  var __defProp$c = Object.defineProperty;
-  var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-  var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-  var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$c = (a, b) => {
+  var __defProp$d = Object.defineProperty;
+  var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+  var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+  var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$d = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$d.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    if (__getOwnPropSymbols$d)
-      for (var prop of __getOwnPropSymbols$d(b)) {
-        if (__propIsEnum$d.call(b, prop))
-          __defNormalProp$c(a, prop, b[prop]);
+      if (__hasOwnProp$f.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
+    if (__getOwnPropSymbols$f)
+      for (var prop of __getOwnPropSymbols$f(b)) {
+        if (__propIsEnum$f.call(b, prop))
+          __defNormalProp$d(a, prop, b[prop]);
       }
     return a;
   };
@@ -574,7 +574,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         if (typeof mergeDefaults === "function")
           return mergeDefaults(value, rawInit);
         else if (type === "object" && !Array.isArray(value))
-          return __spreadValues$c(__spreadValues$c({}, rawInit), value);
+          return __spreadValues$d(__spreadValues$d({}, rawInit), value);
         return value;
       } else if (typeof rawValue !== "string") {
         return rawValue;
@@ -661,19 +661,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return useMediaQuery("(prefers-color-scheme: dark)", options);
   }
 
-  var __defProp$b = Object.defineProperty;
-  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$b = (a, b) => {
+  var __defProp$c = Object.defineProperty;
+  var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+  var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+  var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$c = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$c.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    if (__getOwnPropSymbols$c)
-      for (var prop of __getOwnPropSymbols$c(b)) {
-        if (__propIsEnum$c.call(b, prop))
-          __defNormalProp$b(a, prop, b[prop]);
+      if (__hasOwnProp$e.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
+    if (__getOwnPropSymbols$e)
+      for (var prop of __getOwnPropSymbols$e(b)) {
+        if (__propIsEnum$e.call(b, prop))
+          __defNormalProp$c(a, prop, b[prop]);
       }
     return a;
   };
@@ -690,26 +690,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       emitAuto,
       disableTransition = true
     } = options;
-    const modes = __spreadValues$b({
+    const modes = __spreadValues$c({
       auto: "",
       light: "light",
       dark: "dark"
     }, options.modes || {});
     const preferredDark = usePreferredDark({ window });
     const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
-    const store = storageRef || (storageKey == null ? vueDemi.ref(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
-    const state = vueDemi.computed({
-      get() {
-        return store.value === "auto" && !emitAuto ? system.value : store.value;
-      },
-      set(v) {
-        store.value = v;
-      }
-    });
+    const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
+    const state = vueDemi.computed(
+      () => store.value === "auto" ? system.value : store.value
+    );
     const updateHTMLAttrs = getSSRHandler(
       "updateHTMLAttrs",
       (selector2, attribute2, value) => {
-        const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : shared.toValue(selector2);
+        const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
         if (!el)
           return;
         let style;
@@ -737,8 +732,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     );
     function defaultOnChanged(mode) {
       var _a;
-      const resolvedMode = mode === "auto" ? system.value : mode;
-      updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
+      updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
     }
     function onChanged(mode) {
       if (options.onChanged)
@@ -747,13 +741,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         defaultOnChanged(mode);
     }
     vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
-    if (emitAuto)
-      vueDemi.watch(system, () => onChanged(state.value), { flush: "post" });
     shared.tryOnMounted(() => onChanged(state.value));
+    const auto = vueDemi.computed({
+      get() {
+        return emitAuto ? store.value : state.value;
+      },
+      set(v) {
+        store.value = v;
+      }
+    });
     try {
-      return Object.assign(state, { store, system });
+      return Object.assign(auto, { store, system, state });
     } catch (e) {
-      return state;
+      return auto;
     }
   }
 
@@ -850,25 +850,25 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$a = Object.defineProperty;
-  var __defProps$8 = Object.defineProperties;
-  var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-  var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-  var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$a = (a, b) => {
+  var __defProp$b = Object.defineProperty;
+  var __defProps$9 = Object.defineProperties;
+  var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+  var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+  var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$b = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
-    if (__getOwnPropSymbols$b)
-      for (var prop of __getOwnPropSymbols$b(b)) {
-        if (__propIsEnum$b.call(b, prop))
-          __defNormalProp$a(a, prop, b[prop]);
+      if (__hasOwnProp$d.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
+    if (__getOwnPropSymbols$d)
+      for (var prop of __getOwnPropSymbols$d(b)) {
+        if (__propIsEnum$d.call(b, prop))
+          __defNormalProp$b(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+  var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
   const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDraggable",
     props: [
@@ -901,7 +901,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         storageValue.value.x = position.x;
         storageValue.value.y = position.y;
       };
-      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$9(__spreadValues$b({}, props), {
         handle,
         initialValue,
         onEnd
@@ -974,23 +974,23 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-  var __objRest = (source, exclude) => {
+  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+  var __objRest$1 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$a)
-      for (var prop of __getOwnPropSymbols$a(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+    if (source != null && __getOwnPropSymbols$c)
+      for (var prop of __getOwnPropSymbols$c(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
   };
   function useResizeObserver(target, callback, options = {}) {
-    const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
+    const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$1(_a, ["window"]);
     let observer;
     const isSupported = useSupported(() => window && "ResizeObserver" in window);
     const cleanup = () => {
@@ -1104,7 +1104,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       immediate = true
     } = options;
     const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-    const targets = reactivity.computed(() => {
+    const targets = vueDemi.computed(() => {
       const _target = shared.toValue(target);
       return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(shared.notNullish);
     });
@@ -1234,6 +1234,25 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
+  var __defProp$a = Object.defineProperty;
+  var __defProps$8 = Object.defineProperties;
+  var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+  var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+  var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$a = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$b.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
+    if (__getOwnPropSymbols$b)
+      for (var prop of __getOwnPropSymbols$b(b)) {
+        if (__propIsEnum$b.call(b, prop))
+          __defNormalProp$a(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
   function useAsyncState(promise, initialState, options) {
     const {
       immediate = true,
@@ -1274,27 +1293,37 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
     if (immediate)
       execute(delay);
-    return {
+    const shell = {
       state,
       isReady,
       isLoading,
       error,
       execute
     };
+    function waitUntilIsLoaded() {
+      return new Promise((resolve, reject) => {
+        shared.until(isLoading).toBe(false).then(() => resolve(shell)).catch(reject);
+      });
+    }
+    return __spreadProps$8(__spreadValues$a({}, shell), {
+      then(onFulfilled, onRejected) {
+        return waitUntilIsLoaded().then(onFulfilled, onRejected);
+      }
+    });
   }
 
   var __defProp$9 = Object.defineProperty;
-  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$9 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$9.call(b, prop))
+      if (__hasOwnProp$a.call(b, prop))
         __defNormalProp$9(a, prop, b[prop]);
-    if (__getOwnPropSymbols$9)
-      for (var prop of __getOwnPropSymbols$9(b)) {
-        if (__propIsEnum$9.call(b, prop))
+    if (__getOwnPropSymbols$a)
+      for (var prop of __getOwnPropSymbols$a(b)) {
+        if (__propIsEnum$a.call(b, prop))
           __defNormalProp$9(a, prop, b[prop]);
       }
     return a;
@@ -1481,17 +1510,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   var __defProp$8 = Object.defineProperty;
   var __defProps$7 = Object.defineProperties;
   var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$8 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$8.call(b, prop))
+      if (__hasOwnProp$9.call(b, prop))
         __defNormalProp$8(a, prop, b[prop]);
-    if (__getOwnPropSymbols$8)
-      for (var prop of __getOwnPropSymbols$8(b)) {
-        if (__propIsEnum$8.call(b, prop))
+    if (__getOwnPropSymbols$9)
+      for (var prop of __getOwnPropSymbols$9(b)) {
+        if (__propIsEnum$9.call(b, prop))
           __defNormalProp$8(a, prop, b[prop]);
       }
     return a;
@@ -1586,17 +1615,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   var __defProp$7 = Object.defineProperty;
   var __defProps$6 = Object.defineProperties;
   var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$7 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$7.call(b, prop))
+      if (__hasOwnProp$8.call(b, prop))
         __defNormalProp$7(a, prop, b[prop]);
-    if (__getOwnPropSymbols$7)
-      for (var prop of __getOwnPropSymbols$7(b)) {
-        if (__propIsEnum$7.call(b, prop))
+    if (__getOwnPropSymbols$8)
+      for (var prop of __getOwnPropSymbols$8(b)) {
+        if (__propIsEnum$8.call(b, prop))
           __defNormalProp$7(a, prop, b[prop]);
       }
     return a;
@@ -1629,17 +1658,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   var __defProp$6 = Object.defineProperty;
   var __defProps$5 = Object.defineProperties;
   var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$6 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$6.call(b, prop))
+      if (__hasOwnProp$7.call(b, prop))
         __defNormalProp$6(a, prop, b[prop]);
-    if (__getOwnPropSymbols$6)
-      for (var prop of __getOwnPropSymbols$6(b)) {
-        if (__propIsEnum$6.call(b, prop))
+    if (__getOwnPropSymbols$7)
+      for (var prop of __getOwnPropSymbols$7(b)) {
+        if (__propIsEnum$7.call(b, prop))
           __defNormalProp$6(a, prop, b[prop]);
       }
     return a;
@@ -1675,17 +1704,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   var __defProp$5 = Object.defineProperty;
   var __defProps$4 = Object.defineProperties;
   var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$5 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$5.call(b, prop))
+      if (__hasOwnProp$6.call(b, prop))
         __defNormalProp$5(a, prop, b[prop]);
-    if (__getOwnPropSymbols$5)
-      for (var prop of __getOwnPropSymbols$5(b)) {
-        if (__propIsEnum$5.call(b, prop))
+    if (__getOwnPropSymbols$6)
+      for (var prop of __getOwnPropSymbols$6(b)) {
+        if (__propIsEnum$6.call(b, prop))
           __defNormalProp$5(a, prop, b[prop]);
       }
     return a;
@@ -1760,17 +1789,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   var __defProp$4 = Object.defineProperty;
   var __defProps$3 = Object.defineProperties;
   var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
   var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$4 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$4.call(b, prop))
+      if (__hasOwnProp$5.call(b, prop))
         __defNormalProp$4(a, prop, b[prop]);
-    if (__getOwnPropSymbols$4)
-      for (var prop of __getOwnPropSymbols$4(b)) {
-        if (__propIsEnum$4.call(b, prop))
+    if (__getOwnPropSymbols$5)
+      for (var prop of __getOwnPropSymbols$5(b)) {
+        if (__propIsEnum$5.call(b, prop))
           __defNormalProp$4(a, prop, b[prop]);
       }
     return a;
@@ -1873,6 +1902,53 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
+  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols$4)
+      for (var prop of __getOwnPropSymbols$4(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
+  function useMutationObserver(target, callback, options = {}) {
+    const _a = options, { window = defaultWindow } = _a, mutationOptions = __objRest(_a, ["window"]);
+    let observer;
+    const isSupported = useSupported(() => window && "MutationObserver" in window);
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    };
+    const stopWatch = vueDemi.watch(
+      () => unrefElement(target),
+      (el) => {
+        cleanup();
+        if (isSupported.value && window && el) {
+          observer = new MutationObserver(callback);
+          observer.observe(el, mutationOptions);
+        }
+      },
+      { immediate: true }
+    );
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    shared.tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
+
   function useCssVar(prop, target, options = {}) {
     const { window = defaultWindow, initialValue = "", observe = false } = options;
     const variable = vueDemi.ref(initialValue);
@@ -1890,7 +1966,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     }
     if (observe) {
-      core.useMutationObserver(elRef, updateCssVar, {
+      useMutationObserver(elRef, updateCssVar, {
         attributes: true,
         window
       });
@@ -2311,4 +2387,4 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   exports.vScroll = vScroll;
   exports.vScrollLock = vScrollLock;
 
-})(this.VueUse = this.VueUse || {}, VueDemi, VueUse, VueUse, reactivity);
+})(this.VueUse = this.VueUse || {}, VueDemi, VueUse, VueUse);