Merge pull request #132 from coreui/dev-vnext

v.2.0.2

CHANGELOG.md

@@ -1,5 +1,21 @@
 ## [CoreUI for Vue.js](./README.md) version `changelog`
 
+##### `v2.0.2`
+- refactor: extract random() to `shared/utils`
+- refactor: extract shuffleArray() to shared/utils
+- refactor: Tables pass items as props to Table
+- refactor: some views minor cleanup
+- tests(e2e): add some more test cases
+- tests(unit): add some more test cases and snapshots
+- chore: update `@coreui/coreui` to `2.0.20`
+- chore: update `chart.js` to `2.7.3`
+- chore: update `@vue/cli-plugin-babel` to `3.0.5`
+- chore: update `@vue/cli-plugin-e2e-nightwatch` to `3.0.5`
+- chore: update `@vue/cli-plugin-eslint` to `3.0.5`
+- chore: update `@vue/cli-plugin-unit-jest` to `3.0.5`
+- chore: update `@vue/cli-service` to `3.0.5`
+- chore: update `node-sass` to `4.9.4`
+
 ##### `v2.0.1`
 - refactor(Modals): add spacing
 - refactor(BrandButtons): add spacing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -14,13 +14,13 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.14",
+    "@coreui/coreui": "^2.0.20",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
     "@coreui/vue": "^2.0.2",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "chart.js": "^2.7.2",
+    "chart.js": "^2.7.3",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.11.1",
     "flag-icon-css": "^3.2.0",
@@ -33,17 +33,17 @@
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-plugin-unit-jest": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
+    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@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-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.9.4",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.17"
   },

src/containers/DefaultContainer.vue

@@ -68,7 +68,7 @@ import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
 
 export default {
-  name: 'full',
+  name: 'DefaultContainer',
   components: {
     AsideToggler,
     AppHeader,

src/shared/utils.js

@@ -0,0 +1,17 @@
+export function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+/**
+ * Randomize array element order in-place.
+ * Using Durstenfeld shuffle algorithm.
+ */
+export const shuffleArray = (array) => {
+  for (let i = array.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1))
+    let temp = array[i]
+    array[i] = array[j]
+    array[j] = temp
+  }
+  return array
+}

src/views/base/Popovers.vue

@@ -42,10 +42,10 @@
           <b-row>
             <b-col md="4" class="py-4 text-center"
                    v-for="placement in placements" :key="placement">
-              <b-btn :id="'exPopover1-'+placement" variant="primary">
+              <b-btn :id="`exPopover1-${placement}`" variant="primary">
                 {{ placement }}
               </b-btn>
-              <b-popover :target="'exPopover1-'+placement"
+              <b-popover :target="`exPopover1-${placement}`"
                          :placement="placement"
                          title="Popover!"
                          triggers="hover focus"

src/views/base/ProgressBars.vue

@@ -185,14 +185,17 @@ export default {
       this.counter = Math.random() * this.max
       console.log('Change progress to ' +
           Math.round(this.counter * 100) / 100)
+    },
+    setClock() {
+      this.timer = setInterval(() => {
+        this.bars.forEach(bar => {
+          bar.value = 25 + (Math.random() * 75)
+        })
+      }, 2000)
     }
   },
   mounted () {
-    this.timer = setInterval(() => {
-      this.bars.forEach(bar => {
-        bar.value = 25 + (Math.random() * 75)
-      })
-    }, 2000)
+    this.setClock()
   },
   beforeDestroy () {
     clearInterval(this.timer)

src/views/base/Switches.vue

@@ -417,11 +417,6 @@ export default {
   components: {
     cSwitch
   },
-  computed: {
-    icon (icon) {
-      return icon
-    }
-  },
   data: () => {
     return {
       fields: [

src/views/base/Table.vue

@@ -1,33 +1,22 @@
 <template>
   <b-card :header="caption">
-    <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
+    <b-table :dark="dark" :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="captions" :current-page="currentPage" :per-page="perPage">
       <template slot="status" slot-scope="data">
         <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
       </template>
     </b-table>
     <nav>
-      <b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
+      <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
     </nav>
   </b-card>
 </template>
 
 <script>
-/**
-   * Randomize array element order in-place.
-   * Using Durstenfeld shuffle algorithm.
-   */
-const shuffleArray = (array) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    let j = Math.floor(Math.random() * (i + 1))
-    let temp = array[i]
-    array[i] = array[j]
-    array[j] = temp
-  }
-  return array
-}
+
 
 export default {
   name: 'c-table',
+  inheritAttrs: false,
   props: {
     caption: {
       type: String,
@@ -52,57 +41,46 @@ export default {
     fixed: {
       type: Boolean,
       default: false
+    },
+    tableData: {
+      type: [Array, Function],
+      default: () => []
+    },
+    fields: {
+      type: [Array, Object],
+      default: () => []
+    },
+    perPage: {
+      type: Number,
+      default: 5
+    },
+    dark: {
+      type: Boolean,
+      default: false
     }
   },
   data: () => {
     return {
-      items: shuffleArray([
-        {username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-        {username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
-      ]),
-      fields: [
-        {key: 'username'},
-        {key: 'registered'},
-        {key: 'role'},
-        {key: 'status'}
-      ],
       currentPage: 1,
-      perPage: 5,
-      totalRows: 0
     }
   },
+  computed: {
+    items: function() {
+      const items =  this.tableData
+      return Array.isArray(items) ? items : items()
+    },
+    totalRows: function () { return this.getRowCount() },
+    captions: function() { return this.fields }
+  },
   methods: {
     getBadge (status) {
       return status === 'Active' ? 'success'
         : status === 'Inactive' ? 'secondary'
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
     },
-    getRowCount (items) {
-      return items.length
+    getRowCount: function () {
+      return this.items.length
     }
   }
 }

src/views/base/Tables.vue

@@ -3,38 +3,84 @@
 
     <b-row>
       <b-col lg="6">
-        <c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
-      </b-col><!--/.col-->
+        <c-table :table-data="items" :fields="fields" caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
+      </b-col>
 
       <b-col lg="6">
-        <c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
-      </b-col><!--/.col-->
+        <c-table :table-data="items" striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
+      </b-col>
     </b-row><!--/.row-->
 
     <b-row>
       <b-col lg="6">
-        <c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
-      </b-col><!--/.col-->
+        <c-table :table-data="items" small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
+      </b-col>
 
       <b-col lg="6">
-        <c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
-      </b-col><!--/.col-->
-    </b-row><!--/.row-->
+        <c-table :table-data="items" fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
+      </b-col>
+    </b-row>
 
     <b-row>
       <b-col sm="12">
-        <c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
+        <c-table :table-data="itemsArray" :per-page=10 hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="12">
+        <c-table dark :table-data="itemsArray" :per-page=10 hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Dark Table"></c-table>
       </b-col>
     </b-row>
   </div>
 
 </template>
 
 <script>
+import { shuffleArray } from '@/shared/utils'
 import cTable from './Table.vue'
 
+const someData = () => shuffleArray([
+  {username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active', _rowVariant: 'success'},
+  {username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned', _rowVariant: 'danger'},
+  {username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _rowVariant: 'info'},
+  {username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  {username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  {username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  {username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  {username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  {username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  {username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  {username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  {username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  {username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  {username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  {username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  {username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  {username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  {username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  {username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  {username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  {username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
+  {username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
+])
+
 export default {
   name: 'tables',
-  components: {cTable}
+  components: {cTable},
+  data: () => {
+    return {
+      items: someData,
+      itemsArray: someData(),
+      fields: [
+        {key: 'username', label: 'User', sortable: true},
+        {key: 'registered'},
+        {key: 'role'},
+        {key: 'status', sortable: true}
+      ],
+    }
+  }
 }
 </script>

src/views/dashboard/MainChartExample.vue

@@ -2,10 +2,7 @@
 import { Line } from 'vue-chartjs'
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-function random (min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
+import { random } from '@/shared/utils'
 
 export default {
   extends: Line,