@vueuse/components 10.0.2 → 10.1.2

package/index.cjs

@@ -187,19 +187,19 @@ function onKeyStroke(...args) {
   return useEventListener(target, eventName, listener, passive);
 }
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$e = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
@@ -213,7 +213,7 @@ const vOnKeyStroke = {
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$d({
+      onKeyStroke(keys, handler, __spreadValues$e({
         target: el
       }, options));
     }
@@ -334,19 +334,19 @@ function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = 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) => {
+var __defProp$d = Object.defineProperty;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
@@ -463,7 +463,7 @@ function useStorage(key, defaults, storage, options = {}) {
       if (typeof mergeDefaults === "function")
         return mergeDefaults(value, rawInit);
       else if (type === "object" && !Array.isArray(value))
-        return __spreadValues$c(__spreadValues$c({}, rawInit), value);
+        return __spreadValues$d(__spreadValues$d({}, rawInit), value);
       return value;
     } else if (typeof rawValue !== "string") {
       return rawValue;
@@ -550,19 +550,19 @@ function usePreferredDark(options) {
   return useMediaQuery("(prefers-color-scheme: dark)", options);
 }
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = 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$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = 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$d.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
@@ -579,26 +579,21 @@ function useColorMode(options = {}) {
     emitAuto,
     disableTransition = true
   } = options;
-  const modes = __spreadValues$b({
+  const modes = __spreadValues$c({
     auto: "",
     light: "light",
     dark: "dark"
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
   const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
-  const store = storageRef || (storageKey == null ? vueDemi.ref(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
-  const state = vueDemi.computed({
-    get() {
-      return store.value === "auto" && !emitAuto ? system.value : store.value;
-    },
-    set(v) {
-      store.value = v;
-    }
-  });
+  const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
+  const state = vueDemi.computed(
+    () => store.value === "auto" ? system.value : store.value
+  );
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : shared.toValue(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       let style;
@@ -626,8 +621,7 @@ function useColorMode(options = {}) {
   );
   function defaultOnChanged(mode) {
     var _a;
-    const resolvedMode = mode === "auto" ? system.value : mode;
-    updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -636,13 +630,19 @@ function useColorMode(options = {}) {
       defaultOnChanged(mode);
   }
   vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
-  if (emitAuto)
-    vueDemi.watch(system, () => onChanged(state.value), { flush: "post" });
   shared.tryOnMounted(() => onChanged(state.value));
+  const auto = vueDemi.computed({
+    get() {
+      return emitAuto ? store.value : state.value;
+    },
+    set(v) {
+      store.value = v;
+    }
+  });
   try {
-    return Object.assign(state, { store, system });
+    return Object.assign(auto, { store, system, state });
   } catch (e) {
-    return state;
+    return auto;
   }
 }
 
@@ -739,25 +739,25 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComp
   }
 });
 
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = 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 __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = 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$c.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDraggable",
   props: [
@@ -790,7 +790,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       storageValue.value.x = position.x;
       storageValue.value.y = position.y;
     };
-    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$9(__spreadValues$b({}, props), {
       handle,
       initialValue,
       onEnd
@@ -863,17 +863,17 @@ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1123,6 +1123,25 @@ const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
+var __defProp$a = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+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$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;
+};
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function useAsyncState(promise, initialState, options) {
   const {
     immediate = true,
@@ -1163,13 +1182,23 @@ function useAsyncState(promise, initialState, options) {
   }
   if (immediate)
     execute(delay);
-  return {
+  const shell = {
     state,
     isReady,
     isLoading,
     error,
     execute
   };
+  function waitUntilIsLoaded() {
+    return new Promise((resolve, reject) => {
+      shared.until(isLoading).toBe(false).then(() => resolve(shell)).catch(reject);
+    });
+  }
+  return __spreadProps$8(__spreadValues$a({}, shell), {
+    then(onFulfilled, onRejected) {
+      return waitUntilIsLoaded().then(onFulfilled, onRejected);
+    }
+  });
 }
 
 var __defProp$9 = Object.defineProperty;
@@ -1191,12 +1220,18 @@ var __spreadValues$9 = (a, b) => {
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    const { src, srcset, sizes } = options;
+    const { src, srcset, sizes, class: clazz, loading, crossorigin } = options;
     img.src = src;
     if (srcset)
       img.srcset = srcset;
     if (sizes)
       img.sizes = sizes;
+    if (clazz)
+      img.className = clazz;
+    if (loading)
+      img.loading = loading;
+    if (crossorigin)
+      img.crossOrigin = crossorigin;
     img.onload = () => resolve(img);
     img.onerror = reject;
   });
@@ -1223,7 +1258,11 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "src",
     "srcset",
     "sizes",
-    "as"
+    "as",
+    "alt",
+    "class",
+    "loading",
+    "crossorigin"
   ],
   setup(props, { slots }) {
     const data = vueDemi.reactive(useImage(props));
@@ -1311,14 +1350,14 @@ function useScroll(element, options = {}) {
     onStop(e);
   };
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
-  const onScrollHandler = (e) => {
-    const eventTarget = e.target === document ? e.target.documentElement : e.target;
-    const { display, flexDirection } = getComputedStyle(eventTarget);
-    const scrollLeft = eventTarget.scrollLeft;
+  const setArrivedState = (target) => {
+    const el = target === document ? target.documentElement : target;
+    const { display, flexDirection } = getComputedStyle(el);
+    const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
     const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
-    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1327,13 +1366,13 @@ function useScroll(element, options = {}) {
       arrivedState.right = right;
     }
     internalX.value = scrollLeft;
-    let scrollTop = eventTarget.scrollTop;
-    if (e.target === document && !scrollTop)
+    let scrollTop = el.scrollTop;
+    if (target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
     const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;
@@ -1342,6 +1381,10 @@ function useScroll(element, options = {}) {
       arrivedState.bottom = bottom;
     }
     internalY.value = scrollTop;
+  };
+  const onScrollHandler = (e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
     onScroll(e);
@@ -1363,7 +1406,12 @@ function useScroll(element, options = {}) {
     y,
     isScrolling,
     arrivedState,
-    directions
+    directions,
+    measure() {
+      const _element = shared.toValue(element);
+      if (_element)
+        setArrivedState(_element);
+    }
   };
 }
 
@@ -1403,6 +1451,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   const promise = vueDemi.ref();
   const isLoading = vueDemi.computed(() => !!promise.value);
   function checkAndLoad() {
+    state.measure();
     const el = shared.toValue(element);
     if (!el)
       return;

package/index.d.ts

@@ -164,14 +164,15 @@ interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWind
     shallow?: boolean;
 }
 
-type BasicColorSchema = 'light' | 'dark' | 'auto';
-interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseStorageOptions<T | BasicColorSchema> {
+type BasicColorMode = 'light' | 'dark';
+type BasicColorSchema = BasicColorMode | 'auto';
+interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStorageOptions<T | BasicColorMode> {
     /**
      * CSS Selector for the target element applying to
      *
      * @default 'html'
      */
-    selector?: string | MaybeRefOrGetter<HTMLElement | null | undefined>;
+    selector?: string | MaybeElementRef;
     /**
      * HTML attribute applying the target element
      *
@@ -183,7 +184,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      *
      * @default 'auto'
      */
-    initialValue?: T | BasicColorSchema;
+    initialValue?: MaybeRefOrGetter<T | BasicColorSchema>;
     /**
      * Prefix when adding value to the attribute
      */
@@ -194,7 +195,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      *
      * @default undefined
      */
-    onChanged?: (mode: T | BasicColorSchema, defaultHandler: ((mode: T | BasicColorSchema) => void)) => void;
+    onChanged?: (mode: T | BasicColorMode, defaultHandler: ((mode: T | BasicColorMode) => void)) => void;
     /**
      * Custom storage ref
      *
@@ -222,6 +223,8 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      * This is useful when the fact that `auto` mode was selected needs to be known.
      *
      * @default undefined
+     * @deprecated use `store.value` when `auto` mode needs to be known
+     * @see https://vueuse.org/core/useColorMode/#advanced-usage
      */
     emitAuto?: boolean;
     /**
@@ -233,7 +236,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
     disableTransition?: boolean;
 }
 
-declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorSchema>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorSchema>>, {}>;
+declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorMode>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorMode>>, {}>;
 
 declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDarkOptions>, {}>;
 
@@ -344,6 +347,14 @@ interface UseImageOptions {
     srcset?: string;
     /** Image sizes for different page layouts */
     sizes?: string;
+    /** Image alternative information */
+    alt?: string;
+    /** Image classes */
+    class?: string;
+    /** Image loading */
+    loading?: HTMLImageElement['loading'];
+    /** Image CORS settings */
+    crossorigin?: string;
 }
 
 declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseImageOptions & RenderableComponent>, {}>;
@@ -419,6 +430,7 @@ declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement |
         top: boolean;
         bottom: boolean;
     };
+    measure(): void;
 };
 type UseScrollReturn = ReturnType<typeof useScroll>;