fix: Add IE polyfills, add vue-perfect-scrollbar to DefaultContainer, change packages

Author: woothu

babel.config.js

@@ -1,12 +1,7 @@
 module.exports = {
   presets: [
-    ['@vue/app', {
-      polyfills: [
-        'es6.promise', // already default included now
-        'es6.array.iterator', // already default included now
-        'es6.symbol',
-        'es6.object.assign'
-      ]
+    [ "@vue/app", {
+      "useBuiltIns": 'entry'
     }]
   ]
 }

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.1",
+  "version": "v3-alpha.1",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
   "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
   "license": "MIT",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e"
@@ -18,11 +18,12 @@
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
     "@coreui/vue": "../coreui-vue",
+    "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.1.3",
-    "bootstrap-vue": "^2.0.0-rc.11",
     "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.11.1",
+    "current-script-polyfill": "^1.0.0",
     "element-resize-detector": "^1.2.0",
     "flag-icon-css": "^3.2.0",
     "font-awesome": "^4.7.0",
@@ -41,7 +42,10 @@
     "@vue/cli-plugin-unit-jest": "^3.0.5",
     "@vue/cli-service": "^3.0.5",
     "@vue/test-utils": "^1.0.0-beta.25",
-    "babel-core": "^7.0.0-bridge.0",
+    "babel-core": "^6.26.3",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-module-resolver": "^3.1.2",
+    "babel-preset-vue-app": "^2.0.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",

src/containers/DefaultContainer.vue

@@ -32,7 +32,13 @@
       <CSidebar fixed>
         <CSidebarHeader/>
         <CSidebarForm/>
-        <CSidebarNav :navItems="computedNav"></CSidebarNav>
+        <!-- <CSidebarNav :navItems="computedNav"/> -->
+        <nav class="sidebar-nav">
+          <VuePerfectScrollbar class="scroll-area" :settings="psSettings"
+                               @ps-scroll-y="scrollHandle">
+              <CSidebarNavItems :items="computedNav"/>
+          </VuePerfectScrollbar>
+        </nav>
         <CSidebarFooter/>
         <CSidebarMinimizer/>
       </CSidebar>
@@ -65,12 +71,14 @@
 import nav from '@/_nav'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 
 export default {
   name: 'full',
   components: {
     DefaultAside,
     DefaultHeaderDropdownAccnt,
+    VuePerfectScrollbar
   },
   data () {
     return {
@@ -80,7 +88,31 @@ export default {
   computed: {
     computedNav () {
       return this.nav.filter((item) => item.name !== 'Dashboard')
+    },
+    psSettings: () => {
+      // ToDo: find better rtl fix
+      return {
+        maxScrollbarLength: 200,
+        minScrollbarLength: 40,
+        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
+        wheelPropagation: false,
+        interceptRailY: styles => ({ ...styles, height: 0 })
+      }
+    }
+  },
+  methods: {
+    /*eslint no-unused-vars: ["error", { "argsIgnorePattern": "evt" }]*/
+    scrollHandle (evt) {
+      // console.log(evt)
     }
   }
 }
 </script>
+
+<style scoped lang="css">
+  .scroll-area {
+    position: absolute;
+    height: 100%;
+    margin: auto;
+  }
+</style>

src/main.js

@@ -1,27 +1,21 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+
 import 'core-js/es6/promise'
 import 'core-js/es6/string'
 import 'core-js/es7/array'
+import '@babel/polyfill'
 
 // import cssVars from 'css-vars-ponyfill'
 import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
-
-
-
-//only for development with link
-import CoreuiVueLink from '@coreui/vue/src'
-// import CoreuiVue from '@coreui/vue'
-
+import CoreuiVue from '@coreui/vue'
 Vue.config.performance = true
 
 // todo
 // cssVars()
-Vue.use(BootstrapVue)
-Vue.use(CoreuiVueLink)
+Vue.use(CoreuiVue)
 
 
 /* eslint-disable no-new */

src/views/users/Users.vue

@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol cols="12" xl="6">
+    <CCol cols="12" xl="8">
       <transition name="slide">
         <CCard header="users">
           <CTable hover