@vueuse/components 8.5.0 → 8.7.1

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, 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, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, tryOnBeforeMount, tryOnMounted, useToggle, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
+import { isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, tryOnBeforeMount, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
   name: "OnClickOutside",
@@ -19,9 +19,8 @@ const OnClickOutside = defineComponent({
 });
 
 function unrefElement(elRef) {
-  var _a;
   const plain = unref(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  return plain != null && "$el" in plain ? plain.$el : plain;
 }
 
 const defaultWindow = isClient ? window : void 0;
@@ -86,7 +85,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());
@@ -128,19 +131,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;
 };
@@ -154,7 +157,7 @@ const vOnKeyStroke = {
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$b({
+      onKeyStroke(keys, handler, __spreadValues$c({
         target: el
       }, options));
     }
@@ -394,19 +397,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;
 };
@@ -420,7 +423,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$a({
+  const modes = __spreadValues$b({
     auto: "",
     light: "light",
     dark: "dark"
@@ -558,21 +561,21 @@ const UseDocumentVisibility = 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;
 };
@@ -585,13 +588,14 @@ const UseDraggable = defineComponent({
     "initialValue",
     "exact",
     "preventDefault",
+    "stopPropagation",
     "pointerTypes",
     "as"
   ],
   setup(props, { slots }) {
     const target = ref();
     const initialValue = props.storageKey ? useStorage$1(props.storageKey, unref(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$9({}, props), {
+    const data = reactive(useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
       initialValue
     })));
     return () => {
@@ -643,17 +647,17 @@ const UseElementSize = 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;
@@ -812,6 +816,109 @@ const UseIdle = defineComponent({
   }
 });
 
+function useAsyncState(promise, initialState, options) {
+  const {
+    immediate = true,
+    delay = 0,
+    onError = noop,
+    resetOnExecute = true,
+    shallow = true
+  } = options != null ? options : {};
+  const state = shallow ? shallowRef(initialState) : ref(initialState);
+  const isReady = ref(false);
+  const isLoading = ref(false);
+  const error = 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 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(unref(options)), void 0, __spreadValues$9({
+    resetOnExecute: true
+  }, asyncStateOptions));
+  watch(() => unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+  return state;
+};
+
+const UseImage = defineComponent({
+  name: "UseImage",
+  props: [
+    "src",
+    "srcset",
+    "sizes",
+    "as"
+  ],
+  setup(props, { slots }) {
+    const data = 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 h(props.as || "img", props);
+    };
+  }
+});
+
 function useScroll(element, options = {}) {
   const {
     throttle = 0,
@@ -861,7 +968,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);
@@ -902,15 +1011,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 = 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)
   })));
-  watch(() => state.arrivedState.bottom, (v) => {
-    if (v)
-      onLoadMore(state);
+  watch(() => state.arrivedState[direction], async (v) => {
+    var _a2, _b2;
+    if (v) {
+      const elem = 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) {
+        nextTick(() => {
+          elem.scrollTo({
+            top: elem.scrollHeight - previous.height,
+            left: elem.scrollWidth - previous.width
+          });
+        });
+      }
+    }
   });
 }
 
@@ -1231,15 +1356,17 @@ const UsePreferredLanguages = defineComponent({
   }
 });
 
-function useCssVar(prop, target, { window = defaultWindow } = {}) {
-  const variable = ref("");
+function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } = {}) {
+  const variable = ref(initialValue);
   const elRef = computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
   watch([elRef, () => 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 });
   watch(variable, (val) => {
     var _a;
@@ -1560,4 +1687,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/package.json

@@ -1,40 +1,40 @@
 {
   "name": "@vueuse/components",
-  "version": "8.5.0",
+  "version": "8.7.1",
   "description": "Renderless components for VueUse",
-  "keywords": [
-    "vue",
-    "vue-use",
-    "utils"
-  ],
-  "license": "MIT",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
+  "license": "MIT",
+  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vueuse/vueuse.git",
     "directory": "packages/components"
   },
-  "main": "./index.cjs",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "unpkg": "./index.iife.min.js",
-  "jsdelivr": "./index.iife.min.js",
+  "bugs": {
+    "url": "https://github.com/vueuse/vueuse/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue-use",
+    "utils"
+  ],
+  "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./index.mjs",
+      "types": "./index.d.ts",
       "require": "./index.cjs",
-      "types": "./index.d.ts"
+      "import": "./index.mjs"
     },
     "./*": "./*"
   },
-  "sideEffects": false,
-  "bugs": {
-    "url": "https://github.com/vueuse/vueuse/issues"
-  },
-  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "unpkg": "./index.iife.min.js",
+  "jsdelivr": "./index.iife.min.js",
+  "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "8.5.0",
-    "@vueuse/shared": "8.5.0",
+    "@vueuse/core": "8.7.1",
+    "@vueuse/shared": "8.7.1",
     "vue-demi": "*"
   }
 }