@vueuse/components 12.3.0 → 12.5.0

package/index.iife.js

@@ -17,58 +17,59 @@
     }
   });
 
-  const defaultWindow = shared.isClient ? window : void 0;
+  const defaultWindow = shared.isClient ? window : undefined;
 
   function unrefElement(elRef) {
     var _a;
     const plain = vue.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) {
-    let target;
-    let events;
-    let listeners;
-    let options;
-    if (typeof args[0] === "string" || Array.isArray(args[0])) {
-      [events, listeners, options] = args;
-      target = defaultWindow;
-    } else {
-      [target, events, listeners, options] = args;
-    }
-    if (!target)
-      return shared.noop;
-    events = shared.toArray(events);
-    listeners = shared.toArray(listeners);
     const cleanups = [];
     const cleanup = () => {
       cleanups.forEach((fn) => fn());
       cleanups.length = 0;
     };
-    const register = (el, event, listener, options2) => {
-      el.addEventListener(event, listener, options2);
-      return () => el.removeEventListener(event, listener, options2);
+    const register = (el, event, listener, options) => {
+      el.addEventListener(event, listener, options);
+      return () => el.removeEventListener(event, listener, options);
     };
-    const stopWatch = vue.watch(
-      () => [unrefElement(target), vue.toValue(options)],
-      ([el, options2]) => {
+    const firstParamTargets = vue.computed(() => {
+      const test = shared.toArray(vue.toValue(args[0])).filter((e) => e != null);
+      return test.every((e) => typeof e !== "string") ? test : undefined;
+    });
+    const stopWatch = shared.watchImmediate(
+      () => {
+        var _a, _b;
+        return [
+          (_b = (_a = firstParamTargets.value) == null ? undefined : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+          shared.toArray(vue.toValue(firstParamTargets.value ? args[1] : args[0])),
+          shared.toArray(vue.unref(firstParamTargets.value ? args[2] : args[1])),
+          // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+          vue.toValue(firstParamTargets.value ? args[3] : args[2])
+        ];
+      },
+      ([raw_targets, raw_events, raw_listeners, raw_options]) => {
         cleanup();
-        if (!el)
+        if (!(raw_targets == null ? undefined : raw_targets.length) || !(raw_events == null ? undefined : raw_events.length) || !(raw_listeners == null ? undefined : raw_listeners.length))
           return;
-        const optionsClone = shared.isObject(options2) ? { ...options2 } : options2;
+        const optionsClone = shared.isObject(raw_options) ? { ...raw_options } : raw_options;
         cleanups.push(
-          ...events.flatMap((event) => {
-            return listeners.map((listener) => register(el, event, listener, optionsClone));
-          })
+          ...raw_targets.flatMap(
+            (el) => raw_events.flatMap(
+              (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+            )
+          )
         );
       },
-      { immediate: true, flush: "post" }
+      { flush: "post" }
     );
     const stop = () => {
       stopWatch();
       cleanup();
     };
-    shared.tryOnScopeDispose(stop);
+    shared.tryOnScopeDispose(cleanup);
     return stop;
   }
 
@@ -79,8 +80,9 @@
       return shared.noop;
     if (shared.isIOS && !_iOSWorkaround) {
       _iOSWorkaround = true;
-      Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop));
-      window.document.documentElement.addEventListener("click", shared.noop);
+      const listenerOptions = { passive: true };
+      Array.from(window.document.body.children).forEach((el) => useEventListener(el, "click", shared.noop, listenerOptions));
+      useEventListener(window.document.documentElement, "click", shared.noop, listenerOptions);
     }
     let shouldListen = true;
     const shouldIgnore = (event) => {
@@ -139,11 +141,11 @@
         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;
@@ -213,7 +215,7 @@
   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
@@ -240,23 +242,23 @@
     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;
@@ -265,12 +267,12 @@
     }
     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,
@@ -282,28 +284,28 @@
           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),
@@ -391,7 +393,7 @@
       const data = vue.reactive(core.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);
       };
     }
   });
@@ -411,7 +413,7 @@
   const ssrWidthSymbol = Symbol("vueuse-ssr-width");
   function useSSRWidth() {
     const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
-    return typeof ssrWidth === "number" ? ssrWidth : void 0;
+    return typeof ssrWidth === "number" ? ssrWidth : undefined;
   }
 
   function useMounted() {
@@ -437,20 +439,12 @@
     const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
     const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
     const ssrSupport = vue.ref(typeof ssrWidth === "number");
-    let mediaQuery;
+    const mediaQuery = vue.shallowRef();
     const matches = vue.ref(false);
     const handler = (event) => {
       matches.value = event.matches;
     };
-    const cleanup = () => {
-      if (!mediaQuery)
-        return;
-      if ("removeEventListener" in mediaQuery)
-        mediaQuery.removeEventListener("change", handler);
-      else
-        mediaQuery.removeListener(handler);
-    };
-    const stopWatch = vue.watchEffect(() => {
+    vue.watchEffect(() => {
       if (ssrSupport.value) {
         ssrSupport.value = !isSupported.value;
         const queryStrings = vue.toValue(query).split(",");
@@ -471,19 +465,10 @@
       }
       if (!isSupported.value)
         return;
-      cleanup();
-      mediaQuery = window.matchMedia(vue.toValue(query));
-      if ("addEventListener" in mediaQuery)
-        mediaQuery.addEventListener("change", handler);
-      else
-        mediaQuery.addListener(handler);
-      matches.value = mediaQuery.matches;
-    });
-    shared.tryOnScopeDispose(() => {
-      stopWatch();
-      cleanup();
-      mediaQuery = void 0;
+      mediaQuery.value = window.matchMedia(vue.toValue(query));
+      matches.value = mediaQuery.value.matches;
     });
+    useEventListener(mediaQuery, "change", handler, { passive: true });
     return vue.computed(() => matches.value);
   }
 
@@ -547,6 +532,7 @@
       initOnMounted
     } = options;
     const data = (shallow ? vue.shallowRef : vue.ref)(typeof defaults === "function" ? defaults() : defaults);
+    const keyComputed = vue.computed(() => vue.toValue(key));
     if (!storage) {
       try {
         storage = getSSRHandler("getDefaultStorage", () => {
@@ -567,10 +553,11 @@
       () => write(data.value),
       { flush, deep, eventFilter }
     );
+    vue.watch(keyComputed, () => update(), { flush });
     if (window && listenToStorageChanges) {
       shared.tryOnMounted(() => {
         if (storage instanceof Storage)
-          useEventListener(window, "storage", update);
+          useEventListener(window, "storage", update, { passive: true });
         else
           useEventListener(window, customStorageEventName, updateFromCustomEvent);
         if (initOnMounted)
@@ -582,7 +569,7 @@
     function dispatchWriteEvent(oldValue, newValue) {
       if (window) {
         const payload = {
-          key,
+          key: keyComputed.value,
           oldValue,
           newValue,
           storageArea: storage
@@ -594,14 +581,14 @@
     }
     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);
           }
         }
@@ -610,10 +597,10 @@
       }
     }
     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);
@@ -635,7 +622,7 @@
         data.value = rawInit;
         return;
       }
-      if (event && event.key !== key)
+      if (event && event.key !== keyComputed.value)
         return;
       pauseWatch();
       try {
@@ -683,7 +670,7 @@
     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();
@@ -867,18 +854,18 @@
       });
       const containerElement = vue.computed(() => {
         var _a;
-        return (_a = props.containerElement) != null ? _a : void 0;
+        return (_a = props.containerElement) != null ? _a : undefined;
       });
       const disabled = vue.computed(() => !!props.disabled);
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
         vue.toValue(props.initialValue) || { x: 0, y: 0 },
-        core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
+        core.isClient ? 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;
@@ -919,7 +906,7 @@
     const cleanup = () => {
       if (observer) {
         observer.disconnect();
-        observer = void 0;
+        observer = undefined;
       }
     };
     const targets = vue.computed(() => {
@@ -939,7 +926,7 @@
       { immediate: true, flush: "post" }
     );
     const takeRecords = () => {
-      return observer == null ? void 0 : observer.takeRecords();
+      return observer == null ? undefined : observer.takeRecords();
     };
     const stop = () => {
       stopWatch();
@@ -960,7 +947,7 @@
     const cleanup = () => {
       if (observer) {
         observer.disconnect();
-        observer = void 0;
+        observer = undefined;
       }
     };
     const targets = vue.computed(() => {
@@ -1085,14 +1072,14 @@
   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 shared.noop;
     let stopFn;
     const cleanupAndUpdate = (fn) => {
-      stopFn == null ? void 0 : stopFn();
+      stopFn == null ? undefined : stopFn();
       stopFn = fn;
     };
     const stopWatch = vue.watchEffect(() => {
@@ -1136,7 +1123,7 @@
       const delay = entering ? delayEnter : delayLeave;
       if (timer) {
         clearTimeout(timer);
-        timer = void 0;
+        timer = undefined;
       }
       if (delay)
         timer = setTimeout(() => isHovered.value = entering, delay);
@@ -1187,7 +1174,7 @@
     const { window = defaultWindow, box = "content-box" } = options;
     const isSVG = vue.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 = vue.ref(initialSize.width);
     const height = vue.ref(initialSize.height);
@@ -1243,7 +1230,7 @@
   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);
       vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1433,11 +1420,11 @@
     const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
     const isReady = vue.ref(false);
     const isLoading = vue.ref(false);
-    const error = vue.shallowRef(void 0);
+    const error = vue.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)
@@ -1458,8 +1445,9 @@
       }
       return state.value;
     }
-    if (immediate)
+    if (immediate) {
       execute(delay);
+    }
     const shell = {
       state,
       isReady,
@@ -1516,7 +1504,7 @@
   function useImage(options, asyncStateOptions = {}) {
     const state = useAsyncState(
       () => loadImage(vue.toValue(options)),
-      void 0,
+      undefined,
       {
         resetOnExecute: true,
         ...asyncStateOptions
@@ -1601,7 +1589,7 @@
         return internalX.value;
       },
       set(x2) {
-        scrollTo(x2, void 0);
+        scrollTo(x2, undefined);
       }
     });
     const y = vue.computed({
@@ -1609,7 +1597,7 @@
         return internalY.value;
       },
       set(y2) {
-        scrollTo(void 0, y2);
+        scrollTo(undefined, y2);
       }
     });
     function scrollTo(_x, _y) {
@@ -1619,12 +1607,12 @@
       const _element = vue.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 = vue.toValue(_y)) != null ? _a : y.value,
         left: (_b = vue.toValue(_x)) != null ? _b : x.value,
         behavior: vue.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)
@@ -1658,7 +1646,7 @@
       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;
@@ -1904,7 +1892,7 @@
           useEventListener(target, "touchend", reset, listenerOptions);
       }
       if (scroll && type === "page")
-        useEventListener(window, "scroll", scrollHandlerWrapper, { passive: true });
+        useEventListener(window, "scroll", scrollHandlerWrapper, listenerOptions);
     }
     return {
       x,
@@ -1920,7 +1908,7 @@
     } = options;
     const type = options.type || "page";
     const { x, y, sourceType } = useMouse(options);
-    const targetRef = vue.ref(target != null ? target : window == null ? void 0 : window.document.body);
+    const targetRef = vue.ref(target != null ? target : window == null ? undefined : window.document.body);
     const elementX = vue.ref(0);
     const elementY = vue.ref(0);
     const elementPositionX = vue.ref(0);
@@ -1957,9 +1945,12 @@
         },
         { immediate: true }
       );
-      useEventListener(document, "mouseleave", () => {
-        isOutside.value = true;
-      });
+      useEventListener(
+        document,
+        "mouseleave",
+        () => isOutside.value = true,
+        { passive: true }
+      );
     }
     return {
       x,
@@ -2055,17 +2046,17 @@
         ...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);
         }
       }));
@@ -2227,14 +2218,14 @@
     const variable = vue.ref(initialValue);
     const elRef = vue.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 = vue.toValue(prop);
       const el = vue.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;
       }
     }
@@ -2258,7 +2249,7 @@
       (val) => {
         var _a;
         const raw_prop = vue.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
@@ -2288,7 +2279,7 @@
       bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
       leftCssVar.value = "env(safe-area-inset-left, 0px)";
       update();
-      useEventListener("resize", shared.useDebounceFn(update));
+      useEventListener("resize", shared.useDebounceFn(update), { passive: true });
     }
     function update() {
       top.value = getValue(topVarName);
@@ -2360,12 +2351,12 @@
           ...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);
           }
         });
@@ -2438,7 +2429,7 @@
       if (!el || !isLocked.value)
         return;
       if (shared.isIOS)
-        stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
+        stopTouchMoveListener == null ? undefined : stopTouchMoveListener();
       el.style.overflow = initialOverflow;
       elInitialOverflow.delete(el);
       isLocked.value = false;