@vueuse/components 7.5.3 → 7.6.1

package/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, ref, h, unref, watch, reactive, shallowRef, computed, 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, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+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';
 
 const OnClickOutside = defineComponent({
@@ -59,14 +59,22 @@ function useEventListener(...args) {
 }
 
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ignore } = options;
   if (!window)
     return;
   const shouldListen = ref(true);
   const listener = (event) => {
     const el = unrefElement(target);
-    if (!el || el === event.target || event.composedPath().includes(el) || !shouldListen.value)
+    const composedPath = event.composedPath();
+    if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
       return;
+    if (ignore && ignore.length > 0) {
+      if (ignore.some((target2) => {
+        const el2 = unrefElement(target2);
+        return el2 && (event.target === el2 || composedPath.includes(el2));
+      }))
+        return;
+    }
     handler(event);
   };
   const cleanup = [
@@ -84,6 +92,49 @@ const VOnClickOutside = (el, binding) => {
   onClickOutside(el, binding.value);
 };
 
+const DEFAULT_DELAY = 500;
+function onLongPress(target, handler, options) {
+  const elementRef = computed(() => unrefElement$1(target));
+  let timeout = null;
+  function clear() {
+    if (timeout != null) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  }
+  function onDown(ev) {
+    var _a;
+    clear();
+    timeout = setTimeout(() => handler(ev), (_a = options == null ? void 0 : options.delay) != null ? _a : DEFAULT_DELAY);
+  }
+  useEventListener$1(elementRef, "pointerdown", onDown);
+  useEventListener$1(elementRef, "pointerup", clear);
+  useEventListener$1(elementRef, "pointerleave", clear);
+}
+
+const OnLongPress = defineComponent({
+  name: "OnLongPress",
+  props: ["as", "options"],
+  emits: ["trigger"],
+  setup(props, { slots, emit }) {
+    const target = ref();
+    onLongPress(target, (e) => {
+      emit("trigger", e);
+    }, props.options);
+    return () => {
+      if (slots.default)
+        return h(props.as || "div", { ref: target }, slots.default());
+    };
+  }
+});
+
+const VOnLongPress = (el, binding) => {
+  if (typeof binding.value === "function")
+    onLongPress(el, binding.value);
+  else
+    onLongPress(el, binding.value.handler, binding.value.options);
+};
+
 const UseActiveElement = defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
@@ -119,9 +170,10 @@ const UseBrowserLocation = defineComponent({
   }
 });
 
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 const globalKey = "__vueuse_ssr_handlers__";
-globalThis[globalKey] = globalThis[globalKey] || {};
-const handlers = globalThis[globalKey];
+_global[globalKey] = _global[globalKey] || {};
+const handlers = _global[globalKey];
 function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
@@ -261,19 +313,19 @@ function usePreferredDark(options) {
   return useMediaQuery("(prefers-color-scheme: dark)", options);
 }
 
-var __defProp$7 = Object.defineProperty;
-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$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) => {
   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$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;
 };
@@ -287,7 +339,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$7({
+  const modes = __spreadValues$8({
     auto: "",
     light: "light",
     dark: "dark"
@@ -425,29 +477,30 @@ const UseDocumentVisibility = 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 UseDraggable = defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
+    "storageType",
     "initialValue",
     "exact",
     "preventDefault",
@@ -457,7 +510,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$5(__spreadValues$6({}, props), {
+    const data = reactive(useDraggable(target, __spreadProps$6(__spreadValues$7({}, props), {
       initialValue
     })));
     return () => {
@@ -584,31 +637,31 @@ const UseMouseInElement = 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 UseMousePressed = defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useMousePressed(__spreadProps$4(__spreadValues$5({}, props), { target })));
+    const data = reactive(useMousePressed(__spreadProps$5(__spreadValues$6({}, props), { target })));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -627,6 +680,37 @@ 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) => {
+  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]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const UseNow = defineComponent({
+  name: "UseNow",
+  props: ["interval"],
+  setup(props, { slots }) {
+    const data = reactive(useNow(__spreadProps$4(__spreadValues$5({}, props), { controls: true })));
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 var __defProp$4 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
@@ -646,11 +730,39 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const UseNow = defineComponent({
-  name: "UseNow",
-  props: ["interval"],
-  setup(props, { slots }) {
-    const data = reactive(useNow(__spreadProps$3(__spreadValues$4({}, props), { controls: true })));
+const UseOffsetPagination = defineComponent({
+  name: "UseOffsetPagination",
+  props: [
+    "total",
+    "page",
+    "pageSize",
+    "onPageChange",
+    "onPageSizeChange",
+    "onPageCountChange"
+  ],
+  emits: [
+    "page-change",
+    "page-size-change",
+    "page-count-change"
+  ],
+  setup(props, { slots, emit }) {
+    const data = reactive(useOffsetPagination(__spreadProps$3(__spreadValues$4({}, props), {
+      onPageChange(...args) {
+        var _a;
+        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
+        emit("page-change", ...args);
+      },
+      onPageSizeChange(...args) {
+        var _a;
+        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
+        emit("page-size-change", ...args);
+      },
+      onPageCountChange(...args) {
+        var _a;
+        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
+        emit("page-count-change", ...args);
+      }
+    })));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -973,4 +1085,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "7.5.3",
+  "version": "7.6.1",
   "description": "Renderless components for VueUse",
   "keywords": [
     "vue",
@@ -33,8 +33,8 @@
   },
   "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "dependencies": {
-    "@vueuse/core": "7.5.3",
-    "@vueuse/shared": "7.5.3",
+    "@vueuse/core": "7.6.1",
+    "@vueuse/shared": "7.6.1",
     "vue-demi": "*"
   }
 }