@vueuse/components 7.5.2 → 7.6.0

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,9 +174,10 @@ const UseBrowserLocation = vueDemi.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;
 }
@@ -164,10 +216,7 @@ const StorageSerializers = {
     write: (v) => JSON.stringify(Array.from(v.entries()))
   }
 };
-function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorage", () => {
-  var _a;
-  return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-})(), options = {}) {
+function useStorage(key, initialValue, storage, options = {}) {
   var _a;
   const {
     flush = "pre",
@@ -185,6 +234,16 @@ function useStorage(key, initialValue, storage = getSSRHandler("getDefaultStorag
   const type = guessSerializerType(rawInit);
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(initialValue);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  if (!storage) {
+    try {
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a2;
+        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+      })();
+    } catch (e) {
+      onError(e);
+    }
+  }
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
@@ -258,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;
 };
@@ -279,15 +338,12 @@ function useColorMode(options = {}) {
     selector = "html",
     attribute = "class",
     window = defaultWindow,
-    storage = getSSRHandler("getDefaultStorage", () => {
-      var _a;
-      return (_a = defaultWindow) == null ? void 0 : _a.localStorage;
-    })(),
+    storage,
     storageKey = "vueuse-color-scheme",
     listenToStorageChanges = true,
     storageRef
   } = options;
-  const modes = __spreadValues$7({
+  const modes = __spreadValues$8({
     auto: "",
     light: "light",
     dark: "dark"
@@ -425,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",
@@ -457,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 () => {
@@ -584,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));
@@ -627,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;
@@ -646,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);
@@ -974,6 +1090,7 @@ const UseWindowSize = vueDemi.defineComponent({
 });
 
 exports.OnClickOutside = OnClickOutside;
+exports.OnLongPress = OnLongPress;
 exports.UseActiveElement = UseActiveElement;
 exports.UseBattery = UseBattery;
 exports.UseBrowserLocation = UseBrowserLocation;
@@ -997,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;
@@ -1010,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,17 +23,38 @@ 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseBattery: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseBrowserLocation: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 interface StorageLike {
     getItem(key: string): string | null;
@@ -41,10 +62,10 @@ interface StorageLike {
     removeItem(key: string): void;
 }
 
-declare type Serializer<T> = {
+interface Serializer<T> {
     read(raw: string): T;
     write(value: T): string;
-};
+}
 interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
      * Watch for deep changes
@@ -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
      */
@@ -135,21 +156,21 @@ declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {},
 
 declare const UseDeviceMotion: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseDeviceOrientation: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseDevicePixelRatio: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseDevicesList: vue_demi.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDevicesListOptions>, {}>;
 
 declare const UseDocumentVisibility: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
     /**
@@ -185,11 +206,9 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
-    sRGBHex?: unknown;
-} & {} & {
-    sRGBHex?: string | undefined;
-}>, {}>;
+}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    sRGBHex: StringConstructor;
+}>>, {}>;
 
 declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
@@ -209,17 +228,57 @@ declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions
 
 declare const UseNetwork: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePageLeave: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "target"> & {
     target: 'window' | 'self';
@@ -229,15 +288,15 @@ declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "targ
 
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePreferredDark: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UsePreferredLanguages: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     top: BooleanConstructor;
@@ -246,17 +305,12 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     left: BooleanConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
-    top?: unknown;
-    right?: unknown;
-    bottom?: unknown;
-    left?: unknown;
-} & {
-    left: boolean;
-    right: boolean;
-    top: boolean;
-    bottom: boolean;
-} & {}>, {
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    top: BooleanConstructor;
+    right: BooleanConstructor;
+    bottom: BooleanConstructor;
+    left: BooleanConstructor;
+}>>, {
     left: boolean;
     right: boolean;
     top: boolean;
@@ -264,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>, {}>;
 
@@ -294,8 +348,8 @@ declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {},
 
 declare const UseWindowFocus: 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<{} & {} & {}>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
 
 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 };