@vueuse/components 7.7.1 → 8.0.0

package/index.iife.js

@@ -148,8 +148,70 @@
     return stop;
   }
 
-  const VOnClickOutside = (el, binding) => {
-    onClickOutside(el, binding.value);
+  const handler = () => {
+    let stop = null;
+    return (el, binding) => {
+      if (stop) {
+        stop();
+        stop = onClickOutside(el, binding.value);
+        return;
+      }
+      stop = onClickOutside(el, binding.value);
+    };
+  };
+  const vOnClickOutside = handler();
+
+  const createKeyPredicate = (keyFilter) => {
+    if (typeof keyFilter === "function")
+      return keyFilter;
+    else if (typeof keyFilter === "string")
+      return (event) => event.key === keyFilter;
+    else if (Array.isArray(keyFilter))
+      return (event) => keyFilter.includes(event.key);
+    else if (keyFilter)
+      return () => true;
+    else
+      return () => false;
+  };
+  function onKeyStroke(key, handler, options = {}) {
+    const { target = defaultWindow, eventName = "keydown", passive = false } = options;
+    const predicate = createKeyPredicate(key);
+    const listener = (e) => {
+      if (predicate(e))
+        handler(e);
+    };
+    return useEventListener(target, eventName, listener, passive);
+  }
+
+  var __defProp$b = Object.defineProperty;
+  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$b = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$c.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
+    if (__getOwnPropSymbols$c)
+      for (var prop of __getOwnPropSymbols$c(b)) {
+        if (__propIsEnum$c.call(b, prop))
+          __defNormalProp$b(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const vOnKeyStroke = (el, binding) => {
+    var _a, _b;
+    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
+    if (typeof binding.value === "function") {
+      onKeyStroke(keys, binding.value, {
+        target: el
+      });
+    } else {
+      const [handler, options] = binding.value;
+      onKeyStroke(keys, handler, __spreadValues$b({
+        target: el
+      }, options));
+    }
   };
 
   const DEFAULT_DELAY = 500;
@@ -188,11 +250,11 @@
     }
   });
 
-  const VOnLongPress = (el, binding) => {
+  const vOnLongPress = (el, binding) => {
     if (typeof binding.value === "function")
       onLongPress(el, binding.value);
     else
-      onLongPress(el, binding.value.handler, binding.value.options);
+      onLongPress(el, ...binding.value);
   };
 
   const UseActiveElement = vueDemi.defineComponent({
@@ -373,19 +435,19 @@
     return useMediaQuery("(prefers-color-scheme: dark)", options);
   }
 
-  var __defProp$8 = Object.defineProperty;
-  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$8 = (a, b) => {
+  var __defProp$a = Object.defineProperty;
+  var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+  var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+  var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$a = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    if (__getOwnPropSymbols$8)
-      for (var prop of __getOwnPropSymbols$8(b)) {
-        if (__propIsEnum$8.call(b, prop))
-          __defNormalProp$8(a, prop, b[prop]);
+      if (__hasOwnProp$b.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
+    if (__getOwnPropSymbols$b)
+      for (var prop of __getOwnPropSymbols$b(b)) {
+        if (__propIsEnum$b.call(b, prop))
+          __defNormalProp$a(a, prop, b[prop]);
       }
     return a;
   };
@@ -399,7 +461,7 @@
       listenToStorageChanges = true,
       storageRef
     } = options;
-    const modes = __spreadValues$8({
+    const modes = __spreadValues$a({
       auto: "",
       light: "light",
       dark: "dark"
@@ -537,25 +599,25 @@
     }
   });
 
-  var __defProp$7 = Object.defineProperty;
-  var __defProps$6 = Object.defineProperties;
-  var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$7 = (a, b) => {
+  var __defProp$9 = Object.defineProperty;
+  var __defProps$8 = Object.defineProperties;
+  var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$9 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    if (__getOwnPropSymbols$7)
-      for (var prop of __getOwnPropSymbols$7(b)) {
-        if (__propIsEnum$7.call(b, prop))
-          __defNormalProp$7(a, prop, b[prop]);
+      if (__hasOwnProp$a.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
+    if (__getOwnPropSymbols$a)
+      for (var prop of __getOwnPropSymbols$a(b)) {
+        if (__propIsEnum$a.call(b, prop))
+          __defNormalProp$9(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+  var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
   const UseDraggable = vueDemi.defineComponent({
     name: "UseDraggable",
     props: [
@@ -570,7 +632,7 @@
     setup(props, { slots }) {
       const target = vueDemi.ref();
       const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
-      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$6(__spreadValues$7({}, props), {
+      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$9({}, props), {
         initialValue
       })));
       return () => {
@@ -593,6 +655,20 @@
     }
   });
 
+  function useElementHover(el) {
+    const isHovered = vueDemi.ref(false);
+    useEventListener(el, "mouseenter", () => isHovered.value = true);
+    useEventListener(el, "mouseleave", () => isHovered.value = false);
+    return isHovered;
+  }
+
+  const vElementHover = (el, binding) => {
+    if (typeof binding.value === "function") {
+      const isHovered = useElementHover(el);
+      vueDemi.watch(isHovered, (v) => binding.value(v));
+    }
+  };
+
   const UseElementSize = vueDemi.defineComponent({
     name: "UseElementSize",
     props: ["width", "height", "box"],
@@ -606,6 +682,74 @@
     }
   });
 
+  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols$9)
+      for (var prop of __getOwnPropSymbols$9(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
+  function useResizeObserver(target, callback, options = {}) {
+    const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
+    let observer;
+    const isSupported = window && "ResizeObserver" in window;
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    };
+    const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
+      cleanup();
+      if (isSupported && window && el) {
+        observer = new window.ResizeObserver(callback);
+        observer.observe(el, observerOptions);
+      }
+    }, { immediate: true, flush: "post" });
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    shared.tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
+
+  function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+    const width = vueDemi.ref(initialSize.width);
+    const height = vueDemi.ref(initialSize.height);
+    useResizeObserver(target, ([entry]) => {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }, options);
+    vueDemi.watch(() => unrefElement(target), (ele) => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
+    });
+    return {
+      width,
+      height
+    };
+  }
+
+  const vElementSize = (el, binding) => {
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+    const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+    const { width, height } = useElementSize(el, ...options);
+    vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+  };
+
   const UseElementVisibility = vueDemi.defineComponent({
     name: "UseElementVisibility",
     props: ["as"],
@@ -672,6 +816,160 @@
     }
   });
 
+  function useScroll(element, options = {}) {
+    const {
+      throttle = 0,
+      idle = 200,
+      onStop = shared.noop,
+      onScroll = shared.noop,
+      offset = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      },
+      eventListenerOptions = {
+        capture: false,
+        passive: true
+      }
+    } = options;
+    const x = vueDemi.ref(0);
+    const y = vueDemi.ref(0);
+    const isScrolling = vueDemi.ref(false);
+    const arrivedState = vueDemi.reactive({
+      left: true,
+      right: false,
+      top: true,
+      bottom: false
+    });
+    const directions = vueDemi.reactive({
+      left: false,
+      right: false,
+      top: false,
+      bottom: false
+    });
+    if (element) {
+      const onScrollEnd = shared.useDebounceFn((e) => {
+        isScrolling.value = false;
+        directions.left = false;
+        directions.right = false;
+        directions.top = false;
+        directions.bottom = false;
+        onStop(e);
+      }, throttle + idle);
+      const onScrollHandler = (e) => {
+        const eventTarget = e.target === document ? e.target.documentElement : e.target;
+        const scrollLeft = eventTarget.scrollLeft;
+        directions.left = scrollLeft < x.value;
+        directions.right = scrollLeft > x.value;
+        arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
+        arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
+        x.value = scrollLeft;
+        const scrollTop = eventTarget.scrollTop;
+        directions.top = scrollTop < y.value;
+        directions.bottom = scrollTop > y.value;
+        arrivedState.top = scrollTop <= 0 + (offset.top || 0);
+        arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
+        y.value = scrollTop;
+        isScrolling.value = true;
+        onScrollEnd(e);
+        onScroll(e);
+      };
+      useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
+    }
+    return {
+      x,
+      y,
+      isScrolling,
+      arrivedState,
+      directions
+    };
+  }
+
+  var __defProp$8 = Object.defineProperty;
+  var __defProps$7 = Object.defineProperties;
+  var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$8 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    if (__getOwnPropSymbols$8)
+      for (var prop of __getOwnPropSymbols$8(b)) {
+        if (__propIsEnum$8.call(b, prop))
+          __defNormalProp$8(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+  function useInfiniteScroll(element, onLoadMore, options = {}) {
+    var _a;
+    const state = vueDemi.reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
+      offset: __spreadValues$8({
+        bottom: (_a = options.distance) != null ? _a : 0
+      }, options.offset)
+    })));
+    vueDemi.watch(() => state.arrivedState.bottom, (v) => {
+      if (v)
+        onLoadMore(state);
+    });
+  }
+
+  const vInfiniteScroll = (el, binding) => {
+    if (typeof binding.value === "function")
+      useInfiniteScroll(el, binding.value);
+    else
+      useInfiniteScroll(el, ...binding.value);
+  };
+
+  function useIntersectionObserver(target, callback, options = {}) {
+    const {
+      root,
+      rootMargin = "0px",
+      threshold = 0.1,
+      window = defaultWindow
+    } = options;
+    const isSupported = window && "IntersectionObserver" in window;
+    let cleanup = shared.noop;
+    const stopWatch = isSupported ? vueDemi.watch(() => ({
+      el: unrefElement(target),
+      root: unrefElement(root)
+    }), ({ el, root: root2 }) => {
+      cleanup();
+      if (!el)
+        return;
+      const observer = new window.IntersectionObserver(callback, {
+        root: root2,
+        rootMargin,
+        threshold
+      });
+      observer.observe(el);
+      cleanup = () => {
+        observer.disconnect();
+        cleanup = shared.noop;
+      };
+    }, { immediate: true, flush: "post" }) : shared.noop;
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    shared.tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
+
+  const vIntersectionObserver = (el, binding) => {
+    if (typeof binding.value === "function")
+      useIntersectionObserver(el, binding.value);
+    else
+      useIntersectionObserver(el, ...binding.value);
+  };
+
   const UseMouse = vueDemi.defineComponent({
     name: "UseMouse",
     props: ["touch", "resetOnTouchEnds", "initialValue"],
@@ -697,31 +995,31 @@
     }
   });
 
-  var __defProp$6 = Object.defineProperty;
-  var __defProps$5 = Object.defineProperties;
-  var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$6 = (a, b) => {
+  var __defProp$7 = Object.defineProperty;
+  var __defProps$6 = Object.defineProperties;
+  var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$7 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    if (__getOwnPropSymbols$6)
-      for (var prop of __getOwnPropSymbols$6(b)) {
-        if (__propIsEnum$6.call(b, prop))
-          __defNormalProp$6(a, prop, b[prop]);
+      if (__hasOwnProp$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    if (__getOwnPropSymbols$7)
+      for (var prop of __getOwnPropSymbols$7(b)) {
+        if (__propIsEnum$7.call(b, prop))
+          __defNormalProp$7(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+  var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
   const UseMousePressed = vueDemi.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useMousePressed(__spreadProps$5(__spreadValues$6({}, props), { target })));
+      const data = vueDemi.reactive(core.useMousePressed(__spreadProps$6(__spreadValues$7({}, props), { target })));
       return () => {
         if (slots.default)
           return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -740,30 +1038,30 @@
     }
   });
 
-  var __defProp$5 = Object.defineProperty;
-  var __defProps$4 = Object.defineProperties;
-  var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$5 = (a, b) => {
+  var __defProp$6 = Object.defineProperty;
+  var __defProps$5 = Object.defineProperties;
+  var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$6 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    if (__getOwnPropSymbols$5)
-      for (var prop of __getOwnPropSymbols$5(b)) {
-        if (__propIsEnum$5.call(b, prop))
-          __defNormalProp$5(a, prop, b[prop]);
+      if (__hasOwnProp$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    if (__getOwnPropSymbols$6)
+      for (var prop of __getOwnPropSymbols$6(b)) {
+        if (__propIsEnum$6.call(b, prop))
+          __defNormalProp$6(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+  var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
   const UseNow = vueDemi.defineComponent({
     name: "UseNow",
     props: ["interval"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useNow(__spreadProps$4(__spreadValues$5({}, props), { controls: true })));
+      const data = vueDemi.reactive(core.useNow(__spreadProps$5(__spreadValues$6({}, props), { controls: true })));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -771,25 +1069,25 @@
     }
   });
 
-  var __defProp$4 = Object.defineProperty;
-  var __defProps$3 = Object.defineProperties;
-  var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$4 = (a, b) => {
+  var __defProp$5 = Object.defineProperty;
+  var __defProps$4 = Object.defineProperties;
+  var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$5 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    if (__getOwnPropSymbols$4)
-      for (var prop of __getOwnPropSymbols$4(b)) {
-        if (__propIsEnum$4.call(b, prop))
-          __defNormalProp$4(a, prop, b[prop]);
+      if (__hasOwnProp$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    if (__getOwnPropSymbols$5)
+      for (var prop of __getOwnPropSymbols$5(b)) {
+        if (__propIsEnum$5.call(b, prop))
+          __defNormalProp$5(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+  var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
   const UseOffsetPagination = vueDemi.defineComponent({
     name: "UseOffsetPagination",
     props: [
@@ -806,7 +1104,7 @@
       "page-count-change"
     ],
     setup(props, { slots, emit }) {
-      const data = vueDemi.reactive(core.useOffsetPagination(__spreadProps$3(__spreadValues$4({}, props), {
+      const data = vueDemi.reactive(core.useOffsetPagination(__spreadProps$4(__spreadValues$5({}, props), {
         onPageChange(...args) {
           var _a;
           (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
@@ -856,25 +1154,25 @@
     }
   });
 
-  var __defProp$3 = Object.defineProperty;
-  var __defProps$2 = Object.defineProperties;
-  var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$3 = (a, b) => {
+  var __defProp$4 = Object.defineProperty;
+  var __defProps$3 = Object.defineProperties;
+  var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$4 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    if (__getOwnPropSymbols$3)
-      for (var prop of __getOwnPropSymbols$3(b)) {
-        if (__propIsEnum$3.call(b, prop))
-          __defNormalProp$3(a, prop, b[prop]);
+      if (__hasOwnProp$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    if (__getOwnPropSymbols$4)
+      for (var prop of __getOwnPropSymbols$4(b)) {
+        if (__propIsEnum$4.call(b, prop))
+          __defNormalProp$4(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+  var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
   const UsePointer = vueDemi.defineComponent({
     name: "UsePointer",
     props: [
@@ -884,7 +1182,7 @@
     ],
     setup(props, { slots }) {
       const el = vueDemi.ref(null);
-      const data = vueDemi.reactive(core.usePointer(__spreadProps$2(__spreadValues$3({}, props), {
+      const data = vueDemi.reactive(core.usePointer(__spreadProps$3(__spreadValues$4({}, props), {
         target: props.target === "self" ? el : defaultWindow
       })));
       return () => {
@@ -1024,6 +1322,122 @@
     }
   });
 
+  var __defProp$3 = Object.defineProperty;
+  var __defProps$2 = Object.defineProperties;
+  var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$3 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    if (__getOwnPropSymbols$3)
+      for (var prop of __getOwnPropSymbols$3(b)) {
+        if (__propIsEnum$3.call(b, prop))
+          __defNormalProp$3(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+  const vScroll = (el, binding) => {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const state = useScroll(el, {
+        onScroll() {
+          handler(state);
+        },
+        onStop() {
+          handler(state);
+        }
+      });
+    } else {
+      const [handler, options] = binding.value;
+      const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+        onScroll(e) {
+          var _a;
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+          handler(state);
+        },
+        onStop(e) {
+          var _a;
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+          handler(state);
+        }
+      }));
+    }
+  };
+
+  var _a, _b;
+  function preventDefault(rawEvent) {
+    const e = rawEvent || window.event;
+    if (e.touches.length > 1)
+      return true;
+    if (e.preventDefault)
+      e.preventDefault();
+    return false;
+  }
+  const isIOS = shared.isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
+  function useScrollLock(element, initialState = false) {
+    const isLocked = vueDemi.ref(initialState);
+    let touchMoveListener = null;
+    let initialOverflow;
+    vueDemi.watch(() => vueDemi.unref(element), (el) => {
+      if (el) {
+        const ele = el;
+        initialOverflow = ele.style.overflow;
+        if (isLocked.value)
+          ele.style.overflow = "hidden";
+      }
+    }, {
+      immediate: true
+    });
+    const lock = () => {
+      const ele = vueDemi.unref(element);
+      if (!ele || isLocked.value)
+        return;
+      if (isIOS) {
+        touchMoveListener = useEventListener(document, "touchmove", preventDefault, { passive: false });
+      }
+      ele.style.overflow = "hidden";
+      isLocked.value = true;
+    };
+    const unlock = () => {
+      const ele = vueDemi.unref(element);
+      if (!ele || !isLocked.value)
+        return;
+      isIOS && (touchMoveListener == null ? void 0 : touchMoveListener());
+      ele.style.overflow = initialOverflow;
+      isLocked.value = false;
+    };
+    return vueDemi.computed({
+      get() {
+        return isLocked.value;
+      },
+      set(v) {
+        if (v)
+          lock();
+        else
+          unlock();
+      }
+    });
+  }
+
+  const onScrollLock = () => {
+    let isMounted = false;
+    const state = vueDemi.ref(false);
+    return (el, binding) => {
+      state.value = binding.value;
+      if (isMounted)
+        return;
+      isMounted = true;
+      const isLocked = useScrollLock(el, binding.value);
+      vueDemi.watch(state, (v) => isLocked.value = v);
+    };
+  };
+  const vScrollLock = onScrollLock();
+
   var __defProp$2 = Object.defineProperty;
   var __defProps$1 = Object.defineProperties;
   var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -1183,8 +1597,17 @@
   exports.UseVirtualList = UseVirtualList;
   exports.UseWindowFocus = UseWindowFocus;
   exports.UseWindowSize = UseWindowSize;
-  exports.VOnClickOutside = VOnClickOutside;
-  exports.VOnLongPress = VOnLongPress;
+  exports.VOnClickOutside = vOnClickOutside;
+  exports.VOnLongPress = vOnLongPress;
+  exports.vElementHover = vElementHover;
+  exports.vElementSize = vElementSize;
+  exports.vInfiniteScroll = vInfiniteScroll;
+  exports.vIntersectionObserver = vIntersectionObserver;
+  exports.vOnClickOutside = vOnClickOutside;
+  exports.vOnKeyStroke = vOnKeyStroke;
+  exports.vOnLongPress = vOnLongPress;
+  exports.vScroll = vScroll;
+  exports.vScrollLock = vScrollLock;
 
   Object.defineProperty(exports, '__esModule', { value: true });