@vueuse/components 6.3.1 → 6.4.1

package/index.cjs

@@ -8,6 +8,7 @@ var shared = require('@vueuse/shared');
 
 const OnClickOutside = vueDemi.defineComponent({
     name: 'OnClickOutside',
+    props: ['as'],
     emits: ['trigger'],
     setup(props, { slots, emit }) {
         const target = vueDemi.ref();
@@ -16,7 +17,7 @@ const OnClickOutside = vueDemi.defineComponent({
         });
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default());
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default());
         };
     },
 });
@@ -216,6 +217,7 @@ const UseDraggable = vueDemi.defineComponent({
         'exact',
         'preventDefault',
         'pointerTypes',
+        'as',
     ],
     setup(props, { slots }) {
         const target = vueDemi.ref();
@@ -225,20 +227,20 @@ const UseDraggable = vueDemi.defineComponent({
         const data = vueDemi.reactive(core.useDraggable(target, Object.assign(Object.assign({}, props), { initialValue })));
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target, style: data.style }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
         };
     },
 });
 
 const UseElementBounding = vueDemi.defineComponent({
     name: 'UseElementBounding',
-    props: ['box'],
+    props: ['box', 'as'],
     setup(props, { slots }) {
         const target = vueDemi.ref();
-        const data = vueDemi.reactive(core.useElementBounding(target, props));
+        const data = vueDemi.reactive(core.useElementBounding(target, { box: props.box, window: props.window }));
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
@@ -251,13 +253,14 @@ const UseElementSize = vueDemi.defineComponent({
         const data = vueDemi.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
 
 const UseElementVisibility = vueDemi.defineComponent({
     name: 'UseElementVisibility',
+    as: ['as'],
     setup(props, { slots }) {
         const target = vueDemi.ref();
         const data = vueDemi.reactive({
@@ -265,19 +268,20 @@ const UseElementVisibility = vueDemi.defineComponent({
         });
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
 
 const UseFullscreen = vueDemi.defineComponent({
     name: 'UseFullscreen',
+    props: ['as'],
     setup(props, { slots }) {
         const target = vueDemi.ref();
         const data = vueDemi.reactive(core.useFullscreen(target));
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
@@ -320,26 +324,26 @@ const UseMouse = vueDemi.defineComponent({
 
 const UseMouseInElement = vueDemi.defineComponent({
     name: 'UseMouseElement',
-    props: ['handleOutside'],
+    props: ['handleOutside', 'as'],
     setup(props, { slots }) {
         const target = vueDemi.ref();
         const data = vueDemi.reactive(core.useMouseInElement(target, props));
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
 
 const UseMousePressed = vueDemi.defineComponent({
     name: 'UseMousePressed',
-    props: ['touch', 'initialValue'],
+    props: ['touch', 'initialValue', 'as'],
     setup(props, { slots }) {
         const target = vueDemi.ref();
         const data = vueDemi.reactive(core.useMousePressed(Object.assign(Object.assign({}, props), { target })));
         return () => {
             if (slots.default)
-                return vueDemi.h('div', { ref: target }, slots.default(data));
+                return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
@@ -398,12 +402,14 @@ const UsePointer = vueDemi.defineComponent({
     props: [
         'pointerTypes',
         'initialValue',
+        'target',
     ],
     setup(props, { slots }) {
-        const data = vueDemi.reactive(core.usePointer(props));
+        const el = vueDemi.ref(null);
+        const data = vueDemi.reactive(core.usePointer(Object.assign(Object.assign({}, props), { target: props.target === 'self' ? el : defaultWindow })));
         return () => {
             if (slots.default)
-                return slots.default(data);
+                return slots.default(data, { ref: el });
         };
     },
 });
@@ -472,6 +478,22 @@ const UseTimestamp = vueDemi.defineComponent({
     },
 });
 
+const UseVirtualList = vueDemi.defineComponent({
+    name: 'UseVirtualList',
+    props: [
+        'list',
+        'options',
+        'height',
+    ],
+    setup(props, { slots }) {
+        const { list, containerProps, wrapperProps } = core.useVirtualList(props.list, props.options);
+        containerProps.style.height = props.height || '300px';
+        return () => vueDemi.h('div', Object.assign({}, containerProps), [
+            vueDemi.h('div', Object.assign({}, wrapperProps.value), list.value.map((item) => vueDemi.h('div', { style: { overFlow: 'hidden', height: item.height } }, slots.default ? slots.default(item) : 'Please set content!'))),
+        ]);
+    },
+});
+
 const UseWindowFocus = vueDemi.defineComponent({
     name: 'UseWindowFocus',
     setup(props, { slots }) {
@@ -527,6 +549,7 @@ exports.UsePreferredDark = UsePreferredDark;
 exports.UsePreferredLanguages = UsePreferredLanguages;
 exports.UseTimeAgo = UseTimeAgo;
 exports.UseTimestamp = UseTimestamp;
+exports.UseVirtualList = UseVirtualList;
 exports.UseWindowFocus = UseWindowFocus;
 exports.UseWindowSize = UseWindowSize;
 exports.VOnClickOutside = VOnClickOutside;

package/index.d.ts

@@ -1,25 +1,28 @@
 import * as vue_demi from 'vue-demi';
 import { FunctionDirective } from 'vue-demi';
 import * as _vueuse_core from '@vueuse/core';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, TimeAgoOptions, TimestampOptions, WindowSizeOptions } from '@vueuse/core';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, TimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
 import { MaybeRef } from '@vueuse/shared';
 
-declare const OnClickOutside: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-    [key: string]: any;
-}> | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, "trigger"[], "trigger", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}> & {
-    onTrigger?: ((...args: any[]) => any) | undefined;
-}, {}>;
+interface RenderableComponent {
+    /**
+     * The elment that the component should be rendered as
+     *
+     * @default 'div'
+     */
+    as?: Object | string;
+}
+
+declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+    as?: unknown;
+} & {} & {
+    as?: string | Object | undefined;
+}>, {}>;
 
 interface ConfigurableWindow {
     window?: Window;
 }
 
-interface Position {
-    x: number;
-    y: number;
-}
-declare type PointerType = 'mouse' | 'touch' | 'pen';
-
 interface ResizeObserverOptions extends ConfigurableWindow {
     /**
      * Sets which box model the observer will observe changes to. Possible values
@@ -68,9 +71,9 @@ declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {},
     flush?: "pre" | "post" | "sync" | undefined;
     eventFilter?: _vueuse_core.EventFilter<any[], any> | undefined;
     deep?: boolean | undefined;
+    onError?: ((error: unknown) => void) | undefined;
     storage?: _vueuse_core.StorageLike | undefined;
     window?: Window | undefined;
-    onError?: ((error: unknown) => void) | undefined;
     listenToStorageChanges?: boolean | undefined;
     serializer?: _vueuse_core.Serializer<_vueuse_core.ColorSchemes> | undefined;
     selector?: string | undefined;
@@ -107,7 +110,7 @@ declare const UseDocumentVisibility: vue_demi.DefineComponent<{}, () => vue_demi
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 
-interface UseDraggableProps extends UseDraggableOptions {
+interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
     /**
      * When provided, use `useStorage` to preserve element's position
      */
@@ -129,48 +132,55 @@ declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {},
     initialValue?: unknown;
     onStart?: unknown;
     onMove?: unknown;
-} & {
-    draggingElement: any;
-} & {
-    initialValue?: _vueuse_core.MaybeRef<Position> | undefined;
+    as?: unknown;
+} & {} & {
+    initialValue?: _vueuse_core.MaybeRef<_vueuse_core.Position> | undefined;
     storageKey?: string | undefined;
-    pointerTypes?: PointerType[] | undefined;
+    pointerTypes?: _vueuse_core.PointerType[] | undefined;
     preventDefault?: _vueuse_core.MaybeRef<boolean> | undefined;
+    as?: string | Object | undefined;
     storageType?: "local" | "session" | undefined;
     exact?: _vueuse_core.MaybeRef<boolean> | undefined;
-    onStart?: ((position: Position, event: PointerEvent) => false | void) | undefined;
-    onMove?: ((position: Position, event: PointerEvent) => void) | undefined;
-}>, {
-    draggingElement: any;
-}>;
+    draggingElement?: _vueuse_core.MaybeRef<Window | Document | HTMLElement | SVGElement | null> | undefined;
+    onStart?: ((position: _vueuse_core.Position, event: PointerEvent) => false | void) | undefined;
+    onMove?: ((position: _vueuse_core.Position, event: PointerEvent) => void) | undefined;
+}>, {}>;
 
-declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
     box?: unknown;
     window?: unknown;
+    as?: unknown;
 } & {} & {
     window?: Window | undefined;
     box?: "content-box" | "border-box" | undefined;
+    as?: string | Object | undefined;
 }>, {}>;
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize & ResizeObserverOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+declare const UseElementSize: vue_demi.DefineComponent<ElementSize & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
     width?: unknown;
     height?: unknown;
     box?: unknown;
     window?: unknown;
+    as?: unknown;
 } & {} & {
     window?: Window | undefined;
     box?: "content-box" | "border-box" | undefined;
     width?: number | undefined;
     height?: number | undefined;
+    as?: string | Object | undefined;
 }>, {}>;
 
-declare const UseElementVisibility: 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<{} & {} & {}>, {}>;
+declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+    as?: unknown;
+} & {} & {
+    as?: string | Object | undefined;
+}>, {}>;
 
-declare const UseFullscreen: 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<{} & {} & {}>, {}>;
+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<{
+    as?: unknown;
+} & {} & {
+    as?: string | Object | undefined;
+}>, {}>;
 
 declare const UseGeolocation: vue_demi.DefineComponent<GeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
     enableHighAccuracy?: unknown;
@@ -208,36 +218,40 @@ declare const UseMouse: vue_demi.DefineComponent<MouseOptions, {}, {}, {}, {}, v
     initialValue?: unknown;
     window?: unknown;
 } & {} & {
-    initialValue?: Position | undefined;
+    initialValue?: _vueuse_core.Position | undefined;
     window?: Window | undefined;
     touch?: boolean | undefined;
     resetOnTouchEnds?: boolean | undefined;
 }>, {}>;
 
-declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
     handleOutside?: unknown;
     touch?: unknown;
     resetOnTouchEnds?: unknown;
     initialValue?: unknown;
     window?: unknown;
+    as?: unknown;
 } & {} & {
-    initialValue?: Position | undefined;
+    initialValue?: _vueuse_core.Position | undefined;
     window?: Window | undefined;
     touch?: boolean | undefined;
     resetOnTouchEnds?: boolean | undefined;
     handleOutside?: boolean | undefined;
+    as?: string | Object | undefined;
 }>, {}>;
 
-declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions, "target">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
     initialValue?: unknown;
     drag?: unknown;
     window?: unknown;
     touch?: unknown;
+    as?: unknown;
 } & {} & {
     initialValue?: boolean | undefined;
     drag?: boolean | undefined;
     window?: Window | undefined;
     touch?: boolean | undefined;
+    as?: string | Object | undefined;
 }>, {}>;
 
 declare const UseNetwork: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -258,14 +272,18 @@ declare const UsePageLeave: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vu
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 
-declare const UsePointer: vue_demi.DefineComponent<UsePointerOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
-    pointerTypes?: unknown;
+declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "target"> & {
+    target: 'window' | 'self';
+}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
     initialValue?: unknown;
     window?: unknown;
+    pointerTypes?: unknown;
+    target?: unknown;
 } & {} & {
+    target?: "window" | "self" | undefined;
     initialValue?: _vueuse_core.MaybeRef<Partial<_vueuse_core.UsePointerState>> | undefined;
     window?: Window | undefined;
-    pointerTypes?: PointerType[] | undefined;
+    pointerTypes?: _vueuse_core.PointerType[] | undefined;
 }>, {}>;
 
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -305,6 +323,36 @@ declare const UseTimestamp: vue_demi.DefineComponent<Omit<TimestampOptions<true>
     offset?: number | undefined;
 }>, {}>;
 
+interface UseVirtualListProps {
+    /**
+     * data of scrollable list
+     *
+     * @default []
+     */
+    list: Array<any>;
+    /**
+     * useVirtualList's options
+     *
+     * @default {}
+     */
+    options: UseVirtualListOptions;
+    /**
+     * virtualList's height
+     *
+     * @default 300px
+     */
+    height: string;
+}
+declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+    list?: unknown;
+    options?: unknown;
+    height?: unknown;
+} & {} & {
+    options?: UseVirtualListOptions | undefined;
+    height?: string | undefined;
+    list?: any;
+}>, {}>;
+
 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<{} & {} & {}>, {}>;
@@ -319,4 +367,4 @@ declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {},
     initialHeight?: number | undefined;
 }>, {}>;
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseTimeAgo, UseTimestamp, UseWindowFocus, UseWindowSize, VOnClickOutside };
+export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside };

package/index.iife.js

@@ -64,6 +64,7 @@
 
   const OnClickOutside = vueDemi.defineComponent({
       name: 'OnClickOutside',
+      props: ['as'],
       emits: ['trigger'],
       setup(props, { slots, emit }) {
           const target = vueDemi.ref();
@@ -72,7 +73,7 @@
           });
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default());
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default());
           };
       },
   });
@@ -272,6 +273,7 @@
           'exact',
           'preventDefault',
           'pointerTypes',
+          'as',
       ],
       setup(props, { slots }) {
           const target = vueDemi.ref();
@@ -281,20 +283,20 @@
           const data = vueDemi.reactive(core.useDraggable(target, Object.assign(Object.assign({}, props), { initialValue })));
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target, style: data.style }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
           };
       },
   });
 
   const UseElementBounding = vueDemi.defineComponent({
       name: 'UseElementBounding',
-      props: ['box'],
+      props: ['box', 'as'],
       setup(props, { slots }) {
           const target = vueDemi.ref();
-          const data = vueDemi.reactive(core.useElementBounding(target, props));
+          const data = vueDemi.reactive(core.useElementBounding(target, { box: props.box, window: props.window }));
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
       },
   });
@@ -307,13 +309,14 @@
           const data = vueDemi.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
       },
   });
 
   const UseElementVisibility = vueDemi.defineComponent({
       name: 'UseElementVisibility',
+      as: ['as'],
       setup(props, { slots }) {
           const target = vueDemi.ref();
           const data = vueDemi.reactive({
@@ -321,19 +324,20 @@
           });
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
       },
   });
 
   const UseFullscreen = vueDemi.defineComponent({
       name: 'UseFullscreen',
+      props: ['as'],
       setup(props, { slots }) {
           const target = vueDemi.ref();
           const data = vueDemi.reactive(core.useFullscreen(target));
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
       },
   });
@@ -376,26 +380,26 @@
 
   const UseMouseInElement = vueDemi.defineComponent({
       name: 'UseMouseElement',
-      props: ['handleOutside'],
+      props: ['handleOutside', 'as'],
       setup(props, { slots }) {
           const target = vueDemi.ref();
           const data = vueDemi.reactive(core.useMouseInElement(target, props));
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
       },
   });
 
   const UseMousePressed = vueDemi.defineComponent({
       name: 'UseMousePressed',
-      props: ['touch', 'initialValue'],
+      props: ['touch', 'initialValue', 'as'],
       setup(props, { slots }) {
           const target = vueDemi.ref();
           const data = vueDemi.reactive(core.useMousePressed(Object.assign(Object.assign({}, props), { target })));
           return () => {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
       },
   });
@@ -454,12 +458,14 @@
       props: [
           'pointerTypes',
           'initialValue',
+          'target',
       ],
       setup(props, { slots }) {
-          const data = vueDemi.reactive(core.usePointer(props));
+          const el = vueDemi.ref(null);
+          const data = vueDemi.reactive(core.usePointer(Object.assign(Object.assign({}, props), { target: props.target === 'self' ? el : defaultWindow })));
           return () => {
               if (slots.default)
-                  return slots.default(data);
+                  return slots.default(data, { ref: el });
           };
       },
   });
@@ -528,6 +534,22 @@
       },
   });
 
+  const UseVirtualList = vueDemi.defineComponent({
+      name: 'UseVirtualList',
+      props: [
+          'list',
+          'options',
+          'height',
+      ],
+      setup(props, { slots }) {
+          const { list, containerProps, wrapperProps } = core.useVirtualList(props.list, props.options);
+          containerProps.style.height = props.height || '300px';
+          return () => vueDemi.h('div', Object.assign({}, containerProps), [
+              vueDemi.h('div', Object.assign({}, wrapperProps.value), list.value.map((item) => vueDemi.h('div', { style: { overFlow: 'hidden', height: item.height } }, slots.default ? slots.default(item) : 'Please set content!'))),
+          ]);
+      },
+  });
+
   const UseWindowFocus = vueDemi.defineComponent({
       name: 'UseWindowFocus',
       setup(props, { slots }) {
@@ -583,6 +605,7 @@
   exports.UsePreferredLanguages = UsePreferredLanguages;
   exports.UseTimeAgo = UseTimeAgo;
   exports.UseTimestamp = UseTimestamp;
+  exports.UseVirtualList = UseVirtualList;
   exports.UseWindowFocus = UseWindowFocus;
   exports.UseWindowSize = UseWindowSize;
   exports.VOnClickOutside = VOnClickOutside;

package/index.iife.min.js

@@ -1 +1 @@
-!function(e){if(!e.VueDemi){var t={},n=e.Vue;if(n)if("2."===n.version.slice(0,2)){var s=e.VueCompositionAPI;if(s){for(var i in s)t[i]=s[i];t.isVue2=!0,t.isVue3=!1,t.install=function(){},t.Vue=n,t.Vue2=n,t.version=n.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if("3."===n.version.slice(0,2)){for(var i in n)t[i]=n[i];t.isVue2=!1,t.isVue3=!0,t.install=function(){},t.Vue=n,t.Vue2=void 0,t.version=n.version,t.set=function(e,t,n){return Array.isArray(e)?(e.length=Math.max(e.length,t),e.splice(t,1,n),n):(e[t]=n,n)},t.del=function(e,t){Array.isArray(e)?e.splice(t,1):delete e[t]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");e.VueDemi=t}}(window),function(e,t,n,s){"use strict";const i=t.defineComponent({name:"OnClickOutside",emits:["trigger"],setup(e,{slots:s,emit:i}){const r=t.ref();return n.onClickOutside(r,(e=>{i("trigger",e)})),()=>{if(s.default)return t.h("div",{ref:r},s.default())}}});const r=s.isClient?window:void 0;function o(e,n,i={}){const{window:o=r,event:u="pointerdown"}=i;if(!o)return;return function(...e){let n,i,o,u;if(s.isString(e[0])?([i,o,u]=e,n=r):[n,i,o,u]=e,!n)return s.noop;let a=s.noop;const l=t.watch((()=>t.unref(n)),(e=>{a(),e&&(e.addEventListener(i,o,u),a=()=>{e.removeEventListener(i,o,u),a=s.noop})}),{immediate:!0,flush:"post"}),f=()=>{l(),a()};return s.tryOnScopeDispose(f),f}(o,u,(s=>{const i=function(e){var n,s;const i=t.unref(e);return null!==(s=null===(n=i)||void 0===n?void 0:n.$el)&&void 0!==s?s:i}(e);i&&(i===s.target||s.composedPath().includes(i)||n(s))}),{passive:!0})}const u=t.defineComponent({name:"UseActiveElement",setup(e,{slots:s}){const i=t.reactive({element:n.useActiveElement()});return()=>{if(s.default)return s.default(i)}}}),a=t.defineComponent({name:"UseBattery",setup(e,{slots:s}){const i=t.reactive(n.useBattery(e));return()=>{if(s.default)return s.default(i)}}}),l=t.defineComponent({name:"UseBrowserLocation",setup(e,{slots:s}){const i=t.reactive(n.useBrowserLocation());return()=>{if(s.default)return s.default(i)}}}),f=t.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:i}){const r=n.useDark(e),o=t.reactive({isDark:r,toggleDark:s.useToggle(r)});return()=>{if(i.default)return i.default(o)}}}),d=t.defineComponent({name:"UseDeviceMotion",setup(e,{slots:s}){const i=t.reactive(n.useDeviceMotion());return()=>{if(s.default)return s.default(i)}}}),c=t.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:s}){const i=t.reactive(n.useDeviceOrientation());return()=>{if(s.default)return s.default(i)}}}),p=t.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:s}){const i=t.reactive({pixelRatio:n.useDevicePixelRatio()});return()=>{if(s.default)return s.default(i)}}}),m=t.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions"],setup(e,{slots:s}){const i=t.reactive(n.useDevicesList(e));return()=>{if(s.default)return s.default(i)}}}),v=t.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:s}){const i=t.reactive({visibility:n.useDocumentVisibility()});return()=>{if(s.default)return s.default(i)}}}),U=t.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes"],setup(e,{slots:s}){const i=t.ref(),r=e.storageKey?n.useStorage(e.storageKey,t.unref(e.initialValue)||{x:0,y:0},"session"===e.storageType?sessionStorage:localStorage):e.initialValue||{x:0,y:0},o=t.reactive(n.useDraggable(i,Object.assign(Object.assign({},e),{initialValue:r})));return()=>{if(s.default)return t.h("div",{ref:i,style:o.style},s.default(o))}}}),g=t.defineComponent({name:"UseElementBounding",props:["box"],setup(e,{slots:s}){const i=t.ref(),r=t.reactive(n.useElementBounding(i,e));return()=>{if(s.default)return t.h("div",{ref:i},s.default(r))}}}),C=t.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(e,{slots:s}){const i=t.ref(),r=t.reactive(n.useElementSize(i,{width:e.width,height:e.height},{box:e.box}));return()=>{if(s.default)return t.h("div",{ref:i},s.default(r))}}}),h=t.defineComponent({name:"UseElementVisibility",setup(e,{slots:s}){const i=t.ref(),r=t.reactive({isVisible:n.useElementVisibility(i)});return()=>{if(s.default)return t.h("div",{ref:i},s.default(r))}}}),V=t.defineComponent({name:"UseFullscreen",setup(e,{slots:s}){const i=t.ref(),r=t.reactive(n.useFullscreen(i));return()=>{if(s.default)return t.h("div",{ref:i},s.default(r))}}}),D=t.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:s}){const i=t.reactive(n.useGeolocation(e));return()=>{if(s.default)return s.default(i)}}}),b=t.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:s}){const i=t.reactive(n.useIdle(e.timeout,e));return()=>{if(s.default)return s.default(i)}}}),y=t.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:s}){const i=t.reactive(n.useMouse(e));return()=>{if(s.default)return s.default(i)}}}),O=t.defineComponent({name:"UseMouseElement",props:["handleOutside"],setup(e,{slots:s}){const i=t.ref(),r=t.reactive(n.useMouseInElement(i,e));return()=>{if(s.default)return t.h("div",{ref:i},s.default(r))}}}),w=t.defineComponent({name:"UseMousePressed",props:["touch","initialValue"],setup(e,{slots:s}){const i=t.ref(),r=t.reactive(n.useMousePressed(Object.assign(Object.assign({},e),{target:i})));return()=>{if(s.default)return t.h("div",{ref:i},s.default(r))}}}),P=t.defineComponent({name:"UseNetwork",setup(e,{slots:s}){const i=t.reactive(n.useNetwork());return()=>{if(s.default)return s.default(i)}}}),E=t.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:s}){const i=t.reactive(n.useNow(Object.assign(Object.assign({},e),{controls:!0})));return()=>{if(s.default)return s.default(i)}}}),k=t.defineComponent({name:"UseOnline",setup(e,{slots:s}){const i=t.reactive({isOnline:n.useOnline()});return()=>{if(s.default)return s.default(i)}}}),L=t.defineComponent({name:"UsePageLeave",setup(e,{slots:s}){const i=t.reactive({isLeft:n.usePageLeave()});return()=>{if(s.default)return s.default(i)}}}),S=t.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue"],setup(e,{slots:s}){const i=t.reactive(n.usePointer(e));return()=>{if(s.default)return s.default(i)}}}),x=t.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:s}){const i=t.reactive({colorScheme:n.usePreferredColorScheme()});return()=>{if(s.default)return s.default(i)}}}),A=t.defineComponent({name:"UsePreferredDark",setup(e,{slots:s}){const i=t.reactive({prefersDark:n.usePreferredDark()});return()=>{if(s.default)return s.default(i)}}}),M=t.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:s}){const i=t.reactive({languages:n.usePreferredLanguages()});return()=>{if(s.default)return s.default(i)}}}),j=t.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(e,{slots:s}){const{time:i}=t.toRefs(e),r=t.reactive(n.useTimeAgo(i,Object.assign(Object.assign({},e),{controls:!0})));return()=>{if(s.default)return s.default(r)}}}),T=t.defineComponent({name:"UseTimestamp",props:["interval","offset"],setup(e,{slots:s}){const i=t.reactive(n.useTimestamp(Object.assign(Object.assign({},e),{controls:!0})));return()=>{if(s.default)return s.default(i)}}}),B=t.defineComponent({name:"UseWindowFocus",setup(e,{slots:s}){const i=t.reactive({focused:n.useWindowFocus()});return()=>{if(s.default)return s.default(i)}}}),F=t.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:s}){const i=t.reactive(n.useWindowSize(e));return()=>{if(s.default)return s.default(i)}}});e.OnClickOutside=i,e.UseActiveElement=u,e.UseBattery=a,e.UseBrowserLocation=l,e.UseDark=f,e.UseDeviceMotion=d,e.UseDeviceOrientation=c,e.UseDevicePixelRatio=p,e.UseDevicesList=m,e.UseDocumentVisibility=v,e.UseDraggable=U,e.UseElementBounding=g,e.UseElementSize=C,e.UseElementVisibility=h,e.UseFullscreen=V,e.UseGeolocation=D,e.UseIdle=b,e.UseMouse=y,e.UseMouseInElement=O,e.UseMousePressed=w,e.UseNetwork=P,e.UseNow=E,e.UseOnline=k,e.UsePageLeave=L,e.UsePointer=S,e.UsePreferredColorScheme=x,e.UsePreferredDark=A,e.UsePreferredLanguages=M,e.UseTimeAgo=j,e.UseTimestamp=T,e.UseWindowFocus=B,e.UseWindowSize=F,e.VOnClickOutside=(e,t)=>{o(e,t.value)},Object.defineProperty(e,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+!function(e){if(!e.VueDemi){var t={},s=e.Vue;if(s)if("2."===s.version.slice(0,2)){var n=e.VueCompositionAPI;if(n){for(var i in n)t[i]=n[i];t.isVue2=!0,t.isVue3=!1,t.install=function(){},t.Vue=s,t.Vue2=s,t.version=s.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if("3."===s.version.slice(0,2)){for(var i in s)t[i]=s[i];t.isVue2=!1,t.isVue3=!0,t.install=function(){},t.Vue=s,t.Vue2=void 0,t.version=s.version,t.set=function(e,t,s){return Array.isArray(e)?(e.length=Math.max(e.length,t),e.splice(t,1,s),s):(e[t]=s,s)},t.del=function(e,t){Array.isArray(e)?e.splice(t,1):delete e[t]}}else console.error("[vue-demi] Vue version "+s.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");e.VueDemi=t}}(window),function(e,t,s,n){"use strict";const i=t.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(e,{slots:n,emit:i}){const r=t.ref();return s.onClickOutside(r,(e=>{i("trigger",e)})),()=>{if(n.default)return t.h(e.as||"div",{ref:r},n.default())}}});const r=n.isClient?window:void 0;function o(e,s,i={}){const{window:o=r,event:u="pointerdown"}=i;if(!o)return;return function(...e){let s,i,o,u;if(n.isString(e[0])?([i,o,u]=e,s=r):[s,i,o,u]=e,!s)return n.noop;let a=n.noop;const l=t.watch((()=>t.unref(s)),(e=>{a(),e&&(e.addEventListener(i,o,u),a=()=>{e.removeEventListener(i,o,u),a=n.noop})}),{immediate:!0,flush:"post"}),f=()=>{l(),a()};return n.tryOnScopeDispose(f),f}(o,u,(n=>{const i=function(e){var s,n;const i=t.unref(e);return null!==(n=null===(s=i)||void 0===s?void 0:s.$el)&&void 0!==n?n:i}(e);i&&(i===n.target||n.composedPath().includes(i)||s(n))}),{passive:!0})}const u=t.defineComponent({name:"UseActiveElement",setup(e,{slots:n}){const i=t.reactive({element:s.useActiveElement()});return()=>{if(n.default)return n.default(i)}}}),a=t.defineComponent({name:"UseBattery",setup(e,{slots:n}){const i=t.reactive(s.useBattery(e));return()=>{if(n.default)return n.default(i)}}}),l=t.defineComponent({name:"UseBrowserLocation",setup(e,{slots:n}){const i=t.reactive(s.useBrowserLocation());return()=>{if(n.default)return n.default(i)}}}),f=t.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:i}){const r=s.useDark(e),o=t.reactive({isDark:r,toggleDark:n.useToggle(r)});return()=>{if(i.default)return i.default(o)}}}),d=t.defineComponent({name:"UseDeviceMotion",setup(e,{slots:n}){const i=t.reactive(s.useDeviceMotion());return()=>{if(n.default)return n.default(i)}}}),c=t.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:n}){const i=t.reactive(s.useDeviceOrientation());return()=>{if(n.default)return n.default(i)}}}),p=t.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:n}){const i=t.reactive({pixelRatio:s.useDevicePixelRatio()});return()=>{if(n.default)return n.default(i)}}}),m=t.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions"],setup(e,{slots:n}){const i=t.reactive(s.useDevicesList(e));return()=>{if(n.default)return n.default(i)}}}),v=t.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:n}){const i=t.reactive({visibility:s.useDocumentVisibility()});return()=>{if(n.default)return n.default(i)}}}),g=t.defineComponent({name:"UseDraggable",props:["storageKey","initialValue","exact","preventDefault","pointerTypes","as"],setup(e,{slots:n}){const i=t.ref(),r=e.storageKey?s.useStorage(e.storageKey,t.unref(e.initialValue)||{x:0,y:0},"session"===e.storageType?sessionStorage:localStorage):e.initialValue||{x:0,y:0},o=t.reactive(s.useDraggable(i,Object.assign(Object.assign({},e),{initialValue:r})));return()=>{if(n.default)return t.h(e.as||"div",{ref:i,style:`touch-action:none;${o.style}`},n.default(o))}}}),U=t.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:n}){const i=t.ref(),r=t.reactive(s.useElementBounding(i,{box:e.box,window:e.window}));return()=>{if(n.default)return t.h(e.as||"div",{ref:i},n.default(r))}}}),h=t.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(e,{slots:n}){const i=t.ref(),r=t.reactive(s.useElementSize(i,{width:e.width,height:e.height},{box:e.box}));return()=>{if(n.default)return t.h(e.as||"div",{ref:i},n.default(r))}}}),C=t.defineComponent({name:"UseElementVisibility",as:["as"],setup(e,{slots:n}){const i=t.ref(),r=t.reactive({isVisible:s.useElementVisibility(i)});return()=>{if(n.default)return t.h(e.as||"div",{ref:i},n.default(r))}}}),b=t.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:n}){const i=t.ref(),r=t.reactive(s.useFullscreen(i));return()=>{if(n.default)return t.h(e.as||"div",{ref:i},n.default(r))}}}),V=t.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:n}){const i=t.reactive(s.useGeolocation(e));return()=>{if(n.default)return n.default(i)}}}),D=t.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:n}){const i=t.reactive(s.useIdle(e.timeout,e));return()=>{if(n.default)return n.default(i)}}}),w=t.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:n}){const i=t.reactive(s.useMouse(e));return()=>{if(n.default)return n.default(i)}}}),O=t.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:n}){const i=t.ref(),r=t.reactive(s.useMouseInElement(i,e));return()=>{if(n.default)return t.h(e.as||"div",{ref:i},n.default(r))}}}),y=t.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:n}){const i=t.ref(),r=t.reactive(s.useMousePressed(Object.assign(Object.assign({},e),{target:i})));return()=>{if(n.default)return t.h(e.as||"div",{ref:i},n.default(r))}}}),P=t.defineComponent({name:"UseNetwork",setup(e,{slots:n}){const i=t.reactive(s.useNetwork());return()=>{if(n.default)return n.default(i)}}}),L=t.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:n}){const i=t.reactive(s.useNow(Object.assign(Object.assign({},e),{controls:!0})));return()=>{if(n.default)return n.default(i)}}}),E=t.defineComponent({name:"UseOnline",setup(e,{slots:n}){const i=t.reactive({isOnline:s.useOnline()});return()=>{if(n.default)return n.default(i)}}}),k=t.defineComponent({name:"UsePageLeave",setup(e,{slots:n}){const i=t.reactive({isLeft:s.usePageLeave()});return()=>{if(n.default)return n.default(i)}}}),x=t.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:n}){const i=t.ref(null),o=t.reactive(s.usePointer(Object.assign(Object.assign({},e),{target:"self"===e.target?i:r})));return()=>{if(n.default)return n.default(o,{ref:i})}}}),S=t.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:n}){const i=t.reactive({colorScheme:s.usePreferredColorScheme()});return()=>{if(n.default)return n.default(i)}}}),j=t.defineComponent({name:"UsePreferredDark",setup(e,{slots:n}){const i=t.reactive({prefersDark:s.usePreferredDark()});return()=>{if(n.default)return n.default(i)}}}),A=t.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:n}){const i=t.reactive({languages:s.usePreferredLanguages()});return()=>{if(n.default)return n.default(i)}}}),M=t.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(e,{slots:n}){const{time:i}=t.toRefs(e),r=t.reactive(s.useTimeAgo(i,Object.assign(Object.assign({},e),{controls:!0})));return()=>{if(n.default)return n.default(r)}}}),T=t.defineComponent({name:"UseTimestamp",props:["interval","offset"],setup(e,{slots:n}){const i=t.reactive(s.useTimestamp(Object.assign(Object.assign({},e),{controls:!0})));return()=>{if(n.default)return n.default(i)}}}),B=t.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:n}){const{list:i,containerProps:r,wrapperProps:o}=s.useVirtualList(e.list,e.options);return r.style.height=e.height||"300px",()=>t.h("div",Object.assign({},r),[t.h("div",Object.assign({},o.value),i.value.map((e=>t.h("div",{style:{overFlow:"hidden",height:e.height}},n.default?n.default(e):"Please set content!"))))])}}),F=t.defineComponent({name:"UseWindowFocus",setup(e,{slots:n}){const i=t.reactive({focused:s.useWindowFocus()});return()=>{if(n.default)return n.default(i)}}}),I=t.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:n}){const i=t.reactive(s.useWindowSize(e));return()=>{if(n.default)return n.default(i)}}});e.OnClickOutside=i,e.UseActiveElement=u,e.UseBattery=a,e.UseBrowserLocation=l,e.UseDark=f,e.UseDeviceMotion=d,e.UseDeviceOrientation=c,e.UseDevicePixelRatio=p,e.UseDevicesList=m,e.UseDocumentVisibility=v,e.UseDraggable=g,e.UseElementBounding=U,e.UseElementSize=h,e.UseElementVisibility=C,e.UseFullscreen=b,e.UseGeolocation=V,e.UseIdle=D,e.UseMouse=w,e.UseMouseInElement=O,e.UseMousePressed=y,e.UseNetwork=P,e.UseNow=L,e.UseOnline=E,e.UsePageLeave=k,e.UsePointer=x,e.UsePreferredColorScheme=S,e.UsePreferredDark=j,e.UsePreferredLanguages=A,e.UseTimeAgo=M,e.UseTimestamp=T,e.UseVirtualList=B,e.UseWindowFocus=F,e.UseWindowSize=I,e.VOnClickOutside=(e,t)=>{o(e,t.value)},Object.defineProperty(e,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

package/index.mjs

@@ -1,9 +1,10 @@
 import { defineComponent, ref, h, unref, watch, reactive, toRefs } from 'vue-demi';
-import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage, useDraggable, useElementBounding, useElementSize, useElementVisibility, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark, usePreferredLanguages, useTimeAgo, useTimestamp, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage, useDraggable, useElementBounding, useElementSize, useElementVisibility, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
 import { isClient, isString, noop, tryOnScopeDispose, useToggle } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
     name: 'OnClickOutside',
+    props: ['as'],
     emits: ['trigger'],
     setup(props, { slots, emit }) {
         const target = ref();
@@ -12,7 +13,7 @@ const OnClickOutside = defineComponent({
         });
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default());
+                return h(props.as || 'div', { ref: target }, slots.default());
         };
     },
 });
@@ -212,6 +213,7 @@ const UseDraggable = defineComponent({
         'exact',
         'preventDefault',
         'pointerTypes',
+        'as',
     ],
     setup(props, { slots }) {
         const target = ref();
@@ -221,20 +223,20 @@ const UseDraggable = defineComponent({
         const data = reactive(useDraggable(target, Object.assign(Object.assign({}, props), { initialValue })));
         return () => {
             if (slots.default)
-                return h('div', { ref: target, style: data.style }, slots.default(data));
+                return h(props.as || 'div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
         };
     },
 });
 
 const UseElementBounding = defineComponent({
     name: 'UseElementBounding',
-    props: ['box'],
+    props: ['box', 'as'],
     setup(props, { slots }) {
         const target = ref();
-        const data = reactive(useElementBounding(target, props));
+        const data = reactive(useElementBounding(target, { box: props.box, window: props.window }));
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default(data));
+                return h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
@@ -247,13 +249,14 @@ const UseElementSize = defineComponent({
         const data = reactive(useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default(data));
+                return h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
 
 const UseElementVisibility = defineComponent({
     name: 'UseElementVisibility',
+    as: ['as'],
     setup(props, { slots }) {
         const target = ref();
         const data = reactive({
@@ -261,19 +264,20 @@ const UseElementVisibility = defineComponent({
         });
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default(data));
+                return h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
 
 const UseFullscreen = defineComponent({
     name: 'UseFullscreen',
+    props: ['as'],
     setup(props, { slots }) {
         const target = ref();
         const data = reactive(useFullscreen(target));
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default(data));
+                return h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
@@ -316,26 +320,26 @@ const UseMouse = defineComponent({
 
 const UseMouseInElement = defineComponent({
     name: 'UseMouseElement',
-    props: ['handleOutside'],
+    props: ['handleOutside', 'as'],
     setup(props, { slots }) {
         const target = ref();
         const data = reactive(useMouseInElement(target, props));
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default(data));
+                return h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
 
 const UseMousePressed = defineComponent({
     name: 'UseMousePressed',
-    props: ['touch', 'initialValue'],
+    props: ['touch', 'initialValue', 'as'],
     setup(props, { slots }) {
         const target = ref();
         const data = reactive(useMousePressed(Object.assign(Object.assign({}, props), { target })));
         return () => {
             if (slots.default)
-                return h('div', { ref: target }, slots.default(data));
+                return h(props.as || 'div', { ref: target }, slots.default(data));
         };
     },
 });
@@ -394,12 +398,14 @@ const UsePointer = defineComponent({
     props: [
         'pointerTypes',
         'initialValue',
+        'target',
     ],
     setup(props, { slots }) {
-        const data = reactive(usePointer(props));
+        const el = ref(null);
+        const data = reactive(usePointer(Object.assign(Object.assign({}, props), { target: props.target === 'self' ? el : defaultWindow })));
         return () => {
             if (slots.default)
-                return slots.default(data);
+                return slots.default(data, { ref: el });
         };
     },
 });
@@ -468,6 +474,22 @@ const UseTimestamp = defineComponent({
     },
 });
 
+const UseVirtualList = defineComponent({
+    name: 'UseVirtualList',
+    props: [
+        'list',
+        'options',
+        'height',
+    ],
+    setup(props, { slots }) {
+        const { list, containerProps, wrapperProps } = useVirtualList(props.list, props.options);
+        containerProps.style.height = props.height || '300px';
+        return () => h('div', Object.assign({}, containerProps), [
+            h('div', Object.assign({}, wrapperProps.value), list.value.map((item) => h('div', { style: { overFlow: 'hidden', height: item.height } }, slots.default ? slots.default(item) : 'Please set content!'))),
+        ]);
+    },
+});
+
 const UseWindowFocus = defineComponent({
     name: 'UseWindowFocus',
     setup(props, { slots }) {
@@ -493,4 +515,4 @@ const UseWindowSize = defineComponent({
     },
 });
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseTimeAgo, UseTimestamp, UseWindowFocus, UseWindowSize, VOnClickOutside };
+export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, VOnClickOutside };

package/package.json

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