@vueuse/components 10.4.0 → 10.5.0

package/index.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, 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, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { toValue, isClient, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, toRef, tryOnMounted, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { toValue, isClient, noop, isObject, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, toRef, tryOnMounted, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -19,8 +19,9 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 });
 
 function unrefElement(elRef) {
+  var _a;
   const plain = toValue(elRef);
-  return plain?.$el ?? plain;
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
 const defaultWindow = isClient ? window : void 0;
@@ -57,9 +58,10 @@ function useEventListener(...args) {
       cleanup();
       if (!el)
         return;
+      const optionsClone = 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));
         })
       );
     },
@@ -115,8 +117,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);
     })
@@ -188,7 +191,8 @@ function onKeyStroke(...args) {
 
 const vOnKeyStroke = {
   [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
@@ -205,6 +209,7 @@ const vOnKeyStroke = {
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
+  var _a, _b;
   const elementRef = computed(() => unrefElement(target));
   let timeout;
   function clear() {
@@ -214,21 +219,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);
@@ -350,6 +356,7 @@ const StorageSerializers = {
 };
 const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
+  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -366,7 +373,10 @@ function useStorage(key, defaults, storage, options = {}) {
   const data = (shallow ? shallowRef : 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);
     }
@@ -375,7 +385,7 @@ function useStorage(key, defaults, storage, options = {}) {
     return data;
   const rawInit = 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 } = pausableWatch(
     data,
     () => write(data.value),
@@ -445,7 +455,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);
@@ -537,13 +547,11 @@ function useColorMode(options = {}) {
   const preferredDark = usePreferredDark({ window });
   const system = computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
-  const state = computed(
-    () => store.value === "auto" ? system.value : store.value
-  );
+  const state = 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;
@@ -571,7 +579,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)
@@ -708,7 +717,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   ],
   setup(props, { slots }) {
     const target = ref();
-    const handle = computed(() => props.handle ?? target.value);
+    const handle = computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
       toValue(props.initialValue) || { x: 0, y: 0 },
@@ -716,7 +728,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ 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;
@@ -806,9 +819,7 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = computed(
-    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
-  );
+  const targets = computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
   const stopWatch = watch(
     targets,
     (els) => {
@@ -834,7 +845,10 @@ function useResizeObserver(target, callback, options = {}) {
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
-  const isSVG = computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
+  const isSVG = computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
   useResizeObserver(
@@ -876,7 +890,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 
 const vElementSize = {
   [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);
     watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -957,7 +972,8 @@ function useIntersectionObserver(target, callback, options = {}) {
   };
 }
 
-function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+function useElementVisibility(element, options = {}) {
+  const { window = defaultWindow, scrollTarget } = options;
   const elementIsVisible = ref(false);
   useIntersectionObserver(
     element,
@@ -1047,7 +1063,7 @@ function useAsyncState(promise, initialState, options) {
     resetOnExecute = true,
     shallow = true,
     throwError
-  } = options ?? {};
+  } = options != null ? options : {};
   const state = shallow ? shallowRef(initialState) : ref(initialState);
   const isReady = ref(false);
   const isLoading = ref(false);
@@ -1202,14 +1218,15 @@ function useScroll(element, options = {}) {
     }
   });
   function scrollTo(_x, _y) {
+    var _a, _b, _c;
     if (!window)
       return;
     const _element = toValue(element);
     if (!_element)
       return;
-    (_element instanceof Document ? window.document.body : _element)?.scrollTo({
-      top: toValue(_y) ?? y.value,
-      left: toValue(_x) ?? x.value,
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
+      top: (_a = toValue(_y)) != null ? _a : y.value,
+      left: (_b = toValue(_x)) != null ? _b : x.value,
       behavior: toValue(behavior)
     });
   }
@@ -1238,9 +1255,10 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = 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;
@@ -1272,9 +1290,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);
@@ -1315,6 +1334,7 @@ function resolveElement(el) {
 }
 
 function useInfiniteScroll(element, onLoadMore, options = {}) {
+  var _a;
   const {
     direction = "bottom",
     interval = 100
@@ -1324,7 +1344,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     {
       ...options,
       offset: {
-        [direction]: options.distance ?? 0,
+        [direction]: (_a = options.distance) != null ? _a : 0,
         ...options.offset
       }
     }
@@ -1476,15 +1496,18 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     const data = reactive(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);
       }
     }));
@@ -1654,12 +1677,16 @@ function useMutationObserver(target, callback, options = {}) {
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue = "", observe = false } = options;
   const variable = ref(initialValue);
-  const elRef = computed(() => unrefElement(target) || window?.document?.documentElement);
+  const elRef = computed(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
   function updateCssVar() {
+    var _a;
     const key = toValue(prop);
     const el = 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;
     }
   }
@@ -1677,7 +1704,8 @@ function useCssVar(prop, target, options = {}) {
   watch(
     variable,
     (val) => {
-      if (elRef.value?.style)
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
         elRef.value.style.setProperty(toValue(prop), val);
     }
   );
@@ -1774,11 +1802,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);
         }
       });
@@ -1844,7 +1874,7 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(toValue(element));
     if (!el || !isLocked.value)
       return;
-    isIOS && stopTouchMoveListener?.();
+    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
     el.style.overflow = initialOverflow;
     isLocked.value = false;
   };
@@ -1912,21 +1942,9 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(listRef, props.options);
     expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
-    return () => h(
-      "div",
-      { ...containerProps },
-      [
-        h(
-          "div",
-          { ...wrapperProps.value },
-          list.value.map((item) => h(
-            "div",
-            { style: { overFlow: "hidden", height: item.height } },
-            slots.default ? slots.default(item) : "Please set content!"
-          ))
-        )
-      ]
-    );
+    return () => h("div", { ...containerProps }, [
+      h("div", { ...wrapperProps.value }, list.value.map((item) => h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
+    ]);
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -32,8 +32,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.cts",
   "dependencies": {
-    "@vueuse/core": "10.4.0",
-    "@vueuse/shared": "10.4.0",
-    "vue-demi": ">=0.14.5"
+    "@vueuse/core": "10.5.0",
+    "@vueuse/shared": "10.5.0",
+    "vue-demi": ">=0.14.6"
   }
 }