@vueuse/components - npm Package Compare versions

Comparing version 5.1.3 to 6.0.0-beta.1

index.cjs.js

@@ -66,3 +66,3 @@ 'use strict';
     };
-    shared.tryOnUnmounted(stop);
+    shared.tryOnScopeDispose(stop);
     return stop;
@@ -69,0 +69,0 @@ }

index.d.ts

@@ -55,2 +55,3 @@ import * as vue_demi from 'vue-demi';
     serializer?: unknown;
+    onError?: unknown;
     eventFilter?: unknown;
@@ -65,2 +66,3 @@ window?: unknown;
     window?: Window | undefined;
+    onError?: ((error: Error) => void) | undefined;
     listenToStorageChanges?: boolean | undefined;
@@ -67,0 +69,0 @@ selector?: string | undefined;

index.esm.js

 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, useElementBounding, useElementSize, useElementVisibility, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOnline, usePageLeave, usePreferredColorScheme, usePreferredDark, usePreferredLanguages, useTimeAgo, useTimestamp, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { isClient, isString, noop, tryOnUnmounted, useToggle } from '@vueuse/shared';
+import { isClient, isString, noop, tryOnScopeDispose, useToggle } from '@vueuse/shared';
 
@@ -62,3 +62,3 @@ const OnClickOutside = defineComponent({
     };
-    tryOnUnmounted(stop);
+    tryOnScopeDispose(stop);
     return stop;
@@ -65,0 +65,0 @@ }

index.iife.js

@@ -122,3 +122,3 @@ ;(function (window) {
       };
-      shared.tryOnUnmounted(stop);
+      shared.tryOnScopeDispose(stop);
       return stop;
@@ -125,0 +125,0 @@ }

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.tryOnUnmounted(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)}}}),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);

package.json

 {
   "name": "@vueuse/components",
-  "version": "5.1.3",
+  "version": "6.0.0-beta.1",
   "description": "Renderless components for VueUse",
@@ -34,6 +34,6 @@ "keywords": [
   "dependencies": {
-    "@vueuse/core": "5.1.3",
-    "@vueuse/shared": "5.1.3",
+    "@vueuse/core": "6.0.0-beta.1",
+    "@vueuse/shared": "6.0.0-beta.1",
     "vue-demi": "*"
   }
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72811

increased by0.15%

Lines of code

1675

increased by0.12%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vueuse/core@6.0.0-beta.1(transitive)

• + Added@vueuse/shared@6.0.0-beta.1(transitive)

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

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

• Updated@vueuse/core@6.0.0-beta.1

• Updated@vueuse/shared@6.0.0-beta.1