@vueuse/router - npm Package Compare versions

Comparing version 10.0.0-beta.3 to 10.0.0-beta.4

index.d.ts

@@ -6,2 +6,3 @@ import * as vue_demi from 'vue-demi';
 
+type RouterQueryValue = null | undefined | string | string[];
 interface ReactiveRouteOptions {
@@ -23,2 +24,8 @@ /**
 }
+interface ReactiveRouteOptionsWithTransform<V, R> extends ReactiveRouteOptions {
+    /**
+     * Function to transform data before return
+     */
+    transform?: (val: V) => R;
+}
 
@@ -28,7 +35,7 @@ declare function useRouteHash(defaultValue?: string, { mode, route, router, }?: ReactiveRouteOptions): vue_demi.WritableComputedRef<string>;
 declare function useRouteParams(name: string): Ref<null | string | string[]>;
-declare function useRouteParams<T extends null | undefined | string | string[] = null | string | string[]>(name: string, defaultValue?: T, options?: ReactiveRouteOptions): Ref<T>;
+declare function useRouteParams<T extends RouterQueryValue = RouterQueryValue, K = T>(name: string, defaultValue?: T, options?: ReactiveRouteOptionsWithTransform<T, K>): Ref<K>;
 
 declare function useRouteQuery(name: string): Ref<null | string | string[]>;
-declare function useRouteQuery<T extends null | undefined | string | string[] = null | string | string[]>(name: string, defaultValue?: T, options?: ReactiveRouteOptions): Ref<T>;
+declare function useRouteQuery<T extends RouterQueryValue = RouterQueryValue, K = T>(name: string, defaultValue?: T, options?: ReactiveRouteOptionsWithTransform<T, K>): Ref<K>;
 
 export { useRouteHash, useRouteParams, useRouteQuery };

index.iife.js

@@ -115,3 +115,3 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 ;
-;(function (exports, vueDemi, vueRouter) {
+;(function (exports, vueDemi, vueRouter, shared) {
   'use strict';
@@ -150,3 +150,3 @@
         vueDemi.nextTick(() => {
-          router[vueDemi.unref(mode)](__spreadProps$2(__spreadValues$2({}, route), { hash: v }));
+          router[shared.toValue(mode)](__spreadProps$2(__spreadValues$2({}, route), { hash: v }));
         });
@@ -176,19 +176,18 @@ }
   var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-  function useRouteParams(name, defaultValue, {
-    mode = "replace",
-    route = vueRouter.useRoute(),
-    router = vueRouter.useRouter()
-  } = {}) {
+  function useRouteParams(name, defaultValue, options = {}) {
+    const {
+      mode = "replace",
+      route = vueRouter.useRoute(),
+      router = vueRouter.useRouter(),
+      transform = (value) => value
+    } = options;
     return vueDemi.computed({
       get() {
-        const data = route.params[name];
-        if (data == null)
-          return defaultValue != null ? defaultValue : null;
-        if (Array.isArray(data))
-          return data.filter(Boolean);
-        return data;
+        var _a;
+        const data = (_a = route.params[name]) != null ? _a : defaultValue;
+        return transform(data);
       },
       set(v) {
         vueDemi.nextTick(() => {
-          router[vueDemi.unref(mode)](__spreadProps$1(__spreadValues$1({}, route), { params: __spreadProps$1(__spreadValues$1({}, route.params), { [name]: v }) }));
+          router[shared.toValue(mode)](__spreadProps$1(__spreadValues$1({}, route), { params: __spreadProps$1(__spreadValues$1({}, route.params), { [name]: v }) }));
         });
@@ -218,22 +217,21 @@ }
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-  let queue = {};
-  function useRouteQuery(name, defaultValue, {
-    mode = "replace",
-    route = vueRouter.useRoute(),
-    router = vueRouter.useRouter()
-  } = {}) {
+  let _queue = {};
+  function useRouteQuery(name, defaultValue, options = {}) {
+    const {
+      mode = "replace",
+      route = vueRouter.useRoute(),
+      router = vueRouter.useRouter(),
+      transform = (value) => value
+    } = options;
     return vueDemi.computed({
       get() {
-        const data = route.query[name];
-        if (data == null)
-          return defaultValue != null ? defaultValue : null;
-        if (Array.isArray(data))
-          return data.filter(Boolean);
-        return data;
+        var _a;
+        const data = (_a = route.query[name]) != null ? _a : defaultValue;
+        return transform(data);
       },
       set(v) {
-        queue[name] = v === defaultValue || v === null ? void 0 : v;
+        _queue[name] = v === defaultValue || v === null ? void 0 : v;
         vueDemi.nextTick(() => {
-          router[vueDemi.unref(mode)](__spreadProps(__spreadValues({}, route), { query: __spreadValues(__spreadValues({}, route.query), queue) }));
-          vueDemi.nextTick(() => queue = {});
+          router[shared.toValue(mode)](__spreadProps(__spreadValues({}, route), { query: __spreadValues(__spreadValues({}, route.query), _queue) }));
+          vueDemi.nextTick(() => _queue = {});
         });
@@ -248,2 +246,2 @@ }
 
-})(this.VueUse = this.VueUse || {}, VueDemi, VueRouter);
+})(this.VueUse = this.VueUse || {}, VueDemi, VueRouter, VueUse);

index.iife.min.js

@@ -1,1 +0,1 @@
-var VueDemi=function(o,e,p){if(o.install)return o;if(!e)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),o;if(e.version.slice(0,4)==="2.7."){let i=function(a,u){var c,P={},O={config:e.config,use:e.use.bind(e),mixin:e.mixin.bind(e),component:e.component.bind(e),provide:function(d,_){return P[d]=_,this},directive:function(d,_){return _?(e.directive(d,_),O):e.directive(d)},mount:function(d,_){return c||(c=new e(Object.assign({propsData:u},a,{provide:Object.assign(P,a.provide)})),c.$mount(d,_),c)},unmount:function(){c&&(c.$destroy(),c=void 0)}};return O};var I=i;for(var f in e)o[f]=e[f];o.isVue2=!0,o.isVue3=!1,o.install=function(){},o.Vue=e,o.Vue2=e,o.version=e.version,o.warn=e.util.warn,o.createApp=i}else if(e.version.slice(0,2)==="2.")if(p){for(var f in p)o[f]=p[f];o.isVue2=!0,o.isVue3=!1,o.install=function(){},o.Vue=e,o.Vue2=e,o.version=e.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(e.version.slice(0,2)==="3."){for(var f in e)o[f]=e[f];o.isVue2=!1,o.isVue3=!0,o.install=function(){},o.Vue=e,o.Vue2=void 0,o.version=e.version,o.set=function(i,a,u){return Array.isArray(i)?(i.length=Math.max(i.length,a),i.splice(a,1,u),u):(i[a]=u,u)},o.del=function(i,a){if(Array.isArray(i)){i.splice(a,1);return}delete i[a]}}else console.error("[vue-demi] Vue version "+e.version+" is unsupported.");return o}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(o,e,p){"use strict";var f=Object.defineProperty,I=Object.defineProperties,i=Object.getOwnPropertyDescriptors,a=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,P=(t,r,n)=>r in t?f(t,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[r]=n,O=(t,r)=>{for(var n in r||(r={}))u.call(r,n)&&P(t,n,r[n]);if(a)for(var n of a(r))c.call(r,n)&&P(t,n,r[n]);return t},d=(t,r)=>I(t,i(r));function _(t,{mode:r="replace",route:n=p.useRoute(),router:l=p.useRouter()}={}){return e.computed({get(){var v;return(v=n.hash)!=null?v:t},set(v){e.nextTick(()=>{l[e.unref(r)](d(O({},n),{hash:v}))})}})}var R=Object.defineProperty,m=Object.defineProperties,E=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,b=(t,r,n)=>r in t?R(t,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[r]=n,$=(t,r)=>{for(var n in r||(r={}))S.call(r,n)&&b(t,n,r[n]);if(h)for(var n of h(r))x.call(r,n)&&b(t,n,r[n]);return t},g=(t,r)=>m(t,E(r));function q(t,r,{mode:n="replace",route:l=p.useRoute(),router:v=p.useRouter()}={}){return e.computed({get(){const s=l.params[t];return s==null?r??null:Array.isArray(s)?s.filter(Boolean):s},set(s){e.nextTick(()=>{v[e.unref(n)](g($({},l),{params:g($({},l.params),{[t]:s})}))})}})}var T=Object.defineProperty,N=Object.defineProperties,B=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,H=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable,A=(t,r,n)=>r in t?T(t,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[r]=n,y=(t,r)=>{for(var n in r||(r={}))H.call(r,n)&&A(t,n,r[n]);if(j)for(var n of j(r))Q.call(r,n)&&A(t,n,r[n]);return t},U=(t,r)=>N(t,B(r));let w={};function C(t,r,{mode:n="replace",route:l=p.useRoute(),router:v=p.useRouter()}={}){return e.computed({get(){const s=l.query[t];return s==null?r??null:Array.isArray(s)?s.filter(Boolean):s},set(s){w[t]=s===r||s===null?void 0:s,e.nextTick(()=>{v[e.unref(n)](U(y({},l),{query:y(y({},l.query),w)})),e.nextTick(()=>w={})})}})}o.useRouteHash=_,o.useRouteParams=q,o.useRouteQuery=C})(this.VueUse=this.VueUse||{},VueDemi,VueRouter);
+var VueDemi=function(o,n,f){if(o.install)return o;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),o;if(n.version.slice(0,4)==="2.7."){let i=function(u,l){var c,O={},v={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(d,_){return O[d]=_,this},directive:function(d,_){return _?(n.directive(d,_),v):n.directive(d)},mount:function(d,_){return c||(c=new n(Object.assign({propsData:l},u,{provide:Object.assign(O,u.provide)})),c.$mount(d,_),c)},unmount:function(){c&&(c.$destroy(),c=void 0)}};return v};var E=i;for(var a in n)o[a]=n[a];o.isVue2=!0,o.isVue3=!1,o.install=function(){},o.Vue=n,o.Vue2=n,o.version=n.version,o.warn=n.util.warn,o.createApp=i}else if(n.version.slice(0,2)==="2.")if(f){for(var a in f)o[a]=f[a];o.isVue2=!0,o.isVue3=!1,o.install=function(){},o.Vue=n,o.Vue2=n,o.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(n.version.slice(0,2)==="3."){for(var a in n)o[a]=n[a];o.isVue2=!1,o.isVue3=!0,o.install=function(){},o.Vue=n,o.Vue2=void 0,o.version=n.version,o.set=function(i,u,l){return Array.isArray(i)?(i.length=Math.max(i.length,u),i.splice(u,1,l),l):(i[u]=l,l)},o.del=function(i,u){if(Array.isArray(i)){i.splice(u,1);return}delete i[u]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return o}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(o,n,f,a){"use strict";var E=Object.defineProperty,i=Object.defineProperties,u=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,v=(t,r,e)=>r in t?E(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,d=(t,r)=>{for(var e in r||(r={}))c.call(r,e)&&v(t,e,r[e]);if(l)for(var e of l(r))O.call(r,e)&&v(t,e,r[e]);return t},_=(t,r)=>i(t,u(r));function S(t,{mode:r="replace",route:e=f.useRoute(),router:P=f.useRouter()}={}){return n.computed({get(){var p;return(p=e.hash)!=null?p:t},set(p){n.nextTick(()=>{P[a.toValue(r)](_(d({},e),{hash:p}))})}})}var x=Object.defineProperty,q=Object.defineProperties,T=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,N=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable,j=(t,r,e)=>r in t?x(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,m=(t,r)=>{for(var e in r||(r={}))N.call(r,e)&&j(t,e,r[e]);if(g)for(var e of g(r))U.call(r,e)&&j(t,e,r[e]);return t},I=(t,r)=>q(t,T(r));function H(t,r,e={}){const{mode:P="replace",route:p=f.useRoute(),router:b=f.useRouter(),transform:h=s=>s}=e;return n.computed({get(){var s;const $=(s=p.params[t])!=null?s:r;return h($)},set(s){n.nextTick(()=>{b[a.toValue(P)](I(m({},p),{params:I(m({},p.params),{[t]:s})}))})}})}var Q=Object.defineProperty,C=Object.defineProperties,M=Object.getOwnPropertyDescriptors,R=Object.getOwnPropertySymbols,z=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable,A=(t,r,e)=>r in t?Q(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,y=(t,r)=>{for(var e in r||(r={}))z.call(r,e)&&A(t,e,r[e]);if(R)for(var e of R(r))B.call(r,e)&&A(t,e,r[e]);return t},F=(t,r)=>C(t,M(r));let w={};function G(t,r,e={}){const{mode:P="replace",route:p=f.useRoute(),router:b=f.useRouter(),transform:h=s=>s}=e;return n.computed({get(){var s;const $=(s=p.query[t])!=null?s:r;return h($)},set(s){w[t]=s===r||s===null?void 0:s,n.nextTick(()=>{b[a.toValue(P)](F(y({},p),{query:y(y({},p.query),w)})),n.nextTick(()=>w={})})}})}o.useRouteHash=S,o.useRouteParams=H,o.useRouteQuery=G})(this.VueUse=this.VueUse||{},VueDemi,VueRouter,VueUse);

package.json

 {
   "name": "@vueuse/router",
-  "version": "10.0.0-beta.3",
+  "version": "10.0.0-beta.4",
   "description": "Utilities for vue-router",
@@ -41,3 +41,3 @@ "author": "Anthony Fu <https://github.com/antfu>",
   "dependencies": {
-    "@vueuse/shared": "10.0.0-beta.3",
+    "@vueuse/shared": "10.0.0-beta.4",
     "vue-demi": "*"
@@ -44,0 +44,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

25692

increased by0.89%

Lines of code

529

increased by0.57%

Dependency changes

• + Added@vueuse/shared@10.0.0-beta.4(transitive)

• - Removed@vueuse/shared@10.0.0-beta.3(transitive)

• Updated@vueuse/shared@10.0.0-beta.4