@vueuse/components 10.2.0 → 10.3.0

package/index.cjs

@@ -84,6 +84,7 @@ function onClickOutside(target, handler, options = {}) {
   if (shared.isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true;
     Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop));
+    window.document.documentElement.addEventListener("click", shared.noop);
   }
   let shouldListen = true;
   const shouldIgnore = (event) => {
@@ -252,8 +253,7 @@ function onLongPress(target, handler, options) {
     once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
   };
   useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
-  useEventListener(elementRef, "pointerup", clear, listenerOptions);
-  useEventListener(elementRef, "pointerleave", clear, listenerOptions);
+  useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
 }
 
 const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -522,29 +522,33 @@ function useMediaQuery(query, options = {}) {
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = vueDemi.ref(false);
+  const handler = (event) => {
+    matches.value = event.matches;
+  };
   const cleanup = () => {
     if (!mediaQuery)
       return;
     if ("removeEventListener" in mediaQuery)
-      mediaQuery.removeEventListener("change", update);
+      mediaQuery.removeEventListener("change", handler);
     else
-      mediaQuery.removeListener(update);
+      mediaQuery.removeListener(handler);
   };
-  const update = () => {
+  const stopWatch = vueDemi.watchEffect(() => {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(shared.toRef(query).value);
-    matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
-    if (!mediaQuery)
-      return;
+    mediaQuery = window.matchMedia(shared.toValue(query));
     if ("addEventListener" in mediaQuery)
-      mediaQuery.addEventListener("change", update);
+      mediaQuery.addEventListener("change", handler);
     else
-      mediaQuery.addListener(update);
-  };
-  vueDemi.watchEffect(update);
-  shared.tryOnScopeDispose(() => cleanup());
+      mediaQuery.addListener(handler);
+    matches.value = mediaQuery.matches;
+  });
+  shared.tryOnScopeDispose(() => {
+    stopWatch();
+    cleanup();
+    mediaQuery = void 0;
+  });
   return matches;
 }
 
@@ -1306,7 +1310,8 @@ function useScroll(element, options = {}) {
       capture: false,
       passive: true
     },
-    behavior = "auto"
+    behavior = "auto",
+    window = defaultWindow
   } = options;
   const internalX = vueDemi.ref(0);
   const internalY = vueDemi.ref(0);
@@ -1328,10 +1333,12 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
+    if (!window)
+      return;
     const _element = shared.toValue(element);
     if (!_element)
       return;
-    (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
       top: (_a = shared.toValue(_y)) != null ? _a : y.value,
       left: (_b = shared.toValue(_x)) != null ? _b : x.value,
       behavior: shared.toValue(behavior)
@@ -1362,7 +1369,9 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const setArrivedState = (target) => {
-    const el = target === window ? target.document.documentElement : target === document ? target.documentElement : target;
+    if (!window)
+      return;
+    const el = target === window ? target.document.documentElement : target === window.document ? target.documentElement : target;
     const { display, flexDirection } = getComputedStyle(el);
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
@@ -1378,8 +1387,8 @@ function useScroll(element, options = {}) {
     }
     internalX.value = scrollLeft;
     let scrollTop = el.scrollTop;
-    if (target === document && !scrollTop)
-      scrollTop = document.body.scrollTop;
+    if (target === window.document && !scrollTop)
+      scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
     const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
@@ -1394,7 +1403,9 @@ function useScroll(element, options = {}) {
     internalY.value = scrollTop;
   };
   const onScrollHandler = (e) => {
-    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    if (!window)
+      return;
+    const eventTarget = e.target === window.document ? e.target.documentElement : e.target;
     setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1420,7 +1431,7 @@ function useScroll(element, options = {}) {
     directions,
     measure() {
       const _element = shared.toValue(element);
-      if (_element)
+      if (window && _element)
         setArrivedState(_element);
     }
   };
@@ -1461,12 +1472,21 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   ));
   const promise = vueDemi.ref();
   const isLoading = vueDemi.computed(() => !!promise.value);
+  const observedElement = vueDemi.computed(() => {
+    const el = shared.toValue(element);
+    if (el instanceof Window)
+      return window.document.documentElement;
+    if (el instanceof Document)
+      return document.documentElement;
+    return el;
+  });
+  const isElementVisible = useElementVisibility(observedElement);
   function checkAndLoad() {
     state.measure();
-    const el = shared.toValue(element);
-    if (!el)
+    if (!observedElement.value || !isElementVisible.value)
       return;
-    const isNarrower = direction === "bottom" || direction === "top" ? el.scrollHeight <= el.clientHeight : el.scrollWidth <= el.clientWidth;
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value;
+    const isNarrower = direction === "bottom" || direction === "top" ? scrollHeight <= clientHeight : scrollWidth <= clientWidth;
     if (state.arrivedState[direction] || isNarrower) {
       if (!promise.value) {
         promise.value = Promise.all([
@@ -1480,7 +1500,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     }
   }
   vueDemi.watch(
-    () => [state.arrivedState[direction], shared.toValue(element)],
+    () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true }
   );