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

package/index.iife.js

@@ -165,14 +165,20 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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();
@@ -246,7 +252,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  const createKeyPredicate = (keyFilter) => {
+  function createKeyPredicate(keyFilter) {
     if (typeof keyFilter === "function")
       return keyFilter;
     else if (typeof keyFilter === "string")
@@ -254,7 +260,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     else if (Array.isArray(keyFilter))
       return (event) => keyFilter.includes(event.key);
     return () => true;
-  };
+  }
   function onKeyStroke(...args) {
     let key;
     let handler;
@@ -276,9 +282,16 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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);
     };
@@ -338,7 +351,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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,
@@ -355,9 +371,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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());
@@ -503,7 +523,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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);
@@ -580,12 +604,22 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   }
 
-  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 = {}) {
@@ -606,7 +640,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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
@@ -648,6 +684,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       listenToStorageChanges = true,
       storageRef,
       emitAuto,
+      // TODO: switch to true in v10
       disableTransition = false
     } = options;
     const modes = __spreadValues$b({
@@ -666,33 +703,36 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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;
@@ -832,7 +872,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "stopPropagation",
       "pointerTypes",
       "as",
-      "handle"
+      "handle",
+      "axis"
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
@@ -840,7 +881,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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)
@@ -946,13 +991,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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();
@@ -972,30 +1025,37 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     });
     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
@@ -1027,27 +1087,63 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
+  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;
   }
 
@@ -1194,13 +1290,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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",
@@ -1316,8 +1420,18 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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,
@@ -1349,30 +1463,36 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   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 = {
@@ -1384,44 +1504,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   };
 
-  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")
@@ -1768,12 +1850,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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;
   }
 
@@ -1940,9 +2029,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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;
@@ -1969,7 +2063,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     });
   }
 
-  const onScrollLock = () => {
+  function onScrollLock() {
     let isMounted = false;
     const state = vueDemi.ref(false);
     return (el, binding) => {
@@ -1980,7 +2074,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       const isLocked = useScrollLock(el, binding.value);
       vueDemi.watch(state, (v) => isLocked.value = v);
     };
-  };
+  }
   const vScrollLock = onScrollLock();
 
   var __defProp$2 = Object.defineProperty;
@@ -2073,9 +2167,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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!"
+            ))
+          )
+        ]
+      );
     }
   });