@vueuse/components 7.7.1 → 8.0.0

package/index.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, toRef, toRefs } from 'vue-demi';
-import { onClickOutside as onClickOutside$1, unrefElement as unrefElement$1, useEventListener as useEventListener$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { isClient, isString, noop, tryOnScopeDispose, watchWithFilter, tryOnMounted, useToggle, useDebounceFn } from '@vueuse/shared';
+import { onClickOutside as onClickOutside$1, unrefElement as unrefElement$1, useEventListener as useEventListener$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { isClient, isString, noop, tryOnScopeDispose, watchWithFilter, tryOnMounted, useToggle, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
   name: "OnClickOutside",
@@ -88,8 +88,70 @@ function onClickOutside(target, handler, options = {}) {
   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;
@@ -128,11 +190,11 @@ const OnLongPress = defineComponent({
   }
 });
 
-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 = defineComponent({
@@ -313,19 +375,19 @@ function usePreferredDark(options) {
   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;
 };
@@ -339,7 +401,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$8({
+  const modes = __spreadValues$a({
     auto: "",
     light: "light",
     dark: "dark"
@@ -477,25 +539,25 @@ const UseDocumentVisibility = defineComponent({
   }
 });
 
-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 = defineComponent({
   name: "UseDraggable",
   props: [
@@ -510,7 +572,7 @@ const UseDraggable = defineComponent({
   setup(props, { slots }) {
     const target = ref();
     const initialValue = props.storageKey ? useStorage$1(props.storageKey, unref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
-    const data = reactive(useDraggable(target, __spreadProps$6(__spreadValues$7({}, props), {
+    const data = reactive(useDraggable(target, __spreadProps$8(__spreadValues$9({}, props), {
       initialValue
     })));
     return () => {
@@ -533,12 +595,26 @@ const UseElementBounding = defineComponent({
   }
 });
 
+function useElementHover(el) {
+  const isHovered = 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);
+    watch(isHovered, (v) => binding.value(v));
+  }
+};
+
 const UseElementSize = defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
+    const data = reactive(useElementSize$1(target, { width: props.width, height: props.height }, { box: props.box }));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -546,6 +622,74 @@ const UseElementSize = defineComponent({
   }
 });
 
+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 = 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();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const width = ref(initialSize.width);
+  const height = ref(initialSize.height);
+  useResizeObserver(target, ([entry]) => {
+    width.value = entry.contentRect.width;
+    height.value = entry.contentRect.height;
+  }, options);
+  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);
+  watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+};
+
 const UseElementVisibility = defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
@@ -612,6 +756,160 @@ const UseIdle = defineComponent({
   }
 });
 
+function useScroll(element, options = {}) {
+  const {
+    throttle = 0,
+    idle = 200,
+    onStop = noop,
+    onScroll = noop,
+    offset = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    eventListenerOptions = {
+      capture: false,
+      passive: true
+    }
+  } = options;
+  const x = ref(0);
+  const y = ref(0);
+  const isScrolling = ref(false);
+  const arrivedState = reactive({
+    left: true,
+    right: false,
+    top: true,
+    bottom: false
+  });
+  const directions = reactive({
+    left: false,
+    right: false,
+    top: false,
+    bottom: false
+  });
+  if (element) {
+    const onScrollEnd = 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 ? 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 = reactive(useScroll(element, __spreadProps$7(__spreadValues$8({}, options), {
+    offset: __spreadValues$8({
+      bottom: (_a = options.distance) != null ? _a : 0
+    }, options.offset)
+  })));
+  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 = noop;
+  const stopWatch = isSupported ? 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 = noop;
+    };
+  }, { immediate: true, flush: "post" }) : noop;
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  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 = defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
@@ -637,31 +935,31 @@ const UseMouseInElement = defineComponent({
   }
 });
 
-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 = defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useMousePressed(__spreadProps$5(__spreadValues$6({}, props), { target })));
+    const data = reactive(useMousePressed(__spreadProps$6(__spreadValues$7({}, props), { target })));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -680,30 +978,30 @@ const UseNetwork = defineComponent({
   }
 });
 
-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 = defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
-    const data = reactive(useNow(__spreadProps$4(__spreadValues$5({}, props), { controls: true })));
+    const data = reactive(useNow(__spreadProps$5(__spreadValues$6({}, props), { controls: true })));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -711,25 +1009,25 @@ const UseNow = defineComponent({
   }
 });
 
-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 = defineComponent({
   name: "UseOffsetPagination",
   props: [
@@ -746,7 +1044,7 @@ const UseOffsetPagination = defineComponent({
     "page-count-change"
   ],
   setup(props, { slots, emit }) {
-    const data = reactive(useOffsetPagination(__spreadProps$3(__spreadValues$4({}, props), {
+    const data = reactive(useOffsetPagination(__spreadProps$4(__spreadValues$5({}, props), {
       onPageChange(...args) {
         var _a;
         (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
@@ -796,25 +1094,25 @@ const UsePageLeave = defineComponent({
   }
 });
 
-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 = defineComponent({
   name: "UsePointer",
   props: [
@@ -824,7 +1122,7 @@ const UsePointer = defineComponent({
   ],
   setup(props, { slots }) {
     const el = ref(null);
-    const data = reactive(usePointer(__spreadProps$2(__spreadValues$3({}, props), {
+    const data = reactive(usePointer(__spreadProps$3(__spreadValues$4({}, props), {
       target: props.target === "self" ? el : defaultWindow
     })));
     return () => {
@@ -964,6 +1262,122 @@ const UseScreenSafeArea = defineComponent({
   }
 });
 
+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 = 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 = ref(initialState);
+  let touchMoveListener = null;
+  let initialOverflow;
+  watch(() => 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 = 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 = unref(element);
+    if (!ele || !isLocked.value)
+      return;
+    isIOS && (touchMoveListener == null ? void 0 : touchMoveListener());
+    ele.style.overflow = initialOverflow;
+    isLocked.value = false;
+  };
+  return computed({
+    get() {
+      return isLocked.value;
+    },
+    set(v) {
+      if (v)
+        lock();
+      else
+        unlock();
+    }
+  });
+}
+
+const onScrollLock = () => {
+  let isMounted = false;
+  const state = ref(false);
+  return (el, binding) => {
+    state.value = binding.value;
+    if (isMounted)
+      return;
+    isMounted = true;
+    const isLocked = useScrollLock(el, binding.value);
+    watch(state, (v) => isLocked.value = v);
+  };
+};
+const vScrollLock = onScrollLock();
+
 var __defProp$2 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -1085,4 +1499,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside, VOnLongPress };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };