- Update Vue to 2.5.2

- Update Vue Router to 3.0.0
- Fix height and position problems with .fixed-footer
- Fix mobile sidebar height
- Fix mobile breadcrumb position with .fixed-breadcrumb
- Add new navbar toggler icon
- Update old bootstrap classes ex. `hidden-sm-down`

Author: mrholek

Vue_Full_Project/CHANGELOG.md

@@ -0,0 +1,8 @@
+## [vue](./README.md) version `changelog`
+
+###### `v1.0.2`
+- moved to vue: `^2.5.x`
+- (vue `v2.5.x`) deprecated `<template scope="props">` replaced with `<div slot-scope="props">`
+- `HeaderDropdown` component added to `Header`
+- moved to component `b-badge` (bootstrap-vue)
+

Vue_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "author": "Łukasz Holeczek <[email protected]>",
   "private": true,
@@ -19,36 +19,36 @@
     "font-awesome": "^4.7.0",
     "is-url-external": "^1.0.3",
     "simple-line-icons": "^2.4.1",
-    "vue": "2.4.4",
+    "vue": "^2.5.2",
     "vue-chartjs": "2.8.7",
-    "vue-router": "2.7.0"
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.4",
+    "autoprefixer": "7.1.5",
     "babel-core": "6.26.0",
-    "babel-eslint": "8.0.0",
+    "babel-eslint": "8.0.1",
     "babel-loader": "7.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "1.6.0",
     "babel-preset-stage-2": "6.24.1",
     "babel-register": "6.26.0",
     "chalk": "2.1.0",
-    "connect-history-api-fallback": "^1.3.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "connect-history-api-fallback": "^1.4.0",
+    "copy-webpack-plugin": "^4.1.1",
     "css-loader": "0.28.7",
-    "eslint": "4.7.2",
+    "eslint": "^4.9.0",
     "eslint-friendly-formatter": "3.0.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-html": "3.2.2",
     "eslint-plugin-import": "2.7.0",
-    "eslint-plugin-node": "5.1.1",
+    "eslint-plugin-node": "5.2.0",
     "eslint-config-standard": "10.2.1",
-    "eslint-plugin-promise": "3.5.0",
+    "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "3.0.1",
     "eventsource-polyfill": "^0.9.6",
-    "express": "4.15.5",
-    "extract-text-webpack-plugin": "3.0.0",
-    "file-loader": "0.11.2",
+    "express": "4.16.2",
+    "extract-text-webpack-plugin": "3.0.1",
+    "file-loader": "1.1.5",
     "friendly-errors-webpack-plugin": "1.6.1",
     "html-webpack-plugin": "2.30.1",
     "http-proxy-middleware": "0.17.4",
@@ -62,32 +62,32 @@
     "karma-sinon-chai": "1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "2.0.4",
-    "lolex": "2.1.2",
-    "mocha": "3.5.3",
+    "karma-webpack": "^2.0.5",
+    "lolex": "2.1.3",
+    "mocha": "4.0.1",
     "chai": "4.1.2",
-    "sinon": "3.3.0",
-    "sinon-chai": "2.13.0",
+    "sinon": "4.0.1",
+    "sinon-chai": "2.14.0",
     "inject-loader": "3.0.1",
     "babel-plugin-istanbul": "4.1.5",
     "phantomjs-prebuilt": "^2.1.15",
-    "chromedriver": "2.32.3",
+    "chromedriver": "2.33.1",
     "cross-spawn": "^5.0.1",
     "nightwatch": "0.9.16",
-    "selenium-server": "3.5.3",
+    "selenium-server": "3.6.0",
     "semver": "5.4.1",
     "shelljs": "0.7.8",
     "opn": "5.1.0",
     "optimize-css-assets-webpack-plugin": "3.2.0",
     "ora": "1.3.0",
     "rimraf": "2.6.2",
-    "url-loader": "0.5.9",
-    "vue-loader": "13.0.5",
+    "url-loader": "0.6.2",
+    "vue-loader": "13.3.0",
     "vue-style-loader": "3.0.3",
-    "vue-template-compiler": "2.4.4",
-    "webpack": "3.6.0",
-    "webpack-dev-middleware": "1.12.0",
-    "webpack-hot-middleware": "2.19.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.7.1",
+    "webpack-dev-middleware": "^1.12.0",
+    "webpack-hot-middleware": "^2.20.0",
     "webpack-merge": "4.1.0",
     "node-sass": "4.5.3",
     "sass-loader": "6.0.6"

Vue_Full_Project/scss/core/_dropdown-menu-right.scss

@@ -5,4 +5,4 @@
       right: auto;
     }
   }
-}
+}

Vue_Full_Project/scss/core/_footer.scss

@@ -1,9 +1,9 @@
 .app-footer {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   padding: 0 $spacer;
   color: $footer-color;
   background: $footer-bg;
-  flex-wrap: wrap;
-  align-items: center;
   @include borders($footer-borders);
 }

Vue_Full_Project/scss/core/_layout.scss

@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
+  min-height: 100vh;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  overflow-x: hidden;
   flex-grow: 1;
+  overflow-x: hidden;
 
   .main {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 
   .sidebar {
@@ -269,9 +269,11 @@ app-root {
 .footer-fixed {
   .app-footer {
     position: fixed;
+    right: 0;
     bottom: 0;
+    left: 0;
     z-index: $zindex-sticky;
-    width: 100%;
+    height: $footer-height;
   }
 
   .app-body {
@@ -328,17 +330,26 @@ app-root {
     margin-top: $navbar-height;
   }
 
+  .breadcrumb-fixed {
+    .main:nth-child(2) .breadcrumb {
+      right: auto;
+      left: auto;
+      width: 100%;
+    }
+  }
+
   .sidebar,
   .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
-    height: 100%;
+    // height: 100%;
     margin-left: - $mobile-sidebar-width;
 
     .sidebar-nav,
     .nav {
       width: $mobile-sidebar-width !important;
+      height: calc(100vh - #{$navbar-height});
     }
 
     .sidebar-minimizer {
@@ -364,22 +375,11 @@ app-root {
     .sidebar {
       width: $mobile-sidebar-width;
       margin-left: 0;
-
-      .sidebar-nav {
-        height: calc(100vh - #{$navbar-height});
-      }
     }
 
     .main {
       margin-right: - $mobile-sidebar-width !important;
       margin-left: $mobile-sidebar-width !important;
     }
   }
-
-  .breadcrumb-fixed {
-    .main .breadcrumb {
-      right: 0 !important;
-      left: 0 !important;
-    }
-  }
 }

Vue_Full_Project/scss/core/_navbar.scss

@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  height: $navbar-height;
   flex-direction: row;
+  height: $navbar-height;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -22,7 +22,17 @@
   }
 
   .navbar-toggler {
-    color: $navbar-color;
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
   }
 
   .navbar-nav {

Vue_Full_Project/scss/core/_sidebar.scss

@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    min-height: 100%;
     flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {

Vue_Full_Project/scss/core/_variables.scss

@@ -69,6 +69,9 @@ $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
 $navbar-disabled-color:               $gray-300 !default;
 
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 // Sidebar
 
 $sidebar-width:                       200px !default;

Vue_Full_Project/scss/style.scss

@@ -1,10 +1,11 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.1
+ * @version v1.0.2
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
  */
+
 // Override Boostrap variables
 @import "bootstrap-variables";
 

Vue_Full_Project/src/components/Aside.vue

@@ -93,7 +93,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]">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -108,7 +108,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]">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -123,7 +123,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]">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -138,7 +138,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]">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>
@@ -153,7 +153,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]">
-                <span class="avatar-status badge-success"></span>
+                <b-badge variant="success" class="avatar-status" ></b-badge>
               </div>
             </div>
             <div>

Vue_Full_Project/src/components/Breadcrumb.vue

@@ -1,7 +1,8 @@
 <template>
   <ol class="breadcrumb">
-    <li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
-      <router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
+    <li class="breadcrumb-item" v-for="(item, index) in list">
+      <span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
+      <router-link :to="item" v-else>{{ showName(item) }}</router-link>
     </li>
   </ol>
 </template>