@vueuse/components 12.7.0 → 12.8.0

package/index.iife.js

@@ -1,7 +1,7 @@
 (function (exports, core, vue, shared) {
   'use strict';
 
-  const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const OnClickOutside = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "OnClickOutside",
     props: ["as", "options"],
     emits: ["trigger"],
@@ -330,7 +330,7 @@
     return stop;
   }
 
-  const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const OnLongPress = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "OnLongPress",
     props: ["as", "options"],
     emits: ["trigger"],
@@ -359,7 +359,7 @@
     }
   };
 
-  const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseActiveElement = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseActiveElement",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -372,7 +372,7 @@
     }
   });
 
-  const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseBattery = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseBattery",
     setup(props, { slots }) {
       const data = vue.reactive(core.useBattery(props));
@@ -383,7 +383,7 @@
     }
   });
 
-  const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseBrowserLocation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseBrowserLocation",
     setup(props, { slots }) {
       const data = vue.reactive(core.useBrowserLocation());
@@ -394,7 +394,7 @@
     }
   });
 
-  const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseClipboard = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseClipboard",
     props: [
       "source",
@@ -452,7 +452,7 @@
   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.shallowRef(false);
     const handler = (event) => {
@@ -747,7 +747,7 @@
     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 }) {
@@ -764,7 +764,7 @@
     }
   });
 
-  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 }) {
@@ -780,7 +780,7 @@
     }
   });
 
-  const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseDeviceMotion = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseDeviceMotion",
     setup(props, { slots }) {
       const data = core.useDeviceMotion();
@@ -791,7 +791,7 @@
     }
   });
 
-  const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseDeviceOrientation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseDeviceOrientation",
     setup(props, { slots }) {
       const data = vue.reactive(core.useDeviceOrientation());
@@ -802,7 +802,7 @@
     }
   });
 
-  const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseDevicePixelRatio = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseDevicePixelRatio",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -815,7 +815,7 @@
     }
   });
 
-  const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseDevicesList = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseDevicesList",
     props: ["onUpdated", "requestPermissions", "constraints"],
     setup(props, { slots }) {
@@ -827,7 +827,7 @@
     }
   });
 
-  const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseDocumentVisibility = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseDocumentVisibility",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -840,7 +840,7 @@
     }
   });
 
-  const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseDraggable",
     props: [
       "storageKey",
@@ -900,7 +900,7 @@
     }
   });
 
-  const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseElementBounding = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseElementBounding",
     props: ["box", "as"],
     setup(props, { slots }) {
@@ -1171,7 +1171,7 @@
     }
   };
 
-  const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseElementSize = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseElementSize",
     props: ["width", "height", "box", "as"],
     setup(props, { slots }) {
@@ -1190,8 +1190,8 @@
       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]) => {
@@ -1251,7 +1251,7 @@
     }
   };
 
-  const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseElementVisibility = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseElementVisibility",
     props: ["as"],
     setup(props, { slots }) {
@@ -1280,7 +1280,7 @@
       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]) => {
@@ -1376,7 +1376,7 @@
     }
   };
 
-  const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseEyeDropper = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseEyeDropper",
     props: {
       sRGBHex: String
@@ -1390,7 +1390,7 @@
     }
   });
 
-  const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseFullscreen = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseFullscreen",
     props: ["as"],
     setup(props, { slots }) {
@@ -1403,7 +1403,7 @@
     }
   });
 
-  const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseGeolocation = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseGeolocation",
     props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
     setup(props, { slots }) {
@@ -1415,7 +1415,7 @@
     }
   });
 
-  const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseIdle = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseIdle",
     props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
     setup(props, { slots }) {
@@ -1538,7 +1538,7 @@
     return state;
   }
 
-  const UseImage = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseImage = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseImage",
     props: [
       "src",
@@ -1672,8 +1672,8 @@
       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;
@@ -1687,8 +1687,8 @@
         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;
@@ -1817,7 +1817,7 @@
     }
   };
 
-  const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseMouse = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseMouse",
     props: ["touch", "resetOnTouchEnds", "initialValue"],
     setup(props, { slots }) {
@@ -1829,7 +1829,7 @@
     }
   });
 
-  const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseMouseInElement = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseMouseElement",
     props: ["handleOutside", "as"],
     setup(props, { slots }) {
@@ -1928,7 +1928,7 @@
     } = 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 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);
@@ -1995,7 +1995,7 @@
     }
   };
 
-  const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseMousePressed = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
     setup(props, { slots }) {
@@ -2008,7 +2008,7 @@
     }
   });
 
-  const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseNetwork = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseNetwork",
     setup(props, { slots }) {
       const data = vue.reactive(core.useNetwork());
@@ -2019,7 +2019,7 @@
     }
   });
 
-  const UseNow = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseNow = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseNow",
     props: ["interval"],
     setup(props, { slots }) {
@@ -2031,7 +2031,7 @@
     }
   });
 
-  const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseObjectUrl = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseObjectUrl",
     props: [
       "object"
@@ -2046,7 +2046,7 @@
     }
   });
 
-  const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseOffsetPagination = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseOffsetPagination",
     props: [
       "total",
@@ -2087,7 +2087,7 @@
     }
   });
 
-  const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseOnline = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseOnline",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2100,7 +2100,7 @@
     }
   });
 
-  const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePageLeave = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePageLeave",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2113,7 +2113,7 @@
     }
   });
 
-  const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePointer = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePointer",
     props: [
       "pointerTypes",
@@ -2133,7 +2133,7 @@
     }
   });
 
-  const UsePointerLock = /* #__PURE__ */ vue.defineComponent({
+  const UsePointerLock = /*@__PURE__*/ vue.defineComponent({
     name: "UsePointerLock",
     props: ["as"],
     setup(props, { slots }) {
@@ -2146,7 +2146,7 @@
     }
   });
 
-  const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePreferredColorScheme = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePreferredColorScheme",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2159,7 +2159,7 @@
     }
   });
 
-  const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePreferredContrast = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePreferredContrast",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2172,7 +2172,7 @@
     }
   });
 
-  const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePreferredDark = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePreferredDark",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2185,7 +2185,7 @@
     }
   });
 
-  const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePreferredLanguages = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePreferredLanguages",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2198,7 +2198,7 @@
     }
   });
 
-  const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePreferredReducedMotion = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePreferredReducedMotion",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2211,7 +2211,7 @@
     }
   });
 
-  const UsePreferredReducedTransparency = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UsePreferredReducedTransparency = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UsePreferredReducedTransparency",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2261,7 +2261,8 @@
         if (old[0] && old[1])
           old[0].style.removeProperty(old[1]);
         updateCssVar();
-      }
+      },
+      { immediate: true }
     );
     vue.watch(
       [variable, elRef],
@@ -2318,7 +2319,7 @@
     return getComputedStyle(document.documentElement).getPropertyValue(position);
   }
 
-  const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseScreenSafeArea = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseScreenSafeArea",
     props: {
       top: Boolean,
@@ -2407,7 +2408,7 @@
   }
   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) => {
@@ -2480,7 +2481,7 @@
   }
   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 }) {
@@ -2492,7 +2493,7 @@
     }
   });
 
-  const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseTimestamp = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseTimestamp",
     props: ["immediate", "interval", "offset"],
     setup(props, { slots }) {
@@ -2504,7 +2505,7 @@
     }
   });
 
-  const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseVirtualList = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseVirtualList",
     props: [
       "list",
@@ -2523,7 +2524,7 @@
     }
   });
 
-  const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseWindowFocus = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseWindowFocus",
     setup(props, { slots }) {
       const data = vue.reactive({
@@ -2536,7 +2537,7 @@
     }
   });
 
-  const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  const UseWindowSize = /* @__PURE__ */ /*@__PURE__*/ vue.defineComponent({
     name: "UseWindowSize",
     props: ["initialWidth", "initialHeight"],
     setup(props, { slots }) {