feat: Bootstrap Vue components changed to Coreui-Vue components

src/views/users/User.vue

@@ -1,21 +1,24 @@
 <template>
-  <b-row>
-    <b-col cols="12" lg="6">
-      <b-card no-header>
+  <CRow>
+    <CCol cols="12"
+          lg="6"
+    >
+      <CCard no-header>
         <template slot="header">
           User id:  {{ $route.params.id }}
         </template>
-        <b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
-          <template slot="value" slot-scope="data">
-            <strong>{{data.item.value}}</strong>
-          </template>
-        </b-table>
+        <CTable striped
+                small
+                fixed
+                :items="items($route.params.id)"
+                :fields="$options.fields"
+        />
         <template slot="footer">
-          <b-button @click="goBack">Back</b-button>
+          <CButton @click="goBack">Back</CButton>
         </template>
-      </b-card>
-    </b-col>
-  </b-row>
+      </CCard>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
@@ -28,20 +31,16 @@ export default {
       default: 'User id'
     },
   },
-  data: () => {
-    return {
-      items: (id) => {
-        const user = usersData.find( user => user.id.toString() === id)
-        const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
-        return userDetails.map(([key, value]) => {return {key: key, value: value}})
-      },
-      fields: [
-        {key: 'key'},
-        {key: 'value'},
-      ],
-    }
-  },
+  fields: [
+    { key: 'key', _style:'width:150px'},
+    { key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
+  ],
   methods: {
+    items (id) {
+      const user = usersData.find( user => user.id.toString() === id)
+      const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
+      return userDetails.map(([key, value]) => {return {key: key, value: value}})
+    },
     goBack() {
       this.$router.go(-1)
       // this.$router.replace({path: '/users'})

src/views/users/Users.vue

@@ -1,58 +1,37 @@
 <template>
-  <b-row>
-    <b-col cols="12" xl="6">
+  <CRow>
+    <CCol cols="12" xl="6">
       <transition name="slide">
-      <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" @row-clicked="rowClicked">
-          <template slot="id" slot-scope="data">
-            <strong>{{data.item.id}}</strong>
-          </template>
-          <template slot="name" slot-scope="data">
-            <strong>{{data.item.name}}</strong>
-          </template>
-          <template slot="status" slot-scope="data">
-            <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
-          </template>
-        </b-table>
-        <nav>
-          <b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
-        </nav>
-      </b-card>
+        <CCard header="users">
+          <CTable hover
+                  striped
+                  :items="items"
+                  :fields="fields"
+                  :current-page="currentPage"
+                  :per-page="perPage"
+                  @row-clicked="rowClicked"
+                  :paginationProps="$options.paginationProps"
+          >
+            <td slot="id" slot-scope="data">
+              <strong>{{data.item.id}}</strong>
+            </td>
+            <td slot="name" slot-scope="data">
+              <strong>{{data.item.name}}</strong>
+            </td>
+            <td slot="status" slot-scope="data">
+              <CBadge :variant="getBadge(data.item.status)">{{data.item.status}}</CBadge>
+            </td>
+          </CTable>
+        </CCard>
       </transition>
-    </b-col>
-  </b-row>
+    </CCol>
+  </CRow>
 </template>
 
 <script>
 import usersData from './UsersData'
 export default {
   name: 'Users',
-  props: {
-    caption: {
-      type: String,
-      default: 'Users'
-    },
-    hover: {
-      type: Boolean,
-      default: true
-    },
-    striped: {
-      type: Boolean,
-      default: true
-    },
-    bordered: {
-      type: Boolean,
-      default: false
-    },
-    small: {
-      type: Boolean,
-      default: false
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
   data: () => {
     return {
       items: usersData.filter((user) => user.id < 42),
@@ -68,7 +47,12 @@ export default {
       totalRows: 0
     }
   },
-  computed: {
+  paginationProps: {
+    // size: 'sm',
+    align: 'center',
+    hideDoubleArrows: true,
+    previousButtonText: 'prev',
+    nextButtonText: 'next'
   },
   methods: {
     getBadge (status) {
@@ -77,9 +61,6 @@ export default {
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
     },
-    getRowCount (items) {
-      return items.length
-    },
     userLink (id) {
       return `users/${id.toString()}`
     },

src/views/users/UsersData.js

@@ -1,5 +1,5 @@
 const usersData = [
-  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  // {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
   {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
   {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
   {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},