@vueuse/components 12.7.0 → 12.8.1

package/index.cjs

@@ -4,7 +4,7 @@ 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"],
@@ -333,7 +333,7 @@ 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"],
@@ -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",
@@ -455,7 +455,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 = vue.ref(typeof ssrWidth === "number");
+  const ssrSupport = vue.shallowRef(typeof ssrWidth === "number");
   const mediaQuery = vue.shallowRef();
   const matches = vue.shallowRef(false);
   const handler = (event) => {
@@ -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",
@@ -903,7 +903,7 @@ 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 }) {
@@ -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]) => {
@@ -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 }) {
@@ -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",
@@ -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 }) {
@@ -1931,7 +1931,7 @@ 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 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);
@@ -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",
@@ -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({
@@ -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],
@@ -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) => {
@@ -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 }) {

package/index.d.cts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
-import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
-import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
+import { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
 import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions as UseMouseOptions$1, MouseInElementOptions as MouseInElementOptions$1, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
+import { ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -416,8 +416,8 @@ interface ElementSize {
  * @see https://vueuse.org/useElementSize
  */
 declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
-    width: vue.Ref<number, number>;
-    height: vue.Ref<number, number>;
+    width: vue.ShallowRef<number, number>;
+    height: vue.ShallowRef<number, number>;
     stop: () => void;
 };
 

package/index.d.mts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
-import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
-import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
+import { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
 import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions as UseMouseOptions$1, MouseInElementOptions as MouseInElementOptions$1, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
+import { ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -416,8 +416,8 @@ interface ElementSize {
  * @see https://vueuse.org/useElementSize
  */
 declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
-    width: vue.Ref<number, number>;
-    height: vue.Ref<number, number>;
+    width: vue.ShallowRef<number, number>;
+    height: vue.ShallowRef<number, number>;
     stop: () => void;
 };
 

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
-import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
-import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
+import { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
 import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions as UseMouseOptions$1, MouseInElementOptions as MouseInElementOptions$1, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
+import { ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -416,8 +416,8 @@ interface ElementSize {
  * @see https://vueuse.org/useElementSize
  */
 declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
-    width: vue.Ref<number, number>;
-    height: vue.Ref<number, number>;
+    width: vue.ShallowRef<number, number>;
+    height: vue.ShallowRef<number, number>;
     stop: () => void;
 };