@vueuse/components 10.0.0-beta.2 → 10.0.0-beta.4

package/index.cjs

@@ -22,7 +22,7 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = shared.resolveUnref(elRef);
+  const plain = shared.toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -54,14 +54,20 @@ function useEventListener(...args) {
     el.addEventListener(event, listener, options2);
     return () => el.removeEventListener(event, listener, options2);
   };
-  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, options2));
-    }));
-  }, { immediate: true, flush: "post" });
+  const stopWatch = vueDemi.watch(
+    () => [unrefElement(target), shared.toValue(options)],
+    ([el, options2]) => {
+      cleanup();
+      if (!el)
+        return;
+      cleanups.push(
+        ...events.flatMap((event) => {
+          return listeners.map((listener) => register(el, event, listener, options2));
+        })
+      );
+    },
+    { immediate: true, flush: "post" }
+  );
   const stop = () => {
     stopWatch();
     cleanup();
@@ -135,7 +141,7 @@ const vOnClickOutside = {
   }
 };
 
-const createKeyPredicate = (keyFilter) => {
+function createKeyPredicate(keyFilter) {
   if (typeof keyFilter === "function")
     return keyFilter;
   else if (typeof keyFilter === "string")
@@ -143,7 +149,7 @@ const createKeyPredicate = (keyFilter) => {
   else if (Array.isArray(keyFilter))
     return (event) => keyFilter.includes(event.key);
   return () => true;
-};
+}
 function onKeyStroke(...args) {
   let key;
   let handler;
@@ -173,7 +179,7 @@ function onKeyStroke(...args) {
   } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
-    if (e.repeat && shared.resolveUnref(dedupe))
+    if (e.repeat && shared.toValue(dedupe))
       return;
     if (predicate(e))
       handler(e);
@@ -234,7 +240,10 @@ function onLongPress(target, handler, options) {
       ev.preventDefault();
     if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
-    timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
+    timeout = setTimeout(
+      () => handler(ev),
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+    );
   }
   const listenerOptions = {
     capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
@@ -251,9 +260,13 @@ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   emits: ["trigger"],
   setup(props, { slots, emit }) {
     const target = vueDemi.ref();
-    onLongPress(target, (e) => {
-      emit("trigger", e);
-    }, props.options);
+    onLongPress(
+      target,
+      (e) => {
+        emit("trigger", e);
+      },
+      props.options
+    );
     return () => {
       if (slots.default)
         return vueDemi.h(props.as || "div", { ref: target }, slots.default());
@@ -396,10 +409,14 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = shared.resolveUnref(defaults);
+  const rawInit = shared.toValue(defaults);
   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 });
+  const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
+    data,
+    () => write(data.value),
+    { flush, deep, eventFilter }
+  );
   if (window && listenToStorageChanges) {
     useEventListener(window, "storage", update);
     useEventListener(window, customStorageEventName, updateFromCustomEvent);
@@ -478,9 +495,11 @@ function useStorage(key, defaults, storage, options = {}) {
 
 function useMounted() {
   const isMounted = vueDemi.ref(false);
-  vueDemi.onMounted(() => {
-    isMounted.value = true;
-  });
+  if (vueDemi.getCurrentInstance()) {
+    vueDemi.onMounted(() => {
+      isMounted.value = true;
+    });
+  }
   return isMounted;
 }
 
@@ -509,8 +528,10 @@ function useMediaQuery(query, options = {}) {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(shared.resolveRef(query).value);
-    matches.value = mediaQuery.matches;
+    mediaQuery = window.matchMedia(shared.toRef(query).value);
+    matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
+    if (!mediaQuery)
+      return;
     if ("addEventListener" in mediaQuery)
       mediaQuery.addEventListener("change", update);
     else
@@ -552,7 +573,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
-    disableTransition = false
+    disableTransition = true
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -560,46 +581,48 @@ function useColorMode(options = {}) {
     dark: "dark"
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
-  const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+  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 ? preferredMode.value : store.value;
+      return store.value === "auto" && !emitAuto ? system.value : store.value;
     },
     set(v) {
       store.value = v;
     }
   });
-  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
-    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) => {
-        if (current.includes(v))
-          el.classList.add(v);
-        else
-          el.classList.remove(v);
-      });
-    } else {
-      el.setAttribute(attribute2, value);
-    }
-    if (disableTransition) {
-      window.getComputedStyle(style).opacity;
-      document.head.removeChild(style);
+  const updateHTMLAttrs = getSSRHandler(
+    "updateHTMLAttrs",
+    (selector2, attribute2, value) => {
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : shared.toValue(selector2);
+      if (!el)
+        return;
+      let style;
+      if (disableTransition) {
+        style = window.document.createElement("style");
+        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) => {
+          if (current.includes(v))
+            el.classList.add(v);
+          else
+            el.classList.remove(v);
+        });
+      } else {
+        el.setAttribute(attribute2, value);
+      }
+      if (disableTransition) {
+        window.getComputedStyle(style).opacity;
+        document.head.removeChild(style);
+      }
     }
-  });
+  );
   function defaultOnChanged(mode) {
     var _a;
-    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    const resolvedMode = mode === "auto" ? system.value : mode;
     updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
   }
   function onChanged(mode) {
@@ -610,9 +633,13 @@ function useColorMode(options = {}) {
   }
   vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
   if (emitAuto)
-    vueDemi.watch(preferredMode, () => onChanged(state.value), { flush: "post" });
+    vueDemi.watch(system, () => onChanged(state.value), { flush: "post" });
   shared.tryOnMounted(() => onChanged(state.value));
-  return state;
+  try {
+    return Object.assign(state, { store, system });
+  } catch (e) {
+    return state;
+  }
 }
 
 const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -621,7 +648,9 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = vueDemi.reactive({
-      mode
+      mode,
+      system: mode.system,
+      store: mode.store
     });
     return () => {
       if (slots.default)
@@ -736,7 +765,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "stopPropagation",
     "pointerTypes",
     "as",
-    "handle"
+    "handle",
+    "axis"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -744,7 +774,11 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
-    const storageValue = props.storageKey && core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0);
+    const storageValue = props.storageKey && core.useStorage(
+      props.storageKey,
+      shared.toValue(props.initialValue) || { x: 0, y: 0 },
+      core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
+    );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position) => {
       if (!storageValue)
@@ -850,15 +884,21 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = vueDemi.computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
-  const stopWatch = vueDemi.watch(targets, (els) => {
-    cleanup();
-    if (isSupported.value && window) {
-      observer = new ResizeObserver(callback);
-      for (const _el of els)
-        _el && observer.observe(_el, observerOptions);
-    }
-  }, { immediate: true, flush: "post", deep: true });
+  const targets = vueDemi.computed(
+    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
+  );
+  const stopWatch = vueDemi.watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els)
+          _el && observer.observe(_el, observerOptions);
+      }
+    },
+    { immediate: true, flush: "post", deep: true }
+  );
   const stop = () => {
     cleanup();
     stopWatch();
@@ -878,30 +918,37 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   });
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
-  useResizeObserver(target, ([entry]) => {
-    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
-    if (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 {
-      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);
+  useResizeObserver(
+    target,
+    ([entry]) => {
+      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+      if (window && isSVG.value) {
+        const $elem = unrefElement(target);
+        if ($elem) {
+          const styles = window.getComputedStyle($elem);
+          width.value = parseFloat(styles.width);
+          height.value = parseFloat(styles.height);
+        }
       } else {
-        width.value = entry.contentRect.width;
-        height.value = entry.contentRect.height;
+        if (boxSize) {
+          const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+          width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+          height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+        } else {
+          width.value = entry.contentRect.width;
+          height.value = entry.contentRect.height;
+        }
       }
+    },
+    options
+  );
+  vueDemi.watch(
+    () => unrefElement(target),
+    (ele) => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
     }
-  }, options);
-  vueDemi.watch(() => unrefElement(target), (ele) => {
-    width.value = ele ? initialSize.width : 0;
-    height.value = ele ? initialSize.height : 0;
-  });
+  );
   return {
     width,
     height
@@ -938,47 +985,68 @@ function useIntersectionObserver(target, callback, options = {}) {
     root,
     rootMargin = "0px",
     threshold = 0.1,
-    window = defaultWindow
+    window = defaultWindow,
+    immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = shared.noop;
-  const stopWatch = isSupported.value ? vueDemi.watch(() => ({
-    el: unrefElement(target),
-    root: unrefElement(root)
-  }), ({ el, root: root2 }) => {
-    cleanup();
-    if (!el)
-      return;
-    const observer = new IntersectionObserver(callback, {
-      root: root2,
-      rootMargin,
-      threshold
-    });
-    observer.observe(el);
-    cleanup = () => {
-      observer.disconnect();
-      cleanup = shared.noop;
-    };
-  }, { immediate: true, flush: "post" }) : shared.noop;
+  const isActive = vueDemi.ref(immediate);
+  const stopWatch = isSupported.value ? vueDemi.watch(
+    () => [unrefElement(target), unrefElement(root), isActive.value],
+    ([el, root2]) => {
+      cleanup();
+      if (!isActive.value)
+        return;
+      if (!el)
+        return;
+      const observer = new IntersectionObserver(
+        callback,
+        {
+          root: unrefElement(root2),
+          rootMargin,
+          threshold
+        }
+      );
+      observer.observe(el);
+      cleanup = () => {
+        observer.disconnect();
+        cleanup = shared.noop;
+      };
+    },
+    { immediate, flush: "post" }
+  ) : shared.noop;
   const stop = () => {
     cleanup();
     stopWatch();
+    isActive.value = false;
   };
   shared.tryOnScopeDispose(stop);
   return {
     isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
     stop
   };
 }
 
 function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
   const elementIsVisible = vueDemi.ref(false);
-  useIntersectionObserver(element, ([{ isIntersecting }]) => {
-    elementIsVisible.value = isIntersecting;
-  }, {
-    root: scrollTarget,
-    window
-  });
+  useIntersectionObserver(
+    element,
+    ([{ isIntersecting }]) => {
+      elementIsVisible.value = isIntersecting;
+    },
+    {
+      root: scrollTarget,
+      window
+    }
+  );
   return elementIsVisible;
 }
 
@@ -1125,13 +1193,21 @@ async function loadImage(options) {
     img.onerror = reject;
   });
 }
-const useImage = (options, asyncStateOptions = {}) => {
-  const state = useAsyncState(() => loadImage(shared.resolveUnref(options)), void 0, __spreadValues$9({
-    resetOnExecute: true
-  }, asyncStateOptions));
-  vueDemi.watch(() => shared.resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+function useImage(options, asyncStateOptions = {}) {
+  const state = useAsyncState(
+    () => loadImage(shared.toValue(options)),
+    void 0,
+    __spreadValues$9({
+      resetOnExecute: true
+    }, asyncStateOptions)
+  );
+  vueDemi.watch(
+    () => shared.toValue(options),
+    () => state.execute(asyncStateOptions.delay),
+    { deep: true }
+  );
   return state;
-};
+}
 
 const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseImage",
@@ -1194,13 +1270,13 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
-    const _element = shared.resolveUnref(element);
+    const _element = shared.toValue(element);
     if (!_element)
       return;
     (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-      top: (_a = shared.resolveUnref(_y)) != null ? _a : y.value,
-      left: (_b = shared.resolveUnref(_x)) != null ? _b : x.value,
-      behavior: shared.resolveUnref(behavior)
+      top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+      left: (_b = shared.toValue(_x)) != null ? _b : x.value,
+      behavior: shared.toValue(behavior)
     });
   }
   const isScrolling = vueDemi.ref(false);
@@ -1229,26 +1305,51 @@ function useScroll(element, options = {}) {
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const { display, flexDirection } = getComputedStyle(eventTarget);
     const scrollLeft = eventTarget.scrollLeft;
     directions.left = scrollLeft < internalX.value;
-    directions.right = scrollLeft > internalY.value;
-    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    directions.right = scrollLeft > internalX.value;
+    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "row-reverse") {
+      arrivedState.left = right;
+      arrivedState.right = left;
+    } else {
+      arrivedState.left = left;
+      arrivedState.right = right;
+    }
     internalX.value = scrollLeft;
     let scrollTop = eventTarget.scrollTop;
     if (e.target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "column-reverse") {
+      arrivedState.top = bottom;
+      arrivedState.bottom = top;
+    } else {
+      arrivedState.top = top;
+      arrivedState.bottom = bottom;
+    }
     internalY.value = scrollTop;
     isScrolling.value = true;
     onScrollEndDebounced(e);
     onScroll(e);
   };
-  useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
-  useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
+  useEventListener(
+    element,
+    "scroll",
+    throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
+    eventListenerOptions
+  );
+  useEventListener(
+    element,
+    "scrollend",
+    onScrollEnd,
+    eventListenerOptions
+  );
   return {
     x,
     y,
@@ -1280,30 +1381,36 @@ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function useInfiniteScroll(element, onLoadMore, options = {}) {
   var _a, _b;
   const direction = (_a = options.direction) != null ? _a : "bottom";
-  const state = vueDemi.reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
-    offset: __spreadValues$8({
-      [direction]: (_b = options.distance) != null ? _b : 0
-    }, options.offset)
-  })));
-  vueDemi.watch(() => state.arrivedState[direction], async (v) => {
-    var _a2, _b2;
-    if (v) {
-      const elem = shared.resolveUnref(element);
-      const previous = {
-        height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
-        width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
-      };
-      await onLoadMore(state);
-      if (options.preserveScrollPosition && elem) {
-        vueDemi.nextTick(() => {
-          elem.scrollTo({
-            top: elem.scrollHeight - previous.height,
-            left: elem.scrollWidth - previous.width
+  const state = vueDemi.reactive(useScroll(
+    element,
+    __spreadProps$7(__spreadValues$8({}, options), {
+      offset: __spreadValues$8({
+        [direction]: (_b = options.distance) != null ? _b : 0
+      }, options.offset)
+    })
+  ));
+  vueDemi.watch(
+    () => state.arrivedState[direction],
+    async (v) => {
+      var _a2, _b2;
+      if (v) {
+        const elem = shared.toValue(element);
+        const previous = {
+          height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
+          width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
+        };
+        await onLoadMore(state);
+        if (options.preserveScrollPosition && elem) {
+          vueDemi.nextTick(() => {
+            elem.scrollTo({
+              top: elem.scrollHeight - previous.height,
+              left: elem.scrollWidth - previous.width
+            });
           });
-        });
+        }
       }
     }
-  });
+  );
 }
 
 const vInfiniteScroll = {
@@ -1429,7 +1536,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "object"
   ],
   setup(props, { slots }) {
-    const object = vueDemi.toRef(props, "object");
+    const object = shared.toRef(props, "object");
     const url = core.useObjectUrl(object);
     return () => {
       if (slots.default && url.value)
@@ -1648,8 +1755,8 @@ function useCssVar(prop, target, options = {}) {
   });
   function updateCssVar() {
     var _a;
-    const key = shared.resolveUnref(prop);
-    const el = shared.resolveUnref(elRef);
+    const key = shared.toValue(prop);
+    const el = shared.toValue(elRef);
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
@@ -1661,12 +1768,19 @@ function useCssVar(prop, target, options = {}) {
       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)
-      elRef.value.style.setProperty(shared.resolveUnref(prop), val);
-  });
+  vueDemi.watch(
+    [elRef, () => shared.toValue(prop)],
+    updateCssVar,
+    { immediate: true }
+  );
+  vueDemi.watch(
+    variable,
+    (val) => {
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
+        elRef.value.style.setProperty(shared.toValue(prop), val);
+    }
+  );
   return variable;
 }
 
@@ -1818,7 +1932,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = vueDemi.ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  vueDemi.watch(shared.resolveRef(element), (el) => {
+  vueDemi.watch(shared.toRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1829,19 +1943,24 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = shared.resolveUnref(element);
+    const ele = shared.toValue(element);
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
-      stopTouchMoveListener = useEventListener(ele, "touchmove", (e) => {
-        preventDefault(e);
-      }, { passive: false });
+      stopTouchMoveListener = useEventListener(
+        ele,
+        "touchmove",
+        (e) => {
+          preventDefault(e);
+        },
+        { passive: false }
+      );
     }
     ele.style.overflow = "hidden";
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = shared.resolveUnref(element);
+    const ele = shared.toValue(element);
     if (!ele || !isLocked.value)
       return;
     shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
@@ -1862,7 +1981,7 @@ function useScrollLock(element, initialState = false) {
   });
 }
 
-const onScrollLock = () => {
+function onScrollLock() {
   let isMounted = false;
   const state = vueDemi.ref(false);
   return (el, binding) => {
@@ -1873,7 +1992,7 @@ const onScrollLock = () => {
     const isLocked = useScrollLock(el, binding.value);
     vueDemi.watch(state, (v) => isLocked.value = v);
   };
-};
+}
 const vScrollLock = onScrollLock();
 
 var __defProp$2 = Object.defineProperty;
@@ -1966,9 +2085,21 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
     expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
-    return () => vueDemi.h("div", __spreadValues({}, containerProps), [
-      vueDemi.h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
-    ]);
+    return () => vueDemi.h(
+      "div",
+      __spreadValues({}, containerProps),
+      [
+        vueDemi.h(
+          "div",
+          __spreadValues({}, wrapperProps.value),
+          list.value.map((item) => vueDemi.h(
+            "div",
+            { style: { overFlow: "hidden", height: item.height } },
+            slots.default ? slots.default(item) : "Please set content!"
+          ))
+        )
+      ]
+    );
   }
 });