vue-router support & fixes

Pooya Parsa · Pooya Parsa · commit 9ee92db43adb · 2017-01-20T21:32:13.000+03:30
diff --git a/components/button.vue b/components/button.vue
@@ -1,5 +1,13 @@
 <template>
-    <button :class="classObject" @click.stop.prevent="click">
+    <button :class="classObject"
+
+            @click.stop.prevent="click"
+
+            :is="componentType"
+            active-class="active"
+            :to="to"
+            :exact="exact"
+    >
         <slot></slot>
     </button>
 </template>
@@ -18,6 +26,9 @@
                     this.inactive ? 'btn-inactive' : ''
                 ];
             },
+            componentType(){
+                return this.to ? 'router-link' : 'a';
+            },
             btnBlock() {
                 return this.block ? `btn-block` : '';
             },
@@ -60,10 +71,21 @@
                 type: String,
                 default: 'secondary'
             },
+            to: {
+                type: String,
+                default: '',
+            },
+            exact: {
+                type: Boolean,
+                default: false,
+            },
         },
         methods: {
             click: function () {
                 this.$emit('click', this.link);
+                if (this.$router && this.to && this.to.length) {
+                    this.$router.push(this.to);
+                }
             },
         },
     }
diff --git a/components/form-fieldset.vue b/components/form-fieldset.vue
@@ -16,10 +16,10 @@
                 return this.state ? `has-${this.state}` : '';
             },
             labelLayout() {
-              return this.layout == 'horizontal' ? 'col-xs-2' : 'col-xs-12';
+              return this.horizontal ? 'col-xs-2' : 'col-xs-12';
             },
             inputLayout() {
-              return this.layout == 'horizontal' ? 'col-xs-10' : 'col-xs-12';
+              return this.horizontal ? 'col-xs-10' : 'col-xs-12';
             }
         },
         props: {
@@ -31,9 +31,9 @@
                 type: String,
                 default: null
             },
-            layout: {
-                type: String,
-                default: 'horizontal'
+            horizontal: {
+                type: Boolean,
+                default: false
             },
             label: {
                 type: String,
diff --git a/components/form-select.vue b/components/form-select.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-form-fieldset :state="state" :layout="layout" :label="label" :description="description" :feedback="feedback"
+    <b-form-fieldset :state="state" :horizontal="horizontal" :label="label" :description="description" :feedback="feedback"
                      :id="id">
 
         <select :class="['custom-select',inputSize]"
@@ -68,9 +68,9 @@
             },
 
             // FIELD SET
-            layout: {
-                type: String,
-                default: null
+            horizontal: {
+                type: Boolean,
+                default: true
             },
             state: {
                 type: String,
diff --git a/components/nav-item.vue b/components/nav-item.vue
@@ -1,36 +1,58 @@
 <template>
-    <a class="nav-item"
-       href="#"
-       @click.stop.prevent="onclick"
-       :class="classObject">
+    <component
+            class="nav-item"
+            :class="classObject"
+
+            @click.stop.prevent="onclick"
+
+            :is="componentType"
+            active-class="active"
+            :to="to"
+            :exact="exact"
+    >
         <slot></slot>
-    </a>
+    </component>
 </template>
 
 <script>
+
     export default {
         computed: {
             classObject(){
-                return ['nav-link', this.active ? 'active' : '', this.disabled ? 'disabled' : ''];
-            }
+                return [
+                    'nav-link',
+                    this.active ? 'active' : '',
+                    this.disabled ? 'disabled' : ''
+                ];
+            },
+            componentType(){
+                return this.to ? 'router-link' : 'a';
+            },
         },
         props: {
-            link: {
-                type: String,
-                default: ''
-            },
             active: {
                 type: Boolean,
                 default: false
             },
             disabled: {
                 type: Boolean,
                 default: false
-            }
+            },
+            to: {
+                type: String,
+                default: '',
+            },
+            exact: {
+                type: Boolean,
+                default: false,
+            },
         },
         methods: {
             onclick: function () {
-                this.$emit('click', this.link);
+                this.$emit('click', this.to);
+                if (this.$router && this.to && this.to.length) {
+                    this.$router.push(this.to);
+                }
             }
         }
     }
diff --git a/components/nav.vue b/components/nav.vue
@@ -26,7 +26,7 @@
             },
             fill: {
                 type: Boolean,
-                default: true
+                default: false
             },
             tabs: {
                 type: Boolean,
