@vueuse/components 12.3.0 → 12.4.0

package/index.mjs

@@ -18,12 +18,12 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-const defaultWindow = isClient ? window : void 0;
+const defaultWindow = isClient ? window : undefined;
 
 function unrefElement(elRef) {
   var _a;
   const plain = toValue(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  return (_a = plain == null ? undefined : plain.$el) != null ? _a : plain;
 }
 
 function useEventListener(...args) {
@@ -140,11 +140,11 @@ function onClickOutside(target, handler, options = {}) {
       setTimeout(() => {
         var _a;
         const el = unrefElement(target);
-        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement))) {
+        if (((_a = window.document.activeElement) == null ? undefined : _a.tagName) === "IFRAME" && !(el == null ? undefined : el.contains(window.document.activeElement))) {
           handler(event);
         }
       }, 0);
-    })
+    }, { passive: true })
   ].filter(Boolean);
   const stop = () => cleanup.forEach((fn) => fn());
   return stop;
@@ -214,7 +214,7 @@ function onKeyStroke(...args) {
 const vOnKeyStroke = {
   mounted(el, binding) {
     var _a, _b;
-    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
+    const keys = (_b = (_a = binding.arg) == null ? undefined : _a.split(",")) != null ? _b : true;
     if (typeof binding.value === "function") {
       onKeyStroke(keys, binding.value, {
         target: el
@@ -241,23 +241,23 @@ function onLongPress(target, handler, options) {
   function clear() {
     if (timeout) {
       clearTimeout(timeout);
-      timeout = void 0;
+      timeout = undefined;
     }
-    posStart = void 0;
-    startTimestamp = void 0;
+    posStart = undefined;
+    startTimestamp = undefined;
     hasLongPressed = false;
   }
   function onRelease(ev) {
     var _a2, _b2, _c;
     const [_startTimestamp, _posStart, _hasLongPressed] = [startTimestamp, posStart, hasLongPressed];
     clear();
-    if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
+    if (!(options == null ? undefined : options.onMouseUp) || !_posStart || !_startTimestamp)
       return;
-    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+    if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
       return;
-    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+    if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+    if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
       ev.stopPropagation();
     const dx = ev.x - _posStart.x;
     const dy = ev.y - _posStart.y;
@@ -266,12 +266,12 @@ function onLongPress(target, handler, options) {
   }
   function onDown(ev) {
     var _a2, _b2, _c, _d;
-    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+    if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
       return;
     clear();
-    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+    if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+    if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
       ev.stopPropagation();
     posStart = {
       x: ev.x,
@@ -283,28 +283,28 @@ function onLongPress(target, handler, options) {
         hasLongPressed = true;
         handler(ev);
       },
-      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+      (_d = options == null ? undefined : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
   function onMove(ev) {
     var _a2, _b2, _c, _d;
-    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+    if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
       return;
-    if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
+    if (!posStart || (options == null ? undefined : options.distanceThreshold) === false)
       return;
-    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+    if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+    if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
       ev.stopPropagation();
     const dx = ev.x - posStart.x;
     const dy = ev.y - posStart.y;
     const distance = Math.sqrt(dx * dx + dy * dy);
-    if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
+    if (distance >= ((_d = options == null ? undefined : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
       clear();
   }
   const listenerOptions = {
-    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
+    capture: (_a = options == null ? undefined : options.modifiers) == null ? undefined : _a.capture,
+    once: (_b = options == null ? undefined : options.modifiers) == null ? undefined : _b.once
   };
   const cleanup = [
     useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
@@ -392,7 +392,7 @@ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     const data = reactive(useClipboard(props));
     return () => {
       var _a;
-      return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
+      return (_a = slots.default) == null ? undefined : _a.call(slots, data);
     };
   }
 });
@@ -412,7 +412,7 @@ function getSSRHandler(key, fallback) {
 const ssrWidthSymbol = Symbol("vueuse-ssr-width");
 function useSSRWidth() {
   const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
-  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+  return typeof ssrWidth === "number" ? ssrWidth : undefined;
 }
 
 function useMounted() {
@@ -483,7 +483,7 @@ function useMediaQuery(query, options = {}) {
   tryOnScopeDispose(() => {
     stopWatch();
     cleanup();
-    mediaQuery = void 0;
+    mediaQuery = undefined;
   });
   return computed(() => matches.value);
 }
@@ -548,6 +548,7 @@ function useStorage(key, defaults, storage, options = {}) {
     initOnMounted
   } = options;
   const data = (shallow ? shallowRef : ref)(typeof defaults === "function" ? defaults() : defaults);
+  const keyComputed = computed(() => toValue(key));
   if (!storage) {
     try {
       storage = getSSRHandler("getDefaultStorage", () => {
@@ -568,10 +569,11 @@ function useStorage(key, defaults, storage, options = {}) {
     () => write(data.value),
     { flush, deep, eventFilter }
   );
+  watch(keyComputed, () => update(), { flush });
   if (window && listenToStorageChanges) {
     tryOnMounted(() => {
       if (storage instanceof Storage)
-        useEventListener(window, "storage", update);
+        useEventListener(window, "storage", update, { passive: true });
       else
         useEventListener(window, customStorageEventName, updateFromCustomEvent);
       if (initOnMounted)
@@ -583,7 +585,7 @@ function useStorage(key, defaults, storage, options = {}) {
   function dispatchWriteEvent(oldValue, newValue) {
     if (window) {
       const payload = {
-        key,
+        key: keyComputed.value,
         oldValue,
         newValue,
         storageArea: storage
@@ -595,14 +597,14 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   function write(v) {
     try {
-      const oldValue = storage.getItem(key);
+      const oldValue = storage.getItem(keyComputed.value);
       if (v == null) {
         dispatchWriteEvent(oldValue, null);
-        storage.removeItem(key);
+        storage.removeItem(keyComputed.value);
       } else {
         const serialized = serializer.write(v);
         if (oldValue !== serialized) {
-          storage.setItem(key, serialized);
+          storage.setItem(keyComputed.value, serialized);
           dispatchWriteEvent(oldValue, serialized);
         }
       }
@@ -611,10 +613,10 @@ function useStorage(key, defaults, storage, options = {}) {
     }
   }
   function read(event) {
-    const rawValue = event ? event.newValue : storage.getItem(key);
+    const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
     if (rawValue == null) {
       if (writeDefaults && rawInit != null)
-        storage.setItem(key, serializer.write(rawInit));
+        storage.setItem(keyComputed.value, serializer.write(rawInit));
       return rawInit;
     } else if (!event && mergeDefaults) {
       const value = serializer.read(rawValue);
@@ -636,7 +638,7 @@ function useStorage(key, defaults, storage, options = {}) {
       data.value = rawInit;
       return;
     }
-    if (event && event.key !== key)
+    if (event && event.key !== keyComputed.value)
       return;
     pauseWatch();
     try {
@@ -684,7 +686,7 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
+      const el = typeof selector2 === "string" ? window == null ? undefined : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       const classesToAdd = /* @__PURE__ */ new Set();
@@ -868,18 +870,18 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     });
     const containerElement = computed(() => {
       var _a;
-      return (_a = props.containerElement) != null ? _a : void 0;
+      return (_a = props.containerElement) != null ? _a : undefined;
     });
     const disabled = computed(() => !!props.disabled);
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
       toValue(props.initialValue) || { x: 0, y: 0 },
-      isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0
+      isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : undefined
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position, event) => {
       var _a;
-      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
+      (_a = props.onEnd) == null ? undefined : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -920,7 +922,7 @@ function useMutationObserver(target, callback, options = {}) {
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
-      observer = void 0;
+      observer = undefined;
     }
   };
   const targets = computed(() => {
@@ -940,7 +942,7 @@ function useMutationObserver(target, callback, options = {}) {
     { immediate: true, flush: "post" }
   );
   const takeRecords = () => {
-    return observer == null ? void 0 : observer.takeRecords();
+    return observer == null ? undefined : observer.takeRecords();
   };
   const stop = () => {
     stopWatch();
@@ -961,7 +963,7 @@ function useResizeObserver(target, callback, options = {}) {
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
-      observer = void 0;
+      observer = undefined;
     }
   };
   const targets = computed(() => {
@@ -1086,14 +1088,14 @@ const vElementBounding = {
 function onElementRemoval(target, callback, options = {}) {
   const {
     window = defaultWindow,
-    document = window == null ? void 0 : window.document,
+    document = window == null ? undefined : window.document,
     flush = "sync"
   } = options;
   if (!window || !document)
     return noop;
   let stopFn;
   const cleanupAndUpdate = (fn) => {
-    stopFn == null ? void 0 : stopFn();
+    stopFn == null ? undefined : stopFn();
     stopFn = fn;
   };
   const stopWatch = watchEffect(() => {
@@ -1137,7 +1139,7 @@ function useElementHover(el, options = {}) {
     const delay = entering ? delayEnter : delayLeave;
     if (timer) {
       clearTimeout(timer);
-      timer = void 0;
+      timer = undefined;
     }
     if (delay)
       timer = setTimeout(() => isHovered.value = entering, delay);
@@ -1188,7 +1190,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   const { window = defaultWindow, box = "content-box" } = options;
   const isSVG = computed(() => {
     var _a, _b;
-    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+    return (_b = (_a = unrefElement(target)) == null ? undefined : _a.namespaceURI) == null ? undefined : _b.includes("svg");
   });
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
@@ -1244,7 +1246,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 const vElementSize = {
   mounted(el, binding) {
     var _a;
-    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? undefined : _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 }));
@@ -1434,11 +1436,11 @@ function useAsyncState(promise, initialState, options) {
   const state = shallow ? shallowRef(initialState) : ref(initialState);
   const isReady = ref(false);
   const isLoading = ref(false);
-  const error = shallowRef(void 0);
+  const error = shallowRef(undefined);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
       state.value = initialState;
-    error.value = void 0;
+    error.value = undefined;
     isReady.value = false;
     isLoading.value = true;
     if (delay2 > 0)
@@ -1459,8 +1461,9 @@ function useAsyncState(promise, initialState, options) {
     }
     return state.value;
   }
-  if (immediate)
+  if (immediate) {
     execute(delay);
+  }
   const shell = {
     state,
     isReady,
@@ -1517,7 +1520,7 @@ async function loadImage(options) {
 function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
     () => loadImage(toValue(options)),
-    void 0,
+    undefined,
     {
       resetOnExecute: true,
       ...asyncStateOptions
@@ -1602,7 +1605,7 @@ function useScroll(element, options = {}) {
       return internalX.value;
     },
     set(x2) {
-      scrollTo(x2, void 0);
+      scrollTo(x2, undefined);
     }
   });
   const y = computed({
@@ -1610,7 +1613,7 @@ function useScroll(element, options = {}) {
       return internalY.value;
     },
     set(y2) {
-      scrollTo(void 0, y2);
+      scrollTo(undefined, y2);
     }
   });
   function scrollTo(_x, _y) {
@@ -1620,12 +1623,12 @@ function useScroll(element, options = {}) {
     const _element = toValue(element);
     if (!_element)
       return;
-    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? undefined : _c.scrollTo({
       top: (_a = toValue(_y)) != null ? _a : y.value,
       left: (_b = toValue(_x)) != null ? _b : x.value,
       behavior: toValue(behavior)
     });
-    const scrollContainer = ((_d = _element == null ? void 0 : _element.document) == null ? void 0 : _d.documentElement) || (_element == null ? void 0 : _element.documentElement) || _element;
+    const scrollContainer = ((_d = _element == null ? undefined : _element.document) == null ? undefined : _d.documentElement) || (_element == null ? undefined : _element.documentElement) || _element;
     if (x != null)
       internalX.value = scrollContainer.scrollLeft;
     if (y != null)
@@ -1659,7 +1662,7 @@ function useScroll(element, options = {}) {
     var _a;
     if (!window)
       return;
-    const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
+    const el = ((_a = target == null ? undefined : target.document) == null ? undefined : _a.documentElement) || (target == null ? undefined : target.documentElement) || unrefElement(target);
     const { display, flexDirection, direction } = getComputedStyle(el);
     const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
@@ -1905,7 +1908,7 @@ function useMouse(options = {}) {
         useEventListener(target, "touchend", reset, listenerOptions);
     }
     if (scroll && type === "page")
-      useEventListener(window, "scroll", scrollHandlerWrapper, { passive: true });
+      useEventListener(window, "scroll", scrollHandlerWrapper, listenerOptions);
   }
   return {
     x,
@@ -1921,7 +1924,7 @@ function useMouseInElement(target, options = {}) {
   } = options;
   const type = options.type || "page";
   const { x, y, sourceType } = useMouse(options);
-  const targetRef = ref(target != null ? target : window == null ? void 0 : window.document.body);
+  const targetRef = ref(target != null ? target : window == null ? undefined : window.document.body);
   const elementX = ref(0);
   const elementY = ref(0);
   const elementPositionX = ref(0);
@@ -1958,9 +1961,12 @@ function useMouseInElement(target, options = {}) {
       },
       { immediate: true }
     );
-    useEventListener(document, "mouseleave", () => {
-      isOutside.value = true;
-    });
+    useEventListener(
+      document,
+      "mouseleave",
+      () => isOutside.value = true,
+      { passive: true }
+    );
   }
   return {
     x,
@@ -2056,17 +2062,17 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       ...props,
       onPageChange(...args) {
         var _a;
-        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
+        (_a = props.onPageChange) == null ? undefined : _a.call(props, ...args);
         emit("page-change", ...args);
       },
       onPageSizeChange(...args) {
         var _a;
-        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
+        (_a = props.onPageSizeChange) == null ? undefined : _a.call(props, ...args);
         emit("page-size-change", ...args);
       },
       onPageCountChange(...args) {
         var _a;
-        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
+        (_a = props.onPageCountChange) == null ? undefined : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
     }));
@@ -2228,14 +2234,14 @@ function useCssVar(prop, target, options = {}) {
   const variable = ref(initialValue);
   const elRef = computed(() => {
     var _a;
-    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+    return unrefElement(target) || ((_a = window == null ? undefined : window.document) == null ? undefined : _a.documentElement);
   });
   function updateCssVar() {
     var _a;
     const key = toValue(prop);
     const el = toValue(elRef);
     if (el && window && key) {
-      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? undefined : _a.trim();
       variable.value = value || initialValue;
     }
   }
@@ -2259,7 +2265,7 @@ function useCssVar(prop, target, options = {}) {
     (val) => {
       var _a;
       const raw_prop = toValue(prop);
-      if (((_a = elRef.value) == null ? void 0 : _a.style) && raw_prop) {
+      if (((_a = elRef.value) == null ? undefined : _a.style) && raw_prop) {
         if (val == null)
           elRef.value.style.removeProperty(raw_prop);
         else
@@ -2289,7 +2295,7 @@ function useScreenSafeArea() {
     bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
     leftCssVar.value = "env(safe-area-inset-left, 0px)";
     update();
-    useEventListener("resize", useDebounceFn(update));
+    useEventListener("resize", useDebounceFn(update), { passive: true });
   }
   function update() {
     top.value = getValue(topVarName);
@@ -2361,12 +2367,12 @@ const vScroll = {
         ...options,
         onScroll(e) {
           var _a;
-          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+          (_a = options.onScroll) == null ? undefined : _a.call(options, e);
           handler(state);
         },
         onStop(e) {
           var _a;
-          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+          (_a = options.onStop) == null ? undefined : _a.call(options, e);
           handler(state);
         }
       });
@@ -2439,7 +2445,7 @@ function useScrollLock(element, initialState = false) {
     if (!el || !isLocked.value)
       return;
     if (isIOS)
-      stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
+      stopTouchMoveListener == null ? undefined : stopTouchMoveListener();
     el.style.overflow = initialOverflow;
     elInitialOverflow.delete(el);
     isLocked.value = false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/components",
   "type": "module",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -42,8 +42,8 @@
   ],
   "dependencies": {
     "vue": "^3.5.13",
-    "@vueuse/core": "12.3.0",
-    "@vueuse/shared": "12.3.0"
+    "@vueuse/core": "12.4.0",
+    "@vueuse/shared": "12.4.0"
   },
   "scripts": {
     "build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild"