button as router link

Author: budiadiono

dist/vue-typed-ui.js

@@ -1707,6 +1707,10 @@ __decorate([vueTyped.Prop({
     type: String,
     default: 'button'
 })], _ButtonBase.prototype, "type", void 0);
+__decorate([vueTyped.Prop()], _ButtonBase.prototype, "to", void 0);
+__decorate([vueTyped.Prop({
+    type: Boolean
+})], _ButtonBase.prototype, "preventRouter", void 0);
 var _ButtonEvents;
 (function (_ButtonEvents) {
     /**
@@ -1765,15 +1769,41 @@ var Button = function (_ButtonBase2) {
             if (this.color) {
                 css += ' ' + this.color;
             }
-            var el = ch('button', {
-                attrs: {
-                    type: this.type
-                },
-                on: {
-                    'click': this.click
-                },
-                'class': css
-            }, children);
+            var el;
+            if (!this.to) {
+                el = ch('button', {
+                    attrs: {
+                        type: this.type
+                    },
+                    on: {
+                        'click': this.click
+                    },
+                    'class': css
+                }, children);
+            } else {
+                if (this.preventRouter) {
+                    el = ch('a', {
+                        attrs: {
+                            href: this.to
+                        },
+                        on: {
+                            'click': this.click
+                        },
+                        'class': css
+                    }, children);
+                } else {
+                    el = ch('router-link', {
+                        props: {
+                            to: this.to,
+                            exact: true
+                        },
+                        on: {
+                            'click': this.click
+                        },
+                        'class': css
+                    }, children);
+                }
+            }
             return el;
         }
     }, {

doc/api.json

@@ -125,10 +125,18 @@
         "type": "'left' | 'right'",
         "description": "Button icon position"
       },
+      "preventRouter": {
+        "type": "boolean",
+        "description": "If set to `true` then `to` attribute will always represents `href` attribute of `a` tag."
+      },
       "size": {
         "type": "'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive'",
         "description": "Button size"
       },
+      "to": {
+        "type": "string | Object",
+        "description": "Target URL when button clicked. If you are using vue-router then this attribute represents `to` attribute of `router-link` tag."
+      },
       "type": {
         "type": "string",
         "description": "Button type",

lib/interface.d.ts

@@ -92,11 +92,21 @@ export interface IButton {
      */
     iconPos: 'left' | 'right'
 
+    /**
+     * If set to `true` then `to` attribute will always represents `href` attribute of `a` tag.
+     */
+    preventRouter: boolean
+
     /**
      * Button size
      */
     size: 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive'
 
+    /**
+     * Target URL when button clicked. If you are using vue-router then this attribute represents `to` attribute of `router-link` tag.
+     */
+    to: string | Object
+
     /**
      * Button type
      */

src/components/form-inputs/button/_base.ts

@@ -83,6 +83,24 @@ export abstract class _ButtonBase extends Virtual < Vue > () {
     })
     type: string
 
+    /**
+     * Target URL when button clicked. If you are using vue-router then this attribute represents `to` attribute of `router-link` tag.
+     * 
+     * @type {string | Object}
+     */
+    @Prop()
+    to: string | Object
+
+    /**
+     * If set to `true` then `to` attribute will always represents `href` attribute of `a` tag.
+     * 
+     * @type {boolean}
+     */
+    @Prop({
+        type: Boolean
+    })
+    preventRouter: boolean
+
 }
 
 

src/components/form-inputs/button/index.ts

@@ -54,15 +54,44 @@ export class Button extends _ButtonBase implements IButton {
 			css += ' ' + this.color
 		}
 
-		var el = ch('button', {
-			attrs: {
-				type: this.type
-			},
-			on: {
-				'click': this.click
-			},
-			'class': css
-		}, children)
+		var el
+
+		if (!this.to) {
+			el = ch('button', {
+				attrs: {
+					type: this.type
+				},
+				on: {
+					'click': this.click
+				},
+				'class': css
+			}, children)
+		} else {
+			if (this.preventRouter) {
+				el = ch('a', {
+					attrs: {
+						href: this.to
+					},
+					on: {
+						'click': this.click
+					},
+					'class': css
+				}, children)
+			} else {
+				el = ch('router-link', {
+					props: {
+						to: this.to,
+						exact: true
+					},
+					on: {
+						'click': this.click
+					},
+					'class': css
+				}, children)
+			}
+		}
+
+
 
 		return el
 	}

src/components/form-inputs/button/schema/props.json

@@ -51,6 +51,14 @@
       "type": "string",
       "description": "Button type",
       "default": "'button'"
+    },
+    "to": {
+      "type": "string | Object",
+      "description": "Target URL when button clicked. If you are using vue-router then this attribute represents `to` attribute of `router-link` tag."
+    },
+    "preventRouter": {
+      "type": "boolean",
+      "description": "If set to `true` then `to` attribute will always represents `href` attribute of `a` tag."
     }
   },
   "events": {