refactor: Dashboard, Collapses, Popovers, Tooltips, Table refreshes.

src/containers/DefaultHeaderDropdownAccnt.vue

@@ -1,44 +1,64 @@
 <template>
-  <CDropdown right
+  <CDropdown
-             nav
+    right
-             no-caret
+    nav
-             no-popper
+    noCaret
-             addMenuClasses="dropdown-menu-right"
+    noPopper
+    addMenuClasses="dropdown-menu-right"
   >
-    <img slot="buttonContent"
+    <template #buttonContent>
-         src="img/avatars/6.jpg"
+      <img
-         class="img-avatar"
+        src="img/avatars/6.jpg"
-         alt="admin@bootstrapmaster.com"
+        class="img-avatar"
-    />
+        alt="admin@bootstrapmaster.com"
-    <CDropdownHeader tag="div"  class="text-center"><strong>Account</strong></CDropdownHeader>
+      />
-    <CDropdownItem><i class="fa fa-bell-o" /> Updates
+    </template>
+    <CDropdownHeader tag="div" class="text-center">
+      <strong>Account</strong>
+    </CDropdownHeader>
+    <CDropdownItem>
+      <i class="fa fa-bell-o" /> Updates
       <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-envelope-o" /> Messages
+    <CDropdownItem>
+      <i class="fa fa-envelope-o" /> Messages
       <CBadge variant="success">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-tasks" /> Tasks
+    <CDropdownItem>
+      <i class="fa fa-tasks" /> Tasks
       <CBadge variant="danger">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-comments" /> Comments
+    <CDropdownItem>
+      <i class="fa fa-comments" /> Comments
       <CBadge variant="warning">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
       tag="div"
-      class="text-center">
+      class="text-center"
+    >
       <strong>Settings</strong>
     </CDropdownHeader>
-    <CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
+    <CDropdownItem>
-    <CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
+      <i class="fa fa-user" /> Profile
-    <CDropdownItem><i class="fa fa-usd" /> Payments
+    </CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-wrench" /> Settings
+    </CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-usd" /> Payments
       <CBadge variant="secondary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
-    <CDropdownItem><i class="fa fa-file" /> Projects
+    <CDropdownItem>
+      <i class="fa fa-file" /> Projects
       <CBadge variant="primary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
-    <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
+    <CDropdownItem>
-    <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
+      <i class="fa fa-shield" /> Lock Account
+    </CDropdownItem>
+    <CDropdownItem>
+      <i class="fa fa-lock" /> Logout
+    </CDropdownItem>
   </CDropdown>
 </template>
 

src/views/Dashboard.vue

@@ -186,23 +186,23 @@
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
-                  <Callout variant="info">
+                  <CCallout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
                     <div :style="{ top: '-10px'}">
                       <!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
                       <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
                 <CCol sm="6">
-                  <Callout variant="danger">
+                  <CCallout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
                     <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
               </CRow>
               <hr class="mt-0">
@@ -296,22 +296,22 @@
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
-                  <Callout variant="warning">
+                  <CCallout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
                     <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
                 <CCol sm="6">
-                  <Callout variant="success">
+                  <CCallout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
                     <div :style="{ top: '-10px'}">
                       <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
-                  </Callout>
+                  </CCallout>
                 </CCol>
               </CRow>
               <hr class="mt-0">

src/views/base/Collapses.vue

@@ -13,12 +13,16 @@
               </div>
             </CCardHeader>
             <div>
-              <CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
+              <CButton id="collapse1" variant="primary">
-              <CCollapse id="collapse1" class="mt-2">
+                Toggle Collapse
+              </CButton>
+              <CCollapse toggler="collapse1" class="mt-2">
                 <CCard>
                   <p class="card-text">Collapse contents Here</p>
-                  <CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
+                  <CButton id="collapse2" size="sm">
-                  <CCollapse id=collapse1_inner class="mt-2">
+                    Toggle Inner Collapse
+                  </CButton>
+                  <CCollapse toggler="collapse2" class="mt-2">
                     <CCard>Hello!</CCard>
                   </CCollapse>
                 </CCard>
@@ -26,19 +30,16 @@
             </div>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <!-- <CCol cols="12" md="6">
           <CCard>
             <CCardHeader slot="header">
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
             </CCardHeader>
             <div>
-              <!-- Using modifiers -->
               <CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
 
-              <!-- Using value -->
               <CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
 
-              <!-- element to collapse -->
               <CCollapse id="collapse2">
                 <CCard>
                   I am collapsible content!
@@ -92,10 +93,8 @@
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
             </CCardHeader>
             <div>
-              <!-- Single button triggers two CCollapse components -->
               <CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
 
-              <!-- elements to collapse -->
               <CCollapse id="collapseA" class="mt-2">
                 <CCard>
                   I am collapsable content A!
@@ -115,7 +114,7 @@
               <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
             </CCardHeader>
             <div role="tablist">
-              <CCard noWrapper class="mb-1">
+              <CCard  class="mb-1">
                 <CCardHeader slot="header"  class="p-1" role="tab">
                   <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
                 </CCardHeader>
@@ -130,7 +129,7 @@
                   </CCardBody>
                 </CCollapse>
               </CCard>
-              <CCard noWrapper class="mb-1">
+              <CCard  class="mb-1">
                 <CCardHeader slot="header"  class="p-1" role="tab">
                   <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
                 </CCardHeader>
@@ -142,7 +141,7 @@
                   </CCardBody>
                 </CCollapse>
               </CCard>
-              <CCard noWrapper class="mb-1">
+              <CCard  class="mb-1">
                 <CCardHeader slot="header"  class="p-1" role="tab">
                   <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
                 </CCardHeader>
@@ -156,7 +155,7 @@
               </CCard>
             </div>
           </CCard>
-        </CCol>
+        </CCol> -->
       </CRow>
     </div>
   </div>

src/views/base/Popovers.vue

@@ -11,10 +11,11 @@
           </div>
         </CCardHeader>
         <CRow>
-          <CCol cols="6">
+          <CCol cols="4">
             <div class="my-3 text-center">
               <CButton
-                v-c-popover.hover="{
+                variant="primary"
+                v-c-popover="{
                   header: 'Popover header',
                   content: 'I am popover content!'
                 }"
@@ -23,16 +24,31 @@
               </CButton>
             </div>
           </CCol>
-          <CCol cols="6">
+          <CCol cols="4">
             <div class="my-3 text-center">
               <CButton
                 variant="primary"
-                v-c-popover.hover.active="{
+                v-c-popover="{
                   header: 'Popover!',
-                  content: 'I start <strong>open</strong>'
+                  content: 'I start <strong>open</strong>',
+                  active: true
+                }"
+                text="Hover me"
+              />
+            </div>
+          </CCol>
+          <CCol cols="4">
+            <div class="my-3 text-center">
+              <CButton
+                variant="primary"
+                v-c-popover.click="{
+                  header: 'Popover!',
+                  content: 'I am showing on click and hiding on click outside tooltip!',
+                  placement: 'bottom',
+                  active: true
                 }"
               >
-                Button
+                Click me
               </CButton>
             </div>
           </CCol>
@@ -53,7 +69,7 @@
             >
               <CButton
                 variant="primary"
-                v-c-popover.hover.focus="{
+                v-c-popover="{
                   header: 'Popover!',
                   content: `Placement ${placement}`,
                   placement

src/views/base/Tables.vue

@@ -2,82 +2,61 @@
   <div class="animated fadeIn">
     <CRow>
       <CCol sm="12">
-        <CCard header="test1 ">
+        <CCard header="CTable power presentation">
-
-          <!-- <CTable :items="items.slice(0)"
-                  noSorting
-                  striped
-          /> -->
-
           <CTable :items="items.slice(0)"
-                   :fields="fields"
+                  :fields="fields"
-                   :activePage="page"
+                  :perPage="6"
-                   @pages-change="val => pages = val"
+                  indexColumn
-                   :perPage="5"
+                  filterRow
-                   ref="table"
+                  optionsRow
-                   indexCol="onlyFilter"
+                  loadings
-                   filterRow
+                  hover
-                   smalls
+                  :defaultSorter="{ name:'username', direction:'desc'}"
-                   noPagination
+                  :defaultColumnFilter="{ role:'staff' }"
-                   @row-clicked2="(item, index) => toggleDetails(index)"
-                   loadings
-                   hover
-                   striped
-                   optionsRow="onlyFilter2"
-                   :defaultSorter="{ name:'username', direction:'desc'}"
-                   defaultTableFilter="staff"
-                   :defaultColumnFilter="{username:'zby'}"
           >
-               <template slot="status-header" slot-scope="{item}">
+              <template #index-col="{index}">
-                Status scoped slot
+                <td
-              </template>
-
-              <!-- <tempalate slot="sorting-icon" slot-scope={state}>
-                {{state}}
-              </tempalate> -->
-              <!-- <td slot="status-filter" slot-scope="{clear, colName}" @click="clear">
-                <i class="cui-ban icons text-danger d-block mt-2 ml-1"></i>
-              </td> -->
-              <!-- <div slot="underTable">hehe</div>
-              <caption slot="caption" style="caption-side: top;">
-                This is a table caption at the top.
-              </caption> -->
-              <td slot="status" slot-scope="{item}">
-                <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
-              </td>
-              <td slot="show_details" slot-scope="{item, index}">
-                <button class="btn btn-primary" @click="toggleDetails(index)">
-                  {{details.includes(index) ? 'Hide' : 'Show'}}
-                </button>
-              </td>
-              <td slot="index-col"
-                  slot-scope="{index}"
                   @click="toggleDetails(index)"
                   style="cursor:pointer"
                   class="text-center"
-              >
+                >
-                <i class="icons font-lg d-block cui-chevron-right"
+                  <i
-                  style="transition: transform 0.4s"
+                    class="icons font-lg d-block cui-chevron-right"
-                  :style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
+                    style="transition: transform 0.4s"
-              </td>
+                    :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
-              <CCollapse :show="details.includes(index)"
+                  ></i>
-                         slot="details"
+                </td>
-                         slot-scope="{item, index}">
+              </template>
-                <CCardBody>
+              <template #status="{item}">
-                  {{index + 1}} - {{item}}
+                <td>
-                </CCardBody>
+                  <CBadge :variant="getBadge(item.status)">
-              </CCollapse>
+                    {{item.status}}
+                  </CBadge>
+                </td>
+              </template>
+              <template #show_details="{item, index}">
+                <td class="py-2">
+                  <CButton
+                    variant="outline-primary"
+                    square
+                    size="sm"
+                    @click="toggleDetails(index)"
+                    :text="details.includes(index) ? 'Hide' : 'Show'"
+                  />
+                </td>
+              </template>
+              <template #details="{item, index}">
+                <CCollapse :show="details.includes(index)">
+                  <CCardBody>
+                    {{index + 1}} - {{item}}
+                  </CCardBody>
+                </CCollapse>
+              </template>
           </CTable>
-          <CPagination v-show="pages > 1"
-                       v-model="page"
-                       :pages="pages"
-                       align="center"
-                       size="lg"
-          />
         </CCard>
       </CCol>
     </CRow>
-    <CRow>
+    <!-- <CRow>
       <CCol sm="12">
         <CCard header="test2">
           <CTable
@@ -86,8 +65,8 @@
             :perPage="5"
             indexCol="onlyCleaner"
             filterRow
-            optionsRow="onlyFilter"
+            optionsRow="onlyFiltesr"
-            :paginationProps="{align:'center', size:'lg'}"
+            :paginationProps="{align:'center'}"
           >
               <td slot="status" slot-scope="{item}">
                 <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
@@ -95,7 +74,7 @@
           </CTable>
         </CCard>
       </CCol>
-    </CRow>
+    </CRow> -->
 
 
     <CRow>
@@ -171,13 +150,12 @@
 <script>
 import CTableWrapper from './Table.vue'
 
-// const fields = ['username', 'registered', 'role']
 const fields = [
-  { key: 'username', label: 'UsErNaMe', _style:'width:40%'},
+  { key: 'username', _style:'width:40%' },
-  { key: 'registered' , style:'width:20%', noSorting: true, noFilter: true},
+  { key: 'registered' , style:'width:20%' },
-  { key: 'role', _classes: 'table-danger2', _style:'width:20%; color:bluse'},
+  { key: 'role', _style:'width:20%;' },
-  { key: 'status' },
+  { key: 'status', _style:'width:20%;' },
-  // { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
+  { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
   {number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
@@ -215,8 +193,6 @@ export default {
       items: items,
       fields: fields,
       page: 1,
-      page2: 1,
-      itemsNumber: 0,
       pages: null,
       details: []
     }
@@ -224,15 +200,10 @@ export default {
   methods: {
     getBadge (status) {
       return status === 'Active' ? 'success'
-            : status === 'Inactive' ? 'secondary'
+             : status === 'Inactive' ? 'secondary'
-            : status === 'Pending' ? 'warning'
+             : status === 'Pending' ? 'warning'
-            : status === 'Banned' ? 'danger' : 'primary'
+             : status === 'Banned' ? 'danger' : 'primary'
     },
-    // test () {
-    //   this.$refs.table.changeSort('username')
-    //   this.$refs.table.filter = 't'
-    //   // console.log(this.items)
-    // },
     shuffleArray (array) {
       for (let i = array.length - 1; i > 0; i--) {
         let j = Math.floor(Math.random() * (i + 1))
@@ -242,9 +213,6 @@ export default {
       }
       return array
     },
-    log(val) {
-      console.log(val)
-    },
     toggleDetails (index) {
       const position = this.details.indexOf(index)
       position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
@@ -253,10 +221,5 @@ export default {
       return this.shuffleArray(this.items.slice(0))
     }
   }
-  // computed: {
-  //   pages () {
-  //     return this.$refs.table.pages
-  //   }
-  // }
 }
 </script>

src/views/base/Tooltips.vue

@@ -13,17 +13,26 @@
           </div>
         </CCardHeader>
         <CRow>
-          <CCol cols="6">
+          <CCol cols="4">
             <div class="text-center my-3">
-              <CButton v-c-tooltip.hover="'I am a tooltip!'">
+              <CButton v-c-tooltip.hover.click="'I am a tooltip!'">
                 Hover Me
               </CButton>
             </div>
           </CCol>
-          <CCol cols="6">
+          <CCol cols="4">
             <div class="text-center my-3">
-              <CButton v-c-tooltip.hover.active="'I start open!'">
+              <CButton v-c-tooltip="{content: 'I start open!', active:true }">
-                Button
+                Hover me
+              </CButton>
+            </div>
+          </CCol>
+          <CCol cols="4">
+            <div class="text-center my-3">
+              <CButton v-c-tooltip.click="
+                'I am showing on click and hiding on click outside tooltip!'
+              ">
+                Click me
               </CButton>
             </div>
           </CCol>
@@ -135,10 +144,6 @@ export default {
   name: 'tooltips',
   data () {
     return {
-      // show: true,
-      // disabled: false,
-      // smh: 0,
-      // placement: 'bottom-end',
       placements: [
         'top-start', 'top', 'top-end',
         'bottom-start', 'bottom', 'bottom-end',