Update to 1.0.6

- refactor: raw html to b-row, b-col, b-card, b-button components
- fix: Cards.vue: change variant="accent- to class="card-accent-
- refactor: Modal's ok-button variants
- refactor: forms with validation feedback
- update: bootstrap-vue to 1.1.0
- update: to vue: 2.5.6

Vue_Full_Project/src/components/Aside.vue

@@ -201,16 +201,16 @@
           <hr>
           <h6>System Utilization</h6>
           <div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
-          <b-progress class="progress-xs" variant="info" :value="25"></b-progress>
+          <b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress>
           <small class="text-muted">348 Processes. 1/4 Cores.</small>
           <div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
-          <b-progress class="progress-xs" variant="warning" :value="70"></b-progress>
+          <b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress>
           <small class="text-muted">11444GB/16384MB</small>
           <div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
-          <b-progress class="progress-xs" variant="danger" :value="95"></b-progress>
+          <b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress>
           <small class="text-muted">243GB/256GB</small>
           <div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
-          <b-progress class="progress-xs" variant="success" :value="10"></b-progress>
+          <b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress>
           <small class="text-muted">25GB/256GB</small>
         </div>
       </b-tab>

Vue_Full_Project/src/components/Header.vue

@@ -7,12 +7,12 @@
     <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <b-nav is-nav-bar class="d-md-down-none">
+    <b-navbar-nav class="d-md-down-none">
       <b-nav-item class="px-3">Dashboard</b-nav-item>
       <b-nav-item class="px-3">Users</b-nav-item>
       <b-nav-item class="px-3">Settings</b-nav-item>
-    </b-nav>
-    <b-nav is-nav-bar class="ml-auto">
+    </b-navbar-nav>
+    <b-navbar-nav class="ml-auto">
       <b-nav-item class="d-md-down-none">
         <i class="icon-bell"></i>
         <b-badge pill variant="danger">5</b-badge>
@@ -24,7 +24,7 @@
         <i class="icon-location-pin"></i>
       </b-nav-item>
       <HeaderDropdown/>
-    </b-nav>
+    </b-navbar-nav>
     <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
       <span class="navbar-toggler-icon"></span>
     </button>

Vue_Full_Project/src/components/HeaderDropdown.vue

@@ -2,18 +2,17 @@
       <b-nav-item-dropdown right no-caret>
         <template slot="button-content">
           <img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-          <span class="d-md-down-none">admin</span>
         </template>
         <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
-        <b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">42</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">42</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">42</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">42</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
         <b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
         <b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
         <b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="default">42</b-badge></b-dropdown-item>
-        <b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">42</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="default">{{itemsCount}}</b-badge></b-dropdown-item>
+        <b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
         <b-dropdown-divider></b-dropdown-divider>
         <b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
         <b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
@@ -21,6 +20,10 @@
 </template>
 <script>
   export default {
-    name: 'header-dropdown'
+    name: 'header-dropdown',
+    data: () => {
+      return { itemsCount: 42 }
+    }
   }
 </script>
+

Vue_Full_Project/src/components/Sidebar.vue

@@ -10,7 +10,7 @@
             <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
           </template>
           <template v-else-if="item.divider">
-            <li class="divider"></li>
+            <SidebarNavDivider :classes="item.class"/>
           </template>
           <template v-else>
             <template v-if="item.children">
@@ -52,6 +52,7 @@ import SidebarFooter from './SidebarFooter'
 import SidebarForm from './SidebarForm'
 import SidebarHeader from './SidebarHeader'
 import SidebarMinimizer from './SidebarMinimizer'
+import SidebarNavDivider from './SidebarNavDivider'
 import SidebarNavDropdown from './SidebarNavDropdown'
 import SidebarNavLink from './SidebarNavLink'
 import SidebarNavTitle from './SidebarNavTitle'
@@ -70,6 +71,7 @@ export default {
     SidebarForm,
     SidebarHeader,
     SidebarMinimizer,
+    SidebarNavDivider,
     SidebarNavDropdown,
     SidebarNavLink,
     SidebarNavTitle,

Vue_Full_Project/src/components/SidebarNavDivider.vue

@@ -0,0 +1,26 @@
+<template>
+  <li :class="classList"></li>
+</template>
+
+<script>
+  export default {
+    name: 'sidebar-nav-divider',
+    props: {
+      classes: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      classList () {
+        return [
+          'divider',
+          ...this.itemClasses
+        ]
+      },
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : ''
+      }
+    }
+  }
+</script>

Vue_Full_Project/src/components/SidebarNavLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="linkExternal">
+  <div v-if="isExternalLink">
     <a :href="url" :class="classList">
       <i :class="icon"></i> {{name}}
       <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
@@ -14,8 +14,6 @@
 </template>
 
 <script>
-  import isExternal from 'is-url-external'
-
   export default {
     name: 'sidebar-nav-link',
     props: {
@@ -38,20 +36,32 @@
       variant: {
         type: String,
         default: ''
+      },
+      classes: {
+        type: String,
+        default: ''
       }
     },
     computed: {
       classList () {
         return [
           'nav-link',
-          this.linkVariant
+          this.linkVariant,
+          ...this.itemClasses
         ]
       },
       linkVariant () {
         return this.variant ? `nav-link-${this.variant}` : ''
       },
-      linkExternal () {
-        return isExternal(this.url)
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : []
+      },
+      isExternalLink () {
+        if (this.url.substring(0, 4) === 'http') {
+          return true
+        } else {
+          return false
+        }
       }
     }
   }