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

package/index.cjs

@@ -54,14 +54,20 @@ function useEventListener(...args) {
     el.addEventListener(event, listener, options2);
     return () => el.removeEventListener(event, listener, options2);
   };
-  const stopWatch = vueDemi.watch(() => [unrefElement(target), shared.resolveUnref(options)], ([el, options2]) => {
-    cleanup();
-    if (!el)
-      return;
-    cleanups.push(...events.flatMap((event) => {
-      return listeners.map((listener) => register(el, event, listener, options2));
-    }));
-  }, { immediate: true, flush: "post" });
+  const stopWatch = vueDemi.watch(
+    () => [unrefElement(target), shared.resolveUnref(options)],
+    ([el, options2]) => {
+      cleanup();
+      if (!el)
+        return;
+      cleanups.push(
+        ...events.flatMap((event) => {
+          return listeners.map((listener) => register(el, event, listener, options2));
+        })
+      );
+    },
+    { immediate: true, flush: "post" }
+  );
   const stop = () => {
     stopWatch();
     cleanup();
@@ -135,7 +141,7 @@ const vOnClickOutside = {
   }
 };
 
-const createKeyPredicate = (keyFilter) => {
+function createKeyPredicate(keyFilter) {
   if (typeof keyFilter === "function")
     return keyFilter;
   else if (typeof keyFilter === "string")
@@ -143,7 +149,7 @@ const createKeyPredicate = (keyFilter) => {
   else if (Array.isArray(keyFilter))
     return (event) => keyFilter.includes(event.key);
   return () => true;
-};
+}
 function onKeyStroke(...args) {
   let key;
   let handler;
@@ -165,9 +171,16 @@ function onKeyStroke(...args) {
     key = true;
     handler = args[0];
   }
-  const { target = defaultWindow, eventName = "keydown", passive = false } = options;
+  const {
+    target = defaultWindow,
+    eventName = "keydown",
+    passive = false,
+    dedupe = false
+  } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
+    if (e.repeat && shared.resolveUnref(dedupe))
+      return;
     if (predicate(e))
       handler(e);
   };
@@ -227,7 +240,10 @@ function onLongPress(target, handler, options) {
       ev.preventDefault();
     if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
-    timeout = setTimeout(() => handler(ev), (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY);
+    timeout = setTimeout(
+      () => handler(ev),
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+    );
   }
   const listenerOptions = {
     capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
@@ -244,9 +260,13 @@ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   emits: ["trigger"],
   setup(props, { slots, emit }) {
     const target = vueDemi.ref();
-    onLongPress(target, (e) => {
-      emit("trigger", e);
-    }, props.options);
+    onLongPress(
+      target,
+      (e) => {
+        emit("trigger", e);
+      },
+      props.options
+    );
     return () => {
       if (slots.default)
         return vueDemi.h(props.as || "div", { ref: target }, slots.default());
@@ -392,7 +412,11 @@ function useStorage(key, defaults, storage, options = {}) {
   const rawInit = shared.resolveUnref(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
+  const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
+    data,
+    () => write(data.value),
+    { flush, deep, eventFilter }
+  );
   if (window && listenToStorageChanges) {
     useEventListener(window, "storage", update);
     useEventListener(window, customStorageEventName, updateFromCustomEvent);
@@ -469,12 +493,22 @@ function useStorage(key, defaults, storage, options = {}) {
   }
 }
 
-function useSupported(callback, sync = false) {
-  const isSupported = vueDemi.ref();
-  const update = () => isSupported.value = Boolean(callback());
-  update();
-  shared.tryOnMounted(update, sync);
-  return isSupported;
+function useMounted() {
+  const isMounted = vueDemi.ref(false);
+  if (vueDemi.getCurrentInstance()) {
+    vueDemi.onMounted(() => {
+      isMounted.value = true;
+    });
+  }
+  return isMounted;
+}
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return vueDemi.computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
 }
 
 function useMediaQuery(query, options = {}) {
@@ -495,7 +529,9 @@ function useMediaQuery(query, options = {}) {
       return;
     cleanup();
     mediaQuery = window.matchMedia(shared.resolveRef(query).value);
-    matches.value = mediaQuery.matches;
+    matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
+    if (!mediaQuery)
+      return;
     if ("addEventListener" in mediaQuery)
       mediaQuery.addEventListener("change", update);
     else
@@ -537,6 +573,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
+    // TODO: switch to true in v10
     disableTransition = false
   } = options;
   const modes = __spreadValues$b({
@@ -555,33 +592,36 @@ function useColorMode(options = {}) {
       store.value = v;
     }
   });
-  const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector2, attribute2, value) => {
-    const el = window == null ? void 0 : window.document.querySelector(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);
-    }
-    if (attribute2 === "class") {
-      const current = value.split(/\s/g);
-      Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
-        if (current.includes(v))
-          el.classList.add(v);
-        else
-          el.classList.remove(v);
-      });
-    } else {
-      el.setAttribute(attribute2, value);
-    }
-    if (disableTransition) {
-      window.getComputedStyle(style).opacity;
-      document.head.removeChild(style);
+  const updateHTMLAttrs = getSSRHandler(
+    "updateHTMLAttrs",
+    (selector2, attribute2, value) => {
+      const el = window == null ? void 0 : window.document.querySelector(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);
+      }
+      if (attribute2 === "class") {
+        const current = value.split(/\s/g);
+        Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
+          if (current.includes(v))
+            el.classList.add(v);
+          else
+            el.classList.remove(v);
+        });
+      } else {
+        el.setAttribute(attribute2, value);
+      }
+      if (disableTransition) {
+        window.getComputedStyle(style).opacity;
+        document.head.removeChild(style);
+      }
     }
-  });
+  );
   function defaultOnChanged(mode) {
     var _a;
     const resolvedMode = mode === "auto" ? preferredMode.value : mode;
@@ -721,7 +761,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "stopPropagation",
     "pointerTypes",
     "as",
-    "handle"
+    "handle",
+    "axis"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -729,7 +770,11 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
-    const storageValue = props.storageKey && core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0);
+    const storageValue = props.storageKey && core.useStorage(
+      props.storageKey,
+      shared.resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
+    );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position) => {
       if (!storageValue)
@@ -835,13 +880,21 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (isSupported.value && window && el) {
-      observer = new ResizeObserver(callback);
-      observer.observe(el, observerOptions);
-    }
-  }, { immediate: true, flush: "post" });
+  const targets = vueDemi.computed(
+    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
+  );
+  const stopWatch = vueDemi.watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els)
+          _el && observer.observe(_el, observerOptions);
+      }
+    },
+    { immediate: true, flush: "post", deep: true }
+  );
   const stop = () => {
     cleanup();
     stopWatch();
@@ -861,30 +914,37 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   });
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
-  useResizeObserver(target, ([entry]) => {
-    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
-    if (window && isSVG.value) {
-      const $elem = unrefElement(target);
-      if ($elem) {
-        const styles = window.getComputedStyle($elem);
-        width.value = parseFloat(styles.width);
-        height.value = parseFloat(styles.height);
-      }
-    } else {
-      if (boxSize) {
-        const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
-        width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
-        height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+  useResizeObserver(
+    target,
+    ([entry]) => {
+      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+      if (window && isSVG.value) {
+        const $elem = unrefElement(target);
+        if ($elem) {
+          const styles = window.getComputedStyle($elem);
+          width.value = parseFloat(styles.width);
+          height.value = parseFloat(styles.height);
+        }
       } else {
-        width.value = entry.contentRect.width;
-        height.value = entry.contentRect.height;
+        if (boxSize) {
+          const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+          width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+          height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+        } else {
+          width.value = entry.contentRect.width;
+          height.value = entry.contentRect.height;
+        }
       }
+    },
+    options
+  );
+  vueDemi.watch(
+    () => unrefElement(target),
+    (ele) => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
     }
-  }, options);
-  vueDemi.watch(() => unrefElement(target), (ele) => {
-    width.value = ele ? initialSize.width : 0;
-    height.value = ele ? initialSize.height : 0;
-  });
+  );
   return {
     width,
     height
@@ -916,27 +976,63 @@ const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompo
   }
 });
 
+function useIntersectionObserver(target, callback, options = {}) {
+  const {
+    root,
+    rootMargin = "0px",
+    threshold = 0.1,
+    window = defaultWindow
+  } = options;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
+  let cleanup = shared.noop;
+  const stopWatch = isSupported.value ? vueDemi.watch(
+    () => ({
+      el: unrefElement(target),
+      root: unrefElement(root)
+    }),
+    ({ el, root: root2 }) => {
+      cleanup();
+      if (!el)
+        return;
+      const observer = new IntersectionObserver(
+        callback,
+        {
+          root: root2,
+          rootMargin,
+          threshold
+        }
+      );
+      observer.observe(el);
+      cleanup = () => {
+        observer.disconnect();
+        cleanup = shared.noop;
+      };
+    },
+    { immediate: true, flush: "post" }
+  ) : shared.noop;
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  shared.tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
 function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
   const elementIsVisible = vueDemi.ref(false);
-  const testBounding = () => {
-    if (!window)
-      return;
-    const document = window.document;
-    const el = unrefElement(element);
-    if (!el) {
-      elementIsVisible.value = false;
-    } else {
-      const rect = el.getBoundingClientRect();
-      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+  useIntersectionObserver(
+    element,
+    ([{ isIntersecting }]) => {
+      elementIsVisible.value = isIntersecting;
+    },
+    {
+      root: scrollTarget,
+      window
     }
-  };
-  vueDemi.watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
-  if (window) {
-    useEventListener(scrollTarget || window, "scroll", testBounding, {
-      capture: false,
-      passive: true
-    });
-  }
+  );
   return elementIsVisible;
 }
 
@@ -1083,13 +1179,21 @@ async function loadImage(options) {
     img.onerror = reject;
   });
 }
-const useImage = (options, asyncStateOptions = {}) => {
-  const state = useAsyncState(() => loadImage(shared.resolveUnref(options)), void 0, __spreadValues$9({
-    resetOnExecute: true
-  }, asyncStateOptions));
-  vueDemi.watch(() => shared.resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+function useImage(options, asyncStateOptions = {}) {
+  const state = useAsyncState(
+    () => loadImage(shared.resolveUnref(options)),
+    void 0,
+    __spreadValues$9({
+      resetOnExecute: true
+    }, asyncStateOptions)
+  );
+  vueDemi.watch(
+    () => shared.resolveUnref(options),
+    () => state.execute(asyncStateOptions.delay),
+    { deep: true }
+  );
   return state;
-};
+}
 
 const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseImage",
@@ -1205,8 +1309,18 @@ function useScroll(element, options = {}) {
     onScrollEndDebounced(e);
     onScroll(e);
   };
-  useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
-  useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
+  useEventListener(
+    element,
+    "scroll",
+    throttle ? shared.useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler,
+    eventListenerOptions
+  );
+  useEventListener(
+    element,
+    "scrollend",
+    onScrollEnd,
+    eventListenerOptions
+  );
   return {
     x,
     y,
@@ -1238,30 +1352,36 @@ 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";
-  const state = vueDemi.reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
-    offset: __spreadValues$8({
-      [direction]: (_b = options.distance) != null ? _b : 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 state = vueDemi.reactive(useScroll(
+    element,
+    __spreadProps$7(__spreadValues$8({}, options), {
+      offset: __spreadValues$8({
+        [direction]: (_b = options.distance) != null ? _b : 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 vInfiniteScroll = {
@@ -1273,44 +1393,6 @@ const vInfiniteScroll = {
   }
 };
 
-function useIntersectionObserver(target, callback, options = {}) {
-  const {
-    root,
-    rootMargin = "0px",
-    threshold = 0.1,
-    window = defaultWindow
-  } = options;
-  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-  let cleanup = shared.noop;
-  const stopWatch = isSupported.value ? vueDemi.watch(() => ({
-    el: unrefElement(target),
-    root: unrefElement(root)
-  }), ({ el, root: root2 }) => {
-    cleanup();
-    if (!el)
-      return;
-    const observer = new IntersectionObserver(callback, {
-      root: root2,
-      rootMargin,
-      threshold
-    });
-    observer.observe(el);
-    cleanup = () => {
-      observer.disconnect();
-      cleanup = shared.noop;
-    };
-  }, { immediate: true, flush: "post" }) : shared.noop;
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  shared.tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
-  };
-}
-
 const vIntersectionObserver = {
   [shared.directiveHooks.mounted](el, binding) {
     if (typeof binding.value === "function")
@@ -1657,12 +1739,19 @@ function useCssVar(prop, target, options = {}) {
       window
     });
   }
-  vueDemi.watch([elRef, () => shared.resolveUnref(prop)], updateCssVar, { immediate: true });
-  vueDemi.watch(variable, (val) => {
-    var _a;
-    if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(shared.resolveUnref(prop), val);
-  });
+  vueDemi.watch(
+    [elRef, () => shared.resolveUnref(prop)],
+    updateCssVar,
+    { immediate: true }
+  );
+  vueDemi.watch(
+    variable,
+    (val) => {
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
+        elRef.value.style.setProperty(shared.resolveUnref(prop), val);
+    }
+  );
   return variable;
 }
 
@@ -1829,9 +1918,14 @@ function useScrollLock(element, initialState = false) {
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
-      stopTouchMoveListener = useEventListener(ele, "touchmove", (e) => {
-        preventDefault(e);
-      }, { passive: false });
+      stopTouchMoveListener = useEventListener(
+        ele,
+        "touchmove",
+        (e) => {
+          preventDefault(e);
+        },
+        { passive: false }
+      );
     }
     ele.style.overflow = "hidden";
     isLocked.value = true;
@@ -1858,7 +1952,7 @@ function useScrollLock(element, initialState = false) {
   });
 }
 
-const onScrollLock = () => {
+function onScrollLock() {
   let isMounted = false;
   const state = vueDemi.ref(false);
   return (el, binding) => {
@@ -1869,7 +1963,7 @@ const onScrollLock = () => {
     const isLocked = useScrollLock(el, binding.value);
     vueDemi.watch(state, (v) => isLocked.value = v);
   };
-};
+}
 const vScrollLock = onScrollLock();
 
 var __defProp$2 = Object.defineProperty;
@@ -1962,9 +2056,21 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
     expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
-    return () => vueDemi.h("div", __spreadValues({}, containerProps), [
-      vueDemi.h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
-    ]);
+    return () => vueDemi.h(
+      "div",
+      __spreadValues({}, containerProps),
+      [
+        vueDemi.h(
+          "div",
+          __spreadValues({}, wrapperProps.value),
+          list.value.map((item) => vueDemi.h(
+            "div",
+            { style: { overFlow: "hidden", height: item.height } },
+            slots.default ? slots.default(item) : "Please set content!"
+          ))
+        )
+      ]
+    );
   }
 });
 

package/index.d.ts

@@ -55,6 +55,12 @@ interface OnKeyStrokeOptions {
     eventName?: KeyStrokeEventName;
     target?: MaybeComputedRef<EventTarget | null | undefined>;
     passive?: boolean;
+    /**
+     * Set to `true` to ignore repeated events when the key is being held down.
+     *
+     * @default false
+     */
+    dedupe?: MaybeComputedRef<boolean>;
 }
 
 type BindingValueFunction$7 = (event: KeyboardEvent) => void;
@@ -451,7 +457,7 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
     /**
      * The Element or Document whose bounds are used as the bounding box when testing for intersection.
      */
-    root?: MaybeElementRef;
+    root?: MaybeComputedElementRef;
     /**
      * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
      */