v2.0.0-beta.2

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [vue](./README.md) version `changelog`
 
+##### `v2.0.0-beta.2`
+- refactor: `HeaderDropdown` with new slots `header` and `dropdown` *breaking change*
+- chore: update `@coreui/vue` to `2.0.0-beta.1`
+- chore: dependencies update
+
 ##### `v2.0.0-beta.1`
 - chore: update `@coreui/vue` to `2.0.0-beta.0`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -20,7 +20,7 @@
     "@coreui/coreui": "^2.0.1",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "^0.2.0",
-    "@coreui/vue": "^2.0.0-beta.0",
+    "@coreui/vue": "^2.0.0-beta.1",
     "bootstrap": "^4.1.1",
     "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.2",
@@ -36,7 +36,7 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "^8.5.1",
+    "autoprefixer": "^8.6.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",

src/containers/DafaultAside.vue

@@ -117,7 +117,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="static/img/avatars/7.jpg" class="img-avatar" alt="[email protected]">
-              <b-badge variant="success" class="avatar-status"></b-badge>
+              <b-badge variant="danger" class="avatar-status"></b-badge>
             </div>
           </div>
           <div>
@@ -132,7 +132,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="static/img/avatars/7.jpg" class="img-avatar" alt="[email protected]">
-              <b-badge variant="success" class="avatar-status"></b-badge>
+              <b-badge variant="info" class="avatar-status"></b-badge>
             </div>
           </div>
           <div>
@@ -147,7 +147,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="static/img/avatars/7.jpg" class="img-avatar" alt="[email protected]">
-              <b-badge variant="success" class="avatar-status"></b-badge>
+              <b-badge variant="warning" class="avatar-status"></b-badge>
             </div>
           </div>
           <div>
@@ -162,7 +162,7 @@
           <div class="py-3 pb-5 mr-3 float-left">
             <div class="avatar">
               <img src="static/img/avatars/7.jpg" class="img-avatar" alt="[email protected]">
-              <b-badge variant="success" class="avatar-status"></b-badge>
+              <b-badge variant="dark" class="avatar-status"></b-badge>
             </div>
           </div>
           <div>

src/containers/DefaultContainer.vue

@@ -23,45 +23,7 @@
         <b-nav-item class="d-md-down-none">
           <i class="icon-___location-pin"></i>
         </b-nav-item>
-        <AppHeaderDropdown right no-caret>
-          <div>
-          <template slot="button-content">
-            <img
-              src="static/img/avatars/6.jpg"
-              class="img-avatar"
-              alt="[email protected]" />
-          </template>
-          <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
-          <b-dropdown-item><i class="fa fa-bell-o" /> Updates
-            <b-badge variant="info">{{ itemsCount }}</b-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-envelope-o" /> Messages
-            <b-badge variant="success">{{ itemsCount }}</b-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-tasks" /> Tasks
-            <b-badge variant="danger">{{ itemsCount }}</b-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-comments" /> 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" /> Profile</b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-usd" /> Payments
-            <b-badge variant="secondary">{{ itemsCount }}</b-badge>
-          </b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-file" /> Projects
-            <b-badge variant="primary">{{ itemsCount }}</b-badge>
-          </b-dropdown-item>
-          <b-dropdown-divider />
-          <b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
-          <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
-          </div>
-        </AppHeaderDropdown>
+        <DefaultHeaderDropdownAccnt/>
       </b-navbar-nav>
       <AsideToggler class="d-none d-lg-block" />
       <!--<AsideToggler class="d-lg-none" mobile />-->
@@ -93,22 +55,21 @@
 
 <script>
 import nav from '../_nav'
-import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
-// import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Breadcrumb } from '../components/'
-// import { Footer as TheFooter } from '@coreui/vue'
+import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
 import DafaultAside from './DafaultAside'
+import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
 
 export default {
   name: 'full',
   components: {
     AsideToggler,
     AppHeader,
-    AppHeaderDropdown,
     AppSidebar,
     AppAside,
     TheFooter,
     Breadcrumb,
     DafaultAside,
+    DefaultHeaderDropdownAccnt,
     SidebarForm,
     SidebarFooter,
     SidebarToggler,
@@ -118,8 +79,7 @@ export default {
   },
   data () {
     return {
-      nav: nav.items,
-      itemsCount: 42
+      nav: nav.items
     }
   },
   computed: {

src/containers/DefaultHeaderDropdownAccnt.vue

@@ -0,0 +1,54 @@
+<template>
+  <AppHeaderDropdown right no-caret>
+    <template slot="header">
+      <img
+        src="static/img/avatars/6.jpg"
+        class="img-avatar"
+        alt="[email protected]" />
+    </template>\
+    <template slot="dropdown">
+      <b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
+      <b-dropdown-item><i class="fa fa-bell-o" /> Updates
+        <b-badge variant="info">{{ itemsCount }}</b-badge>
+      </b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-envelope-o" /> Messages
+        <b-badge variant="success">{{ itemsCount }}</b-badge>
+      </b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-tasks" /> Tasks
+        <b-badge variant="danger">{{ itemsCount }}</b-badge>
+      </b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-comments" /> 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" /> Profile</b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-usd" /> Payments
+        <b-badge variant="secondary">{{ itemsCount }}</b-badge>
+      </b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-file" /> Projects
+        <b-badge variant="primary">{{ itemsCount }}</b-badge>
+      </b-dropdown-item>
+      <b-dropdown-divider />
+      <b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
+      <b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
+    </template>
+  </AppHeaderDropdown>
+</template>
+
+<script>
+import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
+export default {
+  name: 'DefaultHeaderDropdownAccnt',
+  components: {
+    AppHeaderDropdown
+  },
+  data: () => {
+    return { itemsCount: 42 }
+  }
+}
+</script>