@vueuse/components 10.4.0 → 10.5.0

package/index.cjs

@@ -21,8 +21,9 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
 });
 
 function unrefElement(elRef) {
+  var _a;
   const plain = shared.toValue(elRef);
-  return plain?.$el ?? plain;
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
 const defaultWindow = shared.isClient ? window : void 0;
@@ -59,9 +60,10 @@ function useEventListener(...args) {
       cleanup();
       if (!el)
         return;
+      const optionsClone = shared.isObject(options2) ? { ...options2 } : options2;
       cleanups.push(
         ...events.flatMap((event) => {
-          return listeners.map((listener) => register(el, event, listener, options2));
+          return listeners.map((listener) => register(el, event, listener, optionsClone));
         })
       );
     },
@@ -117,8 +119,9 @@ function onClickOutside(target, handler, options = {}) {
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
       setTimeout(() => {
+        var _a;
         const el = unrefElement(target);
-        if (window.document.activeElement?.tagName === "IFRAME" && !el?.contains(window.document.activeElement))
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
           handler(event);
       }, 0);
     })
@@ -190,7 +193,8 @@ function onKeyStroke(...args) {
 
 const vOnKeyStroke = {
   [shared.directiveHooks.mounted](el, binding) {
-    const keys = binding.arg?.split(",") ?? true;
+    var _a, _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
@@ -207,6 +211,7 @@ const vOnKeyStroke = {
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
+  var _a, _b;
   const elementRef = vueDemi.computed(() => unrefElement(target));
   let timeout;
   function clear() {
@@ -216,21 +221,22 @@ function onLongPress(target, handler, options) {
     }
   }
   function onDown(ev) {
-    if (options?.modifiers?.self && ev.target !== elementRef.value)
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
       return;
     clear();
-    if (options?.modifiers?.prevent)
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
       ev.preventDefault();
-    if (options?.modifiers?.stop)
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
     timeout = setTimeout(
       () => handler(ev),
-      options?.delay ?? DEFAULT_DELAY
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
   const listenerOptions = {
-    capture: options?.modifiers?.capture,
-    once: options?.modifiers?.once
+    capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
+    once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
   };
   useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
   useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
@@ -352,6 +358,7 @@ const StorageSerializers = {
 };
 const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
+  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -368,7 +375,10 @@ function useStorage(key, defaults, storage, options = {}) {
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
   if (!storage) {
     try {
-      storage = getSSRHandler("getDefaultStorage", () => defaultWindow?.localStorage)();
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a2;
+        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+      })();
     } catch (e) {
       onError(e);
     }
@@ -377,7 +387,7 @@ function useStorage(key, defaults, storage, options = {}) {
     return data;
   const rawInit = shared.toValue(defaults);
   const type = guessSerializerType(rawInit);
-  const serializer = options.serializer ?? StorageSerializers[type];
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
     data,
     () => write(data.value),
@@ -447,7 +457,7 @@ function useStorage(key, defaults, storage, options = {}) {
       return;
     pauseWatch();
     try {
-      if (event?.newValue !== serializer.write(data.value))
+      if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
         data.value = read(event);
     } catch (e) {
       onError(e);
@@ -539,13 +549,11 @@ function useColorMode(options = {}) {
   const preferredDark = usePreferredDark({ window });
   const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
   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 state = vueDemi.computed(() => store.value === "auto" ? system.value : store.value);
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window?.document.querySelector(selector2) : unrefElement(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       let style;
@@ -573,7 +581,8 @@ function useColorMode(options = {}) {
     }
   );
   function defaultOnChanged(mode) {
-    updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
+    var _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -710,7 +719,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const handle = vueDemi.computed(() => props.handle ?? target.value);
+    const handle = vueDemi.computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
       shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -718,7 +730,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position, event) => {
-      props.onEnd?.(position, event);
+      var _a;
+      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -808,9 +821,7 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = vueDemi.computed(
-    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
-  );
+  const targets = vueDemi.computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
   const stopWatch = vueDemi.watch(
     targets,
     (els) => {
@@ -836,7 +847,10 @@ function useResizeObserver(target, callback, options = {}) {
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
-  const isSVG = vueDemi.computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
+  const isSVG = vueDemi.computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
   useResizeObserver(
@@ -878,7 +892,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 
 const vElementSize = {
   [shared.directiveHooks.mounted](el, binding) {
-    const handler = typeof binding.value === "function" ? binding.value : binding.value?.[0];
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
     const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
     const { width, height } = useElementSize(el, ...options);
     vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -959,7 +974,8 @@ function useIntersectionObserver(target, callback, options = {}) {
   };
 }
 
-function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+function useElementVisibility(element, options = {}) {
+  const { window = defaultWindow, scrollTarget } = options;
   const elementIsVisible = vueDemi.ref(false);
   useIntersectionObserver(
     element,
@@ -1049,7 +1065,7 @@ function useAsyncState(promise, initialState, options) {
     resetOnExecute = true,
     shallow = true,
     throwError
-  } = options ?? {};
+  } = options != null ? options : {};
   const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
   const isReady = vueDemi.ref(false);
   const isLoading = vueDemi.ref(false);
@@ -1204,14 +1220,15 @@ function useScroll(element, options = {}) {
     }
   });
   function scrollTo(_x, _y) {
+    var _a, _b, _c;
     if (!window)
       return;
     const _element = shared.toValue(element);
     if (!_element)
       return;
-    (_element instanceof Document ? window.document.body : _element)?.scrollTo({
-      top: shared.toValue(_y) ?? y.value,
-      left: shared.toValue(_x) ?? x.value,
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
+      top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+      left: (_b = shared.toValue(_x)) != null ? _b : x.value,
       behavior: shared.toValue(behavior)
     });
   }
@@ -1240,9 +1257,10 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const setArrivedState = (target) => {
+    var _a;
     if (!window)
       return;
-    const el = target.document ? target.document.documentElement : target.documentElement ?? target;
+    const el = target.document ? target.document.documentElement : (_a = target.documentElement) != null ? _a : target;
     const { display, flexDirection } = getComputedStyle(el);
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
@@ -1274,9 +1292,10 @@ function useScroll(element, options = {}) {
     internalY.value = scrollTop;
   };
   const onScrollHandler = (e) => {
+    var _a;
     if (!window)
       return;
-    const eventTarget = e.target.documentElement ?? e.target;
+    const eventTarget = (_a = e.target.documentElement) != null ? _a : e.target;
     setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1317,6 +1336,7 @@ function resolveElement(el) {
 }
 
 function useInfiniteScroll(element, onLoadMore, options = {}) {
+  var _a;
   const {
     direction = "bottom",
     interval = 100
@@ -1326,7 +1346,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     {
       ...options,
       offset: {
-        [direction]: options.distance ?? 0,
+        [direction]: (_a = options.distance) != null ? _a : 0,
         ...options.offset
       }
     }
@@ -1478,15 +1498,18 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
     const data = vueDemi.reactive(core.useOffsetPagination({
       ...props,
       onPageChange(...args) {
-        props.onPageChange?.(...args);
+        var _a;
+        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-change", ...args);
       },
       onPageSizeChange(...args) {
-        props.onPageSizeChange?.(...args);
+        var _a;
+        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-size-change", ...args);
       },
       onPageCountChange(...args) {
-        props.onPageCountChange?.(...args);
+        var _a;
+        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
     }));
@@ -1656,12 +1679,16 @@ function useMutationObserver(target, callback, options = {}) {
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue = "", observe = false } = options;
   const variable = vueDemi.ref(initialValue);
-  const elRef = vueDemi.computed(() => unrefElement(target) || window?.document?.documentElement);
+  const elRef = vueDemi.computed(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
   function updateCssVar() {
+    var _a;
     const key = shared.toValue(prop);
     const el = shared.toValue(elRef);
     if (el && window) {
-      const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
   }
@@ -1679,7 +1706,8 @@ function useCssVar(prop, target, options = {}) {
   vueDemi.watch(
     variable,
     (val) => {
-      if (elRef.value?.style)
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
         elRef.value.style.setProperty(shared.toValue(prop), val);
     }
   );
@@ -1776,11 +1804,13 @@ const vScroll = {
       const state = useScroll(el, {
         ...options,
         onScroll(e) {
-          options.onScroll?.(e);
+          var _a;
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
           handler(state);
         },
         onStop(e) {
-          options.onStop?.(e);
+          var _a;
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
           handler(state);
         }
       });
@@ -1846,7 +1876,7 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(shared.toValue(element));
     if (!el || !isLocked.value)
       return;
-    shared.isIOS && stopTouchMoveListener?.();
+    shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
     el.style.overflow = initialOverflow;
     isLocked.value = false;
   };
@@ -1914,21 +1944,9 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
     expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
-    return () => vueDemi.h(
-      "div",
-      { ...containerProps },
-      [
-        vueDemi.h(
-          "div",
-          { ...wrapperProps.value },
-          list.value.map((item) => vueDemi.h(
-            "div",
-            { style: { overFlow: "hidden", height: item.height } },
-            slots.default ? slots.default(item) : "Please set content!"
-          ))
-        )
-      ]
-    );
+    return () => vueDemi.h("div", { ...containerProps }, [
+      vueDemi.h("div", { ...wrapperProps.value }, list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
+    ]);
   }
 });
 

package/index.d.cts

@@ -297,9 +297,6 @@ interface ElementSize {
  * Reactive size of an HTML element.
  *
  * @see https://vueuse.org/useElementSize
- * @param target
- * @param callback
- * @param options
  */
 declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
     width: vue_demi.Ref<number>;

package/index.d.mts

@@ -297,9 +297,6 @@ interface ElementSize {
  * Reactive size of an HTML element.
  *
  * @see https://vueuse.org/useElementSize
- * @param target
- * @param callback
- * @param options
  */
 declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
     width: vue_demi.Ref<number>;

package/index.d.ts

@@ -297,9 +297,6 @@ interface ElementSize {
  * Reactive size of an HTML element.
  *
  * @see https://vueuse.org/useElementSize
- * @param target
- * @param callback
- * @param options
  */
 declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
     width: vue_demi.Ref<number>;