v2.0.0-beta.6

CHANGELOG.md

@@ -1,5 +1,21 @@
 ## [vue](./README.md) version `changelog`
 
+##### `v2.0.0-beta.6`
+- fix: typo `DafaultAside` to `DefaultAside` - thanks @DamianLion
+- feat(router): `Users/User Details` Breadcrumb example with `/users/:id`
+- refactor(router): add dynamic imports for Webpack code splitting
+- refactor: remove empty `<style>` sections from `vue` files
+- refactor(Pages): add `b-form`, `b-form-input` and `autocomplete` to Login 
+- refactor(Pages): add `b-form`, `b-form-input` and `autocomplete` to Register 
+- chore: update `@coreui/coreui` to `2.0.3`
+- chore: update `@vue/cli-plugin-babel` to `3.0.0-rc.3`
+- chore: update `@vue/cli-plugin-e2e-nightwatch` to `3.0.0-rc.3`
+- chore: update `@vue/cli-plugin-eslint` to `3.0.0-rc.3`
+- chore: update `@vue/cli-plugin-unit-jest` to `3.0.0-rc.3`
+- chore: update `@vue/cli-service` to `3.0.0-rc.3`
+- chore: update `@vue/test-utils` to `3.0.0-rc.3`
+- chore: update `babel-jest` to `23.2.0`     
+
 ##### `v2.0.0-beta.5`
 - chore: move tooling to `vue-cli v3.0.0-rc.2`
 - refactor: move from `static/img` to `public/img` dir

jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
     'jest-serializer-vue'
   ],
   testMatch: [
-    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
+    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
+    '<rootDir>/tests/unit/Dashboard.spec.js'
   ]
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -14,9 +14,9 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.2",
+    "@coreui/coreui": "^2.0.3",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
-    "@coreui/icons": "^0.2.0",
+    "@coreui/icons": "0.2.0",
     "@coreui/vue": "^2.0.0-beta.2",
     "bootstrap": "^4.1.1",
     "bootstrap-vue": "^2.0.0-rc.11",
@@ -28,19 +28,19 @@
     "perfect-scrollbar": "^1.4.0",
     "simple-line-icons": "^2.4.1",
     "vue": "^2.5.16",
-    "vue-chartjs": "^3.3.1",
+    "vue-chartjs": "^3.3.2",
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-rc.2",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.2",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.2",
-    "@vue/cli-plugin-unit-jest": "^3.0.0-rc.2",
-    "@vue/cli-service": "^3.0.0-rc.2",
-    "@vue/test-utils": "^1.0.0-beta.19",
+    "@vue/cli-plugin-babel": "^3.0.0-rc.3",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.3",
+    "@vue/cli-plugin-eslint": "^3.0.0-rc.3",
+    "@vue/cli-plugin-unit-jest": "^3.0.0-rc.3",
+    "@vue/cli-service": "^3.0.0-rc.3",
+    "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.0.1",
+    "babel-jest": "^23.2.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.3",
     "vue-template-compiler": "^2.5.16"

src/containers/DefaultContainer.vue

@@ -8,8 +8,8 @@
       </b-link>
       <SidebarToggler class="d-md-down-none" display="lg" />
       <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" to="/dashboard">Dashboard</b-nav-item>
+        <b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
         <b-nav-item class="px-3">Settings</b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
@@ -37,7 +37,7 @@
         <SidebarMinimizer/>
       </AppSidebar>
       <main class="main">
-        <breadcrumb :list="list"/>
+        <Breadcrumb :list="list"/>
         <div class="container-fluid">
           <router-view></router-view>
         </div>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import nav from '../_nav'
+import nav from '@/_nav'
 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 DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
@@ -87,7 +87,7 @@ export default {
       return this.$route.name
     },
     list () {
-      return this.$route.matched
+      return this.$route.matched.filter((route) => route.name || route.meta.label )
     }
   }
 }

src/router/index.js

@@ -2,57 +2,61 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 // Containers
-import DefaultContainer from '@/containers/DefaultContainer'
+const DefaultContainer = () => import('@/containers/DefaultContainer')
 
 // Views
-import Dashboard from '@/views/Dashboard'
+const Dashboard = () => import('@/views/Dashboard')
 
-import Colors from '@/views/theme/Colors'
-import Typography from '@/views/theme/Typography'
+const Colors = () => import('@/views/theme/Colors')
+const Typography = () => import('@/views/theme/Typography')
 
-import Charts from '@/views/Charts'
-import Widgets from '@/views/Widgets'
+const Charts = () => import('@/views/Charts')
+const Widgets = () => import('@/views/Widgets')
 
 // Views - Components
-import Cards from '@/views/base/Cards'
-import Forms from '@/views/base/Forms'
-import Switches from '@/views/base/Switches'
-import Tables from '@/views/base/Tables'
-import Tabs from '@/views/base/Tabs'
-import Breadcrumbs from '@/views/base/Breadcrumbs'
-import Carousels from '@/views/base/Carousels'
-import Collapses from '@/views/base/Collapses'
-import Jumbotrons from '@/views/base/Jumbotrons'
-import ListGroups from '@/views/base/ListGroups'
-import Navs from '@/views/base/Navs'
-import Navbars from '@/views/base/Navbars'
-import Paginations from '@/views/base/Paginations'
-import Popovers from '@/views/base/Popovers'
-import ProgressBars from '@/views/base/ProgressBars'
-import Tooltips from '@/views/base/Tooltips'
+const Cards = () => import('@/views/base/Cards')
+const Forms = () => import('@/views/base/Forms')
+const Switches = () => import('@/views/base/Switches')
+const Tables = () => import('@/views/base/Tables')
+const Tabs = () => import('@/views/base/Tabs')
+const Breadcrumbs = () => import('@/views/base/Breadcrumbs')
+const Carousels = () => import('@/views/base/Carousels')
+const Collapses = () => import('@/views/base/Collapses')
+const Jumbotrons = () => import('@/views/base/Jumbotrons')
+const ListGroups = () => import('@/views/base/ListGroups')
+const Navs = () => import('@/views/base/Navs')
+const Navbars = () => import('@/views/base/Navbars')
+const Paginations = () => import('@/views/base/Paginations')
+const Popovers = () => import('@/views/base/Popovers')
+const ProgressBars = () => import('@/views/base/ProgressBars')
+const Tooltips = () => import('@/views/base/Tooltips')
 
 // Views - Buttons
-import StandardButtons from '@/views/buttons/StandardButtons'
-import ButtonGroups from '@/views/buttons/ButtonGroups'
-import Dropdowns from '@/views/buttons/Dropdowns'
-import BrandButtons from '@/views/buttons/BrandButtons'
+const StandardButtons = () => import('@/views/buttons/StandardButtons')
+const ButtonGroups = () => import('@/views/buttons/ButtonGroups')
+const Dropdowns = () => import('@/views/buttons/Dropdowns')
+const BrandButtons = () => import('@/views/buttons/BrandButtons')
 
 // Views - Icons
-import Flags from '@/views/icons/Flags'
-import FontAwesome from '@/views/icons/FontAwesome'
-import SimpleLineIcons from '@/views/icons/SimpleLineIcons'
-import CoreUIIcons from '@/views/icons/CoreUIIcons'
+const Flags = () => import('@/views/icons/Flags')
+const FontAwesome = () => import('@/views/icons/FontAwesome')
+const SimpleLineIcons = () => import('@/views/icons/SimpleLineIcons')
+const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
 
 // Views - Notifications
-import Alerts from '@/views/notifications/Alerts'
-import Badges from '@/views/notifications/Badges'
-import Modals from '@/views/notifications/Modals'
+const Alerts = () => import('@/views/notifications/Alerts')
+const Badges = () => import('@/views/notifications/Badges')
+const Modals = () => import('@/views/notifications/Modals')
 
 // Views - Pages
-import Page404 from '@/views/pages/Page404'
-import Page500 from '@/views/pages/Page500'
-import Login from '@/views/pages/Login'
-import Register from '@/views/pages/Register'
+const Page404 = () => import('@/views/pages/Page404')
+const Page500 = () => import('@/views/pages/Page500')
+const Login = () => import('@/views/pages/Login')
+const Register = () => import('@/views/pages/Register')
+
+// Users
+const Users = () => import('@/views/users/Users')
+const User = () => import('@/views/users/User')
 
 Vue.use(Router)
 
@@ -102,6 +106,25 @@ export default new Router({
           name: 'Widgets',
           component: Widgets
         },
+        {
+          path: 'users',
+          meta: { label: 'Users'},
+          component: {
+            render (c) { return c('router-view') }
+          },
+          children: [
+            {
+              path: '',
+              component: Users,
+            },
+            {
+              path: ':id',
+              meta: { label: 'User Details'},
+              name: 'User',
+              component: User,
+            },
+          ]
+        },
         {
           path: 'base',
           redirect: '/base/cards',

src/views/base/Jumbotrons.vue

@@ -89,6 +89,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/ListGroups.vue

@@ -250,6 +250,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Navbars.vue

@@ -162,6 +162,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Navs.vue

@@ -125,6 +125,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Paginations.vue

@@ -97,6 +97,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/ProgressBars.vue

@@ -201,6 +201,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/base/Tooltips.vue

@@ -143,6 +143,3 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>

src/views/pages/Login.vue

@@ -6,24 +6,26 @@
           <b-card-group>
             <b-card no-body class="p-4">
               <b-card-body>
-                <h1>Login</h1>
-                <p class="text-muted">Sign In to your account</p>
-                <b-input-group class="mb-3">
-                  <b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
-                  <input type="text" class="form-control" placeholder="Username">
-                </b-input-group>
-                <b-input-group class="mb-4">
-                  <b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
-                  <input type="password" class="form-control" placeholder="Password">
-                </b-input-group>
-                <b-row>
-                  <b-col cols="6">
-                    <b-button variant="primary" class="px-4">Login</b-button>
-                  </b-col>
-                  <b-col cols="6" class="text-right">
-                    <b-button variant="link" class="px-0">Forgot password?</b-button>
-                  </b-col>
-                </b-row>
+                <b-form>
+                  <h1>Login</h1>
+                  <p class="text-muted">Sign In to your account</p>
+                  <b-input-group class="mb-3">
+                    <b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
+                    <b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username email" />
+                  </b-input-group>
+                  <b-input-group class="mb-4">
+                    <b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
+                    <b-form-input type="password" class="form-control" placeholder="Password" autocomplete="current-password" />
+                  </b-input-group>
+                  <b-row>
+                    <b-col cols="6">
+                      <b-button variant="primary" class="px-4">Login</b-button>
+                    </b-col>
+                    <b-col cols="6" class="text-right">
+                      <b-button variant="link" class="px-0">Forgot password?</b-button>
+                    </b-col>
+                  </b-row>
+                </b-form>
               </b-card-body>
             </b-card>
             <b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">