v1.0.0

Vue_Full_Project/index.html

@@ -12,6 +12,9 @@
   // Header options
   1. '.header-fixed'					- Fixed Header
 
+  // Brand options
+  1. '.brand-minimized'       - Minimized brand (Only symbol)
+
   // Sidebar options
   1. '.sidebar-fixed'					- Fixed Sidebar
   2. '.sidebar-hidden'				- Hidden Sidebar

Vue_Full_Project/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "coreui-vue",
+  "name": "@coreui/vue",
   "version": "1.0.0",
-  "description": "Open Source Admin Template",
+  "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "private": true,
   "scripts": {
@@ -14,9 +14,10 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "bootstrap-vue": "1.0.0-beta.7",
+    "bootstrap-vue": "1.0.0-beta.9",
     "chart.js": "2.7.0",
     "font-awesome": "^4.7.0",
+    "is-url-external": "^1.0.3",
     "simple-line-icons": "^2.4.1",
     "vue": "2.4.4",
     "vue-chartjs": "2.8.7",
@@ -35,7 +36,7 @@
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "0.28.7",
-    "eslint": "4.7.1",
+    "eslint": "4.7.2",
     "eslint-friendly-formatter": "3.0.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-html": "3.2.2",
@@ -45,7 +46,7 @@
     "eslint-plugin-promise": "3.5.0",
     "eslint-plugin-standard": "3.0.1",
     "eventsource-polyfill": "^0.9.6",
-    "express": "4.15.4",
+    "express": "4.15.5",
     "extract-text-webpack-plugin": "3.0.0",
     "file-loader": "0.11.2",
     "friendly-errors-webpack-plugin": "1.6.1",
@@ -57,7 +58,7 @@
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "1.0.4",
-    "karma-phantomjs-shim": "^1.4.0",
+    "karma-phantomjs-shim": "^1.5.0",
     "karma-sinon-chai": "1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",

Vue_Full_Project/scss/core/_animate.scss

@@ -1,33 +1,17 @@
 // scss-lint:disable all
-@charset "UTF-8";
-
 .animated {
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
+  // animation-fill-mode: both;
-  animation-fill-mode: both;
 }
 
 .animated.infinite {
-  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
 }
 
 .animated.hinge {
-  -webkit-animation-duration: 2s;
   animation-duration: 2s;
 }
 
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -39,6 +23,5 @@
 }
 
 .fadeIn {
-  -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
 }

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 {
@@ -134,11 +134,6 @@ app-root {
   .sidebar-minimized {
     .sidebar {
       flex: 0 0 $sidebar-minimized-width;
-      .sidebar-header,
-      .sidebar-form,
-      .sidebar-footer {
-        display: none;
-      }
     }
 
     &.sidebar-hidden {
@@ -344,6 +339,10 @@ app-root {
     .nav {
       width: $mobile-sidebar-width !important;
     }
+
+    .sidebar-minimizer {
+      display: none;
+    }
   }
 
   .main, .app-footer {

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;
@@ -101,3 +101,14 @@
 .navbar-divider {
   background-color: rgba(0,0,0,.075);
 }
+
+.brand-minimized {
+  .app-header.navbar {
+    .navbar-brand {
+      width: $navbar-brand-minimized-width;
+      background-color: $navbar-brand-minimized-bg;
+      background-image: $navbar-brand-minimized-logo;
+      background-size: $navbar-brand-minimized-logo-size;
+    }
+  }
+}

Vue_Full_Project/scss/core/_sidebar.scss

@@ -78,7 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    flex-direction: column !important;
+    flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {
@@ -148,8 +149,8 @@
     }
 
     &:hover {
-      color: $sidebar-nav-link-hover-color !important;
+      color: $sidebar-nav-link-hover-color;
-      background: $sidebar-nav-link-hover-bg !important;
+      background: $sidebar-nav-link-hover-bg;
       @include borders($sidebar-nav-link-hover-borders);
 
       i {
@@ -160,6 +161,21 @@
         background-image: $sidebar-nav-dropdown-indicator-hover;
       }
     }
+
+    @each $color, $value in $theme-colors {
+      &.nav-link-#{$color} {
+        background: $value;
+        i {
+          color: rgba(255,255,255,.7);
+        }
+        &:hover {
+          background: darken($value,5%) !important;
+          i {
+            color: #fff;
+          }
+        }
+      }
+    }
   }
 
   //  ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
@@ -239,6 +255,39 @@
     padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
     background: $sidebar-footer-bg;
   }
+
+  .sidebar-minimizer {
+    position: relative;
+    flex: 0 0 $sidebar-minimizer-height;
+    background-color: $sidebar-minimizer-bg;
+    border: 0;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: $sidebar-minimizer-height;
+      height: $sidebar-minimizer-height;
+      content: "";
+      background-image: $sidebar-minimizer-indicator;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: $sidebar-minimizer-height / 4;
+      transition: .3s;
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+    }
+
+    &:hover {
+      background-color: $sidebar-minimizer-hover-bg;
+      &::before {
+        background-image: $sidebar-minimizer-hover-indicator;
+      }
+    }
+  }
 }
 
 @include media-breakpoint-up(lg) {
@@ -312,6 +361,11 @@
         display: none;
       }
 
+      .sidebar-minimizer::before {
+        width: 100%;
+        transform: rotate(-180deg);
+      }
+
       .nav-item {
         width: $sidebar-minimized-width;
         overflow: hidden;

Vue_Full_Project/scss/core/_variables.scss

@@ -1,3 +1,4 @@
+// scss-lint:disable all
 // Core Admin Variables
 
 $enable-sidebar-nav-rounded:          false !default;
@@ -57,6 +58,11 @@ $navbar-brand-border: (
   )
 ) !default;
 
+$navbar-brand-minimized-width:        50px !default
+$navbar-brand-minimized-bg:           #fff !default;
+$navbar-brand-minimized-logo:         url('../img/logo-symbol.png') !default;
+$navbar-brand-minimized-logo-size:    24px !default;
+
 $navbar-color:                        $gray-600 !default;
 $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
@@ -127,6 +133,17 @@ $sidebar-footer-bg:                   rgba(0,0,0,.2) !default;
 $sidebar-footer-padding-y:            .75rem !default;
 $sidebar-footer-padding-x:            1rem !default;
 
+// Sidebar Minimizer
+
+$sidebar-minimizer-height:            50px !default;
+$sidebar-minimizer-bg:                rgba(0,0,0,.2) !default;
+$sidebar-minimizer-indicator-color:   $gray-600 !default;
+$sidebar-minimizer-indicator:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$sidebar-minimizer-hover-bg:          rgba(0,0,0,.3) !default;
+$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
+$sidebar-minimizer-hover-indicator:   str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+
 // Top Navigation
 
 $top-nav-bg:                          #fff !default;

Vue_Full_Project/scss/style.scss

@@ -1,4 +1,4 @@
-/**
+/*!
  * CoreUI - Open Source Bootstrap Admin Template
  * @version v1.0.0
  * @link http://coreui.io

Vue_Full_Project/src/_nav.js

@@ -128,6 +128,19 @@ export default {
           icon: 'icon-star'
         }
       ]
+    },
+    {
+      name: 'Download CoreUI',
+      url: 'http://coreui.io/vue/',
+      icon: 'icon-cloud-download',
+      class: 'mt-auto',
+      variant: 'success'
+    },
+    {
+      name: 'Try CoreUI PRO',
+      url: 'http://coreui.io/pro/vue/',
+      icon: 'icon-layers',
+      variant: 'danger'
     }
   ]
 }

Vue_Full_Project/src/components/Header.vue

@@ -2,7 +2,7 @@
   <header class="app-header navbar">
     <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
     <b-link class="navbar-brand" to="#"></b-link>
-    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarMinimize">&#9776;</button>
+    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">&#9776;</button>
     <b-nav is-nav-bar 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>

Vue_Full_Project/src/components/Sidebar.vue

@@ -21,22 +21,22 @@
                     <!-- Second level dropdown -->
                     <SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
                       <li class="nav-item" v-for="(childL2, index) in childL1.children">
-                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge"/>
+                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
                       </li>
                     </SidebarNavDropdown>
                   </template>
                   <template v-else>
-                    <li class="nav-item">
+                    <SidebarNavItem :classes="item.class">
-                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge"/>
+                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
-                    </li>
+                    </SidebarNavItem>
                   </template>
                 </template>
               </SidebarNavDropdown>
             </template>
             <template v-else>
-              <li class="nav-item">
+              <SidebarNavItem :classes="item.class">
-                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
+                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
-              </li>
+              </SidebarNavItem>
             </template>
           </template>
         </template>
@@ -44,15 +44,18 @@
       <slot></slot>
     </nav>
     <SidebarFooter/>
+    <SidebarMinimizer/>
   </div>
 </template>
 <script>
 import SidebarFooter from './SidebarFooter'
 import SidebarForm from './SidebarForm'
 import SidebarHeader from './SidebarHeader'
+import SidebarMinimizer from './SidebarMinimizer'
 import SidebarNavDropdown from './SidebarNavDropdown'
 import SidebarNavLink from './SidebarNavLink'
 import SidebarNavTitle from './SidebarNavTitle'
+import SidebarNavItem from './SidebarNavItem'
 export default {
   name: 'sidebar',
   props: {
@@ -66,9 +69,11 @@ export default {
     SidebarFooter,
     SidebarForm,
     SidebarHeader,
+    SidebarMinimizer,
     SidebarNavDropdown,
     SidebarNavLink,
-    SidebarNavTitle
+    SidebarNavTitle,
+    SidebarNavItem
   },
   methods: {
     handleClick (e) {

Vue_Full_Project/src/components/SidebarMinimizer.vue

@@ -0,0 +1,17 @@
+<template>
+  <button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
+</template>
+<script>
+
+export default {
+  name: 'sidebar-minimizer',
+  methods: {
+    sidebarMinimize () {
+      document.body.classList.toggle('sidebar-minimized')
+    },
+    brandMinimize () {
+      document.body.classList.toggle('brand-minimized')
+    }
+  }
+}
+</script>

Vue_Full_Project/src/components/SidebarNavItem.vue

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

Vue_Full_Project/src/components/SidebarNavLink.vue

@@ -1,29 +1,58 @@
 <template>
-  <router-link :to="url" class="nav-link">
+  <div v-if="linkExternal">
-    <i :class="icon"></i> {{name}}
+    <a :href="url" :class="classList">
-    <b-badge v-if="badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+      <i :class="icon"></i> {{name}}
-  </router-link>
+      <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">
+      <i :class="icon"></i> {{name}}
+      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+    </router-link>
+  </div>
 </template>
 
 <script>
-export default {
+  import isExternal from 'is-url-external'
-  name: 'sidebar-nav-link',
+
-  props: {
+  export default {
-    name: {
+    name: 'sidebar-nav-link',
-      type: String,
+    props: {
-      default: ''
+      name: {
+        type: String,
+        default: ''
+      },
+      url: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      badge: {
+        type: Object,
+        default: () => {}
+      },
+      variant: {
+        type: String,
+        default: ''
+      }
     },
-    url: {
+    computed: {
-      type: String,
+      classList () {
-      default: ''
+        return [
-    },
+          'nav-link',
-    icon: {
+          this.linkVariant
-      type: String,
+        ]
-      default: ''
+      },
-    },
+      linkVariant () {
-    badge: {
+        return this.variant ? `nav-link-${this.variant}` : ''
-      default: ''
+      },
+      linkExternal () {
+        return isExternal(this.url)
+      }
     }
   }
-}
 </script>

Vue_Full_Project/src/components/SidebarNavTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="nav-title" v-bind:class="classes">
+  <li :class="classList">
     <template v-if="wrapper && wrapper.element">
       <component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
         {{name}}
@@ -12,20 +12,31 @@
 </template>
 
 <script>
-export default {
+  export default {
-  props: {
+    props: {
-    name: {
+      name: {
-      type: String,
+        type: String,
-      default: ''
+        default: ''
+      },
+      classes: {
+        type: String,
+        default: ''
+      },
+      wrapper: {
+        type: Object,
+        default: () => {}
+      }
     },
-    classes: {
+    computed: {
-      type: String,
+      classList () {
-      default: ''
+        return [
-    },
+          'nav-title',
-    wrapper: {
+          ...this.itemClasses
-      type: Object,
+        ]
-      default: () => {}
+      },
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : ''
+      }
     }
   }
-}
 </script>