updates for #141

vuetifyjs · Feb 19, 2017 · 874eb29 · 874eb29
1 parent a7a071c
commit 874eb29
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 120 deletions.
diff --git a/src/components/lists/ListTile.js b/src/components/lists/ListTile.js
@@ -1,26 +1,23 @@
 import { closestParentTag } from '../../util/helpers'
+import GenerateRouteLink from '../../mixins/route-link'
 
 export default {
   name: 'list-tile',
 
+  mixins: [GenerateRouteLink],
+
   data () {
     return {
       active: false
     }
   },
 
   props: {
-    avatar: Boolean,
-
-    disabled: Boolean,
-
-    href: String,
-
-    ripple: Boolean,
-
-    router: Boolean,
-
-    tag: String
+    activeClass: {
+      type: String,
+      default: 'list__tile--active'
+    },
+    avatar: Boolean
   },
 
   computed: {
@@ -44,39 +41,7 @@ export default {
   },
 
   render (createElement) {
-    let tag
-
-    const data = {
-      attrs: {},
-      class: this.classes,
-      props: {},
-      directives: [
-        {
-          name: 'ripple',
-          value: this.ripple || false
-        }
-      ]
-    }
-
-    if (this.tag) {
-      tag = this.tag
-    } else if (this.href && this.router) {
-      tag = 'router-link'
-      data.props.to = this.href
-      data.props.exact = this.href === '/'
-      data.props.activeClass = 'list__tile--active'
-
-      if (this.click) {
-        data.nativeOn = { click: this.click }
-      }
-    } else {
-      tag = 'a'
-      data.attrs.href = this.href || 'javascript:;'
-
-      if (this.click) {
-        data.on = { click: this.click }
-      }
-    }
+    const { tag, data } = this.generateRouteLink()
 
     return createElement(tag, data, [this.$slots.default])
   }

diff --git a/src/components/tabs/TabItem.js b/src/components/tabs/TabItem.js
@@ -1,25 +1,23 @@
 import { closestParentTag } from '../../util/helpers'
+import GenerateRouteLink from '../../mixins/route-link'
 
 export default {
   name: 'tab-item',
 
+  mixins: [GenerateRouteLink],
+
   data () {
     return {
-      isActive: false
+      isActive: false,
+      defaultActiveClass: 'tab__item--active'
     }
   },
 
   props: {
-    disabled: Boolean,
-
-    href: {
+    activeClass: {
       type: String,
-      required: true
-    },
-
-    ripple: Boolean,
-
-    router: Boolean
+      default: 'tab__item--active'
+    }
   },
 
   computed: {
@@ -53,31 +51,7 @@ export default {
   },
 
   render (h) {
-    const data = {
-      attrs: {},
-      class: this.classes,
-      props: {},
-      directives: [
-        {
-          name: 'ripple',
-          value: this.ripple || false
-        }
-      ]
-    }
-
-    let tag
-
-    if (this.href && this.router) {
-      tag = 'router-link'
-      data.props.to = this.href
-      data.props.exact = this.href === '/'
-      data.props.activeClass = 'tab__item--active'
-      data.nativeOn = { click: this.click }
-    } else {
-      tag = 'a'
-      data.attrs.href = this.href || 'javascript:;'
-      data.on = { click: this.click }
-    }
+    const { tag, data } = this.generateRouteLink()
 
     const tab = h(tag, data, [this.$slots.default])
 

diff --git a/src/components/toolbar/ToolbarItem.js b/src/components/toolbar/ToolbarItem.js
@@ -1,18 +1,16 @@
 import { closestParentTag } from '../../util/helpers'
+import GenerateRouteLink from '../../mixins/route-link'
 
 export default {
   name: 'toolbar-item',
 
-  props: {
-    disabled: Boolean,
-
-    href: String,
-
-    ripple: Boolean,
-
-    router: Boolean,
+  mixins: [GenerateRouteLink],
 
-    tag: String
+  props: {
+    activeClass: {
+      type: String,
+      default: 'toolbar__item--active'
+    }
   },
 
   computed: {
@@ -35,39 +33,8 @@ export default {
   },
 
   render (h) {
-    let tag
+    const { tag, data } = this.generateRouteLink()
 
-    const data = {
-      attrs: {},
-      class: this.classes,
-      props: {},
-      directives: [
-        {
-          name: 'ripple',
-          value: this.ripple || false
-        }
-      ]
-    }
-
-    if (this.tag) {
-      tag = this.tag
-    } else if (this.href && this.router) {
-      tag = 'router-link'
-      data.props.to = this.href
-      data.props.exact = this.href === '/'
-      data.props.activeClass = 'toolbar__item--active'
-
-      if (this.click) {
-        data.nativeOn = { click: this.click }
-      }
-    } else {
-      tag = 'a'
-      data.attrs.href = this.href || 'javascript:;'
-
-      if (this.click) {
-        data.on = { click: this.click }
-      }
-    }
     const item = h(tag, data, [this.$slots.default])
 
     return h('li', {}, [item])

diff --git a/src/mixins/route-link.js b/src/mixins/route-link.js
@@ -0,0 +1,46 @@
+export default {
+  props: {
+    append: Boolean,
+    disabled: Boolean,
+    href: [String, Object],
+    nuxt: Boolean,
+    replace: Boolean,
+    ripple: Boolean,
+    router: Boolean,
+    tag: String
+  },
+
+  methods: {
+    generateRouteLink () {
+      let tag
+
+      const data = {
+        attrs: {},
+        class: this.classes,
+        props: {},
+        directives: [
+          {
+            name: 'ripple',
+            value: this.ripple || false
+          }
+        ]
+      }
+
+      if (this.href && this.router) {
+        tag = this.nuxt ? 'nuxt-link' : 'router-link'
+        data.props.to = this.href
+        data.props.exact = this.href === '/'
+        data.props.activeClass = this.activeClass
+        data.props.append = this.append
+        data.props.replace = this.replace
+        data.nativeOn = { click: this.click }
+      } else {
+        tag = this.tag || 'a'
+        data.attrs.href = this.href || 'javascript:;'
+        data.on = { click: this.click }
+      }
+
+      return { tag, data }
+    }
+  }
+}