@vueuse/components 12.6.1 → 12.8.0

package/index.cjs

@@ -4,12 +4,12 @@ var core = require('@vueuse/core');
 var vue = require('vue');
 var shared = require('@vueuse/shared');
 
-const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const OnClickOutside = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(props, { slots, emit }) {
-    const target = vue.ref();
+    const target = vue.shallowRef();
     core.onClickOutside(target, (e) => {
       emit("trigger", e);
     }, props.options);
@@ -333,12 +333,12 @@ function onLongPress(target, handler, options) {
   return stop;
 }
 
-const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const OnLongPress = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(props, { slots, emit }) {
-    const target = vue.ref();
+    const target = vue.shallowRef();
     onLongPress(
       target,
       (e) => {
@@ -362,7 +362,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseActiveElement = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -375,7 +375,7 @@ const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseBattery = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = vue.reactive(core.useBattery(props));
@@ -386,7 +386,7 @@ const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = vue.reactive(core.useBrowserLocation());
@@ -397,7 +397,7 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseClipboard = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseClipboard",
   props: [
     "source",
@@ -434,7 +434,7 @@ function useSSRWidth() {
 }
 
 function useMounted() {
-  const isMounted = vue.ref(false);
+  const isMounted = vue.shallowRef(false);
   const instance = vue.getCurrentInstance();
   if (instance) {
     vue.onMounted(() => {
@@ -455,9 +455,9 @@ function useSupported(callback) {
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
-  const ssrSupport = vue.ref(typeof ssrWidth === "number");
+  const ssrSupport = vue.shallowRef(typeof ssrWidth === "number");
   const mediaQuery = vue.shallowRef();
-  const matches = vue.ref(false);
+  const matches = vue.shallowRef(false);
   const handler = (event) => {
     matches.value = event.matches;
   };
@@ -750,7 +750,7 @@ function useColorMode(options = {}) {
   return Object.assign(auto, { store, system, state });
 }
 
-const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseColorMode = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -767,7 +767,7 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDark = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -783,7 +783,7 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = core.useDeviceMotion();
@@ -794,7 +794,7 @@ const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = vue.reactive(core.useDeviceOrientation());
@@ -805,7 +805,7 @@ const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent
   }
 });
 
-const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -818,7 +818,7 @@ const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent(
   }
 });
 
-const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDevicesList = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -830,7 +830,7 @@ const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -843,7 +843,7 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponen
   }
 });
 
-const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -864,7 +864,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     "containerElement"
   ],
   setup(props, { slots }) {
-    const target = vue.ref();
+    const target = vue.shallowRef();
     const handle = vue.computed(() => {
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
@@ -903,11 +903,11 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseElementBounding = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
-    const target = vue.ref();
+    const target = vue.shallowRef();
     const data = vue.reactive(core.useElementBounding(target));
     return () => {
       if (slots.default)
@@ -1004,14 +1004,14 @@ function useElementBounding(target, options = {}) {
     immediate = true,
     updateTiming = "sync"
   } = options;
-  const height = vue.ref(0);
-  const bottom = vue.ref(0);
-  const left = vue.ref(0);
-  const right = vue.ref(0);
-  const top = vue.ref(0);
-  const width = vue.ref(0);
-  const x = vue.ref(0);
-  const y = vue.ref(0);
+  const height = vue.shallowRef(0);
+  const bottom = vue.shallowRef(0);
+  const left = vue.shallowRef(0);
+  const right = vue.shallowRef(0);
+  const top = vue.shallowRef(0);
+  const width = vue.shallowRef(0);
+  const x = vue.shallowRef(0);
+  const y = vue.shallowRef(0);
   function recalculate() {
     const el = unrefElement(target);
     if (!el) {
@@ -1134,7 +1134,7 @@ function useElementHover(el, options = {}) {
     triggerOnRemoval = false,
     window = defaultWindow
   } = options;
-  const isHovered = vue.ref(false);
+  const isHovered = vue.shallowRef(false);
   let timer;
   const toggle = (entering) => {
     const delay = entering ? delayEnter : delayLeave;
@@ -1174,7 +1174,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseElementSize = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box", "as"],
   setup(props, { slots }) {
@@ -1193,8 +1193,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
     var _a, _b;
     return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
   });
-  const width = vue.ref(initialSize.width);
-  const height = vue.ref(initialSize.height);
+  const width = vue.shallowRef(initialSize.width);
+  const height = vue.shallowRef(initialSize.height);
   const { stop: stop1 } = useResizeObserver(
     target,
     ([entry]) => {
@@ -1254,7 +1254,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseElementVisibility = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -1283,7 +1283,7 @@ function useIntersectionObserver(target, callback, options = {}) {
     return shared.toArray(_target).map(unrefElement).filter(shared.notNullish);
   });
   let cleanup = shared.noop;
-  const isActive = vue.ref(immediate);
+  const isActive = vue.shallowRef(immediate);
   const stopWatch = isSupported.value ? vue.watch(
     () => [targets.value, unrefElement(root), isActive.value],
     ([targets2, root2]) => {
@@ -1336,7 +1336,7 @@ function useElementVisibility(element, options = {}) {
     rootMargin,
     once = false
   } = options;
-  const elementIsVisible = vue.ref(false);
+  const elementIsVisible = vue.shallowRef(false);
   const { stop } = useIntersectionObserver(
     element,
     (intersectionObserverEntries) => {
@@ -1379,7 +1379,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseEyeDropper = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -1393,7 +1393,7 @@ const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseFullscreen = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -1406,7 +1406,7 @@ const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseGeolocation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -1418,7 +1418,7 @@ const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseIdle = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1441,8 +1441,8 @@ function useAsyncState(promise, initialState, options) {
     throwError
   } = options != null ? options : {};
   const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
-  const isReady = vue.ref(false);
-  const isLoading = vue.ref(false);
+  const isReady = vue.shallowRef(false);
+  const isLoading = vue.shallowRef(false);
   const error = vue.shallowRef(void 0);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
@@ -1541,7 +1541,7 @@ function useImage(options, asyncStateOptions = {}) {
   return state;
 }
 
-const UseImage = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseImage = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1605,8 +1605,8 @@ function useScroll(element, options = {}) {
       console.error(e);
     }
   } = options;
-  const internalX = vue.ref(0);
-  const internalY = vue.ref(0);
+  const internalX = vue.shallowRef(0);
+  const internalY = vue.shallowRef(0);
   const x = vue.computed({
     get() {
       return internalX.value;
@@ -1641,7 +1641,7 @@ function useScroll(element, options = {}) {
     if (y != null)
       internalY.value = scrollContainer.scrollTop;
   }
-  const isScrolling = vue.ref(false);
+  const isScrolling = vue.shallowRef(false);
   const arrivedState = vue.reactive({
     left: true,
     right: false,
@@ -1675,8 +1675,8 @@ function useScroll(element, options = {}) {
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = scrollLeft * directionMultipler <= (offset.left || 0);
-    const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const left = Math.abs(scrollLeft * directionMultipler) <= (offset.left || 0);
+    const right = Math.abs(scrollLeft * directionMultipler) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1690,8 +1690,8 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = scrollTop <= (offset.top || 0);
-    const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = Math.abs(scrollTop) <= (offset.top || 0);
+    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;
@@ -1820,7 +1820,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseMouse = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1832,7 +1832,7 @@ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseMouseInElement = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
@@ -1865,9 +1865,9 @@ function useMouse(options = {}) {
   let _prevMouseEvent = null;
   let _prevScrollX = 0;
   let _prevScrollY = 0;
-  const x = vue.ref(initialValue.x);
-  const y = vue.ref(initialValue.y);
-  const sourceType = vue.ref(null);
+  const x = vue.shallowRef(initialValue.x);
+  const y = vue.shallowRef(initialValue.y);
+  const sourceType = vue.shallowRef(null);
   const extractor = typeof type === "function" ? type : UseMouseBuiltinExtractors[type];
   const mouseHandler = (event) => {
     const result = extractor(event);
@@ -1931,14 +1931,14 @@ function useMouseInElement(target, options = {}) {
   } = options;
   const type = options.type || "page";
   const { x, y, sourceType } = useMouse(options);
-  const targetRef = vue.ref(target != null ? target : window == null ? void 0 : window.document.body);
-  const elementX = vue.ref(0);
-  const elementY = vue.ref(0);
-  const elementPositionX = vue.ref(0);
-  const elementPositionY = vue.ref(0);
-  const elementHeight = vue.ref(0);
-  const elementWidth = vue.ref(0);
-  const isOutside = vue.ref(true);
+  const targetRef = vue.shallowRef(target != null ? target : window == null ? void 0 : window.document.body);
+  const elementX = vue.shallowRef(0);
+  const elementY = vue.shallowRef(0);
+  const elementPositionX = vue.shallowRef(0);
+  const elementPositionY = vue.shallowRef(0);
+  const elementHeight = vue.shallowRef(0);
+  const elementWidth = vue.shallowRef(0);
+  const isOutside = vue.shallowRef(true);
   let stop = () => {
   };
   if (window) {
@@ -1998,7 +1998,7 @@ const vMouseInElement = {
   }
 };
 
-const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseMousePressed = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
@@ -2011,7 +2011,7 @@ const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseNetwork = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = vue.reactive(core.useNetwork());
@@ -2022,7 +2022,7 @@ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseNow = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseNow = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -2034,7 +2034,7 @@ const UseNow = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseObjectUrl = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -2049,7 +2049,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -2090,7 +2090,7 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent(
   }
 });
 
-const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseOnline = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2103,7 +2103,7 @@ const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePageLeave = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2116,7 +2116,7 @@ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePointer = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -2124,7 +2124,7 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     "target"
   ],
   setup(props, { slots }) {
-    const el = vue.ref(null);
+    const el = vue.shallowRef(null);
     const data = vue.reactive(core.usePointer({
       ...props,
       target: props.target === "self" ? el : defaultWindow
@@ -2136,7 +2136,7 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UsePointerLock = /* #__PURE__ */ vue.defineComponent({
+const UsePointerLock = /*@__PURE__*/ vue.defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
@@ -2149,7 +2149,7 @@ const UsePointerLock = /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePreferredColorScheme = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2162,7 +2162,7 @@ const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vue.defineCompon
   }
 });
 
-const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2175,7 +2175,7 @@ const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent
   }
 });
 
-const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePreferredDark = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2188,7 +2188,7 @@ const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2201,7 +2201,7 @@ const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponen
   }
 });
 
-const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2214,7 +2214,7 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComp
   }
 });
 
-const UsePreferredReducedTransparency = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UsePreferredReducedTransparency = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UsePreferredReducedTransparency",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2238,7 +2238,7 @@ const vResizeObserver = {
 
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue, observe = false } = options;
-  const variable = vue.ref(initialValue);
+  const variable = vue.shallowRef(initialValue);
   const elRef = vue.computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
@@ -2264,7 +2264,8 @@ function useCssVar(prop, target, options = {}) {
       if (old[0] && old[1])
         old[0].style.removeProperty(old[1]);
       updateCssVar();
-    }
+    },
+    { immediate: true }
   );
   vue.watch(
     [variable, elRef],
@@ -2287,10 +2288,10 @@ const rightVarName = "--vueuse-safe-area-right";
 const bottomVarName = "--vueuse-safe-area-bottom";
 const leftVarName = "--vueuse-safe-area-left";
 function useScreenSafeArea() {
-  const top = vue.ref("");
-  const right = vue.ref("");
-  const bottom = vue.ref("");
-  const left = vue.ref("");
+  const top = vue.shallowRef("");
+  const right = vue.shallowRef("");
+  const bottom = vue.shallowRef("");
+  const left = vue.shallowRef("");
   if (shared.isClient) {
     const topCssVar = useCssVar(topVarName);
     const rightCssVar = useCssVar(rightVarName);
@@ -2321,7 +2322,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -2410,7 +2411,7 @@ function preventDefault(rawEvent) {
 }
 const elInitialOverflow = /* @__PURE__ */ new WeakMap();
 function useScrollLock(element, initialState = false) {
-  const isLocked = vue.ref(initialState);
+  const isLocked = vue.shallowRef(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow = "";
   vue.watch(shared.toRef(element), (el) => {
@@ -2471,7 +2472,7 @@ function useScrollLock(element, initialState = false) {
 
 function onScrollLock() {
   let isMounted = false;
-  const state = vue.ref(false);
+  const state = vue.shallowRef(false);
   return (el, binding) => {
     state.value = binding.value;
     if (isMounted)
@@ -2483,7 +2484,7 @@ function onScrollLock() {
 }
 const vScrollLock = onScrollLock();
 
-const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseTimeAgo = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -2495,7 +2496,7 @@ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseTimestamp = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -2507,7 +2508,7 @@ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseVirtualList = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -2526,7 +2527,7 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseWindowFocus = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = vue.reactive({
@@ -2539,7 +2540,7 @@ const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+const UseWindowSize = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {