@vueuse/components - npm Package Compare versions

Comparing version 6.3.3 to 6.4.0

index.d.ts

 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 {
@@ -17,8 +26,2 @@ window?: Window;
 
-interface Position {
-    x: number;
-    y: number;
-}
-declare type PointerType = 'mouse' | 'touch' | 'pen';
-
 interface ResizeObserverOptions extends ConfigurableWindow {
@@ -72,5 +75,5 @@ /**
     deep?: boolean | undefined;
+    onError?: ((error: unknown) => void) | undefined;
     storage?: _vueuse_core.StorageLike | undefined;
     window?: Window | undefined;
-    onError?: ((error: unknown) => void) | undefined;
     listenToStorageChanges?: boolean | undefined;
@@ -112,3 +115,3 @@ serializer?: _vueuse_core.Serializer<_vueuse_core.ColorSchemes> | undefined;
 
-interface UseDraggableProps extends UseDraggableOptions {
+interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
     /**
@@ -135,26 +138,27 @@ * When provided, use `useStorage` to preserve element's position
     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;
@@ -164,2 +168,3 @@ height?: unknown;
     window?: unknown;
+    as?: unknown;
 } & {} & {
@@ -170,11 +175,16 @@ window?: Window | 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;
+}>, {}>;
 
@@ -217,3 +227,3 @@ 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<{
 } & {} & {
-    initialValue?: Position | undefined;
+    initialValue?: _vueuse_core.Position | undefined;
     window?: Window | undefined;
@@ -224,3 +234,3 @@ touch?: 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;
@@ -231,4 +241,5 @@ touch?: unknown;
     window?: unknown;
+    as?: unknown;
 } & {} & {
-    initialValue?: Position | undefined;
+    initialValue?: _vueuse_core.Position | undefined;
     window?: Window | undefined;
@@ -238,5 +249,6 @@ touch?: 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;
@@ -246,2 +258,3 @@ drag?: unknown;
     touch?: unknown;
+    as?: unknown;
 } & {} & {
@@ -252,2 +265,3 @@ initialValue?: boolean | undefined;
     touch?: boolean | undefined;
+    as?: string | Object | undefined;
 }>, {}>;
@@ -284,3 +298,3 @@
     window?: Window | undefined;
-    pointerTypes?: PointerType[] | undefined;
+    pointerTypes?: _vueuse_core.PointerType[] | undefined;
 }>, {}>;
@@ -325,2 +339,32 @@
 
+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, {
@@ -340,2 +384,2 @@ [key: string]: any;
 
-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 };

index.iife.js

@@ -67,2 +67,3 @@ ;(function (window) {
       name: 'OnClickOutside',
+      props: ['as'],
       emits: ['trigger'],
@@ -76,3 +77,3 @@ setup(props, { slots, emit }) {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default());
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default());
           };
@@ -277,2 +278,3 @@ },
           'pointerTypes',
+          'as',
       ],
@@ -287,3 +289,3 @@ setup(props, { slots }) {
               if (slots.default)
-                  return vueDemi.h('div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
           };
@@ -295,9 +297,9 @@ },
       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));
           };
@@ -315,3 +317,3 @@ },
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
@@ -323,2 +325,3 @@ },
       name: 'UseElementVisibility',
+      as: ['as'],
       setup(props, { slots }) {
@@ -331,3 +334,3 @@ const target = vueDemi.ref();
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
@@ -339,2 +342,3 @@ },
       name: 'UseFullscreen',
+      props: ['as'],
       setup(props, { slots }) {
@@ -345,3 +349,3 @@ const target = vueDemi.ref();
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
@@ -389,3 +393,3 @@ },
       name: 'UseMouseElement',
-      props: ['handleOutside'],
+      props: ['handleOutside', 'as'],
       setup(props, { slots }) {
@@ -396,3 +400,3 @@ const target = vueDemi.ref();
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
@@ -404,3 +408,3 @@ },
       name: 'UseMousePressed',
-      props: ['touch', 'initialValue'],
+      props: ['touch', 'initialValue', 'as'],
       setup(props, { slots }) {
@@ -411,3 +415,3 @@ const target = vueDemi.ref();
               if (slots.default)
-                  return vueDemi.h('div', { ref: target }, slots.default(data));
+                  return vueDemi.h(props.as || 'div', { ref: target }, slots.default(data));
           };
@@ -547,2 +551,18 @@ },
 
+  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({
@@ -603,2 +623,3 @@ name: 'UseWindowFocus',
   exports.UseTimestamp = UseTimestamp;
+  exports.UseVirtualList = UseVirtualList;
   exports.UseWindowFocus = UseWindowFocus;
@@ -605,0 +626,0 @@ exports.UseWindowSize = UseWindowSize;

index.iife.min.js

@@ -1,1 +0,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)}}}),g=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:`touch-action:none;${o.style}`},s.default(o))}}}),U=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))}}}),b=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)}}}),D=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)}}}),O=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)}}}),y=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","target"],setup(e,{slots:s}){const i=t.ref(null),o=t.reactive(n.usePointer(Object.assign(Object.assign({},e),{target:"self"===e.target?i:r})));return()=>{if(s.default)return s.default(o,{ref: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=g,e.UseElementBounding=U,e.UseElementSize=C,e.UseElementVisibility=h,e.UseFullscreen=V,e.UseGeolocation=b,e.UseIdle=D,e.UseMouse=O,e.UseMouseInElement=y,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.json

 {
   "name": "@vueuse/components",
-  "version": "6.3.3",
+  "version": "6.4.0",
   "description": "Renderless components for VueUse",
@@ -34,6 +34,6 @@ "keywords": [
   "dependencies": {
-    "@vueuse/core": "6.3.3",
-    "@vueuse/shared": "6.3.3",
+    "@vueuse/core": "6.4.0",
+    "@vueuse/shared": "6.4.0",
     "vue-demi": "*"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84929

increased by5.87%

Lines of code

1957

increased by5.96%

Dependency changes

• + Added@vueuse/core@6.4.0(transitive)

• + Added@vueuse/shared@6.4.0(transitive)

• - Removed@vueuse/core@6.3.3(transitive)

• - Removed@vueuse/shared@6.3.3(transitive)

• Updated@vueuse/core@6.4.0

• Updated@vueuse/shared@6.4.0