@vueuse/components 11.0.1 → 11.1.0

package/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var vueDemi = require('vue-demi');
 var core = require('@vueuse/core');
+var vueDemi = require('vue-demi');
 var shared = require('@vueuse/shared');
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -20,14 +20,14 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
+const defaultWindow = shared.isClient ? window : void 0;
+
 function unrefElement(elRef) {
   var _a;
   const plain = shared.toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
-const defaultWindow = shared.isClient ? window : void 0;
-
 function useEventListener(...args) {
   let target;
   let events;
@@ -89,7 +89,7 @@ function onClickOutside(target, handler, options = {}) {
   }
   let shouldListen = true;
   const shouldIgnore = (event) => {
-    return ignore.some((target2) => {
+    return shared.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 {
@@ -110,8 +110,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));
@@ -389,6 +398,64 @@ function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
 
+function useMounted() {
+  const isMounted = vueDemi.ref(false);
+  const instance = vueDemi.getCurrentInstance();
+  if (instance) {
+    vueDemi.onMounted(() => {
+      isMounted.value = true;
+    }, vueDemi.isVue2 ? void 0 : instance);
+  }
+  return isMounted;
+}
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return vueDemi.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 = vueDemi.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 = vueDemi.watchEffect(() => {
+    if (!isSupported.value)
+      return;
+    cleanup();
+    mediaQuery = window.matchMedia(shared.toValue(query));
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", handler);
+    else
+      mediaQuery.addListener(handler);
+    matches.value = mediaQuery.matches;
+  });
+  shared.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";
 }
@@ -554,64 +621,6 @@ function useStorage(key, defaults, storage, options = {}) {
   return data;
 }
 
-function useMounted() {
-  const isMounted = vueDemi.ref(false);
-  const instance = vueDemi.getCurrentInstance();
-  if (instance) {
-    vueDemi.onMounted(() => {
-      isMounted.value = true;
-    }, vueDemi.isVue2 ? void 0 : instance);
-  }
-  return isMounted;
-}
-
-function useSupported(callback) {
-  const isMounted = useMounted();
-  return vueDemi.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 = vueDemi.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 = vueDemi.watchEffect(() => {
-    if (!isSupported.value)
-      return;
-    cleanup();
-    mediaQuery = window.matchMedia(shared.toValue(query));
-    if ("addEventListener" in mediaQuery)
-      mediaQuery.addEventListener("change", handler);
-    else
-      mediaQuery.addListener(handler);
-    matches.value = mediaQuery.matches;
-  });
-  shared.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 {
@@ -816,7 +825,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "onMove",
     "onEnd",
     "disabled",
-    "buttons"
+    "buttons",
+    "containerElement"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -824,6 +834,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
+    const containerElement = vueDemi.computed(() => {
+      var _a;
+      return (_a = props.containerElement) != null ? _a : void 0;
+    });
     const disabled = vueDemi.computed(() => !!props.disabled);
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
@@ -844,7 +858,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       handle,
       initialValue,
       onEnd,
-      disabled
+      disabled,
+      containerElement
     }));
     return () => {
       if (slots.default)
@@ -1314,6 +1329,14 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.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 {
@@ -1478,14 +1501,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 {
@@ -1527,11 +1542,12 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
       }
     }
   }
-  vueDemi.watch(
+  const stop = vueDemi.watch(
     () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true }
   );
+  shared.tryOnUnmounted(stop);
   return {
     isLoading,
     reset() {
@@ -1874,8 +1890,8 @@ function useCssVar(prop, target, options = {}) {
   vueDemi.watch(
     [elRef, () => shared.toValue(prop)],
     (_, old) => {
-      if (old[0] && old[1] && window)
-        window.getComputedStyle(old[0]).removeProperty(old[1]);
+      if (old[0] && old[1])
+        old[0].style.removeProperty(old[1]);
       updateCssVar();
     },
     { immediate: true }