@vueuse/components 7.5.4 → 7.6.2

package/index.cjs

@@ -63,14 +63,22 @@ function useEventListener(...args) {
 }
 
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ignore } = options;
   if (!window)
     return;
   const shouldListen = vueDemi.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 = [
@@ -88,6 +96,49 @@ const VOnClickOutside = (el, binding) => {
   onClickOutside(el, binding.value);
 };
 
+const DEFAULT_DELAY = 500;
+function onLongPress(target, handler, options) {
+  const elementRef = vueDemi.computed(() => core.unrefElement(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);
+  }
+  core.useEventListener(elementRef, "pointerdown", onDown);
+  core.useEventListener(elementRef, "pointerup", clear);
+  core.useEventListener(elementRef, "pointerleave", clear);
+}
+
+const OnLongPress = vueDemi.defineComponent({
+  name: "OnLongPress",
+  props: ["as", "options"],
+  emits: ["trigger"],
+  setup(props, { slots, emit }) {
+    const target = vueDemi.ref();
+    onLongPress(target, (e) => {
+      emit("trigger", e);
+    }, props.options);
+    return () => {
+      if (slots.default)
+        return vueDemi.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 = vueDemi.defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
@@ -123,7 +174,7 @@ const UseBrowserLocation = vueDemi.defineComponent({
   }
 });
 
-const _global = globalThis || undefined;
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 const globalKey = "__vueuse_ssr_handlers__";
 _global[globalKey] = _global[globalKey] || {};
 const handlers = _global[globalKey];
@@ -266,19 +317,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;
 };
@@ -292,7 +343,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$7({
+  const modes = __spreadValues$8({
     auto: "",
     light: "light",
     dark: "dark"
@@ -430,29 +481,30 @@ const UseDocumentVisibility = vueDemi.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 = vueDemi.defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
+    "storageType",
     "initialValue",
     "exact",
     "preventDefault",
@@ -462,7 +514,7 @@ const UseDraggable = vueDemi.defineComponent({
   setup(props, { slots }) {
     const target = vueDemi.ref();
     const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
-    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$5(__spreadValues$6({}, props), {
+    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$6(__spreadValues$7({}, props), {
       initialValue
     })));
     return () => {
@@ -589,31 +641,31 @@ const UseMouseInElement = vueDemi.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 = vueDemi.defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useMousePressed(__spreadProps$4(__spreadValues$5({}, props), { target })));
+    const data = vueDemi.reactive(core.useMousePressed(__spreadProps$5(__spreadValues$6({}, props), { target })));
     return () => {
       if (slots.default)
         return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -632,6 +684,37 @@ const UseNetwork = vueDemi.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 = vueDemi.defineComponent({
+  name: "UseNow",
+  props: ["interval"],
+  setup(props, { slots }) {
+    const data = vueDemi.reactive(core.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;
@@ -651,11 +734,39 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const UseNow = vueDemi.defineComponent({
-  name: "UseNow",
-  props: ["interval"],
-  setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useNow(__spreadProps$3(__spreadValues$4({}, props), { controls: true })));
+const UseOffsetPagination = vueDemi.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 = vueDemi.reactive(core.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);
@@ -772,14 +883,14 @@ function useCssVar(prop, target, { window = defaultWindow } = {}) {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
-  vueDemi.watch(elRef, (el) => {
+  vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
     if (el && window)
-      variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+      variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
   }, { immediate: true });
   vueDemi.watch(variable, (val) => {
     var _a;
     if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(prop, val);
+      elRef.value.style.setProperty(vueDemi.unref(prop), val);
   });
   return variable;
 }
@@ -979,6 +1090,7 @@ const UseWindowSize = vueDemi.defineComponent({
 });
 
 exports.OnClickOutside = OnClickOutside;
+exports.OnLongPress = OnLongPress;
 exports.UseActiveElement = UseActiveElement;
 exports.UseBattery = UseBattery;
 exports.UseBrowserLocation = UseBrowserLocation;
@@ -1002,6 +1114,7 @@ exports.UseMouseInElement = UseMouseInElement;
 exports.UseMousePressed = UseMousePressed;
 exports.UseNetwork = UseNetwork;
 exports.UseNow = UseNow;
+exports.UseOffsetPagination = UseOffsetPagination;
 exports.UseOnline = UseOnline;
 exports.UsePageLeave = UsePageLeave;
 exports.UsePointer = UsePointer;
@@ -1015,3 +1128,4 @@ exports.UseVirtualList = UseVirtualList;
 exports.UseWindowFocus = UseWindowFocus;
 exports.UseWindowSize = UseWindowSize;
 exports.VOnClickOutside = VOnClickOutside;
+exports.VOnLongPress = VOnLongPress;

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
-import { FunctionDirective, Ref } from 'vue-demi';
-import { ConfigurableEventFilter, ConfigurableFlush, MaybeRef } from '@vueuse/shared';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
+import { FunctionDirective, Ref, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
+import { ConfigurableEventFilter, ConfigurableFlush, MaybeRef as MaybeRef$1 } from '@vueuse/shared';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, MaybeRef, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -23,6 +23,27 @@ declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {},
  */
 declare const VOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void>;
 
+interface OnLongPressOptions {
+    /**
+     * Time in ms till `longpress` gets called
+     *
+     * @default 500
+     */
+    delay?: number;
+}
+
+interface OnLongPressProps extends RenderableComponent {
+    options?: OnLongPressOptions;
+}
+declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
+
+declare type BindingValueFunction = (evt: PointerEvent) => void;
+interface BindingValueObject {
+    handler: BindingValueFunction;
+    options: OnLongPressOptions;
+}
+declare const VOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction | BindingValueObject>;
+
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
@@ -59,7 +80,7 @@ interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow,
      */
     listenToStorageChanges?: boolean;
     /**
-     * Write the default value to the storage when it does not existed
+     * Write the default value to the storage when it does not exist
      *
      * @default true
      */
@@ -211,6 +232,46 @@ declare const UseNetwork: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_
 
 declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}>;
 
+interface UseOffsetPaginationOptions {
+    /**
+     * Total number of items.
+     */
+    total?: MaybeRef<number>;
+    /**
+     * The number of items to display per page.
+     * @default 10
+     */
+    pageSize?: MaybeRef<number>;
+    /**
+     * The current page number.
+     * @default 1
+     */
+    page?: MaybeRef<number>;
+    /**
+     * Callback when the `page` change.
+     */
+    onPageChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
+    /**
+     * Callback when the `pageSize` change.
+     */
+    onPageSizeChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
+    /**
+     * Callback when the `pageCount` change.
+     */
+    onPageCountChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
+}
+interface UseOffsetPaginationReturn {
+    currentPage: Ref<number>;
+    currentPageSize: Ref<number>;
+    pageCount: ComputedRef<number>;
+    isFirstPage: ComputedRef<boolean>;
+    isLastPage: ComputedRef<boolean>;
+    prev: () => void;
+    next: () => void;
+}
+
+declare const UseOffsetPagination: vue_demi.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseOffsetPaginationOptions>, {}>;
+
 declare const UseOnline: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
@@ -257,7 +318,7 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
 }>;
 
 interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
-    time: MaybeRef<Date | number | string>;
+    time: MaybeRef$1<Date | number | string>;
 }
 declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}>;
 
@@ -291,4 +352,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside };
+export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside, VOnLongPress };

package/index.iife.js

@@ -119,14 +119,22 @@
   }
 
   function onClickOutside(target, handler, options = {}) {
-    const { window = defaultWindow } = options;
+    const { window = defaultWindow, ignore } = options;
     if (!window)
       return;
     const shouldListen = vueDemi.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 = [
@@ -144,6 +152,49 @@
     onClickOutside(el, binding.value);
   };
 
+  const DEFAULT_DELAY = 500;
+  function onLongPress(target, handler, options) {
+    const elementRef = vueDemi.computed(() => core.unrefElement(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);
+    }
+    core.useEventListener(elementRef, "pointerdown", onDown);
+    core.useEventListener(elementRef, "pointerup", clear);
+    core.useEventListener(elementRef, "pointerleave", clear);
+  }
+
+  const OnLongPress = vueDemi.defineComponent({
+    name: "OnLongPress",
+    props: ["as", "options"],
+    emits: ["trigger"],
+    setup(props, { slots, emit }) {
+      const target = vueDemi.ref();
+      onLongPress(target, (e) => {
+        emit("trigger", e);
+      }, props.options);
+      return () => {
+        if (slots.default)
+          return vueDemi.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 = vueDemi.defineComponent({
     name: "UseActiveElement",
     setup(props, { slots }) {
@@ -179,7 +230,7 @@
     }
   });
 
-  const _global = globalThis || undefined;
+  const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   const globalKey = "__vueuse_ssr_handlers__";
   _global[globalKey] = _global[globalKey] || {};
   const handlers = _global[globalKey];
@@ -322,19 +373,19 @@
     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;
   };
@@ -348,7 +399,7 @@
       listenToStorageChanges = true,
       storageRef
     } = options;
-    const modes = __spreadValues$7({
+    const modes = __spreadValues$8({
       auto: "",
       light: "light",
       dark: "dark"
@@ -486,29 +537,30 @@
     }
   });
 
-  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 = vueDemi.defineComponent({
     name: "UseDraggable",
     props: [
       "storageKey",
+      "storageType",
       "initialValue",
       "exact",
       "preventDefault",
@@ -518,7 +570,7 @@
     setup(props, { slots }) {
       const target = vueDemi.ref();
       const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
-      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$5(__spreadValues$6({}, props), {
+      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$6(__spreadValues$7({}, props), {
         initialValue
       })));
       return () => {
@@ -645,31 +697,31 @@
     }
   });
 
-  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 = vueDemi.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useMousePressed(__spreadProps$4(__spreadValues$5({}, props), { target })));
+      const data = vueDemi.reactive(core.useMousePressed(__spreadProps$5(__spreadValues$6({}, props), { target })));
       return () => {
         if (slots.default)
           return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -688,6 +740,37 @@
     }
   });
 
+  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 = vueDemi.defineComponent({
+    name: "UseNow",
+    props: ["interval"],
+    setup(props, { slots }) {
+      const data = vueDemi.reactive(core.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;
@@ -707,11 +790,39 @@
     return a;
   };
   var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-  const UseNow = vueDemi.defineComponent({
-    name: "UseNow",
-    props: ["interval"],
-    setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useNow(__spreadProps$3(__spreadValues$4({}, props), { controls: true })));
+  const UseOffsetPagination = vueDemi.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 = vueDemi.reactive(core.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);
@@ -828,14 +939,14 @@
       var _a;
       return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
     });
-    vueDemi.watch(elRef, (el) => {
+    vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
       if (el && window)
-        variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+        variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
     }, { immediate: true });
     vueDemi.watch(variable, (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(prop, val);
+        elRef.value.style.setProperty(vueDemi.unref(prop), val);
     });
     return variable;
   }
@@ -1035,6 +1146,7 @@
   });
 
   exports.OnClickOutside = OnClickOutside;
+  exports.OnLongPress = OnLongPress;
   exports.UseActiveElement = UseActiveElement;
   exports.UseBattery = UseBattery;
   exports.UseBrowserLocation = UseBrowserLocation;
@@ -1058,6 +1170,7 @@
   exports.UseMousePressed = UseMousePressed;
   exports.UseNetwork = UseNetwork;
   exports.UseNow = UseNow;
+  exports.UseOffsetPagination = UseOffsetPagination;
   exports.UseOnline = UseOnline;
   exports.UsePageLeave = UsePageLeave;
   exports.UsePointer = UsePointer;
@@ -1071,6 +1184,7 @@
   exports.UseWindowFocus = UseWindowFocus;
   exports.UseWindowSize = UseWindowSize;
   exports.VOnClickOutside = VOnClickOutside;
+  exports.VOnLongPress = VOnLongPress;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 

package/index.iife.min.js

@@ -1 +1 @@
-(function(s){if(!s.VueDemi){var n={},o=s.Vue;if(o)if(o.version.slice(0,2)==="2."){var c=s.VueCompositionAPI;if(c){for(var U in c)n[U]=c[U];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=o,n.Vue2=o,n.version=o.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(o.version.slice(0,2)==="3."){for(var U in o)n[U]=o[U];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=o,n.Vue2=void 0,n.version=o.version,n.set=function(g,d,O){return Array.isArray(g)?(g.length=Math.max(g.length,d),g.splice(d,1,O),O):(g[d]=O,O)},n.del=function(g,d){if(Array.isArray(g)){g.splice(d,1);return}delete g[d]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");s.VueDemi=n}})(window),function(s,n,o,c){"use strict";const U=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const a=n.ref();return o.onClickOutside(a,i=>{r("trigger",i)}),()=>{if(e.default)return n.h(t.as||"div",{ref:a},e.default())}}});function g(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const d=c.isClient?window:void 0;function O(...t){let e,r,a,i;if(c.isString(t[0])?([r,a,i]=t,e=d):[e,r,a,i]=t,!e)return c.noop;let u=c.noop;const p=n.watch(()=>n.unref(e),l=>{u(),!!l&&(l.addEventListener(r,a,i),u=()=>{l.removeEventListener(r,a,i),u=c.noop})},{immediate:!0,flush:"post"}),y=()=>{p(),u()};return c.tryOnScopeDispose(y),y}function te(t,e,r={}){const{window:a=d}=r;if(!a)return;const i=n.ref(!0),p=[O(a,"click",l=>{const v=g(t);!v||v===l.target||l.composedPath().includes(v)||!i.value||e(l)},{passive:!0,capture:!0}),O(a,"pointerdown",l=>{const v=g(t);i.value=!!v&&!l.composedPath().includes(v)},{passive:!0})];return()=>p.forEach(l=>l())}const re=(t,e)=>{te(t,e.value)},ne=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:o.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),ae=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(o.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),oe=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(o.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),j=globalThis||void 0,M="__vueuse_ssr_handlers__";j[M]=j[M]||{};const se=j[M];function N(t,e){return se[t]||e}function ie(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const ue={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function le(t,e,r,a={}){var i;const{flush:u="pre",deep:p=!0,listenToStorageChanges:y=!0,writeDefaults:l=!0,shallow:v,window:E=d,eventFilter:S,onError:w=f=>{console.error(f)}}=a,b=n.unref(e),L=ie(b),P=(v?n.shallowRef:n.ref)(e),_=(i=a.serializer)!=null?i:ue[L];if(!r)try{r=N("getDefaultStorage",()=>{var f;return(f=d)==null?void 0:f.localStorage})()}catch(f){w(f)}function h(f){if(!(!r||f&&f.key!==t))try{const m=f?f.newValue:r.getItem(t);m==null?(P.value=b,l&&b!==null&&r.setItem(t,_.write(b))):typeof m!="string"?P.value=m:P.value=_.read(m)}catch(m){w(m)}}return h(),E&&y&&O(E,"storage",f=>setTimeout(()=>h(f),0)),r&&c.watchWithFilter(P,()=>{try{P.value==null?r.removeItem(t):r.setItem(t,_.write(P.value))}catch(f){w(f)}},{flush:u,deep:p,eventFilter:S}),P}function fe(t,e={}){const{window:r=d}=e;let a;const i=n.ref(!1),u=()=>{!r||(a||(a=r.matchMedia(t)),i.value=a.matches)};return c.tryOnMounted(()=>{u(),!!a&&("addEventListener"in a?a.addEventListener("change",u):a.addListener(u),c.tryOnScopeDispose(()=>{"removeEventListener"in u?a.removeEventListener("change",u):a.removeListener(u)}))}),i}function ce(t){return fe("(prefers-color-scheme: dark)",t)}var de=Object.defineProperty,A=Object.getOwnPropertySymbols,pe=Object.prototype.hasOwnProperty,ge=Object.prototype.propertyIsEnumerable,I=(t,e,r)=>e in t?de(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,_e=(t,e)=>{for(var r in e||(e={}))pe.call(e,r)&&I(t,r,e[r]);if(A)for(var r of A(e))ge.call(e,r)&&I(t,r,e[r]);return t};function me(t={}){const{selector:e="html",attribute:r="class",window:a=d,storage:i,storageKey:u="vueuse-color-scheme",listenToStorageChanges:p=!0,storageRef:y}=t,l=_e({auto:"",light:"light",dark:"dark"},t.modes||{}),v=ce({window:a}),E=n.computed(()=>v.value?"dark":"light"),S=y||(u==null?n.ref("auto"):le(u,"auto",i,{window:a,listenToStorageChanges:p})),w=n.computed({get(){return S.value==="auto"?E.value:S.value},set(_){S.value=_}}),b=N("updateHTMLAttrs",(_,h,f)=>{const m=a==null?void 0:a.document.querySelector(_);if(!!m)if(h==="class"){const Wt=f.split(/\s/g);Object.values(l).flatMap(C=>(C||"").split(/\s/g)).filter(Boolean).forEach(C=>{Wt.includes(C)?m.classList.add(C):m.classList.remove(C)})}else m.setAttribute(h,f)});function L(_){var h;b(e,r,(h=l[_])!=null?h:_)}function P(_){t.onChanged?t.onChanged(_,L):L(_)}return n.watch(w,P,{flush:"post",immediate:!0}),c.tryOnMounted(()=>P(w.value)),w}const ve=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=me(t),a=n.reactive({mode:r});return()=>{if(e.default)return e.default(a)}}}),Pe=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=o.useDark(t),a=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(a)}}}),Oe=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(o.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),ye=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(o.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),he=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:o.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),Ue=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(o.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),we=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:o.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var be=Object.defineProperty,Se=Object.defineProperties,Ce=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,Ve=Object.prototype.hasOwnProperty,$e=Object.prototype.propertyIsEnumerable,B=(t,e,r)=>e in t?be(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ee=(t,e)=>{for(var r in e||(e={}))Ve.call(e,r)&&B(t,r,e[r]);if(T)for(var r of T(e))$e.call(e,r)&&B(t,r,e[r]);return t},Le=(t,e)=>Se(t,Ce(e));const je=n.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),a=t.storageKey?o.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},o.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},i=n.reactive(o.useDraggable(r,Le(Ee({},t),{initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${i.style}`},e.default(i))}}}),Me=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ne=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ae=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive({isVisible:o.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ie=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(o.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),Te=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Be=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(o.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),Fe=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(o.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}}),ze=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(o.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Re=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}});var We=Object.defineProperty,ke=Object.defineProperties,He=Object.getOwnPropertyDescriptors,F=Object.getOwnPropertySymbols,Ke=Object.prototype.hasOwnProperty,Je=Object.prototype.propertyIsEnumerable,z=(t,e,r)=>e in t?We(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ge=(t,e)=>{for(var r in e||(e={}))Ke.call(e,r)&&z(t,r,e[r]);if(F)for(var r of F(e))Je.call(e,r)&&z(t,r,e[r]);return t},qe=(t,e)=>ke(t,He(e));const Qe=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useMousePressed(qe(Ge({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Xe=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(o.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Ye=Object.defineProperty,Ze=Object.defineProperties,xe=Object.getOwnPropertyDescriptors,R=Object.getOwnPropertySymbols,De=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,W=(t,e,r)=>e in t?Ye(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,tt=(t,e)=>{for(var r in e||(e={}))De.call(e,r)&&W(t,r,e[r]);if(R)for(var r of R(e))et.call(e,r)&&W(t,r,e[r]);return t},rt=(t,e)=>Ze(t,xe(e));const nt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(o.useNow(rt(tt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}}),at=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:o.useOnline()});return()=>{if(e.default)return e.default(r)}}}),ot=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:o.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var st=Object.defineProperty,it=Object.defineProperties,ut=Object.getOwnPropertyDescriptors,k=Object.getOwnPropertySymbols,lt=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable,H=(t,e,r)=>e in t?st(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ct=(t,e)=>{for(var r in e||(e={}))lt.call(e,r)&&H(t,r,e[r]);if(k)for(var r of k(e))ft.call(e,r)&&H(t,r,e[r]);return t},dt=(t,e)=>it(t,ut(e));const pt=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),a=n.reactive(o.usePointer(dt(ct({},t),{target:t.target==="self"?r:d})));return()=>{if(e.default)return e.default(a,{ref:r})}}}),gt=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:o.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),_t=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:o.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),mt=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:o.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function V(t,e,{window:r=d}={}){const a=n.ref(""),i=n.computed(()=>{var u;return g(e)||((u=r==null?void 0:r.document)==null?void 0:u.documentElement)});return n.watch(i,u=>{u&&r&&(a.value=r.getComputedStyle(u).getPropertyValue(t))},{immediate:!0}),n.watch(a,u=>{var p;((p=i.value)==null?void 0:p.style)&&i.value.style.setProperty(t,u)}),a}const K="--vueuse-safe-area-top",J="--vueuse-safe-area-right",G="--vueuse-safe-area-bottom",q="--vueuse-safe-area-left";function vt(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),a=n.ref("");if(c.isClient){const u=V(K),p=V(J),y=V(G),l=V(q);u.value="env(safe-area-inset-top, 0px)",p.value="env(safe-area-inset-right, 0px)",y.value="env(safe-area-inset-bottom, 0px)",l.value="env(safe-area-inset-left, 0px)",i(),O("resize",c.useDebounceFn(i))}function i(){t.value=$(K),e.value=$(J),r.value=$(G),a.value=$(q)}return{top:t,right:e,bottom:r,left:a,update:i}}function $(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const Pt=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:a,bottom:i,left:u}=vt();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?a.value:"",paddingBottom:t.bottom?i.value:"",paddingLeft:t.left?u.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Ot=Object.defineProperty,yt=Object.defineProperties,ht=Object.getOwnPropertyDescriptors,Q=Object.getOwnPropertySymbols,Ut=Object.prototype.hasOwnProperty,wt=Object.prototype.propertyIsEnumerable,X=(t,e,r)=>e in t?Ot(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,bt=(t,e)=>{for(var r in e||(e={}))Ut.call(e,r)&&X(t,r,e[r]);if(Q)for(var r of Q(e))wt.call(e,r)&&X(t,r,e[r]);return t},St=(t,e)=>yt(t,ht(e));const Ct=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),a=n.reactive(o.useTimeAgo(r,St(bt({},t),{controls:!0})));return()=>{if(e.default)return e.default(a)}}});var Vt=Object.defineProperty,$t=Object.defineProperties,Et=Object.getOwnPropertyDescriptors,Y=Object.getOwnPropertySymbols,Lt=Object.prototype.hasOwnProperty,jt=Object.prototype.propertyIsEnumerable,Z=(t,e,r)=>e in t?Vt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Mt=(t,e)=>{for(var r in e||(e={}))Lt.call(e,r)&&Z(t,r,e[r]);if(Y)for(var r of Y(e))jt.call(e,r)&&Z(t,r,e[r]);return t},Nt=(t,e)=>$t(t,Et(e));const At=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(o.useTimestamp(Nt(Mt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var It=Object.defineProperty,x=Object.getOwnPropertySymbols,Tt=Object.prototype.hasOwnProperty,Bt=Object.prototype.propertyIsEnumerable,D=(t,e,r)=>e in t?It(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ee=(t,e)=>{for(var r in e||(e={}))Tt.call(e,r)&&D(t,r,e[r]);if(x)for(var r of x(e))Bt.call(e,r)&&D(t,r,e[r]);return t};const Ft=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:a,containerProps:i,wrapperProps:u}=o.useVirtualList(r,t.options);return i.style.height=t.height||"300px",()=>n.h("div",ee({},i),[n.h("div",ee({},u.value),a.value.map(p=>n.h("div",{style:{overFlow:"hidden",height:p.height}},e.default?e.default(p):"Please set content!")))])}}),zt=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:o.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),Rt=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(o.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});s.OnClickOutside=U,s.UseActiveElement=ne,s.UseBattery=ae,s.UseBrowserLocation=oe,s.UseColorMode=ve,s.UseDark=Pe,s.UseDeviceMotion=Oe,s.UseDeviceOrientation=ye,s.UseDevicePixelRatio=he,s.UseDevicesList=Ue,s.UseDocumentVisibility=we,s.UseDraggable=je,s.UseElementBounding=Me,s.UseElementSize=Ne,s.UseElementVisibility=Ae,s.UseEyeDropper=Ie,s.UseFullscreen=Te,s.UseGeolocation=Be,s.UseIdle=Fe,s.UseMouse=ze,s.UseMouseInElement=Re,s.UseMousePressed=Qe,s.UseNetwork=Xe,s.UseNow=nt,s.UseOnline=at,s.UsePageLeave=ot,s.UsePointer=pt,s.UsePreferredColorScheme=gt,s.UsePreferredDark=_t,s.UsePreferredLanguages=mt,s.UseScreenSafeArea=Pt,s.UseTimeAgo=Ct,s.UseTimestamp=At,s.UseVirtualList=Ft,s.UseWindowFocus=zt,s.UseWindowSize=Rt,s.VOnClickOutside=re,Object.defineProperty(s,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+(function(i){if(!i.VueDemi){var n={},o=i.Vue;if(o)if(o.version.slice(0,2)==="2."){var c=i.VueCompositionAPI;if(c){for(var S in c)n[S]=c[S];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=o,n.Vue2=o,n.version=o.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(o.version.slice(0,2)==="3."){for(var S in o)n[S]=o[S];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=o,n.Vue2=void 0,n.version=o.version,n.set=function(p,d,U){return Array.isArray(p)?(p.length=Math.max(p.length,d),p.splice(d,1,U),U):(p[d]=U,U)},n.del=function(p,d){if(Array.isArray(p)){p.splice(d,1);return}delete p[d]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");i.VueDemi=n}})(window),function(i,n,o,c){"use strict";const S=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const a=n.ref();return o.onClickOutside(a,s=>{r("trigger",s)}),()=>{if(e.default)return n.h(t.as||"div",{ref:a},e.default())}}});function p(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const d=c.isClient?window:void 0;function U(...t){let e,r,a,s;if(c.isString(t[0])?([r,a,s]=t,e=d):[e,r,a,s]=t,!e)return c.noop;let u=c.noop;const l=n.watch(()=>n.unref(e),g=>{u(),!!g&&(g.addEventListener(r,a,s),u=()=>{g.removeEventListener(r,a,s),u=c.noop})},{immediate:!0,flush:"post"}),P=()=>{l(),u()};return c.tryOnScopeDispose(P),P}function ae(t,e,r={}){const{window:a=d,ignore:s}=r;if(!a)return;const u=n.ref(!0),P=[U(a,"click",m=>{const v=p(t),b=m.composedPath();!v||v===m.target||b.includes(v)||!u.value||s&&s.length>0&&s.some(w=>{const y=p(w);return y&&(m.target===y||b.includes(y))})||e(m)},{passive:!0,capture:!0}),U(a,"pointerdown",m=>{const v=p(t);u.value=!!v&&!m.composedPath().includes(v)},{passive:!0})];return()=>P.forEach(m=>m())}const oe=(t,e)=>{ae(t,e.value)},se=500;function j(t,e,r){const a=n.computed(()=>o.unrefElement(t));let s=null;function u(){s!=null&&(clearTimeout(s),s=null)}function l(P){var g;u(),s=setTimeout(()=>e(P),(g=r==null?void 0:r.delay)!=null?g:se)}o.useEventListener(a,"pointerdown",l),o.useEventListener(a,"pointerup",u),o.useEventListener(a,"pointerleave",u)}const ie=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const a=n.ref();return j(a,s=>{r("trigger",s)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:a},e.default())}}}),ue=(t,e)=>{typeof e.value=="function"?j(t,e.value):j(t,e.value.handler,e.value.options)},le=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:o.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),fe=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(o.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),ce=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(o.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),M=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},N="__vueuse_ssr_handlers__";M[N]=M[N]||{};const de=M[N];function A(t,e){return de[t]||e}function pe(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const ge={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function _e(t,e,r,a={}){var s;const{flush:u="pre",deep:l=!0,listenToStorageChanges:P=!0,writeDefaults:g=!0,shallow:m,window:v=d,eventFilter:b,onError:w=f=>{console.error(f)}}=a,y=n.unref(e),L=pe(y),h=(m?n.shallowRef:n.ref)(e),_=(s=a.serializer)!=null?s:ge[L];if(!r)try{r=A("getDefaultStorage",()=>{var f;return(f=d)==null?void 0:f.localStorage})()}catch(f){w(f)}function C(f){if(!(!r||f&&f.key!==t))try{const O=f?f.newValue:r.getItem(t);O==null?(h.value=y,g&&y!==null&&r.setItem(t,_.write(y))):typeof O!="string"?h.value=O:h.value=_.read(O)}catch(O){w(O)}}return C(),v&&P&&U(v,"storage",f=>setTimeout(()=>C(f),0)),r&&c.watchWithFilter(h,()=>{try{h.value==null?r.removeItem(t):r.setItem(t,_.write(h.value))}catch(f){w(f)}},{flush:u,deep:l,eventFilter:b}),h}function Pe(t,e={}){const{window:r=d}=e;let a;const s=n.ref(!1),u=()=>{!r||(a||(a=r.matchMedia(t)),s.value=a.matches)};return c.tryOnMounted(()=>{u(),!!a&&("addEventListener"in a?a.addEventListener("change",u):a.addListener(u),c.tryOnScopeDispose(()=>{"removeEventListener"in u?a.removeEventListener("change",u):a.removeListener(u)}))}),s}function me(t){return Pe("(prefers-color-scheme: dark)",t)}var ve=Object.defineProperty,T=Object.getOwnPropertySymbols,Oe=Object.prototype.hasOwnProperty,ye=Object.prototype.propertyIsEnumerable,I=(t,e,r)=>e in t?ve(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,he=(t,e)=>{for(var r in e||(e={}))Oe.call(e,r)&&I(t,r,e[r]);if(T)for(var r of T(e))ye.call(e,r)&&I(t,r,e[r]);return t};function Ue(t={}){const{selector:e="html",attribute:r="class",window:a=d,storage:s,storageKey:u="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:P}=t,g=he({auto:"",light:"light",dark:"dark"},t.modes||{}),m=me({window:a}),v=n.computed(()=>m.value?"dark":"light"),b=P||(u==null?n.ref("auto"):_e(u,"auto",s,{window:a,listenToStorageChanges:l})),w=n.computed({get(){return b.value==="auto"?v.value:b.value},set(_){b.value=_}}),y=A("updateHTMLAttrs",(_,C,f)=>{const O=a==null?void 0:a.document.querySelector(_);if(!!O)if(C==="class"){const tr=f.split(/\s/g);Object.values(g).flatMap($=>($||"").split(/\s/g)).filter(Boolean).forEach($=>{tr.includes($)?O.classList.add($):O.classList.remove($)})}else O.setAttribute(C,f)});function L(_){var C;y(e,r,(C=g[_])!=null?C:_)}function h(_){t.onChanged?t.onChanged(_,L):L(_)}return n.watch(w,h,{flush:"post",immediate:!0}),c.tryOnMounted(()=>h(w.value)),w}const we=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=Ue(t),a=n.reactive({mode:r});return()=>{if(e.default)return e.default(a)}}}),be=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=o.useDark(t),a=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(a)}}}),Ce=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(o.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),Se=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(o.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),$e=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:o.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),Ve=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(o.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),Ee=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:o.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var Le=Object.defineProperty,je=Object.defineProperties,Me=Object.getOwnPropertyDescriptors,z=Object.getOwnPropertySymbols,Ne=Object.prototype.hasOwnProperty,Ae=Object.prototype.propertyIsEnumerable,B=(t,e,r)=>e in t?Le(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Te=(t,e)=>{for(var r in e||(e={}))Ne.call(e,r)&&B(t,r,e[r]);if(z)for(var r of z(e))Ae.call(e,r)&&B(t,r,e[r]);return t},Ie=(t,e)=>je(t,Me(e));const ze=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),a=t.storageKey?o.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},o.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},s=n.reactive(o.useDraggable(r,Ie(Te({},t),{initialValue:a})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${s.style}`},e.default(s))}}}),Be=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Fe=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Re=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive({isVisible:o.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),We=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(o.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),He=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),Ke=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(o.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),ke=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(o.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}}),Je=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(o.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Ge=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}});var qe=Object.defineProperty,Qe=Object.defineProperties,Ye=Object.getOwnPropertyDescriptors,F=Object.getOwnPropertySymbols,Xe=Object.prototype.hasOwnProperty,Ze=Object.prototype.propertyIsEnumerable,R=(t,e,r)=>e in t?qe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,xe=(t,e)=>{for(var r in e||(e={}))Xe.call(e,r)&&R(t,r,e[r]);if(F)for(var r of F(e))Ze.call(e,r)&&R(t,r,e[r]);return t},De=(t,e)=>Qe(t,Ye(e));const et=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),a=n.reactive(o.useMousePressed(De(xe({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(a))}}}),tt=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(o.useNetwork());return()=>{if(e.default)return e.default(r)}}});var rt=Object.defineProperty,nt=Object.defineProperties,at=Object.getOwnPropertyDescriptors,W=Object.getOwnPropertySymbols,ot=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable,H=(t,e,r)=>e in t?rt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,it=(t,e)=>{for(var r in e||(e={}))ot.call(e,r)&&H(t,r,e[r]);if(W)for(var r of W(e))st.call(e,r)&&H(t,r,e[r]);return t},ut=(t,e)=>nt(t,at(e));const lt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(o.useNow(ut(it({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var ft=Object.defineProperty,ct=Object.defineProperties,dt=Object.getOwnPropertyDescriptors,K=Object.getOwnPropertySymbols,pt=Object.prototype.hasOwnProperty,gt=Object.prototype.propertyIsEnumerable,k=(t,e,r)=>e in t?ft(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,_t=(t,e)=>{for(var r in e||(e={}))pt.call(e,r)&&k(t,r,e[r]);if(K)for(var r of K(e))gt.call(e,r)&&k(t,r,e[r]);return t},Pt=(t,e)=>ct(t,dt(e));const mt=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const a=n.reactive(o.useOffsetPagination(Pt(_t({},t),{onPageChange(...s){var u;(u=t.onPageChange)==null||u.call(t,...s),r("page-change",...s)},onPageSizeChange(...s){var u;(u=t.onPageSizeChange)==null||u.call(t,...s),r("page-size-change",...s)},onPageCountChange(...s){var u;(u=t.onPageCountChange)==null||u.call(t,...s),r("page-count-change",...s)}})));return()=>{if(e.default)return e.default(a)}}}),vt=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:o.useOnline()});return()=>{if(e.default)return e.default(r)}}}),Ot=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:o.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var yt=Object.defineProperty,ht=Object.defineProperties,Ut=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertySymbols,wt=Object.prototype.hasOwnProperty,bt=Object.prototype.propertyIsEnumerable,G=(t,e,r)=>e in t?yt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ct=(t,e)=>{for(var r in e||(e={}))wt.call(e,r)&&G(t,r,e[r]);if(J)for(var r of J(e))bt.call(e,r)&&G(t,r,e[r]);return t},St=(t,e)=>ht(t,Ut(e));const $t=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),a=n.reactive(o.usePointer(St(Ct({},t),{target:t.target==="self"?r:d})));return()=>{if(e.default)return e.default(a,{ref:r})}}}),Vt=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:o.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),Et=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:o.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),Lt=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:o.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function V(t,e,{window:r=d}={}){const a=n.ref(""),s=n.computed(()=>{var u;return p(e)||((u=r==null?void 0:r.document)==null?void 0:u.documentElement)});return n.watch([s,()=>n.unref(t)],([u,l])=>{u&&r&&(a.value=r.getComputedStyle(u).getPropertyValue(l))},{immediate:!0}),n.watch(a,u=>{var l;((l=s.value)==null?void 0:l.style)&&s.value.style.setProperty(n.unref(t),u)}),a}const q="--vueuse-safe-area-top",Q="--vueuse-safe-area-right",Y="--vueuse-safe-area-bottom",X="--vueuse-safe-area-left";function jt(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),a=n.ref("");if(c.isClient){const u=V(q),l=V(Q),P=V(Y),g=V(X);u.value="env(safe-area-inset-top, 0px)",l.value="env(safe-area-inset-right, 0px)",P.value="env(safe-area-inset-bottom, 0px)",g.value="env(safe-area-inset-left, 0px)",s(),U("resize",c.useDebounceFn(s))}function s(){t.value=E(q),e.value=E(Q),r.value=E(Y),a.value=E(X)}return{top:t,right:e,bottom:r,left:a,update:s}}function E(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const Mt=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:a,bottom:s,left:u}=jt();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?a.value:"",paddingBottom:t.bottom?s.value:"",paddingLeft:t.left?u.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Nt=Object.defineProperty,At=Object.defineProperties,Tt=Object.getOwnPropertyDescriptors,Z=Object.getOwnPropertySymbols,It=Object.prototype.hasOwnProperty,zt=Object.prototype.propertyIsEnumerable,x=(t,e,r)=>e in t?Nt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Bt=(t,e)=>{for(var r in e||(e={}))It.call(e,r)&&x(t,r,e[r]);if(Z)for(var r of Z(e))zt.call(e,r)&&x(t,r,e[r]);return t},Ft=(t,e)=>At(t,Tt(e));const Rt=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),a=n.reactive(o.useTimeAgo(r,Ft(Bt({},t),{controls:!0})));return()=>{if(e.default)return e.default(a)}}});var Wt=Object.defineProperty,Ht=Object.defineProperties,Kt=Object.getOwnPropertyDescriptors,D=Object.getOwnPropertySymbols,kt=Object.prototype.hasOwnProperty,Jt=Object.prototype.propertyIsEnumerable,ee=(t,e,r)=>e in t?Wt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Gt=(t,e)=>{for(var r in e||(e={}))kt.call(e,r)&&ee(t,r,e[r]);if(D)for(var r of D(e))Jt.call(e,r)&&ee(t,r,e[r]);return t},qt=(t,e)=>Ht(t,Kt(e));const Qt=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(o.useTimestamp(qt(Gt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Yt=Object.defineProperty,te=Object.getOwnPropertySymbols,Xt=Object.prototype.hasOwnProperty,Zt=Object.prototype.propertyIsEnumerable,re=(t,e,r)=>e in t?Yt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ne=(t,e)=>{for(var r in e||(e={}))Xt.call(e,r)&&re(t,r,e[r]);if(te)for(var r of te(e))Zt.call(e,r)&&re(t,r,e[r]);return t};const xt=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:a,containerProps:s,wrapperProps:u}=o.useVirtualList(r,t.options);return s.style.height=t.height||"300px",()=>n.h("div",ne({},s),[n.h("div",ne({},u.value),a.value.map(l=>n.h("div",{style:{overFlow:"hidden",height:l.height}},e.default?e.default(l):"Please set content!")))])}}),Dt=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:o.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),er=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(o.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});i.OnClickOutside=S,i.OnLongPress=ie,i.UseActiveElement=le,i.UseBattery=fe,i.UseBrowserLocation=ce,i.UseColorMode=we,i.UseDark=be,i.UseDeviceMotion=Ce,i.UseDeviceOrientation=Se,i.UseDevicePixelRatio=$e,i.UseDevicesList=Ve,i.UseDocumentVisibility=Ee,i.UseDraggable=ze,i.UseElementBounding=Be,i.UseElementSize=Fe,i.UseElementVisibility=Re,i.UseEyeDropper=We,i.UseFullscreen=He,i.UseGeolocation=Ke,i.UseIdle=ke,i.UseMouse=Je,i.UseMouseInElement=Ge,i.UseMousePressed=et,i.UseNetwork=tt,i.UseNow=lt,i.UseOffsetPagination=mt,i.UseOnline=vt,i.UsePageLeave=Ot,i.UsePointer=$t,i.UsePreferredColorScheme=Vt,i.UsePreferredDark=Et,i.UsePreferredLanguages=Lt,i.UseScreenSafeArea=Mt,i.UseTimeAgo=Rt,i.UseTimestamp=Qt,i.UseVirtualList=xt,i.UseWindowFocus=Dt,i.UseWindowSize=er,i.VOnClickOutside=oe,i.VOnLongPress=ue,Object.defineProperty(i,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

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,7 +170,7 @@ const UseBrowserLocation = defineComponent({
   }
 });
 
-const _global = globalThis || undefined;
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 const globalKey = "__vueuse_ssr_handlers__";
 _global[globalKey] = _global[globalKey] || {};
 const handlers = _global[globalKey];
@@ -262,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;
 };
@@ -288,7 +339,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$7({
+  const modes = __spreadValues$8({
     auto: "",
     light: "light",
     dark: "dark"
@@ -426,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",
@@ -458,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 () => {
@@ -585,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));
@@ -628,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;
@@ -647,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);
@@ -768,14 +879,14 @@ function useCssVar(prop, target, { window = defaultWindow } = {}) {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
-  watch(elRef, (el) => {
+  watch([elRef, () => unref(prop)], ([el, prop2]) => {
     if (el && window)
-      variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+      variable.value = window.getComputedStyle(el).getPropertyValue(prop2);
   }, { immediate: true });
   watch(variable, (val) => {
     var _a;
     if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(prop, val);
+      elRef.value.style.setProperty(unref(prop), val);
   });
   return variable;
 }
@@ -974,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.4",
+  "version": "7.6.2",
   "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.4",
-    "@vueuse/shared": "7.5.4",
+    "@vueuse/core": "7.6.2",
+    "@vueuse/shared": "7.6.2",
     "vue-demi": "*"
   }
 }