@vueuse/components 11.0.3 → 11.2.0

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, isVue2, watchEffect, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useClipboard, 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, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { toValue, isClient, noop, isObject, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { defineComponent, ref, h, watch, computed, reactive, getCurrentInstance, onMounted, isVue2, watchEffect, shallowRef, nextTick, toRefs } from 'vue-demi';
+import { isClient, toValue, noop, isObject, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -18,14 +18,14 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
+const defaultWindow = isClient ? window : void 0;
+
 function unrefElement(elRef) {
   var _a;
   const plain = toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
-const defaultWindow = isClient ? window : void 0;
-
 function useEventListener(...args) {
   let target;
   let events;
@@ -87,7 +87,7 @@ function onClickOutside(target, handler, options = {}) {
   }
   let shouldListen = true;
   const shouldIgnore = (event) => {
-    return ignore.some((target2) => {
+    return toValue(ignore).some((target2) => {
       if (typeof target2 === "string") {
         return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
       } else {
@@ -108,8 +108,17 @@ function onClickOutside(target, handler, options = {}) {
     }
     handler(event);
   };
+  let isProcessingClick = false;
   const cleanup = [
-    useEventListener(window, "click", listener, { passive: true, capture }),
+    useEventListener(window, "click", (event) => {
+      if (!isProcessingClick) {
+        isProcessingClick = true;
+        setTimeout(() => {
+          isProcessingClick = false;
+        }, 0);
+        listener(event);
+      }
+    }, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
       const el = unrefElement(target);
       shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
@@ -387,6 +396,64 @@ function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
 
+function useMounted() {
+  const isMounted = ref(false);
+  const instance = getCurrentInstance();
+  if (instance) {
+    onMounted(() => {
+      isMounted.value = true;
+    }, isVue2 ? void 0 : instance);
+  }
+  return isMounted;
+}
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+
+function useMediaQuery(query, options = {}) {
+  const { window = defaultWindow } = options;
+  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+  let mediaQuery;
+  const matches = ref(false);
+  const handler = (event) => {
+    matches.value = event.matches;
+  };
+  const cleanup = () => {
+    if (!mediaQuery)
+      return;
+    if ("removeEventListener" in mediaQuery)
+      mediaQuery.removeEventListener("change", handler);
+    else
+      mediaQuery.removeListener(handler);
+  };
+  const stopWatch = watchEffect(() => {
+    if (!isSupported.value)
+      return;
+    cleanup();
+    mediaQuery = window.matchMedia(toValue(query));
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", handler);
+    else
+      mediaQuery.addListener(handler);
+    matches.value = mediaQuery.matches;
+  });
+  tryOnScopeDispose(() => {
+    stopWatch();
+    cleanup();
+    mediaQuery = void 0;
+  });
+  return matches;
+}
+
+function usePreferredDark(options) {
+  return useMediaQuery("(prefers-color-scheme: dark)", options);
+}
+
 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" : !Number.isNaN(rawInit) ? "number" : "any";
 }
@@ -552,64 +619,6 @@ function useStorage(key, defaults, storage, options = {}) {
   return data;
 }
 
-function useMounted() {
-  const isMounted = ref(false);
-  const instance = getCurrentInstance();
-  if (instance) {
-    onMounted(() => {
-      isMounted.value = true;
-    }, isVue2 ? void 0 : instance);
-  }
-  return isMounted;
-}
-
-function useSupported(callback) {
-  const isMounted = useMounted();
-  return computed(() => {
-    isMounted.value;
-    return Boolean(callback());
-  });
-}
-
-function useMediaQuery(query, options = {}) {
-  const { window = defaultWindow } = options;
-  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
-  let mediaQuery;
-  const matches = ref(false);
-  const handler = (event) => {
-    matches.value = event.matches;
-  };
-  const cleanup = () => {
-    if (!mediaQuery)
-      return;
-    if ("removeEventListener" in mediaQuery)
-      mediaQuery.removeEventListener("change", handler);
-    else
-      mediaQuery.removeListener(handler);
-  };
-  const stopWatch = watchEffect(() => {
-    if (!isSupported.value)
-      return;
-    cleanup();
-    mediaQuery = window.matchMedia(toValue(query));
-    if ("addEventListener" in mediaQuery)
-      mediaQuery.addEventListener("change", handler);
-    else
-      mediaQuery.addListener(handler);
-    matches.value = mediaQuery.matches;
-  });
-  tryOnScopeDispose(() => {
-    stopWatch();
-    cleanup();
-    mediaQuery = void 0;
-  });
-  return matches;
-}
-
-function usePreferredDark(options) {
-  return useMediaQuery("(prefers-color-scheme: dark)", options);
-}
-
 const CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
 function useColorMode(options = {}) {
   const {
@@ -814,7 +823,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "onMove",
     "onEnd",
     "disabled",
-    "buttons"
+    "buttons",
+    "containerElement"
   ],
   setup(props, { slots }) {
     const target = ref();
@@ -822,6 +832,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
+    const containerElement = computed(() => {
+      var _a;
+      return (_a = props.containerElement) != null ? _a : void 0;
+    });
     const disabled = computed(() => !!props.disabled);
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
@@ -842,7 +856,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       handle,
       initialValue,
       onEnd,
-      disabled
+      disabled,
+      containerElement
     }));
     return () => {
       if (slots.default)
@@ -1312,6 +1327,14 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
+function resolveElement(el) {
+  if (typeof Window !== "undefined" && el instanceof Window)
+    return el.document.documentElement;
+  if (typeof Document !== "undefined" && el instanceof Document)
+    return el.documentElement;
+  return el;
+}
+
 const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
 function useScroll(element, options = {}) {
   const {
@@ -1476,14 +1499,6 @@ function useScroll(element, options = {}) {
   };
 }
 
-function resolveElement(el) {
-  if (typeof Window !== "undefined" && el instanceof Window)
-    return el.document.documentElement;
-  if (typeof Document !== "undefined" && el instanceof Document)
-    return el.documentElement;
-  return el;
-}
-
 function useInfiniteScroll(element, onLoadMore, options = {}) {
   var _a;
   const {
@@ -1525,11 +1540,12 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
       }
     }
   }
-  watch(
+  const stop = watch(
     () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true }
   );
+  tryOnUnmounted(stop);
   return {
     isLoading,
     reset() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "11.0.3",
+  "version": "11.2.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -32,8 +32,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.cts",
   "dependencies": {
-    "@vueuse/core": "11.0.3",
-    "@vueuse/shared": "11.0.3",
+    "@vueuse/core": "11.2.0",
+    "@vueuse/shared": "11.2.0",
     "vue-demi": ">=0.14.10"
   }
 }