@vueuse/components - npm Package Compare versions

Comparing version 6.2.1 to 6.3.1

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, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, TimeAgoOptions, TimestampOptions, WindowSizeOptions } from '@vueuse/core';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, TimeAgoOptions, TimestampOptions, WindowSizeOptions } from '@vueuse/core';
 import { MaybeRef } from '@vueuse/shared';
@@ -17,2 +17,8 @@
 
+interface Position {
+    x: number;
+    y: number;
+}
+declare type PointerType = 'mouse' | 'touch' | 'pen';
+
 interface ResizeObserverOptions extends ConfigurableWindow {
@@ -105,2 +111,39 @@ /**
 
+interface UseDraggableProps extends UseDraggableOptions {
+    /**
+     * When provided, use `useStorage` to preserve element's position
+     */
+    storageKey?: string;
+    /**
+     * Storage type
+     *
+     * @default 'local'
+     */
+    storageType?: 'local' | 'session';
+}
+declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
+    storageKey?: unknown;
+    storageType?: unknown;
+    exact?: unknown;
+    preventDefault?: unknown;
+    draggingElement?: unknown;
+    pointerTypes?: unknown;
+    initialValue?: unknown;
+    onStart?: unknown;
+    onMove?: unknown;
+} & {
+    draggingElement: any;
+} & {
+    initialValue?: _vueuse_core.MaybeRef<Position> | undefined;
+    storageKey?: string | undefined;
+    pointerTypes?: PointerType[] | undefined;
+    preventDefault?: _vueuse_core.MaybeRef<boolean> | 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;
+}>;
+
 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<{
@@ -170,6 +213,3 @@ box?: unknown;
 } & {} & {
-    initialValue?: {
-        x: number;
-        y: number;
-    } | undefined;
+    initialValue?: Position | undefined;
     window?: Window | undefined;
@@ -187,6 +227,3 @@ touch?: boolean | undefined;
 } & {} & {
-    initialValue?: {
-        x: number;
-        y: number;
-    } | undefined;
+    initialValue?: Position | undefined;
     window?: Window | undefined;
@@ -228,2 +265,12 @@ touch?: boolean | undefined;
 
+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;
+    initialValue?: unknown;
+    window?: unknown;
+} & {} & {
+    initialValue?: _vueuse_core.MaybeRef<Partial<_vueuse_core.UsePointerState>> | undefined;
+    window?: Window | undefined;
+    pointerTypes?: PointerType[] | undefined;
+}>, {}>;
+
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -280,2 +327,2 @@ [key: string]: any;
 
-export { OnClickOutside, UseActiveElement, UseBattery, UseBrowserLocation, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseElementBounding, UseElementSize, UseElementVisibility, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOnline, UsePageLeave, 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, UseWindowFocus, UseWindowSize, VOnClickOutside };

index.iife.js

@@ -267,2 +267,24 @@ ;(function (window) {
 
+  const UseDraggable = vueDemi.defineComponent({
+      name: 'UseDraggable',
+      props: [
+          'storageKey',
+          'initialValue',
+          'exact',
+          'preventDefault',
+          'pointerTypes',
+      ],
+      setup(props, { slots }) {
+          const target = vueDemi.ref();
+          const initialValue = props.storageKey
+              ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, props.storageType === 'session' ? sessionStorage : localStorage)
+              : props.initialValue || { x: 0, y: 0 };
+          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));
+          };
+      },
+  });
+
   const UseElementBounding = vueDemi.defineComponent({
@@ -431,2 +453,17 @@ name: 'UseElementBounding',
 
+  const UsePointer = vueDemi.defineComponent({
+      name: 'UsePointer',
+      props: [
+          'pointerTypes',
+          'initialValue',
+      ],
+      setup(props, { slots }) {
+          const data = vueDemi.reactive(core.usePointer(props));
+          return () => {
+              if (slots.default)
+                  return slots.default(data);
+          };
+      },
+  });
+
   const UsePreferredColorScheme = vueDemi.defineComponent({
@@ -531,2 +568,3 @@ name: 'UsePreferredColorScheme',
   exports.UseDocumentVisibility = UseDocumentVisibility;
+  exports.UseDraggable = UseDraggable;
   exports.UseElementBounding = UseElementBounding;
@@ -545,2 +583,3 @@ exports.UseElementSize = UseElementSize;
   exports.UsePageLeave = UsePageLeave;
+  exports.UsePointer = UsePointer;
   exports.UsePreferredColorScheme = UsePreferredColorScheme;
@@ -547,0 +586,0 @@ exports.UsePreferredDark = UsePreferredDark;

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)}}}),m=t.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:s}){const i=t.reactive({pixelRatio:n.useDevicePixelRatio()});return()=>{if(s.default)return s.default(i)}}}),p=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:"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))}}}),g=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))}}}),C=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))}}}),h=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))}}}),V=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)}}}),b=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)}}}),w=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))}}}),O=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)}}}),y=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)}}}),E=t.defineComponent({name:"UseOnline",setup(e,{slots:s}){const i=t.reactive({isOnline:n.useOnline()});return()=>{if(s.default)return s.default(i)}}}),k=t.defineComponent({name:"UsePageLeave",setup(e,{slots:s}){const i=t.reactive({isLeft:n.usePageLeave()});return()=>{if(s.default)return s.default(i)}}}),L=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)}}}),S=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)}}}),x=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)}}}),j=t.defineComponent({name:"UseWindowFocus",setup(e,{slots:s}){const i=t.reactive({focused:n.useWindowFocus()});return()=>{if(s.default)return s.default(i)}}}),B=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=m,e.UseDevicesList=p,e.UseDocumentVisibility=v,e.UseElementBounding=U,e.UseElementSize=g,e.UseElementVisibility=C,e.UseFullscreen=h,e.UseGeolocation=V,e.UseIdle=D,e.UseMouse=b,e.UseMouseInElement=w,e.UseMousePressed=O,e.UseNetwork=P,e.UseNow=y,e.UseOnline=E,e.UsePageLeave=k,e.UsePreferredColorScheme=L,e.UsePreferredDark=A,e.UsePreferredLanguages=M,e.UseTimeAgo=S,e.UseTimestamp=x,e.UseWindowFocus=j,e.UseWindowSize=B,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={},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);

package.json

 {
   "name": "@vueuse/components",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "description": "Renderless components for VueUse",
@@ -34,6 +34,6 @@ "keywords": [
   "dependencies": {
-    "@vueuse/core": "6.2.1",
-    "@vueuse/shared": "6.2.1",
+    "@vueuse/core": "6.3.1",
+    "@vueuse/shared": "6.3.1",
     "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

79430

increased by9.03%

Lines of code

1838

increased by9.6%

Dependency changes

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

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

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

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

• Updated@vueuse/core@6.3.1

• Updated@vueuse/shared@6.3.1