feat(SidebarNavLink): attributes

xidedix · xidedix · commit 5dc8b4a0a506 · 2018-12-06T18:09:05.000+01:00
diff --git a/src/components/Sidebar/SidebarNav.vue b/src/components/Sidebar/SidebarNav.vue
@@ -21,21 +21,21 @@
                     <!-- Second level dropdown -->
                     <SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
                       <li :key="index2" class="nav-item" v-for="(childL2, index2) in childL1.children">
-                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
+                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant" :attributes="item.attributes" />
                       </li>
                     </SidebarNavDropdown>
                   </template>
                   <template v-else>
                     <SidebarNavItem :key="index1" :classes="item.class">
-                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
+                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant" :attributes="item.attributes"/>
                     </SidebarNavItem>
                   </template>
                 </template>
               </SidebarNavDropdown>
             </template>
             <template v-else>
               <SidebarNavItem :key="index" :classes="item.class">
-                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
+                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant" :attributes="item.attributes"/>
               </SidebarNavItem>
             </template>
           </template>
diff --git a/src/components/Sidebar/SidebarNavLink.vue b/src/components/Sidebar/SidebarNavLink.vue
@@ -1,12 +1,18 @@
 <template>
-  <div v-if="isExternalLink">
-    <a :href="url" :class="classList">
+  <div v-if="isDisabled">
+    <a href :class="classList" v-bind="attributes" tabindex="-1">
+      <i :class="classIcon"></i> {{name}}
+      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+    </a>
+  </div>
+  <div v-else-if="isExternalLink">
+    <a :href="url" :class="classList" v-bind="attributes">
       <i :class="classIcon"></i> {{name}}
       <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
     </a>
   </div>
   <div v-else>
-    <router-link :to="url" :class="classList">
+    <router-link :to="url" :class="classList" v-bind="attributes">
       <i :class="classIcon"></i> {{name}}
       <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
     </router-link>
@@ -38,15 +44,21 @@ export default {
       default: ''
     },
     classes: {
-      type: String,
+      type: [String, Array, Object],
       default: ''
+    },
+    attributes: {
+      type: Object,
+      default: () => { return Object.create(null) }
     }
   },
   computed: {
     classList () {
       return [
         'nav-link',
         this.linkVariant,
+        ...this.disabledClasses,
+        ...this.attrClasses,
         ...this.itemClasses
       ]
     },
@@ -60,14 +72,24 @@ export default {
       return this.variant ? `nav-link-${this.variant}` : ''
     },
     itemClasses () {
-      return this.classes ? this.classes.split(' ') : []
+      return this.getClassArray(this.classes)
+    },
+    attrClasses () {
+      return this.getClassArray(this.attributes.class)
+    },
+    disabledClasses () {
+      return this.isDisabled ? 'disabled btn-link'.split(' ') : []
+    },
+    isDisabled () {
+      return Boolean(this.attributes.disabled)
     },
     isExternalLink () {
-      if (this.url.substring(0, 4) === 'http') {
-        return true
-      } else {
-        return false
-      }
+      return Boolean(this.url.substring(0, 4) === 'http')
+    }
+  },
+  methods: {
+    getClassArray(classes) {
+      return !classes ? [] : typeof classes === 'string' || classes instanceof String ? classes.split(' ') : Array.isArray(classes) ? classes : Object.keys(classes).filter(i=>classes[i])
     }
   }
 }
