@vueuse/components 8.9.4 → 9.0.0-beta.2

package/index.cjs

@@ -24,7 +24,7 @@ const OnClickOutside = vueDemi.defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = vueDemi.unref(elRef);
+  const plain = shared.resolveUnref(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -142,19 +142,19 @@ function onKeyStroke(key, handler, options = {}) {
   return useEventListener(target, eventName, listener, passive);
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
@@ -168,7 +168,7 @@ const vOnKeyStroke = {
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$c({
+      onKeyStroke(keys, handler, __spreadValues$d({
         target: el
       }, options));
     }
@@ -278,6 +278,22 @@ function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
 
+var __defProp$c = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
+    }
+  return a;
+};
 const StorageSerializers = {
   boolean: {
     read: (v) => v === "true",
@@ -312,13 +328,14 @@ const StorageSerializers = {
     write: (v) => v.toISOString()
   }
 };
-function useStorage(key, initialValue, storage, options = {}) {
+function useStorage(key, defaults, storage, options = {}) {
   var _a;
   const {
     flush = "pre",
     deep = true,
     listenToStorageChanges = true,
     writeDefaults = true,
+    mergeDefaults = false,
     shallow,
     window = defaultWindow,
     eventFilter,
@@ -326,7 +343,7 @@ function useStorage(key, initialValue, storage, options = {}) {
       console.error(e);
     }
   } = options;
-  const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
+  const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
   if (!storage) {
     try {
       storage = getSSRHandler("getDefaultStorage", () => {
@@ -339,7 +356,7 @@ function useStorage(key, initialValue, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = vueDemi.unref(initialValue);
+  const rawInit = shared.resolveUnref(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 });
@@ -367,6 +384,13 @@ function useStorage(key, initialValue, storage, options = {}) {
         if (writeDefaults && rawInit !== null)
           storage.setItem(key, serializer.write(rawInit));
         return rawInit;
+      } else if (!event && mergeDefaults) {
+        const value = serializer.read(rawValue);
+        if (shared.isFunction(mergeDefaults))
+          return mergeDefaults(value, rawInit);
+        else if (type === "object" && !Array.isArray(value))
+          return __spreadValues$c(__spreadValues$c({}, rawInit), value);
+        return value;
       } else if (typeof rawValue !== "string") {
         return rawValue;
       } else {
@@ -385,13 +409,21 @@ function useStorage(key, initialValue, storage, options = {}) {
   }
 }
 
+function useSupported(callback, sync = false) {
+  const isSupported = vueDemi.ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  shared.tryOnMounted(update, sync);
+  return isSupported;
+}
+
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
-  const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = vueDemi.ref(false);
   const update = () => {
-    if (!isSupported)
+    if (!isSupported.value)
       return;
     if (!mediaQuery)
       mediaQuery = window.matchMedia(query);
@@ -439,6 +471,7 @@ function useColorMode(options = {}) {
   const {
     selector = "html",
     attribute = "class",
+    initialValue = "auto",
     window = defaultWindow,
     storage,
     storageKey = "vueuse-color-scheme",
@@ -453,7 +486,7 @@ function useColorMode(options = {}) {
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
   const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
-  const store = storageRef || (storageKey == null ? vueDemi.ref("auto") : useStorage(storageKey, "auto", storage, { window, listenToStorageChanges }));
+  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;
@@ -618,7 +651,7 @@ const UseDraggable = vueDemi.defineComponent({
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    const initialValue = props.storageKey ? core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
     const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
       initialValue
     })));
@@ -689,7 +722,7 @@ var __objRest = (source, exclude) => {
 function useResizeObserver(target, callback, options = {}) {
   const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
   let observer;
-  const isSupported = window && "ResizeObserver" in window;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
@@ -698,7 +731,7 @@ function useResizeObserver(target, callback, options = {}) {
   };
   const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
     cleanup();
-    if (isSupported && window && el) {
+    if (isSupported.value && window && el) {
       observer = new ResizeObserver(callback);
       observer.observe(el, observerOptions);
     }
@@ -762,16 +795,18 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     if (!window)
       return;
     const document = window.document;
-    if (!vueDemi.unref(element)) {
+    const el = shared.resolveUnref(element);
+    if (!el) {
       elementIsVisible.value = false;
     } else {
-      const rect = vueDemi.unref(element).getBoundingClientRect();
+      const rect = el.getBoundingClientRect();
       elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
     }
   };
   shared.tryOnMounted(testBounding);
-  if (window)
-    shared.tryOnMounted(() => useEventListener(vueDemi.unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  if (window) {
+    shared.tryOnMounted(() => useEventListener(() => shared.resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  }
   return elementIsVisible;
 }
 
@@ -846,7 +881,8 @@ function useAsyncState(promise, initialState, options) {
     delay = 0,
     onError = shared.noop,
     resetOnExecute = true,
-    shallow = true
+    shallow = true,
+    throwError
   } = options != null ? options : {};
   const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
   const isReady = vueDemi.ref(false);
@@ -868,6 +904,8 @@ function useAsyncState(promise, initialState, options) {
     } catch (e) {
       error.value = e;
       onError(e);
+      if (throwError)
+        throw error;
     } finally {
       isLoading.value = false;
     }
@@ -914,10 +952,10 @@ async function loadImage(options) {
   });
 }
 const useImage = (options, asyncStateOptions = {}) => {
-  const state = useAsyncState(() => loadImage(vueDemi.unref(options)), void 0, __spreadValues$9({
+  const state = useAsyncState(() => loadImage(shared.resolveUnref(options)), void 0, __spreadValues$9({
     resetOnExecute: true
   }, asyncStateOptions));
-  vueDemi.watch(() => vueDemi.unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+  vueDemi.watch(() => shared.resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
   return state;
 };
 
@@ -975,37 +1013,35 @@ function useScroll(element, options = {}) {
     top: false,
     bottom: false
   });
-  if (element) {
-    const onScrollEnd = shared.useDebounceFn((e) => {
-      isScrolling.value = false;
-      directions.left = false;
-      directions.right = false;
-      directions.top = false;
-      directions.bottom = false;
-      onStop(e);
-    }, throttle + idle);
-    const onScrollHandler = (e) => {
-      const eventTarget = e.target === document ? e.target.documentElement : e.target;
-      const scrollLeft = eventTarget.scrollLeft;
-      directions.left = scrollLeft < x.value;
-      directions.right = scrollLeft > x.value;
-      arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-      arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
-      x.value = scrollLeft;
-      let scrollTop = eventTarget.scrollTop;
-      if (e.target === document && !scrollTop)
-        scrollTop = document.body.scrollTop;
-      directions.top = scrollTop < y.value;
-      directions.bottom = scrollTop > y.value;
-      arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-      arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
-      y.value = scrollTop;
-      isScrolling.value = true;
-      onScrollEnd(e);
-      onScroll(e);
-    };
-    useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
-  }
+  const onScrollEnd = shared.useDebounceFn((e) => {
+    isScrolling.value = false;
+    directions.left = false;
+    directions.right = false;
+    directions.top = false;
+    directions.bottom = false;
+    onStop(e);
+  }, throttle + idle);
+  const onScrollHandler = (e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const scrollLeft = eventTarget.scrollLeft;
+    directions.left = scrollLeft < x.value;
+    directions.right = scrollLeft > x.value;
+    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
+    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
+    x.value = scrollLeft;
+    let scrollTop = eventTarget.scrollTop;
+    if (e.target === document && !scrollTop)
+      scrollTop = document.body.scrollTop;
+    directions.top = scrollTop < y.value;
+    directions.bottom = scrollTop > y.value;
+    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
+    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
+    y.value = scrollTop;
+    isScrolling.value = true;
+    onScrollEnd(e);
+    onScroll(e);
+  };
+  useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
   return {
     x,
     y,
@@ -1045,7 +1081,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   vueDemi.watch(() => state.arrivedState[direction], async (v) => {
     var _a2, _b2;
     if (v) {
-      const elem = vueDemi.unref(element);
+      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
@@ -1079,9 +1115,9 @@ function useIntersectionObserver(target, callback, options = {}) {
     threshold = 0.1,
     window = defaultWindow
   } = options;
-  const isSupported = window && "IntersectionObserver" in window;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = shared.noop;
-  const stopWatch = isSupported ? vueDemi.watch(() => ({
+  const stopWatch = isSupported.value ? vueDemi.watch(() => ({
     el: unrefElement(target),
     root: unrefElement(root)
   }), ({ el, root: root2 }) => {
@@ -1401,7 +1437,7 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
-  vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
+  vueDemi.watch([elRef, () => shared.resolveUnref(prop)], ([el, prop2]) => {
     var _a;
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
@@ -1411,7 +1447,7 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
   vueDemi.watch(variable, (val) => {
     var _a;
     if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(vueDemi.unref(prop), val);
+      elRef.value.style.setProperty(shared.resolveUnref(prop), val);
   });
   return variable;
 }
@@ -1550,7 +1586,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = vueDemi.ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  vueDemi.watch(() => vueDemi.unref(element), (el) => {
+  vueDemi.watch(shared.resolveRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1561,7 +1597,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = vueDemi.unref(element);
+    const ele = shared.resolveUnref(element);
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
@@ -1571,7 +1607,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = vueDemi.unref(element);
+    const ele = shared.resolveUnref(element);
     if (!ele || !isLocked.value)
       return;
     shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
@@ -1629,8 +1665,7 @@ const UseTimeAgo = vueDemi.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
   setup(props, { slots }) {
-    const time = vueDemi.toRef(props, "time");
-    const data = vueDemi.reactive(core.useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+    const data = vueDemi.reactive(core.useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
     return () => {
       if (slots.default)
         return slots.default(data);

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
 import { FunctionDirective, ObjectDirective, ComponentPublicInstance, Ref, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
-import { MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
+import { MaybeComputedRef, MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -21,18 +21,19 @@ declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {},
 declare const vOnClickOutside: FunctionDirective<any, <E = PointerEvent>(evt: E) => void>;
 
 declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
-interface KeyStrokeOptions {
+interface OnKeyStrokeOptions {
     eventName?: KeyStrokeEventName;
-    target?: MaybeRef<EventTarget>;
+    target?: MaybeComputedRef<EventTarget>;
     passive?: boolean;
 }
 
 declare type BindingValueFunction$7 = (event: KeyboardEvent) => void;
-declare type BindingValueArray$6 = [BindingValueFunction$7, KeyStrokeOptions];
+declare type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
 declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
 
 declare type VueInstance = ComponentPublicInstance;
 declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+declare type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
 declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
 interface OnLongPressOptions {
@@ -86,7 +87,7 @@ interface Serializer<T> {
     read(raw: string): T;
     write(value: T): string;
 }
-interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
+interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
      * Watch for deep changes
      *
@@ -105,6 +106,15 @@ interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow,
      * @default true
      */
     writeDefaults?: boolean;
+    /**
+     * Merge the default value with the value read from the storage.
+     *
+     * When setting it to true, it will perform a **shallow merge** for objects.
+     * You can pass a function to perform custom merge (e.g. deep merge), for example:
+     *
+     * @default false
+     */
+    mergeDefaults?: boolean | ((storageValue: T, defaults: T) => T);
     /**
      * Custom data serialization
      */
@@ -124,7 +134,7 @@ interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow,
 }
 
 declare type BasicColorSchema = 'light' | 'dark' | 'auto';
-interface UseColorModeOptions<T extends string = BasicColorSchema> extends StorageOptions<T | BasicColorSchema> {
+interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseStorageOptions<T | BasicColorSchema> {
     /**
      * CSS Selector for the target element applying to
      *
@@ -137,6 +147,12 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends Stora
      * @default 'class'
      */
     attribute?: string;
+    /**
+     * The initial color mode
+     *
+     * @default 'auto'
+     */
+    initialValue?: T | BasicColorSchema;
     /**
      * Prefix when adding value to the attribute
      */
@@ -215,7 +231,7 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 }
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
 
-interface ResizeObserverOptions extends ConfigurableWindow {
+interface UseResizeObserverOptions extends ConfigurableWindow {
     /**
      * Sets which box model the observer will observe changes to. Possible values
      * are `content-box` (the default), and `border-box`.
@@ -225,12 +241,12 @@ interface ResizeObserverOptions extends ConfigurableWindow {
     box?: 'content-box' | 'border-box';
 }
 
-declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ResizeObserverOptions & RenderableComponent>, {}>;
+declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}>;
 
 declare type BindingValueFunction$5 = (state: boolean) => void;
 declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & ResizeObserverOptions & RenderableComponent>, {}>;
+declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}>;
 
 interface ElementSize {
     width: number;
@@ -244,7 +260,7 @@ interface ElementSize {
  * @param callback
  * @param options
  */
-declare function useElementSize(target: MaybeElementRef, initialSize?: ElementSize, options?: ResizeObserverOptions): {
+declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
     width: vue_demi.Ref<number>;
     height: vue_demi.Ref<number>;
 };
@@ -257,12 +273,12 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
-interface VisibilityScrollTargetOptions extends ConfigurableWindow {
-    scrollTarget?: MaybeRef<Element | null | undefined>;
+interface UseElementVisibilityOptions extends ConfigurableWindow {
+    scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>;
 }
 
 declare type BindingValueFunction$3 = (state: boolean) => void;
-declare type BindingValueArray$3 = [BindingValueFunction$3, VisibilityScrollTargetOptions];
+declare type BindingValueArray$3 = [BindingValueFunction$3, UseElementVisibilityOptions];
 declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
 declare const UseEyeDropper: vue_demi.DefineComponent<{
@@ -275,11 +291,11 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
 
 declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
-declare const UseGeolocation: vue_demi.DefineComponent<GeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<GeolocationOptions>, {}>;
+declare const UseGeolocation: vue_demi.DefineComponent<UseGeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseGeolocationOptions>, {}>;
 
-declare const UseIdle: vue_demi.DefineComponent<IdleOptions & {
+declare const UseIdle: vue_demi.DefineComponent<UseIdleOptions & {
     timeout: number;
-}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<IdleOptions & {
+}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseIdleOptions & {
     timeout: number;
 }>, {}>;
 
@@ -342,7 +358,7 @@ interface UseScrollOptions {
  * @param element
  * @param options
  */
-declare function useScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
+declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
     x: vue_demi.Ref<number>;
     y: vue_demi.Ref<number>;
     isScrolling: vue_demi.Ref<boolean>;
@@ -386,13 +402,13 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
 declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-interface IntersectionObserverOptions extends ConfigurableWindow {
+interface UseIntersectionObserverOptions extends ConfigurableWindow {
     /**
      * The Element or Document whose bounds are used as the bounding box when testing for intersection.
      */
@@ -408,10 +424,10 @@ interface IntersectionObserverOptions extends ConfigurableWindow {
 }
 
 declare type BindingValueFunction$1 = IntersectionObserverCallback;
-declare type BindingValueArray$1 = [BindingValueFunction$1, IntersectionObserverOptions];
+declare type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
-declare const UseMouse: vue_demi.DefineComponent<MouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseOptions>, {}>;
+declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseMouseOptions>, {}>;
 
 declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseInElementOptions & RenderableComponent>, {}>;
 
@@ -524,7 +540,7 @@ interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'cont
 }
 declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}>;
 
-declare const UseTimestamp: vue_demi.DefineComponent<Omit<TimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<TimestampOptions<true>, "controls">>, {}>;
+declare const UseTimestamp: vue_demi.DefineComponent<Omit<UseTimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseTimestampOptions<true>, "controls">>, {}>;
 
 interface UseVirtualListProps {
     /**
@@ -552,6 +568,6 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
-declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
+declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}>;
 
 export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };