@vueuse/components 9.10.0 → 9.11.1

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,
@@ -1807,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 }) {
@@ -1838,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 }) {
@@ -1866,7 +1887,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const UseVirtualList = vueDemi.defineComponent({
+const UseVirtualList = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -1884,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({
@@ -1897,7 +1918,7 @@ const UseWindowFocus = vueDemi.defineComponent({
   }
 });
 
-const UseWindowSize = vueDemi.defineComponent({
+const UseWindowSize = /* @__PURE__ */ vueDemi.defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {
@@ -1940,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

@@ -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<{}>>, {}>;
@@ -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 };