@vueuse/components 12.2.0 → 12.3.0

package/index.mjs

@@ -1,6 +1,6 @@
-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, usePreferredReducedTransparency, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { defineComponent, ref, h, watch, computed, reactive, hasInjectionContext, getCurrentInstance, onMounted, watchEffect, shallowRef, nextTick, toRefs } from 'vue';
-import { isClient, toValue, noop, isObject, tryOnScopeDispose, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted } from '@vueuse/shared';
+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 as useElementBounding$1, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse as useMouse$1, useMouseInElement as useMouseInElement$1, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, usePreferredReducedTransparency, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { defineComponent, ref, h, toValue, watch, computed, reactive, hasInjectionContext, getCurrentInstance, onMounted, watchEffect, shallowRef, nextTick, toRefs } from 'vue';
+import { isClient, noop, toArray, isObject, tryOnScopeDispose, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted, reactiveOmit } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -39,10 +39,8 @@ function useEventListener(...args) {
   }
   if (!target)
     return noop;
-  if (!Array.isArray(events))
-    events = [events];
-  if (!Array.isArray(listeners))
-    listeners = [listeners];
+  events = toArray(events);
+  listeners = toArray(listeners);
   const cleanups = [];
   const cleanup = () => {
     cleanups.forEach((fn) => fn());
@@ -907,7 +905,7 @@ const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   props: ["box", "as"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useElementBounding(target));
+    const data = reactive(useElementBounding$1(target));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -915,10 +913,222 @@ const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
+function useMutationObserver(target, callback, options = {}) {
+  const { window = defaultWindow, ...mutationOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window && "MutationObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = computed(() => {
+    const value = toValue(target);
+    const items = toArray(value).map(unrefElement).filter(notNullish);
+    return new Set(items);
+  });
+  const stopWatch = watch(
+    () => targets.value,
+    (targets2) => {
+      cleanup();
+      if (isSupported.value && targets2.size) {
+        observer = new MutationObserver(callback);
+        targets2.forEach((el) => observer.observe(el, mutationOptions));
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  const takeRecords = () => {
+    return observer == null ? void 0 : observer.takeRecords();
+  };
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop,
+    takeRecords
+  };
+}
+
+function useResizeObserver(target, callback, options = {}) {
+  const { window = defaultWindow, ...observerOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
+  const stopWatch = watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els) {
+          if (_el)
+            observer.observe(_el, observerOptions);
+        }
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true,
+    updateTiming = "sync"
+  } = options;
+  const height = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  const right = ref(0);
+  const top = ref(0);
+  const width = ref(0);
+  const x = ref(0);
+  const y = ref(0);
+  function recalculate() {
+    const el = unrefElement(target);
+    if (!el) {
+      if (reset) {
+        height.value = 0;
+        bottom.value = 0;
+        left.value = 0;
+        right.value = 0;
+        top.value = 0;
+        width.value = 0;
+        x.value = 0;
+        y.value = 0;
+      }
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    height.value = rect.height;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    right.value = rect.right;
+    top.value = rect.top;
+    width.value = rect.width;
+    x.value = rect.x;
+    y.value = rect.y;
+  }
+  function update() {
+    if (updateTiming === "sync")
+      recalculate();
+    else if (updateTiming === "next-frame")
+      requestAnimationFrame(() => recalculate());
+  }
+  useResizeObserver(target, update);
+  watch(() => unrefElement(target), (ele) => !ele && update());
+  useMutationObserver(target, update, {
+    attributeFilter: ["style", "class"]
+  });
+  if (windowScroll)
+    useEventListener("scroll", update, { capture: true, passive: true });
+  if (windowResize)
+    useEventListener("resize", update, { passive: true });
+  tryOnMounted(() => {
+    if (immediate)
+      update();
+  });
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+
+const vElementBounding = {
+  mounted(el, binding) {
+    const [handler, options] = typeof binding.value === "function" ? [binding.value, {}] : binding.value;
+    const {
+      height,
+      bottom,
+      left,
+      right,
+      top,
+      width,
+      x,
+      y
+    } = useElementBounding(el, options);
+    watch([height, bottom, left, right, top, width, x, y], () => handler({ height, bottom, left, right, top, width, x, y }));
+  }
+};
+
+function onElementRemoval(target, callback, options = {}) {
+  const {
+    window = defaultWindow,
+    document = window == null ? void 0 : window.document,
+    flush = "sync"
+  } = options;
+  if (!window || !document)
+    return noop;
+  let stopFn;
+  const cleanupAndUpdate = (fn) => {
+    stopFn == null ? void 0 : stopFn();
+    stopFn = fn;
+  };
+  const stopWatch = watchEffect(() => {
+    const el = unrefElement(target);
+    if (el) {
+      const { stop } = useMutationObserver(
+        document,
+        (mutationsList) => {
+          const targetRemoved = mutationsList.map((mutation) => [...mutation.removedNodes]).flat().some((node) => node === el || node.contains(el));
+          if (targetRemoved) {
+            callback(mutationsList);
+          }
+        },
+        {
+          window,
+          childList: true,
+          subtree: true
+        }
+      );
+      cleanupAndUpdate(stop);
+    }
+  }, { flush });
+  const stopHandle = () => {
+    stopWatch();
+    cleanupAndUpdate();
+  };
+  tryOnScopeDispose(stopHandle);
+  return stopHandle;
+}
+
 function useElementHover(el, options = {}) {
   const {
     delayEnter = 0,
     delayLeave = 0,
+    triggerOnRemoval = false,
     window = defaultWindow
   } = options;
   const isHovered = ref(false);
@@ -938,6 +1148,12 @@ function useElementHover(el, options = {}) {
     return isHovered;
   useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
   useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
+  if (triggerOnRemoval) {
+    onElementRemoval(
+      computed(() => unrefElement(el)),
+      () => toggle(false)
+    );
+  }
   return isHovered;
 }
 
@@ -968,45 +1184,6 @@ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-function useResizeObserver(target, callback, options = {}) {
-  const { window = defaultWindow, ...observerOptions } = options;
-  let observer;
-  const isSupported = useSupported(() => window && "ResizeObserver" in window);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const targets = computed(() => {
-    const _targets = toValue(target);
-    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
-  });
-  const stopWatch = watch(
-    targets,
-    (els) => {
-      cleanup();
-      if (isSupported.value && window) {
-        observer = new ResizeObserver(callback);
-        for (const _el of els) {
-          if (_el)
-            observer.observe(_el, observerOptions);
-        }
-      }
-    },
-    { immediate: true, flush: "post" }
-  );
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
-  };
-}
-
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
   const isSVG = computed(() => {
@@ -1028,7 +1205,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
         }
       } else {
         if (boxSize) {
-          const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+          const formatBoxSize = toArray(boxSize);
           width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
           height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
         } else {
@@ -1100,7 +1277,7 @@ function useIntersectionObserver(target, callback, options = {}) {
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   const targets = computed(() => {
     const _target = toValue(target);
-    return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(notNullish);
+    return toArray(_target).map(unrefElement).filter(notNullish);
   });
   let cleanup = noop;
   const isActive = ref(immediate);
@@ -1637,7 +1814,7 @@ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
-    const data = reactive(useMouse(props));
+    const data = reactive(useMouse$1(props));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1650,7 +1827,7 @@ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useMouseInElement(target, props));
+    const data = reactive(useMouseInElement$1(target, props));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -1658,6 +1835,156 @@ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
+const UseMouseBuiltinExtractors = {
+  page: (event) => [event.pageX, event.pageY],
+  client: (event) => [event.clientX, event.clientY],
+  screen: (event) => [event.screenX, event.screenY],
+  movement: (event) => event instanceof Touch ? null : [event.movementX, event.movementY]
+};
+function useMouse(options = {}) {
+  const {
+    type = "page",
+    touch = true,
+    resetOnTouchEnds = false,
+    initialValue = { x: 0, y: 0 },
+    window = defaultWindow,
+    target = window,
+    scroll = true,
+    eventFilter
+  } = options;
+  let _prevMouseEvent = null;
+  let _prevScrollX = 0;
+  let _prevScrollY = 0;
+  const x = ref(initialValue.x);
+  const y = ref(initialValue.y);
+  const sourceType = ref(null);
+  const extractor = typeof type === "function" ? type : UseMouseBuiltinExtractors[type];
+  const mouseHandler = (event) => {
+    const result = extractor(event);
+    _prevMouseEvent = event;
+    if (result) {
+      [x.value, y.value] = result;
+      sourceType.value = "mouse";
+    }
+    if (window) {
+      _prevScrollX = window.scrollX;
+      _prevScrollY = window.scrollY;
+    }
+  };
+  const touchHandler = (event) => {
+    if (event.touches.length > 0) {
+      const result = extractor(event.touches[0]);
+      if (result) {
+        [x.value, y.value] = result;
+        sourceType.value = "touch";
+      }
+    }
+  };
+  const scrollHandler = () => {
+    if (!_prevMouseEvent || !window)
+      return;
+    const pos = extractor(_prevMouseEvent);
+    if (_prevMouseEvent instanceof MouseEvent && pos) {
+      x.value = pos[0] + window.scrollX - _prevScrollX;
+      y.value = pos[1] + window.scrollY - _prevScrollY;
+    }
+  };
+  const reset = () => {
+    x.value = initialValue.x;
+    y.value = initialValue.y;
+  };
+  const mouseHandlerWrapper = eventFilter ? (event) => eventFilter(() => mouseHandler(event), {}) : (event) => mouseHandler(event);
+  const touchHandlerWrapper = eventFilter ? (event) => eventFilter(() => touchHandler(event), {}) : (event) => touchHandler(event);
+  const scrollHandlerWrapper = eventFilter ? () => eventFilter(() => scrollHandler(), {}) : () => scrollHandler();
+  if (target) {
+    const listenerOptions = { passive: true };
+    useEventListener(target, ["mousemove", "dragover"], mouseHandlerWrapper, listenerOptions);
+    if (touch && type !== "movement") {
+      useEventListener(target, ["touchstart", "touchmove"], touchHandlerWrapper, listenerOptions);
+      if (resetOnTouchEnds)
+        useEventListener(target, "touchend", reset, listenerOptions);
+    }
+    if (scroll && type === "page")
+      useEventListener(window, "scroll", scrollHandlerWrapper, { passive: true });
+  }
+  return {
+    x,
+    y,
+    sourceType
+  };
+}
+
+function useMouseInElement(target, options = {}) {
+  const {
+    handleOutside = true,
+    window = defaultWindow
+  } = options;
+  const type = options.type || "page";
+  const { x, y, sourceType } = useMouse(options);
+  const targetRef = ref(target != null ? target : window == null ? void 0 : window.document.body);
+  const elementX = ref(0);
+  const elementY = ref(0);
+  const elementPositionX = ref(0);
+  const elementPositionY = ref(0);
+  const elementHeight = ref(0);
+  const elementWidth = ref(0);
+  const isOutside = ref(true);
+  let stop = () => {
+  };
+  if (window) {
+    stop = watch(
+      [targetRef, x, y],
+      () => {
+        const el = unrefElement(targetRef);
+        if (!el || !(el instanceof Element))
+          return;
+        const {
+          left,
+          top,
+          width,
+          height
+        } = el.getBoundingClientRect();
+        elementPositionX.value = left + (type === "page" ? window.pageXOffset : 0);
+        elementPositionY.value = top + (type === "page" ? window.pageYOffset : 0);
+        elementHeight.value = height;
+        elementWidth.value = width;
+        const elX = x.value - elementPositionX.value;
+        const elY = y.value - elementPositionY.value;
+        isOutside.value = width === 0 || height === 0 || elX < 0 || elY < 0 || elX > width || elY > height;
+        if (handleOutside || !isOutside.value) {
+          elementX.value = elX;
+          elementY.value = elY;
+        }
+      },
+      { immediate: true }
+    );
+    useEventListener(document, "mouseleave", () => {
+      isOutside.value = true;
+    });
+  }
+  return {
+    x,
+    y,
+    sourceType,
+    elementX,
+    elementY,
+    elementPositionX,
+    elementPositionY,
+    elementHeight,
+    elementWidth,
+    isOutside,
+    stop
+  };
+}
+
+const vMouseInElement = {
+  mounted(el, binding) {
+    const [handler, options] = typeof binding.value === "function" ? [binding.value, {}] : binding.value;
+    const state = reactiveOmit(reactive(useMouseInElement(el, options)), "stop");
+    watch(state, (val) => handler(val));
+  }
+};
+
 const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
@@ -1896,47 +2223,6 @@ const vResizeObserver = {
   }
 };
 
-function useMutationObserver(target, callback, options = {}) {
-  const { window = defaultWindow, ...mutationOptions } = options;
-  let observer;
-  const isSupported = useSupported(() => window && "MutationObserver" in window);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const targets = computed(() => {
-    const value = toValue(target);
-    const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(notNullish);
-    return new Set(items);
-  });
-  const stopWatch = watch(
-    () => targets.value,
-    (targets2) => {
-      cleanup();
-      if (isSupported.value && targets2.size) {
-        observer = new MutationObserver(callback);
-        targets2.forEach((el) => observer.observe(el, mutationOptions));
-      }
-    },
-    { immediate: true, flush: "post" }
-  );
-  const takeRecords = () => {
-    return observer == null ? void 0 : observer.takeRecords();
-  };
-  const stop = () => {
-    stopWatch();
-    cleanup();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop,
-    takeRecords
-  };
-}
-
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue, observe = false } = options;
   const variable = ref(initialValue);
@@ -2253,4 +2539,4 @@ const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementBounding, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vMouseInElement, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/components",
   "type": "module",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -42,8 +42,8 @@
   ],
   "dependencies": {
     "vue": "^3.5.13",
-    "@vueuse/core": "12.2.0",
-    "@vueuse/shared": "12.2.0"
+    "@vueuse/core": "12.3.0",
+    "@vueuse/shared": "12.3.0"
   },
   "scripts": {
     "build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild"