@vueuse/components 10.0.0-beta.2 → 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;
@@ -234,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,
@@ -251,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());
@@ -399,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);
@@ -478,9 +495,11 @@ function useStorage(key, defaults, storage, options = {}) {
 
 function useMounted() {
   const isMounted = vueDemi.ref(false);
-  vueDemi.onMounted(() => {
-    isMounted.value = true;
-  });
+  if (vueDemi.getCurrentInstance()) {
+    vueDemi.onMounted(() => {
+      isMounted.value = true;
+    });
+  }
   return isMounted;
 }
 
@@ -510,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
@@ -552,6 +573,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
+    // TODO: switch to true in v10
     disableTransition = false
   } = options;
   const modes = __spreadValues$b({
@@ -570,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;
@@ -736,7 +761,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "stopPropagation",
     "pointerTypes",
     "as",
-    "handle"
+    "handle",
+    "axis"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -744,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)
@@ -850,15 +880,21 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  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 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();
@@ -878,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
@@ -942,24 +985,31 @@ function useIntersectionObserver(target, callback, options = {}) {
   } = 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 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();
@@ -973,12 +1023,16 @@ function useIntersectionObserver(target, callback, options = {}) {
 
 function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
   const elementIsVisible = vueDemi.ref(false);
-  useIntersectionObserver(element, ([{ isIntersecting }]) => {
-    elementIsVisible.value = isIntersecting;
-  }, {
-    root: scrollTarget,
-    window
-  });
+  useIntersectionObserver(
+    element,
+    ([{ isIntersecting }]) => {
+      elementIsVisible.value = isIntersecting;
+    },
+    {
+      root: scrollTarget,
+      window
+    }
+  );
   return elementIsVisible;
 }
 
@@ -1125,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",
@@ -1247,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,
@@ -1280,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 = {
@@ -1661,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;
 }
 
@@ -1833,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;
@@ -1862,7 +1952,7 @@ function useScrollLock(element, initialState = false) {
   });
 }
 
-const onScrollLock = () => {
+function onScrollLock() {
   let isMounted = false;
   const state = vueDemi.ref(false);
   return (el, binding) => {
@@ -1873,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;
@@ -1966,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!"
+          ))
+        )
+      ]
+    );
   }
 });