@vueuse/components 10.0.0-beta.3 → 10.0.0-beta.5

package/index.cjs

@@ -22,7 +22,7 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = shared.resolveUnref(elRef);
+  const plain = shared.toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -33,7 +33,7 @@ function useEventListener(...args) {
   let events;
   let listeners;
   let options;
-  if (shared.isString(args[0]) || Array.isArray(args[0])) {
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
     [events, listeners, options] = args;
     target = defaultWindow;
   } else {
@@ -55,7 +55,7 @@ function useEventListener(...args) {
     return () => el.removeEventListener(event, listener, options2);
   };
   const stopWatch = vueDemi.watch(
-    () => [unrefElement(target), shared.resolveUnref(options)],
+    () => [unrefElement(target), shared.toValue(options)],
     ([el, options2]) => {
       cleanup();
       if (!el)
@@ -179,7 +179,7 @@ function onKeyStroke(...args) {
   } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
-    if (e.repeat && shared.resolveUnref(dedupe))
+    if (e.repeat && shared.toValue(dedupe))
       return;
     if (predicate(e))
       handler(e);
@@ -320,8 +320,12 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompone
 
 const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 const globalKey = "__vueuse_ssr_handlers__";
-_global[globalKey] = _global[globalKey] || {};
-const handlers = _global[globalKey];
+const handlers = /* @__PURE__ */ getHandlers();
+function getHandlers() {
+  if (!(globalKey in _global))
+    _global[globalKey] = _global[globalKey] || {};
+  return _global[globalKey];
+}
 function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
@@ -409,7 +413,7 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = shared.resolveUnref(defaults);
+  const rawInit = shared.toValue(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
@@ -456,7 +460,7 @@ function useStorage(key, defaults, storage, options = {}) {
       return rawInit;
     } else if (!event && mergeDefaults) {
       const value = serializer.read(rawValue);
-      if (shared.isFunction(mergeDefaults))
+      if (typeof mergeDefaults === "function")
         return mergeDefaults(value, rawInit);
       else if (type === "object" && !Array.isArray(value))
         return __spreadValues$c(__spreadValues$c({}, rawInit), value);
@@ -528,7 +532,7 @@ function useMediaQuery(query, options = {}) {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(shared.resolveRef(query).value);
+    mediaQuery = window.matchMedia(shared.toRef(query).value);
     matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
     if (!mediaQuery)
       return;
@@ -573,8 +577,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
-    // TODO: switch to true in v10
-    disableTransition = false
+    disableTransition = true
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -582,11 +585,11 @@ function useColorMode(options = {}) {
     dark: "dark"
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
-  const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+  const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
   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;
+      return store.value === "auto" && !emitAuto ? system.value : store.value;
     },
     set(v) {
       store.value = v;
@@ -595,13 +598,12 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = window == null ? void 0 : window.document.querySelector(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : shared.toValue(selector2);
       if (!el)
         return;
       let style;
       if (disableTransition) {
         style = window.document.createElement("style");
-        style.type = "text/css";
         style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
         window.document.head.appendChild(style);
       }
@@ -624,7 +626,7 @@ function useColorMode(options = {}) {
   );
   function defaultOnChanged(mode) {
     var _a;
-    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    const resolvedMode = mode === "auto" ? system.value : mode;
     updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
   }
   function onChanged(mode) {
@@ -635,9 +637,13 @@ function useColorMode(options = {}) {
   }
   vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
   if (emitAuto)
-    vueDemi.watch(preferredMode, () => onChanged(state.value), { flush: "post" });
+    vueDemi.watch(system, () => onChanged(state.value), { flush: "post" });
   shared.tryOnMounted(() => onChanged(state.value));
-  return state;
+  try {
+    return Object.assign(state, { store, system });
+  } catch (e) {
+    return state;
+  }
 }
 
 const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -646,7 +652,9 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = vueDemi.reactive({
-      mode
+      mode,
+      system: mode.system,
+      store: mode.store
     });
     return () => {
       if (slots.default)
@@ -772,7 +780,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     });
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
-      shared.resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      shared.toValue(props.initialValue) || { x: 0, y: 0 },
       core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
@@ -981,23 +989,24 @@ function useIntersectionObserver(target, callback, options = {}) {
     root,
     rootMargin = "0px",
     threshold = 0.1,
-    window = defaultWindow
+    window = defaultWindow,
+    immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = shared.noop;
+  const isActive = vueDemi.ref(immediate);
   const stopWatch = isSupported.value ? vueDemi.watch(
-    () => ({
-      el: unrefElement(target),
-      root: unrefElement(root)
-    }),
-    ({ el, root: root2 }) => {
+    () => [unrefElement(target), unrefElement(root), isActive.value],
+    ([el, root2]) => {
       cleanup();
+      if (!isActive.value)
+        return;
       if (!el)
         return;
       const observer = new IntersectionObserver(
         callback,
         {
-          root: root2,
+          root: unrefElement(root2),
           rootMargin,
           threshold
         }
@@ -1008,15 +1017,24 @@ function useIntersectionObserver(target, callback, options = {}) {
         cleanup = shared.noop;
       };
     },
-    { immediate: true, flush: "post" }
+    { immediate, flush: "post" }
   ) : shared.noop;
   const stop = () => {
     cleanup();
     stopWatch();
+    isActive.value = false;
   };
   shared.tryOnScopeDispose(stop);
   return {
     isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
     stop
   };
 }
@@ -1181,14 +1199,14 @@ async function loadImage(options) {
 }
 function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
-    () => loadImage(shared.resolveUnref(options)),
+    () => loadImage(shared.toValue(options)),
     void 0,
     __spreadValues$9({
       resetOnExecute: true
     }, asyncStateOptions)
   );
   vueDemi.watch(
-    () => shared.resolveUnref(options),
+    () => shared.toValue(options),
     () => state.execute(asyncStateOptions.delay),
     { deep: true }
   );
@@ -1256,13 +1274,13 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
-    const _element = shared.resolveUnref(element);
+    const _element = shared.toValue(element);
     if (!_element)
       return;
     (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-      top: (_a = shared.resolveUnref(_y)) != null ? _a : y.value,
-      left: (_b = shared.resolveUnref(_x)) != null ? _b : x.value,
-      behavior: shared.resolveUnref(behavior)
+      top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+      left: (_b = shared.toValue(_x)) != null ? _b : x.value,
+      behavior: shared.toValue(behavior)
     });
   }
   const isScrolling = vueDemi.ref(false);
@@ -1291,19 +1309,34 @@ function useScroll(element, options = {}) {
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const { display, flexDirection } = getComputedStyle(eventTarget);
     const scrollLeft = eventTarget.scrollLeft;
     directions.left = scrollLeft < internalX.value;
-    directions.right = scrollLeft > internalY.value;
-    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    directions.right = scrollLeft > internalX.value;
+    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "row-reverse") {
+      arrivedState.left = right;
+      arrivedState.right = left;
+    } else {
+      arrivedState.left = left;
+      arrivedState.right = right;
+    }
     internalX.value = scrollLeft;
     let scrollTop = eventTarget.scrollTop;
     if (e.target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "column-reverse") {
+      arrivedState.top = bottom;
+      arrivedState.bottom = top;
+    } else {
+      arrivedState.top = top;
+      arrivedState.bottom = bottom;
+    }
     internalY.value = scrollTop;
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1350,38 +1383,46 @@ var __spreadValues$8 = (a, b) => {
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function useInfiniteScroll(element, onLoadMore, options = {}) {
-  var _a, _b;
-  const direction = (_a = options.direction) != null ? _a : "bottom";
+  var _a;
+  const {
+    direction = "bottom",
+    interval = 100
+  } = options;
   const state = vueDemi.reactive(useScroll(
     element,
     __spreadProps$7(__spreadValues$8({}, options), {
       offset: __spreadValues$8({
-        [direction]: (_b = options.distance) != null ? _b : 0
+        [direction]: (_a = options.distance) != null ? _a : 0
       }, options.offset)
     })
   ));
-  vueDemi.watch(
-    () => state.arrivedState[direction],
-    async (v) => {
-      var _a2, _b2;
-      if (v) {
-        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
-        };
-        await onLoadMore(state);
-        if (options.preserveScrollPosition && elem) {
-          vueDemi.nextTick(() => {
-            elem.scrollTo({
-              top: elem.scrollHeight - previous.height,
-              left: elem.scrollWidth - previous.width
-            });
-          });
-        }
+  const promise = vueDemi.ref();
+  const isLoading = vueDemi.computed(() => !!promise.value);
+  function checkAndLoad() {
+    const el = shared.toValue(element);
+    if (!el)
+      return;
+    const isNarrower = direction === "bottom" || direction === "top" ? el.scrollHeight <= el.clientHeight : el.scrollWidth <= el.clientWidth;
+    if (state.arrivedState[direction] || isNarrower) {
+      if (!promise.value) {
+        promise.value = Promise.all([
+          onLoadMore(state),
+          new Promise((resolve) => setTimeout(resolve, interval))
+        ]).finally(() => {
+          promise.value = null;
+          vueDemi.nextTick(() => checkAndLoad());
+        });
       }
     }
+  }
+  vueDemi.watch(
+    () => [state.arrivedState[direction], shared.toValue(element)],
+    checkAndLoad,
+    { immediate: true }
   );
+  return {
+    isLoading
+  };
 }
 
 const vInfiniteScroll = {
@@ -1507,7 +1548,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "object"
   ],
   setup(props, { slots }) {
-    const object = vueDemi.toRef(props, "object");
+    const object = shared.toRef(props, "object");
     const url = core.useObjectUrl(object);
     return () => {
       if (slots.default && url.value)
@@ -1726,8 +1767,8 @@ function useCssVar(prop, target, options = {}) {
   });
   function updateCssVar() {
     var _a;
-    const key = shared.resolveUnref(prop);
-    const el = shared.resolveUnref(elRef);
+    const key = shared.toValue(prop);
+    const el = shared.toValue(elRef);
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
@@ -1740,7 +1781,7 @@ function useCssVar(prop, target, options = {}) {
     });
   }
   vueDemi.watch(
-    [elRef, () => shared.resolveUnref(prop)],
+    [elRef, () => shared.toValue(prop)],
     updateCssVar,
     { immediate: true }
   );
@@ -1749,7 +1790,7 @@ function useCssVar(prop, target, options = {}) {
     (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(shared.resolveUnref(prop), val);
+        elRef.value.style.setProperty(shared.toValue(prop), val);
     }
   );
   return variable;
@@ -1903,7 +1944,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = vueDemi.ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  vueDemi.watch(shared.resolveRef(element), (el) => {
+  vueDemi.watch(shared.toRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1914,7 +1955,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = shared.resolveUnref(element);
+    const ele = shared.toValue(element);
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
@@ -1931,7 +1972,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = shared.resolveUnref(element);
+    const ele = shared.toValue(element);
     if (!ele || !isLocked.value)
       return;
     shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue_demi from 'vue-demi';
 import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, ComputedRef, FunctionDirective } from 'vue-demi';
-import { MaybeRef, MaybeComputedRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
+import { MaybeRef, MaybeRefOrGetter, ConfigurableEventFilter, ConfigurableFlush, Awaitable } 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 {
@@ -18,7 +18,7 @@ interface RenderableComponent {
 
 type VueInstance = ComponentPublicInstance;
 type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
-type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
+type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
 type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
 interface OnClickOutsideOptions extends ConfigurableWindow {
@@ -53,14 +53,14 @@ declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandle
 type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
 interface OnKeyStrokeOptions {
     eventName?: KeyStrokeEventName;
-    target?: MaybeComputedRef<EventTarget | null | undefined>;
+    target?: MaybeRefOrGetter<EventTarget | null | undefined>;
     passive?: boolean;
     /**
      * Set to `true` to ignore repeated events when the key is being held down.
      *
      * @default false
      */
-    dedupe?: MaybeComputedRef<boolean>;
+    dedupe?: MaybeRefOrGetter<boolean>;
 }
 
 type BindingValueFunction$7 = (event: KeyboardEvent) => void;
@@ -171,7 +171,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      *
      * @default 'html'
      */
-    selector?: string;
+    selector?: string | MaybeRefOrGetter<HTMLElement | null | undefined>;
     /**
      * HTML attribute applying the target element
      *
@@ -228,7 +228,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      * Disable transition on switch
      *
      * @see https://paco.me/writing/disable-theme-transitions
-     * @default false
+     * @default true
      */
     disableTransition?: boolean;
 }
@@ -312,7 +312,7 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
 interface UseElementVisibilityOptions extends ConfigurableWindow {
-    scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>;
+    scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
 type BindingValueFunction$3 = (state: boolean) => void;
@@ -394,7 +394,7 @@ interface UseScrollOptions {
      *
      * @default 'auto'
      */
-    behavior?: MaybeComputedRef<ScrollBehavior>;
+    behavior?: MaybeRefOrGetter<ScrollBehavior>;
 }
 /**
  * Reactive scroll.
@@ -403,7 +403,7 @@ interface UseScrollOptions {
  * @param element
  * @param options
  */
-declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
+declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
     x: vue_demi.WritableComputedRef<number>;
     y: vue_demi.WritableComputedRef<number>;
     isScrolling: vue_demi.Ref<boolean>;
@@ -436,24 +436,32 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      */
     direction?: 'top' | 'bottom' | 'left' | 'right';
     /**
-     * Whether to preserve the current scroll position when loading more items.
+     * The interval time between two load more (to avoid too many invokes).
      *
-     * @default false
+     * @default 100
      */
-    preserveScrollPosition?: boolean;
+    interval?: number;
 }
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions): {
+    isLoading: vue_demi.ComputedRef<boolean>;
+};
 
 type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
 interface UseIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
     /**
      * The Element or Document whose bounds are used as the bounding box when testing for intersection.
      */
@@ -493,12 +501,12 @@ interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
      */
-    total?: MaybeRef<number>;
+    total?: MaybeRefOrGetter<number>;
     /**
      * The number of items to display per page.
      * @default 10
      */
-    pageSize?: MaybeRef<number>;
+    pageSize?: MaybeRefOrGetter<number>;
     /**
      * The current page number.
      * @default 1