From 9c62ab08ebb5161e3d1d67b7a4784b5fe373fe09 Mon Sep 17 00:00:00 2001
From: Bruno Henry <brunohenryt@hotmail.com>
Date: Sat, 6 Oct 2018 10:11:33 -0300
Subject: [PATCH] Added programmatic router on button

---
 docs/components/README.md            | 34 ++++++++++++++++++++++++++++
 src/components/vsButton/vsButton.vue | 10 ++++++++
 2 files changed, 44 insertions(+)

diff --git a/docs/components/README.md b/docs/components/README.md
index dc8923ba6..913704e08 100644
--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -40,6 +40,11 @@ API:
     parameters: null
     description: Change the secondary color on the button (gradient)
     default: primary
+  - name: to
+    type: String | Object
+    parameters: null
+    description: Added router push navigation to button
+    default: false
 ---
 
 # Buttons **- update**
@@ -77,6 +82,7 @@ To define the type of button the directive is used `vs-type` with the value of s
 <vs-button vs-color="dark" vs-type="filled">Dark</vs-button>
 <vs-button vs-color="rgb(134, 4, 98)" vs-type="filled">RGB</vs-button>
 <vs-button disabled vs-type="filled">Disabled</vs-button>
+<vs-button vs-color="primary" vs-type="filled" to="/components/list.html">Router</vs-button>
 ```
 
 </div>
@@ -429,3 +435,31 @@ It is not important to specify the size when the button is of type `default`
 </div>
 </vuecode>
 </box>
+
+<box>
+
+## Router
+
+You can send a string or object to directive `to`. This directive wrap a `$router.push()` vue method,
+you can use all programmatic navigation on vue router.
+
+<vuecode md center>
+<div slot="demo">
+<vs-button vs-color="primary" vs-type="filled" to="/components/list.html">String literal</vs-button>
+<vs-button vs-color="warning" vs-type="filled" :to="{path: '/components/list.html'}">Object Path</vs-button>
+<vs-button vs-color="success" vs-type="filled" :to="{ name: 'user', params: { userId: 123 }}">Named Router</vs-button>
+<vs-button vs-color="dark"    vs-type="filled" :to="{ path: 'register', query: { plan: 'private' }}">With Query</vs-button>
+</div>
+
+<div slot="code">
+
+```html
+<vs-button vs-color="primary" vs-type="filled" to="/components/list.html">String literal</vs-button>
+<vs-button vs-color="warning" vs-type="filled" :to="{ path: '/components/list.html' }">Object Path</vs-button>
+<vs-button vs-color="success" vs-type="filled" :to="{ name: 'user', params: { userId: 123 } }">Named Router</vs-button>
+<vs-button vs-color="dark"    vs-type="filled" :to="{ path: 'register', query: { plan: 'private' } }">With Query</vs-button>
+```
+
+</div>
+</vuecode>
+</box>
diff --git a/src/components/vsButton/vsButton.vue b/src/components/vsButton/vsButton.vue
index 8c8a0fea6..144bf061e 100644
--- a/src/components/vsButton/vsButton.vue
+++ b/src/components/vsButton/vsButton.vue
@@ -90,6 +90,10 @@ export default {
     vsIconAfter:{
       default:false,
       type:Boolean
+    },
+    to:{
+      default:false,
+      type:String | Object
     }
   },
   data:()=>({
@@ -180,6 +184,9 @@ export default {
     }
   },
   methods:{
+    routerPush() {
+      this.$router.push(this.to)
+    },
     is(which){
       let type = this.vsType
       return type == which
@@ -207,6 +214,9 @@ export default {
       if(this.isActive){
         return
       }
+      if(this.to){
+        this.routerPush()
+      }
       this.isActive = true
       let btn = this.$refs.btn
       let xEvent = event.offsetX