@vueuse/components 9.1.1 → 9.3.0

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, watch, computed, reactive, shallowRef, watchEffect, nextTick, toRef, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, 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, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, isFunction, tryOnMounted, tryOnBeforeMount, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, resolveRef, isIOS } from '@vueuse/shared';
+import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, isFunction, tryOnMounted, resolveRef, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
   name: "OnClickOutside",
@@ -67,23 +67,21 @@ function onClickOutside(target, handler, options = {}) {
   const listener = (event) => {
     window.clearTimeout(fallback);
     const el = unrefElement(target);
-    const composedPath = event.composedPath();
-    if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
+    if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
       return;
-    if (ignore && ignore.length > 0) {
-      if (ignore.some((target2) => {
-        const el2 = unrefElement(target2);
-        return el2 && (event.target === el2 || composedPath.includes(el2));
-      }))
-        return;
-    }
     handler(event);
   };
+  const shouldIgnore = (event) => {
+    return ignore && ignore.some((target2) => {
+      const el = unrefElement(target2);
+      return el && (event.target === el || event.composedPath().includes(el));
+    });
+  };
   const cleanup = [
     useEventListener(window, "click", listener, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
       const el = unrefElement(target);
-      shouldListen.value = !!el && !e.composedPath().includes(el);
+      shouldListen.value = !!el && !e.composedPath().includes(el) && !shouldIgnore(e);
     }, { passive: true }),
     useEventListener(window, "pointerup", (e) => {
       if (e.button === 0) {
@@ -103,18 +101,20 @@ function onClickOutside(target, handler, options = {}) {
   return stop;
 }
 
-const handler = () => {
-  let stop = null;
-  return (el, binding) => {
-    if (stop) {
-      stop();
-      stop = onClickOutside(el, binding.value);
-      return;
+const vOnClickOutside = {
+  [directiveHooks.mounted](el, binding) {
+    const capture = !binding.modifiers.bubble;
+    if (typeof binding.value === "function") {
+      el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
+    } else {
+      const [handler, options] = binding.value;
+      el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
     }
-    stop = onClickOutside(el, binding.value);
-  };
+  },
+  [directiveHooks.unmounted](el) {
+    el.__onClickOutside_stop();
+  }
 };
-const vOnClickOutside = handler();
 
 const createKeyPredicate = (keyFilter) => {
   if (typeof keyFilter === "function")
@@ -123,12 +123,29 @@ const createKeyPredicate = (keyFilter) => {
     return (event) => event.key === keyFilter;
   else if (Array.isArray(keyFilter))
     return (event) => keyFilter.includes(event.key);
-  else if (keyFilter)
-    return () => true;
-  else
-    return () => false;
+  return () => true;
 };
-function onKeyStroke(key, handler, options = {}) {
+function onKeyStroke(...args) {
+  let key;
+  let handler;
+  let options = {};
+  if (args.length === 3) {
+    key = args[0];
+    handler = args[1];
+    options = args[2];
+  } else if (args.length === 2) {
+    if (typeof args[1] === "object") {
+      key = true;
+      handler = args[0];
+      options = args[1];
+    } else {
+      key = args[0];
+      handler = args[1];
+    }
+  } else {
+    key = true;
+    handler = args[0];
+  }
   const { target = defaultWindow, eventName = "keydown", passive = false } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
@@ -157,7 +174,7 @@ var __spreadValues$d = (a, b) => {
 const vOnKeyStroke = {
   [directiveHooks.mounted](el, binding) {
     var _a, _b;
-    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
+    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
     if (typeof binding.value === "function") {
       onKeyStroke(keys, binding.value, {
         target: el
@@ -175,11 +192,11 @@ const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
   var _a, _b;
   const elementRef = computed(() => unrefElement(target));
-  let timeout = null;
+  let timeout;
   function clear() {
-    if (timeout != null) {
+    if (timeout) {
       clearTimeout(timeout);
-      timeout = null;
+      timeout = void 0;
     }
   }
   function onDown(ev) {
@@ -418,28 +435,27 @@ function useMediaQuery(query, options = {}) {
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = ref(false);
+  const cleanup = () => {
+    if (!mediaQuery)
+      return;
+    if ("removeEventListener" in mediaQuery)
+      mediaQuery.removeEventListener("change", update);
+    else
+      mediaQuery.removeListener(update);
+  };
   const update = () => {
     if (!isSupported.value)
       return;
-    if (!mediaQuery)
-      mediaQuery = window.matchMedia(query);
+    cleanup();
+    mediaQuery = window.matchMedia(resolveRef(query).value);
     matches.value = mediaQuery.matches;
-  };
-  tryOnBeforeMount(() => {
-    update();
-    if (!mediaQuery)
-      return;
     if ("addEventListener" in mediaQuery)
       mediaQuery.addEventListener("change", update);
     else
       mediaQuery.addListener(update);
-    tryOnScopeDispose(() => {
-      if ("removeEventListener" in mediaQuery)
-        mediaQuery.removeEventListener("change", update);
-      else
-        mediaQuery.removeListener(update);
-    });
-  });
+  };
+  watchEffect(update);
+  tryOnScopeDispose(() => cleanup());
   return matches;
 }
 
@@ -645,12 +661,18 @@ const UseDraggable = defineComponent({
     "preventDefault",
     "stopPropagation",
     "pointerTypes",
-    "as"
+    "as",
+    "handle"
   ],
   setup(props, { slots }) {
     const target = ref();
+    const handle = computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const initialValue = props.storageKey ? useStorage$1(props.storageKey, resolveUnref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
     const data = reactive(useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+      handle,
       initialValue
     })));
     return () => {
@@ -746,11 +768,18 @@ function useResizeObserver(target, callback, options = {}) {
 }
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const { box = "content-box" } = options;
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
   useResizeObserver(target, ([entry]) => {
-    width.value = entry.contentRect.width;
-    height.value = entry.contentRect.height;
+    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+    if (boxSize) {
+      width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+      height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+    } else {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }
   }, options);
   watch(() => unrefElement(target), (ele) => {
     width.value = ele ? initialSize.width : 0;
@@ -793,7 +822,7 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     if (!window)
       return;
     const document = window.document;
-    const el = resolveUnref(element);
+    const el = unrefElement(element);
     if (!el) {
       elementIsVisible.value = false;
     } else {
@@ -801,9 +830,12 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
       elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
     }
   };
-  tryOnMounted(testBounding);
+  watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
   if (window) {
-    tryOnMounted(() => useEventListener(() => resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+    useEventListener(scrollTarget || window, "scroll", testBounding, {
+      capture: false,
+      passive: true
+    });
   }
   return elementIsVisible;
 }
@@ -995,10 +1027,38 @@ function useScroll(element, options = {}) {
     eventListenerOptions = {
       capture: false,
       passive: true
-    }
+    },
+    behavior = "auto"
   } = options;
-  const x = ref(0);
-  const y = ref(0);
+  const internalX = ref(0);
+  const internalY = ref(0);
+  const x = computed({
+    get() {
+      return internalX.value;
+    },
+    set(x2) {
+      scrollTo(x2, void 0);
+    }
+  });
+  const y = computed({
+    get() {
+      return internalY.value;
+    },
+    set(y2) {
+      scrollTo(void 0, y2);
+    }
+  });
+  function scrollTo(_x, _y) {
+    var _a, _b, _c;
+    const _element = resolveUnref(element);
+    if (!_element)
+      return;
+    (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
+      top: (_a = resolveUnref(_y)) != null ? _a : y.value,
+      left: (_b = resolveUnref(_x)) != null ? _b : x.value,
+      behavior: resolveUnref(behavior)
+    });
+  }
   const isScrolling = ref(false);
   const arrivedState = reactive({
     left: true,
@@ -1023,19 +1083,19 @@ function useScroll(element, options = {}) {
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
     const scrollLeft = eventTarget.scrollLeft;
-    directions.left = scrollLeft < x.value;
-    directions.right = scrollLeft > x.value;
+    directions.left = scrollLeft < internalX.value;
+    directions.right = scrollLeft > internalY.value;
     arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
     arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
-    x.value = scrollLeft;
+    internalX.value = scrollLeft;
     let scrollTop = eventTarget.scrollTop;
     if (e.target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
-    directions.top = scrollTop < y.value;
-    directions.bottom = scrollTop > y.value;
+    directions.top = scrollTop < internalY.value;
+    directions.bottom = scrollTop > internalY.value;
     arrivedState.top = scrollTop <= 0 + (offset.top || 0);
     arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
-    y.value = scrollTop;
+    internalY.value = scrollTop;
     isScrolling.value = true;
     onScrollEnd(e);
     onScroll(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "9.1.1",
+  "version": "9.3.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "9.1.1",
-    "@vueuse/shared": "9.1.1",
+    "@vueuse/core": "9.3.0",
+    "@vueuse/shared": "9.3.0",
     "vue-demi": "*"
   }
 }