@vueuse/components 12.4.0 → 12.6.0

package/index.cjs

@@ -20,70 +20,73 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-const defaultWindow = shared.isClient ? window : undefined;
+const defaultWindow = shared.isClient ? window : void 0;
 
 function unrefElement(elRef) {
   var _a;
   const plain = vue.toValue(elRef);
-  return (_a = plain == null ? undefined : plain.$el) != null ? _a : plain;
+  return (_a = plain == null ? void 0 : 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 : void 0;
+  });
+  const stopWatch = shared.watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _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 ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : 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;
 }
 
 let _iOSWorkaround = false;
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
-  if (!window)
-    return shared.noop;
+  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
+  if (!window) {
+    return controls ? { stop: shared.noop, cancel: shared.noop, trigger: shared.noop } : 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) => {
@@ -115,7 +118,7 @@ function onClickOutside(target, handler, options = {}) {
       return;
     if (!el || el === event.target || event.composedPath().includes(el))
       return;
-    if (event.detail === 0)
+    if ("detail" in event && event.detail === 0)
       shouldListen = !shouldIgnore(event);
     if (!shouldListen) {
       shouldListen = true;
@@ -142,13 +145,26 @@ function onClickOutside(target, handler, options = {}) {
       setTimeout(() => {
         var _a;
         const el = unrefElement(target);
-        if (((_a = window.document.activeElement) == null ? undefined : _a.tagName) === "IFRAME" && !(el == null ? undefined : 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);
     }, { passive: true })
   ].filter(Boolean);
   const stop = () => cleanup.forEach((fn) => fn());
+  if (controls) {
+    return {
+      stop,
+      cancel: () => {
+        shouldListen = false;
+      },
+      trigger: (event) => {
+        shouldListen = true;
+        listener(event);
+        shouldListen = false;
+      }
+    };
+  }
   return stop;
 }
 
@@ -216,7 +232,7 @@ function onKeyStroke(...args) {
 const vOnKeyStroke = {
   mounted(el, binding) {
     var _a, _b;
-    const keys = (_b = (_a = binding.arg) == null ? undefined : _a.split(",")) != null ? _b : true;
+    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
@@ -243,23 +259,23 @@ function onLongPress(target, handler, options) {
   function clear() {
     if (timeout) {
       clearTimeout(timeout);
-      timeout = undefined;
+      timeout = void 0;
     }
-    posStart = undefined;
-    startTimestamp = undefined;
+    posStart = void 0;
+    startTimestamp = void 0;
     hasLongPressed = false;
   }
   function onRelease(ev) {
     var _a2, _b2, _c;
     const [_startTimestamp, _posStart, _hasLongPressed] = [startTimestamp, posStart, hasLongPressed];
     clear();
-    if (!(options == null ? undefined : options.onMouseUp) || !_posStart || !_startTimestamp)
+    if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
       return;
-    if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
       return;
-    if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
     const dx = ev.x - _posStart.x;
     const dy = ev.y - _posStart.y;
@@ -268,12 +284,12 @@ function onLongPress(target, handler, options) {
   }
   function onDown(ev) {
     var _a2, _b2, _c, _d;
-    if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
       return;
     clear();
-    if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
     posStart = {
       x: ev.x,
@@ -285,28 +301,28 @@ function onLongPress(target, handler, options) {
         hasLongPressed = true;
         handler(ev);
       },
-      (_d = options == null ? undefined : options.delay) != null ? _d : DEFAULT_DELAY
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
   function onMove(ev) {
     var _a2, _b2, _c, _d;
-    if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
       return;
-    if (!posStart || (options == null ? undefined : options.distanceThreshold) === false)
+    if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
       return;
-    if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _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 ? undefined : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
+    if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
       clear();
   }
   const listenerOptions = {
-    capture: (_a = options == null ? undefined : options.modifiers) == null ? undefined : _a.capture,
-    once: (_b = options == null ? undefined : options.modifiers) == null ? undefined : _b.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
   };
   const cleanup = [
     useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
@@ -394,7 +410,7 @@ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     const data = vue.reactive(core.useClipboard(props));
     return () => {
       var _a;
-      return (_a = slots.default) == null ? undefined : _a.call(slots, data);
+      return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
     };
   }
 });
@@ -414,7 +430,7 @@ function getSSRHandler(key, fallback) {
 const ssrWidthSymbol = Symbol("vueuse-ssr-width");
 function useSSRWidth() {
   const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
-  return typeof ssrWidth === "number" ? ssrWidth : undefined;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
 }
 
 function useMounted() {
@@ -440,20 +456,12 @@ function useMediaQuery(query, options = {}) {
   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(",");
@@ -474,19 +482,10 @@ function useMediaQuery(query, options = {}) {
     }
     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 = undefined;
+    mediaQuery.value = window.matchMedia(vue.toValue(query));
+    matches.value = mediaQuery.value.matches;
   });
+  useEventListener(mediaQuery, "change", handler, { passive: true });
   return vue.computed(() => matches.value);
 }
 
@@ -688,7 +687,7 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window == null ? undefined : window.document.querySelector(selector2) : unrefElement(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       const classesToAdd = /* @__PURE__ */ new Set();
@@ -872,18 +871,18 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     });
     const containerElement = vue.computed(() => {
       var _a;
-      return (_a = props.containerElement) != null ? _a : undefined;
+      return (_a = props.containerElement) != null ? _a : void 0;
     });
     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 : undefined
+      core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position, event) => {
       var _a;
-      (_a = props.onEnd) == null ? undefined : _a.call(props, position, event);
+      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -924,7 +923,7 @@ function useMutationObserver(target, callback, options = {}) {
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
-      observer = undefined;
+      observer = void 0;
     }
   };
   const targets = vue.computed(() => {
@@ -944,7 +943,7 @@ function useMutationObserver(target, callback, options = {}) {
     { immediate: true, flush: "post" }
   );
   const takeRecords = () => {
-    return observer == null ? undefined : observer.takeRecords();
+    return observer == null ? void 0 : observer.takeRecords();
   };
   const stop = () => {
     stopWatch();
@@ -965,7 +964,7 @@ function useResizeObserver(target, callback, options = {}) {
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
-      observer = undefined;
+      observer = void 0;
     }
   };
   const targets = vue.computed(() => {
@@ -1090,14 +1089,14 @@ const vElementBounding = {
 function onElementRemoval(target, callback, options = {}) {
   const {
     window = defaultWindow,
-    document = window == null ? undefined : window.document,
+    document = window == null ? void 0 : window.document,
     flush = "sync"
   } = options;
   if (!window || !document)
     return shared.noop;
   let stopFn;
   const cleanupAndUpdate = (fn) => {
-    stopFn == null ? undefined : stopFn();
+    stopFn == null ? void 0 : stopFn();
     stopFn = fn;
   };
   const stopWatch = vue.watchEffect(() => {
@@ -1141,7 +1140,7 @@ function useElementHover(el, options = {}) {
     const delay = entering ? delayEnter : delayLeave;
     if (timer) {
       clearTimeout(timer);
-      timer = undefined;
+      timer = void 0;
     }
     if (delay)
       timer = setTimeout(() => isHovered.value = entering, delay);
@@ -1192,7 +1191,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   const { window = defaultWindow, box = "content-box" } = options;
   const isSVG = vue.computed(() => {
     var _a, _b;
-    return (_b = (_a = unrefElement(target)) == null ? undefined : _a.namespaceURI) == null ? undefined : _b.includes("svg");
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
   });
   const width = vue.ref(initialSize.width);
   const height = vue.ref(initialSize.height);
@@ -1248,7 +1247,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 ? undefined : _a[0];
+    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);
     vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1334,10 +1333,11 @@ function useElementVisibility(element, options = {}) {
     window = defaultWindow,
     scrollTarget,
     threshold = 0,
-    rootMargin
+    rootMargin,
+    once = false
   } = options;
   const elementIsVisible = vue.ref(false);
-  useIntersectionObserver(
+  const { stop } = useIntersectionObserver(
     element,
     (intersectionObserverEntries) => {
       let isIntersecting = elementIsVisible.value;
@@ -1349,6 +1349,11 @@ function useElementVisibility(element, options = {}) {
         }
       }
       elementIsVisible.value = isIntersecting;
+      if (once) {
+        shared.watchOnce(elementIsVisible, () => {
+          stop();
+        });
+      }
     },
     {
       root: scrollTarget,
@@ -1438,11 +1443,11 @@ function useAsyncState(promise, initialState, options) {
   const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
   const isReady = vue.ref(false);
   const isLoading = vue.ref(false);
-  const error = vue.shallowRef(undefined);
+  const error = vue.shallowRef(void 0);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
       state.value = initialState;
-    error.value = undefined;
+    error.value = void 0;
     isReady.value = false;
     isLoading.value = true;
     if (delay2 > 0)
@@ -1522,7 +1527,7 @@ async function loadImage(options) {
 function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
     () => loadImage(vue.toValue(options)),
-    undefined,
+    void 0,
     {
       resetOnExecute: true,
       ...asyncStateOptions
@@ -1607,7 +1612,7 @@ function useScroll(element, options = {}) {
       return internalX.value;
     },
     set(x2) {
-      scrollTo(x2, undefined);
+      scrollTo(x2, void 0);
     }
   });
   const y = vue.computed({
@@ -1615,7 +1620,7 @@ function useScroll(element, options = {}) {
       return internalY.value;
     },
     set(y2) {
-      scrollTo(undefined, y2);
+      scrollTo(void 0, y2);
     }
   });
   function scrollTo(_x, _y) {
@@ -1625,12 +1630,12 @@ function useScroll(element, options = {}) {
     const _element = vue.toValue(element);
     if (!_element)
       return;
-    (_c = _element instanceof Document ? window.document.body : _element) == null ? undefined : _c.scrollTo({
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _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 ? undefined : _element.document) == null ? undefined : _d.documentElement) || (_element == null ? undefined : _element.documentElement) || _element;
+    const scrollContainer = ((_d = _element == null ? void 0 : _element.document) == null ? void 0 : _d.documentElement) || (_element == null ? void 0 : _element.documentElement) || _element;
     if (x != null)
       internalX.value = scrollContainer.scrollLeft;
     if (y != null)
@@ -1664,7 +1669,7 @@ function useScroll(element, options = {}) {
     var _a;
     if (!window)
       return;
-    const el = ((_a = target == null ? undefined : target.document) == null ? undefined : _a.documentElement) || (target == null ? undefined : target.documentElement) || unrefElement(target);
+    const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
     const { display, flexDirection, direction } = getComputedStyle(el);
     const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
@@ -1844,7 +1849,7 @@ const UseMouseBuiltinExtractors = {
   page: (event) => [event.pageX, event.pageY],
   client: (event) => [event.clientX, event.clientY],
   screen: (event) => [event.screenX, event.screenY],
-  movement: (event) => event instanceof Touch ? null : [event.movementX, event.movementY]
+  movement: (event) => event instanceof MouseEvent ? [event.movementX, event.movementY] : null
 };
 function useMouse(options = {}) {
   const {
@@ -1926,7 +1931,7 @@ function useMouseInElement(target, options = {}) {
   } = options;
   const type = options.type || "page";
   const { x, y, sourceType } = useMouse(options);
-  const targetRef = vue.ref(target != null ? target : window == null ? undefined : window.document.body);
+  const targetRef = vue.ref(target != null ? target : window == null ? void 0 : window.document.body);
   const elementX = vue.ref(0);
   const elementY = vue.ref(0);
   const elementPositionX = vue.ref(0);
@@ -2064,17 +2069,17 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent(
       ...props,
       onPageChange(...args) {
         var _a;
-        (_a = props.onPageChange) == null ? undefined : _a.call(props, ...args);
+        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-change", ...args);
       },
       onPageSizeChange(...args) {
         var _a;
-        (_a = props.onPageSizeChange) == null ? undefined : _a.call(props, ...args);
+        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-size-change", ...args);
       },
       onPageCountChange(...args) {
         var _a;
-        (_a = props.onPageCountChange) == null ? undefined : _a.call(props, ...args);
+        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
     }));
@@ -2236,15 +2241,15 @@ function useCssVar(prop, target, options = {}) {
   const variable = vue.ref(initialValue);
   const elRef = vue.computed(() => {
     var _a;
-    return unrefElement(target) || ((_a = window == null ? undefined : window.document) == null ? undefined : _a.documentElement);
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _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 ? undefined : _a.trim();
-      variable.value = value || initialValue;
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
+      variable.value = value || variable.value || initialValue;
     }
   }
   if (observe) {
@@ -2259,21 +2264,20 @@ function useCssVar(prop, target, options = {}) {
       if (old[0] && old[1])
         old[0].style.removeProperty(old[1]);
       updateCssVar();
-    },
-    { immediate: true }
+    }
   );
   vue.watch(
-    variable,
-    (val) => {
-      var _a;
+    [variable, elRef],
+    ([val, el]) => {
       const raw_prop = vue.toValue(prop);
-      if (((_a = elRef.value) == null ? undefined : _a.style) && raw_prop) {
+      if ((el == null ? void 0 : el.style) && raw_prop) {
         if (val == null)
-          elRef.value.style.removeProperty(raw_prop);
+          el.style.removeProperty(raw_prop);
         else
-          elRef.value.style.setProperty(raw_prop, val);
+          el.style.setProperty(raw_prop, val);
       }
-    }
+    },
+    { immediate: true }
   );
   return variable;
 }
@@ -2369,12 +2373,12 @@ const vScroll = {
         ...options,
         onScroll(e) {
           var _a;
-          (_a = options.onScroll) == null ? undefined : _a.call(options, e);
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
           handler(state);
         },
         onStop(e) {
           var _a;
-          (_a = options.onStop) == null ? undefined : _a.call(options, e);
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
           handler(state);
         }
       });
@@ -2447,7 +2451,7 @@ function useScrollLock(element, initialState = false) {
     if (!el || !isLocked.value)
       return;
     if (shared.isIOS)
-      stopTouchMoveListener == null ? undefined : stopTouchMoveListener();
+      stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
     el.style.overflow = initialOverflow;
     elInitialOverflow.delete(el);
     isLocked.value = false;

package/index.d.cts

@@ -12,7 +12,7 @@ type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
 type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
 type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
-interface OnClickOutsideOptions extends ConfigurableWindow {
+interface OnClickOutsideOptions<Controls extends boolean = false> extends ConfigurableWindow {
     /**
      * List of elements that should not trigger the event.
      */
@@ -27,12 +27,19 @@ interface OnClickOutsideOptions extends ConfigurableWindow {
      * @default false
      */
     detectIframe?: boolean;
+    /**
+     * Use controls to cancel/trigger listener.
+     * @default false
+     */
+    controls?: Controls;
 }
 type OnClickOutsideHandler<T extends {
     detectIframe: OnClickOutsideOptions['detectIframe'];
+    controls: boolean;
 } = {
     detectIframe: false;
-}> = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void;
+    controls: false;
+}> = (event: T['controls'] extends true ? Event | (T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) : T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void;
 
 interface Position {
     x: number;
@@ -48,11 +55,11 @@ interface RenderableComponent {
 }
 
 interface OnClickOutsideProps extends RenderableComponent {
-    options?: OnClickOutsideOptions;
+    options?: Omit<OnClickOutsideOptions, 'controls'>;
 }
 declare const OnClickOutside: vue.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<OnClickOutsideProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
-declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]>;
+declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, Omit<OnClickOutsideOptions, 'controls'>]>;
 
 type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
 interface OnKeyStrokeOptions {
@@ -453,6 +460,12 @@ interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseInters
      * The element that is used as the viewport for checking visibility of the target.
      */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
+    /**
+     * Stop tracking when element visibility changes for the first time
+     *
+     * @default false
+     */
+    once?: boolean;
 }
 
 type BindingValueFunction$5 = (state: boolean) => void;