@vueuse/components 9.9.0 → 9.11.0

package/index.mjs

@@ -1,8 +1,8 @@
 import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, watchEffect, toRef, toRefs } from 'vue-demi';
-import { onClickOutside as onClickOutside$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 as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { onClickOutside as onClickOutside$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 as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
 import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, isFunction, tryOnMounted, resolveRef, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
 
-const OnClickOutside = defineComponent({
+const OnClickOutside = /* @__PURE__ */ defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -240,7 +240,7 @@ function onLongPress(target, handler, options) {
   useEventListener(elementRef, "pointerleave", clear, listenerOptions);
 }
 
-const OnLongPress = defineComponent({
+const OnLongPress = /* @__PURE__ */ defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
@@ -265,7 +265,7 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = defineComponent({
+const UseActiveElement = /* @__PURE__ */ defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
     const data = reactive({
@@ -278,7 +278,7 @@ const UseActiveElement = defineComponent({
   }
 });
 
-const UseBattery = defineComponent({
+const UseBattery = /* @__PURE__ */ defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
     const data = reactive(useBattery(props));
@@ -289,7 +289,7 @@ const UseBattery = defineComponent({
   }
 });
 
-const UseBrowserLocation = defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
     const data = reactive(useBrowserLocation());
@@ -582,7 +582,7 @@ function useColorMode(options = {}) {
   return state;
 }
 
-const UseColorMode = defineComponent({
+const UseColorMode = /* @__PURE__ */ defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
@@ -597,7 +597,7 @@ const UseColorMode = defineComponent({
   }
 });
 
-const UseDark = defineComponent({
+const UseDark = /* @__PURE__ */ defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
@@ -613,7 +613,7 @@ const UseDark = defineComponent({
   }
 });
 
-const UseDeviceMotion = defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
     const data = reactive(useDeviceMotion());
@@ -624,7 +624,7 @@ const UseDeviceMotion = defineComponent({
   }
 });
 
-const UseDeviceOrientation = defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
     const data = reactive(useDeviceOrientation());
@@ -635,7 +635,7 @@ const UseDeviceOrientation = defineComponent({
   }
 });
 
-const UseDevicePixelRatio = defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
     const data = reactive({
@@ -648,7 +648,7 @@ const UseDevicePixelRatio = defineComponent({
   }
 });
 
-const UseDevicesList = defineComponent({
+const UseDevicesList = /* @__PURE__ */ defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
@@ -660,7 +660,7 @@ const UseDevicesList = defineComponent({
   }
 });
 
-const UseDocumentVisibility = defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
     const data = reactive({
@@ -692,7 +692,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const UseDraggable = defineComponent({
+const UseDraggable = /* @__PURE__ */ defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -711,10 +711,18 @@ const UseDraggable = defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
-    const initialValue = props.storageKey ? useStorage$1(props.storageKey, resolveUnref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    const storageValue = props.storageKey && useStorage$1(props.storageKey, resolveUnref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? 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 = reactive(useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
       handle,
-      initialValue
+      initialValue,
+      onEnd
     })));
     return () => {
       if (slots.default)
@@ -723,7 +731,7 @@ const UseDraggable = defineComponent({
   }
 });
 
-const UseElementBounding = defineComponent({
+const UseElementBounding = /* @__PURE__ */ defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
@@ -752,7 +760,7 @@ const vElementHover = {
   }
 };
 
-const UseElementSize = defineComponent({
+const UseElementSize = /* @__PURE__ */ defineComponent({
   name: "UseElementSize",
   props: ["width", "height", "box"],
   setup(props, { slots }) {
@@ -842,7 +850,7 @@ const vElementSize = {
   }
 };
 
-const UseElementVisibility = defineComponent({
+const UseElementVisibility = /* @__PURE__ */ defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
@@ -895,7 +903,7 @@ const vElementVisibility = {
   }
 };
 
-const UseEyeDropper = defineComponent({
+const UseEyeDropper = /* @__PURE__ */ defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
@@ -909,7 +917,7 @@ const UseEyeDropper = defineComponent({
   }
 });
 
-const UseFullscreen = defineComponent({
+const UseFullscreen = /* @__PURE__ */ defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
@@ -922,7 +930,7 @@ const UseFullscreen = defineComponent({
   }
 });
 
-const UseGeolocation = defineComponent({
+const UseGeolocation = /* @__PURE__ */ defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
@@ -934,7 +942,7 @@ const UseGeolocation = defineComponent({
   }
 });
 
-const UseIdle = defineComponent({
+const UseIdle = /* @__PURE__ */ defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
@@ -1032,7 +1040,7 @@ const useImage = (options, asyncStateOptions = {}) => {
   return state;
 };
 
-const UseImage = defineComponent({
+const UseImage = /* @__PURE__ */ defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1257,7 +1265,7 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = defineComponent({
+const UseMouse = /* @__PURE__ */ defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
@@ -1269,7 +1277,7 @@ const UseMouse = defineComponent({
   }
 });
 
-const UseMouseInElement = defineComponent({
+const UseMouseInElement = /* @__PURE__ */ defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
@@ -1301,7 +1309,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const UseMousePressed = defineComponent({
+const UseMousePressed = /* @__PURE__ */ defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
@@ -1314,7 +1322,7 @@ const UseMousePressed = defineComponent({
   }
 });
 
-const UseNetwork = defineComponent({
+const UseNetwork = /* @__PURE__ */ defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
     const data = reactive(useNetwork());
@@ -1344,7 +1352,7 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const UseNow = defineComponent({
+const UseNow = /* @__PURE__ */ defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
@@ -1356,7 +1364,7 @@ const UseNow = defineComponent({
   }
 });
 
-const UseObjectUrl = defineComponent({
+const UseObjectUrl = /* @__PURE__ */ defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -1390,7 +1398,7 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const UseOffsetPagination = defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -1430,7 +1438,7 @@ const UseOffsetPagination = defineComponent({
   }
 });
 
-const UseOnline = defineComponent({
+const UseOnline = /* @__PURE__ */ defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
     const data = reactive({
@@ -1443,7 +1451,7 @@ const UseOnline = defineComponent({
   }
 });
 
-const UsePageLeave = defineComponent({
+const UsePageLeave = /* @__PURE__ */ defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
     const data = reactive({
@@ -1475,7 +1483,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const UsePointer = defineComponent({
+const UsePointer = /* @__PURE__ */ defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -1494,7 +1502,20 @@ const UsePointer = defineComponent({
   }
 });
 
-const UsePreferredColorScheme = defineComponent({
+const UsePointerLock = defineComponent({
+  name: "UsePointerLock",
+  props: ["as"],
+  setup(props, { slots }) {
+    const target = ref();
+    const data = reactive(usePointerLock(target));
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default(data));
+    };
+  }
+});
+
+const UsePreferredColorScheme = /* @__PURE__ */ defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
     const data = reactive({
@@ -1507,7 +1528,7 @@ const UsePreferredColorScheme = defineComponent({
   }
 });
 
-const UsePreferredContrast = defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
     const data = reactive({
@@ -1520,7 +1541,7 @@ const UsePreferredContrast = defineComponent({
   }
 });
 
-const UsePreferredDark = defineComponent({
+const UsePreferredDark = /* @__PURE__ */ defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
     const data = reactive({
@@ -1533,7 +1554,7 @@ const UsePreferredDark = defineComponent({
   }
 });
 
-const UsePreferredLanguages = defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
     const data = reactive({
@@ -1546,7 +1567,7 @@ const UsePreferredLanguages = defineComponent({
   }
 });
 
-const UsePreferredReducedMotion = defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
     const data = reactive({
@@ -1619,7 +1640,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -1702,8 +1723,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)
@@ -1729,7 +1764,9 @@ function useScrollLock(element, initialState = false) {
     if (!ele || isLocked.value)
       return;
     if (isIOS) {
-      stopTouchMoveListener = useEventListener(ele, "touchmove", preventDefault, { passive: false });
+      stopTouchMoveListener = useEventListener(ele, "touchmove", (e) => {
+        preventDefault(e);
+      }, { passive: false });
     }
     ele.style.overflow = "hidden";
     isLocked.value = true;
@@ -1789,7 +1826,7 @@ var __spreadValues$2 = (a, b) => {
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const UseTimeAgo = defineComponent({
+const UseTimeAgo = /* @__PURE__ */ defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
@@ -1820,7 +1857,7 @@ var __spreadValues$1 = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const UseTimestamp = defineComponent({
+const UseTimestamp = /* @__PURE__ */ defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
@@ -1848,16 +1885,17 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const UseVirtualList = defineComponent({
+const UseVirtualList = /* @__PURE__ */ defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
     "options",
     "height"
   ],
-  setup(props, { slots }) {
+  setup(props, { slots, expose }) {
     const { list: listRef } = toRefs(props);
-    const { list, containerProps, wrapperProps } = useVirtualList(listRef, props.options);
+    const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(listRef, props.options);
+    expose({ scrollTo });
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
     return () => h("div", __spreadValues({}, containerProps), [
       h("div", __spreadValues({}, wrapperProps.value), list.value.map((item) => h("div", { style: { overFlow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
@@ -1865,7 +1903,7 @@ const UseVirtualList = defineComponent({
   }
 });
 
-const UseWindowFocus = defineComponent({
+const UseWindowFocus = /* @__PURE__ */ defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
     const data = reactive({
@@ -1878,7 +1916,7 @@ const UseWindowFocus = defineComponent({
   }
 });
 
-const UseWindowSize = defineComponent({
+const UseWindowSize = /* @__PURE__ */ defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {
@@ -1890,4 +1928,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, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "9.9.0",
+  "version": "9.11.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@vueuse/core": "9.9.0",
-    "@vueuse/shared": "9.9.0",
+    "@vueuse/core": "9.11.0",
+    "@vueuse/shared": "9.11.0",
     "vue-demi": "*"
   }
 }