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

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useMutationObserver, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, isFunction, resolveRef, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { toValue, isClient, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, toRef, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -20,7 +20,7 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = resolveUnref(elRef);
+  const plain = toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -31,7 +31,7 @@ function useEventListener(...args) {
   let events;
   let listeners;
   let options;
-  if (isString(args[0]) || Array.isArray(args[0])) {
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
     [events, listeners, options] = args;
     target = defaultWindow;
   } else {
@@ -53,7 +53,7 @@ function useEventListener(...args) {
     return () => el.removeEventListener(event, listener, options2);
   };
   const stopWatch = watch(
-    () => [unrefElement(target), resolveUnref(options)],
+    () => [unrefElement(target), toValue(options)],
     ([el, options2]) => {
       cleanup();
       if (!el)
@@ -177,7 +177,7 @@ function onKeyStroke(...args) {
   } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
-    if (e.repeat && resolveUnref(dedupe))
+    if (e.repeat && toValue(dedupe))
       return;
     if (predicate(e))
       handler(e);
@@ -318,8 +318,12 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 
 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;
 }
@@ -407,7 +411,7 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = resolveUnref(defaults);
+  const rawInit = toValue(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(
@@ -454,7 +458,7 @@ function useStorage(key, defaults, storage, options = {}) {
       return rawInit;
     } else if (!event && mergeDefaults) {
       const value = serializer.read(rawValue);
-      if (isFunction(mergeDefaults))
+      if (typeof mergeDefaults === "function")
         return mergeDefaults(value, rawInit);
       else if (type === "object" && !Array.isArray(value))
         return __spreadValues$c(__spreadValues$c({}, rawInit), value);
@@ -526,7 +530,7 @@ function useMediaQuery(query, options = {}) {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(resolveRef(query).value);
+    mediaQuery = window.matchMedia(toRef(query).value);
     matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
     if (!mediaQuery)
       return;
@@ -571,8 +575,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
-    // TODO: switch to true in v10
-    disableTransition = false
+    disableTransition = true
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -580,11 +583,11 @@ function useColorMode(options = {}) {
     dark: "dark"
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
-  const preferredMode = computed(() => preferredDark.value ? "dark" : "light");
+  const system = computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? ref(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
   const state = 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;
@@ -593,13 +596,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) : 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);
       }
@@ -622,7 +624,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) {
@@ -633,9 +635,13 @@ function useColorMode(options = {}) {
   }
   watch(state, onChanged, { flush: "post", immediate: true });
   if (emitAuto)
-    watch(preferredMode, () => onChanged(state.value), { flush: "post" });
+    watch(system, () => onChanged(state.value), { flush: "post" });
   tryOnMounted(() => onChanged(state.value));
-  return state;
+  try {
+    return Object.assign(state, { store, system });
+  } catch (e) {
+    return state;
+  }
 }
 
 const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
@@ -644,7 +650,9 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = reactive({
-      mode
+      mode,
+      system: mode.system,
+      store: mode.store
     });
     return () => {
       if (slots.default)
@@ -770,7 +778,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     });
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
-      resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      toValue(props.initialValue) || { x: 0, y: 0 },
       isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
@@ -979,23 +987,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 = noop;
+  const isActive = ref(immediate);
   const stopWatch = isSupported.value ? 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
         }
@@ -1006,15 +1015,24 @@ function useIntersectionObserver(target, callback, options = {}) {
         cleanup = noop;
       };
     },
-    { immediate: true, flush: "post" }
+    { immediate, flush: "post" }
   ) : noop;
   const stop = () => {
     cleanup();
     stopWatch();
+    isActive.value = false;
   };
   tryOnScopeDispose(stop);
   return {
     isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
     stop
   };
 }
@@ -1179,14 +1197,14 @@ async function loadImage(options) {
 }
 function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
-    () => loadImage(resolveUnref(options)),
+    () => loadImage(toValue(options)),
     void 0,
     __spreadValues$9({
       resetOnExecute: true
     }, asyncStateOptions)
   );
   watch(
-    () => resolveUnref(options),
+    () => toValue(options),
     () => state.execute(asyncStateOptions.delay),
     { deep: true }
   );
@@ -1254,13 +1272,13 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
-    const _element = resolveUnref(element);
+    const _element = toValue(element);
     if (!_element)
       return;
     (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-      top: (_a = resolveUnref(_y)) != null ? _a : y.value,
-      left: (_b = resolveUnref(_x)) != null ? _b : x.value,
-      behavior: resolveUnref(behavior)
+      top: (_a = toValue(_y)) != null ? _a : y.value,
+      left: (_b = toValue(_x)) != null ? _b : x.value,
+      behavior: toValue(behavior)
     });
   }
   const isScrolling = ref(false);
@@ -1289,19 +1307,34 @@ function useScroll(element, options = {}) {
   const onScrollEndDebounced = 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);
@@ -1348,38 +1381,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 = 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)
     })
   ));
-  watch(
-    () => state.arrivedState[direction],
-    async (v) => {
-      var _a2, _b2;
-      if (v) {
-        const elem = 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) {
-          nextTick(() => {
-            elem.scrollTo({
-              top: elem.scrollHeight - previous.height,
-              left: elem.scrollWidth - previous.width
-            });
-          });
-        }
+  const promise = ref();
+  const isLoading = computed(() => !!promise.value);
+  function checkAndLoad() {
+    const el = 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;
+          nextTick(() => checkAndLoad());
+        });
       }
     }
+  }
+  watch(
+    () => [state.arrivedState[direction], toValue(element)],
+    checkAndLoad,
+    { immediate: true }
   );
+  return {
+    isLoading
+  };
 }
 
 const vInfiniteScroll = {
@@ -1724,8 +1765,8 @@ function useCssVar(prop, target, options = {}) {
   });
   function updateCssVar() {
     var _a;
-    const key = resolveUnref(prop);
-    const el = resolveUnref(elRef);
+    const key = toValue(prop);
+    const el = toValue(elRef);
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
@@ -1738,7 +1779,7 @@ function useCssVar(prop, target, options = {}) {
     });
   }
   watch(
-    [elRef, () => resolveUnref(prop)],
+    [elRef, () => toValue(prop)],
     updateCssVar,
     { immediate: true }
   );
@@ -1747,7 +1788,7 @@ function useCssVar(prop, target, options = {}) {
     (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(resolveUnref(prop), val);
+        elRef.value.style.setProperty(toValue(prop), val);
     }
   );
   return variable;
@@ -1901,7 +1942,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  watch(resolveRef(element), (el) => {
+  watch(toRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1912,7 +1953,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = resolveUnref(element);
+    const ele = toValue(element);
     if (!ele || isLocked.value)
       return;
     if (isIOS) {
@@ -1929,7 +1970,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = resolveUnref(element);
+    const ele = toValue(element);
     if (!ele || !isLocked.value)
       return;
     isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "10.0.0-beta.3",
+  "version": "10.0.0-beta.5",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "10.0.0-beta.3",
-    "@vueuse/shared": "10.0.0-beta.3",
-    "vue-demi": "*"
+    "@vueuse/core": "10.0.0-beta.5",
+    "@vueuse/shared": "10.0.0-beta.5",
+    "vue-demi": ">=0.14.0"
   }
 }