@vueuse/components 12.7.0 → 12.8.0

package/index.mjs

@@ -1,8 +1,8 @@
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useClipboard, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding as useElementBounding$1, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse as useMouse$1, useMouseInElement as useMouseInElement$1, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, usePreferredReducedTransparency, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { defineComponent, shallowRef, h, toValue, computed, unref, reactive, hasInjectionContext, getCurrentInstance, onMounted, ref, watchEffect, watch, nextTick, toRefs } from 'vue';
+import { defineComponent, shallowRef, h, toValue, computed, unref, reactive, hasInjectionContext, getCurrentInstance, onMounted, watchEffect, ref, watch, nextTick, toRefs } from 'vue';
 import { isClient, toArray, watchImmediate, isObject, tryOnScopeDispose, noop, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, watchOnce, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted, reactiveOmit } from '@vueuse/shared';
 
-const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const OnClickOutside = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -331,7 +331,7 @@ function onLongPress(target, handler, options) {
   return stop;
 }
 
-const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const OnLongPress = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -360,7 +360,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseActiveElement = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = reactive({
@@ -373,7 +373,7 @@ const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseBattery = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseBattery = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = reactive(useBattery(props));
@@ -384,7 +384,7 @@ const UseBattery = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = reactive(useBrowserLocation());
@@ -395,7 +395,7 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseClipboard = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseClipboard",
   props: [
     "source",
@@ -453,7 +453,7 @@ 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 = ref(typeof ssrWidth === "number");
+  const ssrSupport = shallowRef(typeof ssrWidth === "number");
   const mediaQuery = shallowRef();
   const matches = shallowRef(false);
   const handler = (event) => {
@@ -748,7 +748,7 @@ function useColorMode(options = {}) {
   return Object.assign(auto, { store, system, state });
 }
 
-const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseColorMode = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -765,7 +765,7 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDark = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -781,7 +781,7 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = useDeviceMotion();
@@ -792,7 +792,7 @@ const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = reactive(useDeviceOrientation());
@@ -803,7 +803,7 @@ const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = reactive({
@@ -816,7 +816,7 @@ const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDevicesList = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -828,7 +828,7 @@ const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = reactive({
@@ -841,7 +841,7 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseDraggable = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -901,7 +901,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseElementBounding = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
@@ -1172,7 +1172,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseElementSize = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box", "as"],
   setup(props, { slots }) {
@@ -1191,8 +1191,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 = ref(initialSize.width);
-  const height = ref(initialSize.height);
+  const width = shallowRef(initialSize.width);
+  const height = shallowRef(initialSize.height);
   const { stop: stop1 } = useResizeObserver(
     target,
     ([entry]) => {
@@ -1252,7 +1252,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseElementVisibility = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -1281,7 +1281,7 @@ function useIntersectionObserver(target, callback, options = {}) {
     return toArray(_target).map(unrefElement).filter(notNullish);
   });
   let cleanup = noop;
-  const isActive = ref(immediate);
+  const isActive = shallowRef(immediate);
   const stopWatch = isSupported.value ? watch(
     () => [targets.value, unrefElement(root), isActive.value],
     ([targets2, root2]) => {
@@ -1377,7 +1377,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseEyeDropper = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -1391,7 +1391,7 @@ const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseFullscreen = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -1404,7 +1404,7 @@ const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseGeolocation = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -1416,7 +1416,7 @@ const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseIdle = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseIdle = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1539,7 +1539,7 @@ function useImage(options, asyncStateOptions = {}) {
   return state;
 }
 
-const UseImage = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseImage = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1673,8 +1673,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;
@@ -1688,8 +1688,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;
@@ -1818,7 +1818,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseMouse = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1830,7 +1830,7 @@ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseMouseInElement = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
@@ -1929,7 +1929,7 @@ function useMouseInElement(target, options = {}) {
   } = options;
   const type = options.type || "page";
   const { x, y, sourceType } = useMouse(options);
-  const targetRef = ref(target != null ? target : window == null ? void 0 : window.document.body);
+  const targetRef = shallowRef(target != null ? target : window == null ? void 0 : window.document.body);
   const elementX = shallowRef(0);
   const elementY = shallowRef(0);
   const elementPositionX = shallowRef(0);
@@ -1996,7 +1996,7 @@ const vMouseInElement = {
   }
 };
 
-const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseMousePressed = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
@@ -2009,7 +2009,7 @@ const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseNetwork = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = reactive(useNetwork());
@@ -2020,7 +2020,7 @@ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseNow = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseNow = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -2032,7 +2032,7 @@ const UseNow = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseObjectUrl = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -2047,7 +2047,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -2088,7 +2088,7 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseOnline = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseOnline = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = reactive({
@@ -2101,7 +2101,7 @@ const UseOnline = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePageLeave = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = reactive({
@@ -2114,7 +2114,7 @@ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePointer = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePointer = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -2134,7 +2134,7 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePointerLock = /* #__PURE__ */ defineComponent({
+const UsePointerLock = /*@__PURE__*/ defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
@@ -2147,7 +2147,7 @@ const UsePointerLock = /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePreferredColorScheme = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = reactive({
@@ -2160,7 +2160,7 @@ const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ defineComponent(
   }
 });
 
-const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = reactive({
@@ -2173,7 +2173,7 @@ const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePreferredDark = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = reactive({
@@ -2186,7 +2186,7 @@ const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = reactive({
@@ -2199,7 +2199,7 @@ const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = reactive({
@@ -2212,7 +2212,7 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponen
   }
 });
 
-const UsePreferredReducedTransparency = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UsePreferredReducedTransparency = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UsePreferredReducedTransparency",
   setup(props, { slots }) {
     const data = reactive({
@@ -2262,7 +2262,8 @@ function useCssVar(prop, target, options = {}) {
       if (old[0] && old[1])
         old[0].style.removeProperty(old[1]);
       updateCssVar();
-    }
+    },
+    { immediate: true }
   );
   watch(
     [variable, elRef],
@@ -2319,7 +2320,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -2408,7 +2409,7 @@ function preventDefault(rawEvent) {
 }
 const elInitialOverflow = /* @__PURE__ */ new WeakMap();
 function useScrollLock(element, initialState = false) {
-  const isLocked = ref(initialState);
+  const isLocked = shallowRef(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow = "";
   watch(toRef(element), (el) => {
@@ -2481,7 +2482,7 @@ function onScrollLock() {
 }
 const vScrollLock = onScrollLock();
 
-const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseTimeAgo = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -2493,7 +2494,7 @@ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseTimestamp = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -2505,7 +2506,7 @@ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseVirtualList = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -2524,7 +2525,7 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseWindowFocus = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = reactive({
@@ -2537,7 +2538,7 @@ const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+const UseWindowSize = /* @__PURE__ */ /*@__PURE__*/ defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/components",
   "type": "module",
-  "version": "12.7.0",
+  "version": "12.8.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -42,8 +42,8 @@
   ],
   "dependencies": {
     "vue": "^3.5.13",
-    "@vueuse/shared": "12.7.0",
-    "@vueuse/core": "12.7.0"
+    "@vueuse/core": "12.8.0",
+    "@vueuse/shared": "12.8.0"
   },
   "scripts": {
     "build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild"