updates to lists for better integration with sidebar

vuetifyjs · Jan 19, 2017 · 66c4f9b · 66c4f9b
1 parent 570f55a
commit 66c4f9b
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 79 deletions.
diff --git a/src/components/lists/List.js b/src/components/lists/List.js
@@ -23,7 +23,9 @@ export default {
 
     router: Boolean,
 
-    ripple: Boolean
+    ripple: Boolean,
+
+    unshift: Boolean
   },
 
   computed: {
@@ -81,7 +83,8 @@ export default {
                 props: { 
                   item: obj,
                   ripple: this.ripple || obj.ripple,
-                  router: this.router || obj.router
+                  router: this.router || obj.router,
+                  unshift: this.unshift
                 } 
               })
             ])

diff --git a/src/components/lists/ListGroup.vue b/src/components/lists/ListGroup.vue
@@ -5,8 +5,12 @@
       v-bind:class="classes"
       v-bind:ripple="ripple"
     )
-      v-list-tile-action(v-if="item.action")
-        v-icon {{ item.action }}
+      template(v-if="item.action")
+        v-list-tile-action
+          template(v-if="typeof item.action === 'object'")
+            v-icon(v-bind:class="[item.action.class || '']") {{ item.action.icon }}
+          template(v-else)
+            v-icon {{ item.action }}
       v-list-tile-content
         v-list-tile-title {{ item.title }}
       v-list-tile-action
@@ -76,7 +80,9 @@
 
     watch: {
       '$route' (to) {
-        this.active = this.matchRoute(to.path)
+        if (this.router) {
+          this.active = this.matchRoute(to.path)
+        }
       }
     },
 

diff --git a/src/components/lists/ListTile.js b/src/components/lists/ListTile.js
@@ -27,14 +27,19 @@ export default {
           ripple: false,
           router: false,
           subtitle: false,
+          tag: false,
           title: false
         }
       }
     },
 
     ripple: Boolean,
 
-    router: Boolean
+    router: Boolean,
+
+    tag: String,
+
+    unshift: Boolean
   },
 
   computed: {
@@ -54,12 +59,64 @@ export default {
   methods: {
     click () {
       this.$vuetify.bus.pub('list-item:selected')
-    }
-  },
+    },
 
-  render (createElement) {
-    if (this.item.items) {
-      return createElement('v-list-group', { 
+    createAvatar (h) {
+      let avatar = []
+      if (this.item.avatar.indexOf('.') !== -1) {
+        avatar.push(
+          h('img', { domProps: { src: this.item.avatar } })
+        )
+      } else {
+        avatar.push(
+          h('v-icon', this.item.avatar)
+        )
+      }
+
+      return h('v-list-tile-avatar', {}, avatar)
+    },
+
+    createAction (h) {
+      let data = {}
+      let actions = []
+      let actionText = false
+
+      if (typeof this.item.action === 'object') {
+        data['class'] = this.item.action.class || ''
+        data.domProps = {
+          innerText: this.item.action.icon
+        }
+
+        if (this.item.action.text) {
+          actionText = h('v-list-tile-action-text', this.item.action.text)
+        }
+      } else {
+        data = this.item.action
+      }
+
+      actions.push(h('v-icon', data))
+
+      if (actionText) {
+        actions.push(actionText)
+      }
+
+      return h('v-list-tile-action', {}, actions)
+    },
+
+    createContent (h) {
+      let items = []
+
+      items.push(h('v-list-tile-title', { domProps: { innerHTML: this.item.title } }))
+
+      if (this.item.subtitle) {
+        items.push(h('v-list-tile-sub-title', { domProps: { innerHTML: this.item.subtitle } }))
+      }
+
+      return h('v-list-tile-content', {}, items)
+    },
+
+    createGroup (h) {
+      return h('v-list-group', { 
         props: {
           item: {
             action: this.item.action,
@@ -72,8 +129,30 @@ export default {
         }
       })
     }
+  },
+
+  render (createElement) {
+    if (this.item.items) {
+      return this.createGroup(createElement)
+    }
 
-    let el
+    let avatar,
+        action,
+        content,
+        tag,
+        children = []
+
+    if (this.item.avatar) {
+      avatar = this.createAvatar(createElement)
+    }
+
+    if (this.item.title) {
+      content = this.createContent(createElement)
+    }
+
+    if (this.item.action) {
+      action = this.createAction(createElement)
+    }
 
     let data = {
       attrs: {},
@@ -87,8 +166,10 @@ export default {
       ]
     }
 
-    if (this.item.href && (this.router || this.item.router)) {
-      el = 'router-link'
+    if (this.item.tag || this.tag) {
+      tag = this.item.tag || this.tag
+    } else if (this.item.href && (this.router || this.item.router)) {
+      tag = 'router-link'
       data.props.to = this.item.href
       data.props.exact = this.item.href === '/'
       data.props.activeClass = 'list__tile--active'
@@ -97,77 +178,25 @@ export default {
         data.nativeOn = { click: this.click }
       }
     } else {
-      el = 'a'
+      tag = 'a'
       data.attrs.href = this.item.href || 'javascript:;'
 
       if (this.click) {
         data.on = { click: this.click }
       }
     }
 
-    let children = []
-
-    if (this.item.avatar) {
-      let avatar = []
-      if (this.item.avatar.indexOf('.') !== -1) {
-        avatar.push(
-          createElement('img', { domProps: { src: this.item.avatar } })
-        )
-      } else {
-        avatar.push(
-          createElement('v-icon', this.item.avatar)
-        )
-      }
-
-      children.push(createElement('v-list-tile-avatar', {}, avatar))
-    }
-
-    if (this.item.title) {
-      let items = []
-      items.push(createElement('v-list-tile-title', { domProps: { innerHTML: this.item.title } }))
-
-      if (this.item.subtitle) {
-        items.push(createElement('v-list-tile-sub-title', { domProps: { innerHTML: this.item.subtitle } }))
-      }
-
-      children.push(createElement('v-list-tile-content', {}, items))
-    }
-
-    if (this.item.action) {
-      let data = {}
-      let actions = []
-      let actionText = false
-
-      if (typeof this.item.action === 'object') {
-        data['class'] = this.item.action.class || ''
-        data.domProps = {
-          innerText: this.item.action.icon
-        }
+    children.push(avatar)
+    children.push(content)
 
-        if (this.item.action.text) {
-          actionText = createElement('v-list-tile-action-text', this.item.action.text)
-        }
-      } else {
-        data = this.item.action
-      }
-
-      actions.push(createElement('v-icon', data))
-
-      if (actionText) {
-        actions.push(actionText)
-      }
-
-      let action = createElement('v-list-tile-action', {}, actions)
-
-      if ((this.router || this.item.router) && !this.avatar) {
-        children.splice(-1, 0, action)
-      } else {
-        children.push(action)
-      }
+    if (this.unshift || (this.item.action && this.item.action.unshift)) {
+      children.unshift(action)
+    } else {
+      children.push(action)
     }
 
     children.push(this.$slots.default)
 
-    return createElement(el, data, children)
+    return createElement(tag, data, children)
   }
 }
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
@@ -12,6 +12,7 @@
       v-bind:items="items"
       v-bind:ripple="ripple"
       v-bind:router="router"
+      v-bind:unshift="unshift"
       ref="list"
     )
     slot
@@ -75,7 +76,9 @@
 
       ripple: Boolean,
 
-      router: Boolean
+      router: Boolean,
+
+      unshift: Boolean
     },
 
     computed: {

diff --git a/src/stylus/components/_lists.styl b/src/stylus/components/_lists.styl
@@ -47,9 +47,9 @@
       opacity: 0
       width: 100%
       transition: $primary-transition
-      background-color: $material-twelve-percent-light
+      background-color: $material-twelve-percent-dark
 
-    &:hover
+    a&:hover
       background: $material-twelve-percent-dark
 
     &__content,
@@ -186,7 +186,7 @@
       height: 1px
       opacity: 0
       width: 100%
-      background-color: $material-twelve-percent-light
+      background-color: $material-twelve-percent-dark
 
     .list__tile
       padding-left: $list-item-left-padding

diff --git a/src/stylus/components/_sidebar.styl b/src/stylus/components/_sidebar.styl
@@ -69,6 +69,12 @@
       background-color: $sidebar-item-hover-background-color
       color: $sidebar-item-active-color
 
+    &:after
+      background: $material-twelve-percent-light
+
   .list--group
     > .list__tile--active
-      color: $sidebar-item-color
+      color: $sidebar-item-color
+
+    &:after
+      background: $material-twelve-percent-light