@vueuse/components 9.9.0 → 9.11.0

package/index.cjs

@@ -4,7 +4,7 @@ var vueDemi = require('vue-demi');
 var core = require('@vueuse/core');
 var shared = require('@vueuse/shared');
 
-const OnClickOutside = vueDemi.defineComponent({
+const OnClickOutside = /* @__PURE__ */ vueDemi.defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -242,7 +242,7 @@ function onLongPress(target, handler, options) {
   useEventListener(elementRef, "pointerleave", clear, listenerOptions);
 }
 
-const OnLongPress = vueDemi.defineComponent({
+const OnLongPress = /* @__PURE__ */ vueDemi.defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -267,7 +267,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = vueDemi.defineComponent({
+const UseActiveElement = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -280,7 +280,7 @@ const UseActiveElement = vueDemi.defineComponent({
   }
 });
 
-const UseBattery = vueDemi.defineComponent({
+const UseBattery = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useBattery(props));
@@ -291,7 +291,7 @@ const UseBattery = vueDemi.defineComponent({
   }
 });
 
-const UseBrowserLocation = vueDemi.defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useBrowserLocation());
@@ -584,7 +584,7 @@ function useColorMode(options = {}) {
   return state;
 }
 
-const UseColorMode = vueDemi.defineComponent({
+const UseColorMode = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -599,7 +599,7 @@ const UseColorMode = vueDemi.defineComponent({
   }
 });
 
-const UseDark = vueDemi.defineComponent({
+const UseDark = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -615,7 +615,7 @@ const UseDark = vueDemi.defineComponent({
   }
 });
 
-const UseDeviceMotion = vueDemi.defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useDeviceMotion());
@@ -626,7 +626,7 @@ const UseDeviceMotion = vueDemi.defineComponent({
   }
 });
 
-const UseDeviceOrientation = vueDemi.defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useDeviceOrientation());
@@ -637,7 +637,7 @@ const UseDeviceOrientation = vueDemi.defineComponent({
   }
 });
 
-const UseDevicePixelRatio = vueDemi.defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -650,7 +650,7 @@ const UseDevicePixelRatio = vueDemi.defineComponent({
   }
 });
 
-const UseDevicesList = vueDemi.defineComponent({
+const UseDevicesList = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -662,7 +662,7 @@ const UseDevicesList = vueDemi.defineComponent({
   }
 });
 
-const UseDocumentVisibility = vueDemi.defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -694,7 +694,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const UseDraggable = vueDemi.defineComponent({
+const UseDraggable = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -713,10 +713,18 @@ const UseDraggable = vueDemi.defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
-    const initialValue = props.storageKey ? core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    const storageValue = props.storageKey && core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0);
+    const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
+    const onEnd = (position) => {
+      if (!storageValue)
+        return;
+      storageValue.value.x = position.x;
+      storageValue.value.y = position.y;
+    };
     const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
       handle,
-      initialValue
+      initialValue,
+      onEnd
     })));
     return () => {
       if (slots.default)
@@ -725,7 +733,7 @@ const UseDraggable = vueDemi.defineComponent({
   }
 });
 
-const UseElementBounding = vueDemi.defineComponent({
+const UseElementBounding = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
@@ -754,7 +762,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = vueDemi.defineComponent({
+const UseElementSize = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box"],
   setup(props, { slots }) {
@@ -844,7 +852,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = vueDemi.defineComponent({
+const UseElementVisibility = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -897,7 +905,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = vueDemi.defineComponent({
+const UseEyeDropper = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -911,7 +919,7 @@ const UseEyeDropper = vueDemi.defineComponent({
   }
 });
 
-const UseFullscreen = vueDemi.defineComponent({
+const UseFullscreen = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -924,7 +932,7 @@ const UseFullscreen = vueDemi.defineComponent({
   }
 });
 
-const UseGeolocation = vueDemi.defineComponent({
+const UseGeolocation = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -936,7 +944,7 @@ const UseGeolocation = vueDemi.defineComponent({
   }
 });
 
-const UseIdle = vueDemi.defineComponent({
+const UseIdle = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1034,7 +1042,7 @@ const useImage = (options, asyncStateOptions = {}) => {
   return state;
 };
 
-const UseImage = vueDemi.defineComponent({
+const UseImage = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1259,7 +1267,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = vueDemi.defineComponent({
+const UseMouse = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1271,7 +1279,7 @@ const UseMouse = vueDemi.defineComponent({
   }
 });
 
-const UseMouseInElement = vueDemi.defineComponent({
+const UseMouseInElement = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
@@ -1303,7 +1311,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const UseMousePressed = vueDemi.defineComponent({
+const UseMousePressed = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
@@ -1316,7 +1324,7 @@ const UseMousePressed = vueDemi.defineComponent({
   }
 });
 
-const UseNetwork = vueDemi.defineComponent({
+const UseNetwork = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = vueDemi.reactive(core.useNetwork());
@@ -1346,7 +1354,7 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const UseNow = vueDemi.defineComponent({
+const UseNow = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -1358,7 +1366,7 @@ const UseNow = vueDemi.defineComponent({
   }
 });
 
-const UseObjectUrl = vueDemi.defineComponent({
+const UseObjectUrl = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -1392,7 +1400,7 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const UseOffsetPagination = vueDemi.defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -1432,7 +1440,7 @@ const UseOffsetPagination = vueDemi.defineComponent({
   }
 });
 
-const UseOnline = vueDemi.defineComponent({
+const UseOnline = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1445,7 +1453,7 @@ const UseOnline = vueDemi.defineComponent({
   }
 });
 
-const UsePageLeave = vueDemi.defineComponent({
+const UsePageLeave = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1477,7 +1485,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const UsePointer = vueDemi.defineComponent({
+const UsePointer = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -1496,7 +1504,20 @@ const UsePointer = vueDemi.defineComponent({
   }
 });
 
-const UsePreferredColorScheme = vueDemi.defineComponent({
+const UsePointerLock = vueDemi.defineComponent({
+  name: "UsePointerLock",
+  props: ["as"],
+  setup(props, { slots }) {
+    const target = vueDemi.ref();
+    const data = vueDemi.reactive(core.usePointerLock(target));
+    return () => {
+      if (slots.default)
+        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+
+const UsePreferredColorScheme = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1509,7 +1530,7 @@ const UsePreferredColorScheme = vueDemi.defineComponent({
   }
 });
 
-const UsePreferredContrast = vueDemi.defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1522,7 +1543,7 @@ const UsePreferredContrast = vueDemi.defineComponent({
   }
 });
 
-const UsePreferredDark = vueDemi.defineComponent({
+const UsePreferredDark = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1535,7 +1556,7 @@ const UsePreferredDark = vueDemi.defineComponent({
   }
 });
 
-const UsePreferredLanguages = vueDemi.defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1548,7 +1569,7 @@ const UsePreferredLanguages = vueDemi.defineComponent({
   }
 });
 
-const UsePreferredReducedMotion = vueDemi.defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1621,7 +1642,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = vueDemi.defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -1704,8 +1725,22 @@ const vScroll = {
   }
 };
 
+function checkOverflowScroll(ele) {
+  const style = window.getComputedStyle(ele);
+  if (style.overflowX === "scroll" || style.overflowY === "scroll") {
+    return true;
+  } else {
+    const parent = ele.parentNode;
+    if (!parent || parent.tagName === "BODY")
+      return false;
+    return checkOverflowScroll(parent);
+  }
+}
 function preventDefault(rawEvent) {
   const e = rawEvent || window.event;
+  const _target = e.target;
+  if (checkOverflowScroll(_target))
+    return false;
   if (e.touches.length > 1)
     return true;
   if (e.preventDefault)
@@ -1731,7 +1766,9 @@ function useScrollLock(element, initialState = false) {
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
-      stopTouchMoveListener = useEventListener(ele, "touchmove", preventDefault, { passive: false });
+      stopTouchMoveListener = useEventListener(ele, "touchmove", (e) => {
+        preventDefault(e);
+      }, { passive: false });
     }
     ele.style.overflow = "hidden";
     isLocked.value = true;
@@ -1791,7 +1828,7 @@ var __spreadValues$2 = (a, b) => {
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const UseTimeAgo = vueDemi.defineComponent({
+const UseTimeAgo = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -1822,7 +1859,7 @@ var __spreadValues$1 = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const UseTimestamp = vueDemi.defineComponent({
+const UseTimestamp = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -1850,16 +1887,17 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const UseVirtualList = vueDemi.defineComponent({
+const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
     "options",
     "height"
   ],
-  setup(props, { slots }) {
+  setup(props, { slots, expose }) {
     const { list: listRef } = vueDemi.toRefs(props);
-    const { list, containerProps, wrapperProps } = core.useVirtualList(listRef, props.options);
+    const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
+    expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
     return () => vueDemi.h("div", __spreadValues({}, containerProps), [
       vueDemi.h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => vueDemi.h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
@@ -1867,7 +1905,7 @@ const UseVirtualList = vueDemi.defineComponent({
   }
 });
 
-const UseWindowFocus = vueDemi.defineComponent({
+const UseWindowFocus = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = vueDemi.reactive({
@@ -1880,7 +1918,7 @@ const UseWindowFocus = vueDemi.defineComponent({
   }
 });
 
-const UseWindowSize = vueDemi.defineComponent({
+const UseWindowSize = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {
@@ -1923,6 +1961,7 @@ exports.UseOffsetPagination = UseOffsetPagination;
 exports.UseOnline = UseOnline;
 exports.UsePageLeave = UsePageLeave;
 exports.UsePointer = UsePointer;
+exports.UsePointerLock = UsePointerLock;
 exports.UsePreferredColorScheme = UsePreferredColorScheme;
 exports.UsePreferredContrast = UsePreferredContrast;
 exports.UsePreferredDark = UsePreferredDark;

package/index.d.ts

@@ -16,10 +16,10 @@ interface RenderableComponent {
     as?: Object | string;
 }
 
-declare type VueInstance = ComponentPublicInstance;
-declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
-declare type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
-declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
+type VueInstance = ComponentPublicInstance;
+type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
+type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
 interface OnClickOutsideOptions extends ConfigurableWindow {
     /**
@@ -37,7 +37,7 @@ interface OnClickOutsideOptions extends ConfigurableWindow {
      */
     detectIframe?: boolean;
 }
-declare type OnClickOutsideHandler<T extends {
+type OnClickOutsideHandler<T extends {
     detectIframe: OnClickOutsideOptions['detectIframe'];
 } = {
     detectIframe: false;
@@ -50,15 +50,15 @@ declare const OnClickOutside: vue_demi.DefineComponent<OnClickOutsideProps, {},
 
 declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]>;
 
-declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
+type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
 interface OnKeyStrokeOptions {
     eventName?: KeyStrokeEventName;
-    target?: MaybeComputedRef<EventTarget>;
+    target?: MaybeComputedRef<EventTarget | null | undefined>;
     passive?: boolean;
 }
 
-declare type BindingValueFunction$7 = (event: KeyboardEvent) => void;
-declare type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
+type BindingValueFunction$7 = (event: KeyboardEvent) => void;
+type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
 declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
 
 interface OnLongPressOptions {
@@ -83,8 +83,8 @@ interface OnLongPressProps extends RenderableComponent {
 }
 declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
 
-declare type BindingValueFunction$6 = (evt: PointerEvent) => void;
-declare type BindingValueArray$5 = [
+type BindingValueFunction$6 = (evt: PointerEvent) => void;
+type BindingValueArray$5 = [
     BindingValueFunction$6,
     OnLongPressOptions
 ];
@@ -158,7 +158,7 @@ interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWind
     shallow?: boolean;
 }
 
-declare type BasicColorSchema = 'light' | 'dark' | 'auto';
+type BasicColorSchema = 'light' | 'dark' | 'auto';
 interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseStorageOptions<T | BasicColorSchema> {
     /**
      * CSS Selector for the target element applying to
@@ -268,7 +268,7 @@ interface UseResizeObserverOptions extends ConfigurableWindow {
 
 declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}>;
 
-declare type BindingValueFunction$5 = (state: boolean) => void;
+type BindingValueFunction$5 = (state: boolean) => void;
 declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
 
 declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}>;
@@ -290,10 +290,10 @@ declare function useElementSize(target: MaybeComputedElementRef, initialSize?: E
     height: vue_demi.Ref<number>;
 };
 
-declare type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
-declare type BindingValueFunction$4 = (size: ElementSize) => void;
-declare type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
-declare type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
+type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
+type BindingValueFunction$4 = (size: ElementSize) => void;
+type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
+type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
 declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
@@ -302,8 +302,8 @@ interface UseElementVisibilityOptions extends ConfigurableWindow {
     scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>;
 }
 
-declare type BindingValueFunction$3 = (state: boolean) => void;
-declare type BindingValueArray$3 = [BindingValueFunction$3, UseElementVisibilityOptions];
+type BindingValueFunction$3 = (state: boolean) => void;
+type BindingValueArray$3 = [BindingValueFunction$3, UseElementVisibilityOptions];
 declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
 declare const UseEyeDropper: vue_demi.DefineComponent<{
@@ -407,7 +407,7 @@ declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement |
         bottom: boolean;
     };
 };
-declare type UseScrollReturn = ReturnType<typeof useScroll>;
+type UseScrollReturn = ReturnType<typeof useScroll>;
 
 interface UseInfiniteScrollOptions extends UseScrollOptions {
     /**
@@ -436,8 +436,8 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
  */
 declare function useInfiniteScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
-declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
-declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
+type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
+type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
 interface UseIntersectionObserverOptions extends ConfigurableWindow {
@@ -455,8 +455,8 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
     threshold?: number | number[];
 }
 
-declare type BindingValueFunction$1 = IntersectionObserverCallback;
-declare type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
+type BindingValueFunction$1 = IntersectionObserverCallback;
+type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
 declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseMouseOptions>, {}>;
@@ -530,6 +530,8 @@ declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "targ
     target: 'window' | 'self';
 }>, {}>;
 
+declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
+
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
@@ -569,8 +571,8 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     bottom: boolean;
 }>;
 
-declare type BindingValueFunction = (state: UseScrollReturn) => void;
-declare type BindingValueArray = [BindingValueFunction, UseScrollOptions];
+type BindingValueFunction = (state: UseScrollReturn) => void;
+type BindingValueArray = [BindingValueFunction, UseScrollOptions];
 declare const vScroll: ObjectDirective<HTMLElement, BindingValueFunction | BindingValueArray>;
 
 declare const vScrollLock: FunctionDirective<HTMLElement, boolean>;
@@ -610,4 +612,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}>;
 
-export { OnClickOutside, OnClickOutsideProps, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnClickOutsideProps, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };