@vueuse/components 8.4.2 → 8.7.0

package/index.cjs

@@ -23,9 +23,8 @@ const OnClickOutside = vueDemi.defineComponent({
 });
 
 function unrefElement(elRef) {
-  var _a;
   const plain = vueDemi.unref(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  return plain != null && "$el" in plain ? plain.$el : plain;
 }
 
 const defaultWindow = shared.isClient ? window : void 0;
@@ -90,7 +89,11 @@ function onClickOutside(target, handler, options = {}) {
       shouldListen.value = !!el && !e.composedPath().includes(el);
     }, { passive: true }),
     useEventListener(window, "pointerup", (e) => {
-      fallback = window.setTimeout(() => listener(e), 50);
+      if (e.button === 0) {
+        const path = e.composedPath();
+        e.composedPath = () => path;
+        fallback = window.setTimeout(() => listener(e), 50);
+      }
     }, { passive: true })
   ];
   const stop = () => cleanup.forEach((fn) => fn());
@@ -132,19 +135,19 @@ function onKeyStroke(key, handler, options = {}) {
   return useEventListener(target, eventName, listener, passive);
 }
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
@@ -158,7 +161,7 @@ const vOnKeyStroke = {
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$b({
+      onKeyStroke(keys, handler, __spreadValues$c({
         target: el
       }, options));
     }
@@ -366,10 +369,11 @@ function useStorage(key, initialValue, storage, options = {}) {
 
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
+  const isSupported = Boolean(window && "matchMedia" in window);
   let mediaQuery;
   const matches = vueDemi.ref(false);
   const update = () => {
-    if (!window)
+    if (!isSupported)
       return;
     if (!mediaQuery)
       mediaQuery = window.matchMedia(query);
@@ -397,19 +401,19 @@ function usePreferredDark(options) {
   return useMediaQuery("(prefers-color-scheme: dark)", options);
 }
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
@@ -423,7 +427,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$a({
+  const modes = __spreadValues$b({
     auto: "",
     light: "light",
     dark: "dark"
@@ -561,21 +565,21 @@ const UseDocumentVisibility = vueDemi.defineComponent({
   }
 });
 
-var __defProp$9 = Object.defineProperty;
+var __defProp$a = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
@@ -588,13 +592,14 @@ const UseDraggable = vueDemi.defineComponent({
     "initialValue",
     "exact",
     "preventDefault",
+    "stopPropagation",
     "pointerTypes",
     "as"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
     const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
-    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$9({}, props), {
+    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
       initialValue
     })));
     return () => {
@@ -646,17 +651,17 @@ const UseElementSize = vueDemi.defineComponent({
   }
 });
 
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -815,6 +820,109 @@ const UseIdle = vueDemi.defineComponent({
   }
 });
 
+function useAsyncState(promise, initialState, options) {
+  const {
+    immediate = true,
+    delay = 0,
+    onError = shared.noop,
+    resetOnExecute = true,
+    shallow = true
+  } = options != null ? options : {};
+  const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
+  const isReady = vueDemi.ref(false);
+  const isLoading = vueDemi.ref(false);
+  const error = vueDemi.ref(void 0);
+  async function execute(delay2 = 0, ...args) {
+    if (resetOnExecute)
+      state.value = initialState;
+    error.value = void 0;
+    isReady.value = false;
+    isLoading.value = true;
+    if (delay2 > 0)
+      await shared.promiseTimeout(delay2);
+    const _promise = typeof promise === "function" ? promise(...args) : promise;
+    try {
+      const data = await _promise;
+      state.value = data;
+      isReady.value = true;
+    } catch (e) {
+      error.value = e;
+      onError(e);
+    } finally {
+      isLoading.value = false;
+    }
+    return state.value;
+  }
+  if (immediate)
+    execute(delay);
+  return {
+    state,
+    isReady,
+    isLoading,
+    error,
+    execute
+  };
+}
+
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
+    }
+  return a;
+};
+async function loadImage(options) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const { src, srcset, sizes } = options;
+    img.src = src;
+    if (srcset)
+      img.srcset = srcset;
+    if (sizes)
+      img.sizes = sizes;
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+  });
+}
+const useImage = (options, asyncStateOptions = {}) => {
+  const state = useAsyncState(() => loadImage(vueDemi.unref(options)), void 0, __spreadValues$9({
+    resetOnExecute: true
+  }, asyncStateOptions));
+  vueDemi.watch(() => vueDemi.unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+  return state;
+};
+
+const UseImage = vueDemi.defineComponent({
+  name: "UseImage",
+  props: [
+    "src",
+    "srcset",
+    "sizes",
+    "as"
+  ],
+  setup(props, { slots }) {
+    const data = vueDemi.reactive(useImage(props));
+    return () => {
+      if (data.isLoading && slots.loading)
+        return slots.loading(data);
+      else if (data.error && slots.error)
+        return slots.error(data.error);
+      if (slots.default)
+        return slots.default(data);
+      return vueDemi.h(props.as || "img", props);
+    };
+  }
+});
+
 function useScroll(element, options = {}) {
   const {
     throttle = 0,
@@ -864,7 +972,9 @@ function useScroll(element, options = {}) {
       arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
       arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
       x.value = scrollLeft;
-      const scrollTop = eventTarget.scrollTop;
+      let scrollTop = eventTarget.scrollTop;
+      if (e.target === document && !scrollTop)
+        scrollTop = document.body.scrollTop;
       directions.top = scrollTop < y.value;
       directions.bottom = scrollTop > y.value;
       arrivedState.top = scrollTop <= 0 + (offset.top || 0);
@@ -905,15 +1015,31 @@ var __spreadValues$8 = (a, b) => {
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function useInfiniteScroll(element, onLoadMore, options = {}) {
-  var _a;
+  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({
-      bottom: (_a = options.distance) != null ? _a : 0
+      [direction]: (_b = options.distance) != null ? _b : 0
     }, options.offset)
   })));
-  vueDemi.watch(() => state.arrivedState.bottom, (v) => {
-    if (v)
-      onLoadMore(state);
+  vueDemi.watch(() => state.arrivedState[direction], async (v) => {
+    var _a2, _b2;
+    if (v) {
+      const elem = vueDemi.unref(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
+          });
+        });
+      }
+    }
   });
 }
 
@@ -1234,15 +1360,17 @@ const UsePreferredLanguages = vueDemi.defineComponent({
   }
 });
 
-function useCssVar(prop, target, { window = defaultWindow } = {}) {
-  const variable = vueDemi.ref("");
+function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+  const variable = vueDemi.ref(initialValue);
   const elRef = vueDemi.computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
   vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
-    if (el && window)
-      variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
+    if (el && window) {
+      const value = window.getComputedStyle(el).getPropertyValue(prop2);
+      variable.value = value || initialValue;
+    }
   }, { immediate: true });
   vueDemi.watch(variable, (val) => {
     var _a;
@@ -1374,7 +1502,6 @@ const vScroll = {
   }
 };
 
-var _a, _b;
 function preventDefault(rawEvent) {
   const e = rawEvent || window.event;
   if (e.touches.length > 1)
@@ -1383,7 +1510,6 @@ function preventDefault(rawEvent) {
     e.preventDefault();
   return false;
 }
-const isIOS = shared.isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
 function useScrollLock(element, initialState = false) {
   const isLocked = vueDemi.ref(initialState);
   let stopTouchMoveListener = null;
@@ -1402,7 +1528,7 @@ function useScrollLock(element, initialState = false) {
     const ele = vueDemi.unref(element);
     if (!ele || isLocked.value)
       return;
-    if (isIOS) {
+    if (shared.isIOS) {
       stopTouchMoveListener = useEventListener(ele, "touchmove", preventDefault, { passive: false });
     }
     ele.style.overflow = "hidden";
@@ -1412,7 +1538,7 @@ function useScrollLock(element, initialState = false) {
     const ele = vueDemi.unref(element);
     if (!ele || !isLocked.value)
       return;
-    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
+    shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
     ele.style.overflow = initialOverflow;
     isLocked.value = false;
   };
@@ -1585,6 +1711,7 @@ exports.UseEyeDropper = UseEyeDropper;
 exports.UseFullscreen = UseFullscreen;
 exports.UseGeolocation = UseGeolocation;
 exports.UseIdle = UseIdle;
+exports.UseImage = UseImage;
 exports.UseMouse = UseMouse;
 exports.UseMouseInElement = UseMouseInElement;
 exports.UseMousePressed = UseMousePressed;

package/index.d.ts

@@ -266,6 +266,17 @@ declare const UseIdle: vue_demi.DefineComponent<IdleOptions & {
     timeout: number;
 }>, {}>;
 
+interface UseImageOptions {
+    /** Address of the resource */
+    src: string;
+    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
+    srcset?: string;
+    /** Image sizes for different page layouts */
+    sizes?: string;
+}
+
+declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseImageOptions & RenderableComponent>, {}>;
+
 interface UseScrollOptions {
     /**
      * Throttle time for scroll event, it’s disabled by default.
@@ -340,13 +351,25 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      * @default 0
      */
     distance?: number;
+    /**
+     * The direction in which to listen the scroll.
+     *
+     * @default 'bottom'
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Whether to preserve the current scroll position when loading more items.
+     *
+     * @default false
+     */
+    preserveScrollPosition?: boolean;
 }
 /**
  * Reactive infinite scroll.
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
 declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
@@ -509,4 +532,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 
-export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };