refactor: replace font icons with svg icons

package-lock.json

@@ -874,9 +874,9 @@
       }
     },
     "@coreui/coreui": {
-      "version": "3.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0-beta.0.tgz",
-      "integrity": "sha512-7qYuZyQ3H9soaXMtP+34YkqN7VveDJrPhb+FzfJ9OOk663vF47grvNjWSn1AqAv5JCU0mLHhH0+eu0chp+k6vA=="
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0-beta.1.tgz",
+      "integrity": "sha512-AneIQg1/Juw/tGwYyIrrRMHYWt0s9Sn2E/SwGnKtkh/pUxUwOkbT47cIWweA2LaR1Hl65Nb+LH4zd/ddp21Wug=="
     },
     "@coreui/coreui-chartjs": {
       "version": "file:../coreui-chartjs",
@@ -887,11 +887,15 @@
     "@coreui/icons": {
       "version": "file:../coreui-icons"
     },
+    "@coreui/icons-vue": {
+      "version": "file:../coreui-icons-vue"
+    },
     "@coreui/vue": {
       "version": "file:../coreui-vue",
       "requires": {
         "@coreui/coreui": "3.0.0-beta.0",
         "@coreui/icons": "github:coreui/coreui-icons#v1-alpha",
+        "@coreui/icons-vue": "github:coreui/coreui-icons-vue",
         "clone": "^2.1.2",
         "perfect-scrollbar": "^1.4.0",
         "popper.js": "^1.16.0",

package.json

@@ -14,9 +14,10 @@
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "3.0.0-beta.0",
+    "@coreui/coreui": "3.0.0-beta.1",
     "@coreui/coreui-chartjs": "../coreui-chartjs",
     "@coreui/icons": "../coreui-icons",
+    "@coreui/icons-vue": "../coreui-icons-vue",
     "@coreui/vue": "../coreui-vue",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3"

src/App.vue

@@ -9,8 +9,6 @@ export default {
 </script>
 
 <style lang="scss">
-  // CoreUI Icons Set
-  @import '~@coreui/icons/css/coreui-icons.min.css';
   // Import Main styles for this application
   @import 'assets/scss/style';
 </style>

src/assets/icons/icons.js

@@ -17,14 +17,117 @@ import {
   reddit,
   vimeo,
   ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
-} from '@coreui/icons/brands'
-import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags'
-import { iconSet } from '@coreui/icons'
+} from '@coreui/icons'
+import {
+  US,
+  BR,
+  IN,
+  FR,
+  ES,
+  PL
+} from '@coreui/icons'
+import {
+  arrowRight,
+  ban,
+  basket,
+  bell,
+  calculator,
+  calendar,
+  cloudDownload,
+  chartPie,
+  check,
+  chevronBottom,
+  chevronTop,
+  // circleCheck,
+  commentSquare,
+  cursor,
+  drop,
+  dollar,
+  envelopeClosed,
+  envelopeOpen,
+  euro,
+  globeAlt,
+  file,
+  justifyCenter,
+  laptop,
+  layers,
+  lightbulb,
+  list,
+  locationPin,
+  lockLocked,
+  magnifyingGlass,
+  moon,
+  pencil,
+  people,
+  puzzle,
+  settings,
+  shieldAlt,
+  speech,
+  speedometer,
+  star,
+  task,
+  user,
+  userFemale,
+  userFollow,
+  xCircle
+
+} from '@coreui/icons'
 
 export const iconsSet = Object.assign(
   {},
-  iconSet,
-  { US, BR, IN, FR, ES, PL },
+  {
+    arrowRight,
+    ban,
+    basket,
+    bell,
+    calculator,
+    calendar,
+    cloudDownload,
+    chartPie,
+    check,
+    chevronBottom,
+    chevronTop,
+    // circleCheck,
+    commentSquare,
+    cursor,
+    drop,
+    dollar,
+    envelopeClosed,
+    envelopeOpen,
+    euro,
+    globeAlt,
+    file,
+    justifyCenter,
+    laptop,
+    layers,
+    lightbulb,
+    list,
+    locationPin,
+    lockLocked,
+    magnifyingGlass,
+    moon,
+    pencil,
+    people,
+    puzzle,
+    settings,
+    shieldAlt,
+    speech,
+    speedometer,
+    star,
+    task,
+    user,
+    userFemale,
+    userFollow,
+    xCircle
+  },
+  {
+    US,
+    BR,
+    IN,
+    FR,
+    ES,
+    PL
+  },
   {
     facebook,
     twitter,

src/containers/TheHeader.vue

@@ -38,17 +38,17 @@
     <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
         <CHeaderNavLink>
-          <i class="cui-bell"></i>
+          <CIcon name="bell"/>
         </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
         <CHeaderNavLink>
-          <i class="cui-list"></i>
+          <CIcon name="list"/>
         </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
         <CHeaderNavLink>
-          <i class="cui-envelope-open"></i>
+          <CIcon name="envelope-open"/>
         </CHeaderNavLink>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>

src/containers/TheHeaderDropdownAccnt.vue

@@ -19,19 +19,19 @@
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="cui-bell mr-2"/> Updates
+      <CIcon name="bell"/> Updates
       <CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-envelope-open mr-2" /> Messages
+      <CIcon name="envelope-open" /> Messages
       <CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-task mr-2" /> Tasks
+      <CIcon name="task" /> Tasks
       <CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-comment-square mr-2" /> Comments
+      <CIcon name="comment-square" /> Comments
       <CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
@@ -42,25 +42,25 @@
       <strong>Settings</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="cui-user mr-2" /> Profile
+      <CIcon name="user" /> Profile
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-wrench mr-2" /> Settings
+      <CIcon name="settings" /> Settings
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-dollar mr-2" /> Payments
+      <CIcon name="dollar" /> Payments
       <CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-file mr-2" /> Projects
+      <CIcon name="file" /> Projects
       <CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
     <CDropdownItem>
-      <i class="cui-shield mr-2" /> Lock Account
+      <CIcon name="shield-alt" /> Lock Account
     </CDropdownItem>
     <CDropdownItem>
-      <i class="cui-lock-locked mr-2" /> Logout
+      <CIcon name="lock-locked" /> Logout
     </CDropdownItem>
   </CDropdown>
 </template>
@@ -75,3 +75,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .c-icon {
+    margin-right: 0.5rem;
+  }
+</style>

src/containers/_nav.js

@@ -7,7 +7,7 @@ export default [
         props: {
           name: 'Dashboard',
           to: '/dashboard',
-          icon: 'cui-speedometer',
+          icon: 'speedometer',
           badge: {
             color: 'primary',
             text: 'NEW'
@@ -25,7 +25,7 @@ export default [
         props: {
           name: 'Colors',
           to: '/theme/colors',
-          icon: 'cui-drop'
+          icon: 'drop'
         }
       }
     ],
@@ -35,7 +35,7 @@ export default [
         props: {
           name: 'Typography',
           to: '/theme/typography',
-          icon: 'cui-pencil'
+          icon: 'pencil'
         }
       }
     ],
@@ -49,7 +49,7 @@ export default [
         props: {
           name: 'Base',
           route: '/base',
-          icon: 'cui-puzzle',
+          icon: 'puzzle',
         }
       },
       [
@@ -59,7 +59,7 @@ export default [
             props: {
               name: 'Breadcrumbs',
               to: '/base/breadcrumbs',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -69,7 +69,7 @@ export default [
             props: {
               name: 'Cards',
               to: '/base/cards',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -79,7 +79,7 @@ export default [
             props: {
               name: 'Carousels',
               to: '/base/carousels',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -89,7 +89,7 @@ export default [
             props: {
               name: 'Collapses',
               to: '/base/collapses',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -99,7 +99,7 @@ export default [
             props: {
               name: 'Forms',
               to: '/base/forms',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -109,7 +109,7 @@ export default [
             props: {
               name: 'Jumbotrons',
               to: '/base/jumbotrons',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -119,7 +119,7 @@ export default [
             props: {
               name: 'List Groups',
               to: '/base/list-groups',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -129,7 +129,7 @@ export default [
             props: {
               name: 'Navs',
               to: '/base/navs',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -139,7 +139,7 @@ export default [
             props: {
               name: 'Navbars',
               to: '/base/navbars',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -149,7 +149,7 @@ export default [
             props: {
               name: 'Paginations',
               to: '/base/paginations',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -159,7 +159,7 @@ export default [
             props: {
               name: 'Popovers',
               to: '/base/popovers',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -169,7 +169,7 @@ export default [
             props: {
               name: 'Progress Bars',
               to: '/base/progress-bars',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -179,7 +179,7 @@ export default [
             props: {
               name: 'Switches',
               to: '/base/switches',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -189,7 +189,7 @@ export default [
             props: {
               name: 'Tables',
               to: '/base/tables',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -199,7 +199,7 @@ export default [
             props: {
               name: 'Tabs',
               to: '/base/tabs',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ],
@@ -209,7 +209,7 @@ export default [
             props: {
               name: 'Tooltips',
               to: '/base/tooltips',
-              icon: 'cui-puzzle'
+              icon: 'puzzle'
             }
           }
         ]
@@ -221,7 +221,7 @@ export default [
         props: {
           name: 'Buttons',
           route: '/buttons',
-          icon: 'cui-cursor',
+          icon: 'cursor',
         }
       },
       [
@@ -231,7 +231,7 @@ export default [
             props: {
               name: 'Buttons',
               to: '/buttons/standard-buttons',
-              icon: 'cui-cursor'
+              icon: 'cursor'
             }
           }
         ],
@@ -241,7 +241,7 @@ export default [
             props: {
               name: 'Button Dropdowns',
               to: '/buttons/dropdowns',
-              icon: 'cui-cursor'
+              icon: 'cursor'
             }
           }
         ],
@@ -251,7 +251,7 @@ export default [
             props: {
               name: 'Button Groups',
               to: '/buttons/button-groups',
-              icon: 'cui-cursor'
+              icon: 'cursor'
             }
           }
         ],
@@ -261,7 +261,7 @@ export default [
             props: {
               name: 'Brand Buttons',
               to: '/buttons/brand-buttons',
-              icon: 'cui-cursor'
+              icon: 'cursor'
             }
           }
         ]
@@ -273,7 +273,7 @@ export default [
         props: {
           name: 'Charts',
           to: '/charts',
-          icon: 'cui-pie-chart'
+          icon: 'chart-pie'
         }
       }
     ],
@@ -283,7 +283,7 @@ export default [
         props: {
           name: 'Icons',
           route: '/icons',
-          icon: 'cui-star',
+          icon: 'star',
         }
       },
       [
@@ -293,7 +293,7 @@ export default [
             props: {
               name: 'CoreUI Icons',
               to: '/icons/coreui-icons',
-              icon: 'cui-star',
+              icon: 'star',
               badge: {
                 color: 'info',
                 text: 'NEW'
@@ -307,7 +307,7 @@ export default [
             props: {
               name: 'Brands',
               to: '/icons/brands',
-              icon: 'cui-star'
+              icon: 'star'
             }
           }
         ],
@@ -317,7 +317,7 @@ export default [
             props: {
               name: 'Flags',
               to: '/icons/flags',
-              icon: 'cui-star'
+              icon: 'star'
             }
           }
         ]
@@ -329,7 +329,7 @@ export default [
         props: {
           name: 'Notifications',
           route: '/notifications',
-          icon: 'cui-bell',
+          icon: 'bell',
         }
       },
       [
@@ -339,7 +339,7 @@ export default [
             props: {
               name: 'Alerts',
               to: '/notifications/alerts',
-              icon: 'cui-bell'
+              icon: 'bell'
             }
           }
         ],
@@ -349,7 +349,7 @@ export default [
             props: {
               name: 'Badges',
               to: '/notifications/badges',
-              icon: 'cui-bell'
+              icon: 'bell'
             }
           }
         ],
@@ -359,7 +359,7 @@ export default [
             props: {
               name: 'Modals',
               to: '/notifications/modals',
-              icon: 'cui-bell'
+              icon: 'bell'
             }
           }
         ]
@@ -371,11 +371,11 @@ export default [
         props: {
           name: 'Widgets',
           to: '/widgets',
-          icon: 'cui-calculator',
+          icon: 'calculator',
           badge: {
             color: 'primary',
             text: 'NEW',
-            pill: true
+            shape: 'pill'
           }
         }
       }
@@ -393,7 +393,7 @@ export default [
         props: {
           name: 'Pages',
           route: '/pages',
-          icon: 'cui-star',
+          icon: 'star',
         }
       },
       [
@@ -403,7 +403,7 @@ export default [
             props: {
               name: 'Login',
               to: '/pages/login',
-              icon: 'cui-star'
+              icon: 'star'
             }
           }
         ],
@@ -413,7 +413,7 @@ export default [
             props: {
               name: 'Register',
               to: '/pages/register',
-              icon: 'cui-star'
+              icon: 'star'
             }
           }
         ],
@@ -423,7 +423,7 @@ export default [
             props: {
               name: 'Error 404',
               to: '/pages/404',
-              icon: 'cui-star'
+              icon: 'star'
             }
           }
         ],
@@ -433,7 +433,7 @@ export default [
             props: {
               name: 'Error 500',
               to: '/pages/500',
-              icon: 'cui-star'
+              icon: 'star'
             }
           }
         ]
@@ -445,7 +445,7 @@ export default [
         props: {
           name: 'Download CoreUI',
           href: 'http://coreui.io/vue/',
-          icon: 'cui-cloud-download',
+          icon: 'cloud-download',
           addLinkClasses: 'c-nav-link-success',
           target: '_blank'
         },
@@ -460,7 +460,7 @@ export default [
         props: {
           name: 'Try CoreUI PRO',
           href: 'http://coreui.io/pro/vue/',
-          icon: 'cui-layers',
+          icon: 'layers',
           addLinkClasses: 'c-nav-link-danger',
           target: '_blank'
         }

src/main.js

@@ -2,16 +2,15 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import CoreuiVue from '@coreui/vue/src'
-import { CIconPlugin } from '@coreui/icons/vue'
-import { iconsSet } from './assets/icons/icons.js'
+import { iconsSet as icons } from './assets/icons/icons.js'
 
 Vue.config.performance = true
 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin, iconsSet)
 
 new Vue({
   el: '#app',
   router,
+  icons,
   template: '<App/>',
   components: {
     App

src/views/Dashboard.vue

@@ -10,7 +10,7 @@
           </CCol>
           <CCol sm="7" class="d-none d-md-block">
             <CButton color="primary" class="float-right">
-              <i class="cui-cloud-download"></i>
+              <CIcon name="cloud-download"/>
             </CButton>
             <CButtonGroup class="float-right mr-3">
               <CButton
@@ -265,7 +265,7 @@
               <ul class="horizontal-bars type-2">
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="cui-user progress-group-icon"></i>
+                    <CIcon name="user" class="progress-group-icon"/>
                     <span class="title">Male</span>
                     <span class="ml-auto font-weight-bold">43%</span>
                   </div>
@@ -279,7 +279,7 @@
                 </div>
                 <div class="progress-group mb-5">
                   <div class="progress-group-header">
-                    <i class="cui-user-female progress-group-icon"></i>
+                    <CIcon name="user-female" class="progress-group-icon"/>
                     <span class="title">Female</span>
                     <span class="ml-auto font-weight-bold">37%</span>
                   </div>
@@ -293,7 +293,7 @@
                 </div>
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="cui-globe progress-group-icon"></i>
+                    <CIcon name="globe-alt" class="progress-group-icon"/>
                     <span class="title">Organic Search</span>
                     <span class="ml-auto font-weight-bold">
                       191,235<span class="text-muted small">(56%)</span>
@@ -369,7 +369,7 @@
                 </div>
                 <div class="divider text-center">
                   <CButton color="link" size="sm" class="text-muted">
-                    <i class="cui-options"></i>
+                    <CIcon name="options"/>
                   </CButton>
                 </div>
               </ul>

src/views/base/Breadcrumbs.vue

@@ -3,7 +3,7 @@
     <CCol col>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
+          <CIcon name="justify-center"/><strong> Bootstrap Breadcrumb</strong>
           <div class="card-header-actions">
             <a 
               href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 

src/views/base/Cards.vue

@@ -25,10 +25,10 @@
         <CCard footer-html="Card Footer" :body-html="loremIpsum" />
       </CCol>
       <CCol sm="6" md="4">
-        <CCard
-          headerHtml="<i class='cui-check'></i> Card with icon"
-          :bodyHtml="loremIpsum"
-        />
+        <CCard>
+          <CCardHeader><CIcon name="check"/> Card with icon</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
@@ -240,13 +240,13 @@
               Card with header actions
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
-                  <i class="cui-settings"></i>
+                  <CIcon name="settings"/>
                 </CLink>
                 <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
-                  <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
+                  <CIcon :name="`chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
-                  <i class="cui-circle-x"></i>
+                  <CIcon name="x-circle"/>
                 </CLink>
               </div>
             </CCardHeader>

src/views/base/Carousels.vue

@@ -3,7 +3,7 @@
     <CCol md="12" lg="7">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Bootstrap Carousel</strong>
           <div class="card-header-actions">
             <a 

src/views/base/Collapses.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Bootstrap Collapse </strong>
           <div class="card-header-actions">
             <a 

src/views/base/Forms.vue

@@ -245,8 +245,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -276,8 +276,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -307,8 +307,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -337,8 +337,8 @@
               />
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-              <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
+              <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
             </CCardFooter>
           </CForm>
         </CCard>
@@ -399,8 +399,8 @@
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="user"/> Login</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -427,8 +427,8 @@
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -488,25 +488,26 @@
             <strong>Icon/Text</strong> Groups
           </CCardHeader>
           <CCardBody>
-            <CInput
-              placeholder="Username"
-              prependHtml="<i class='cui-user'></i>"
-            />
+            <CInput placeholder="Username">
+              <template #prepend-content><CIcon name="user"/></template>
+            </CInput>
             <CInput
               type="email"
               placeholder="Email"
               autocomplete="email"
-              append-html="<i class='cui-envelope-open'></i>"
-            />
+            >
+              <template #append-content><CIcon name="envelope-open"/></template>
+            </CInput>
             <CInput
-              prependHtml="<i class='cui-euro'></i>"
               placeholder="ex. $1.000.000"
-              append-html=".00"
-            />
+              append=".00"
+            >
+              <template #prepend-content><CIcon name="euro"/></template>
+            </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -519,7 +520,7 @@
             <CInput placeholder="Username">
               <template #prepend>
                 <CButton color="primary">
-                  <i class="cui-magnifying-glass"></i> Search
+                  <CIcon name="magnifying-glass"/> Search
                 </CButton>
               </template>
             </CInput>
@@ -546,8 +547,8 @@
             </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -619,8 +620,8 @@
             </CInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -691,22 +692,23 @@
           </CCardHeader>
           <CCardBody>
             <CForm>
+              <CInput prepend="Username">
+                <template #append-content><CIcon name="user"/></template>
+              </CInput>
               <CInput
-                prepend-html="Username"
-                append-html="<i class='cui-user'></i>"
-              />
-              <CInput
-                prepend-html="Email"
                 type="email"
                 autocomplete="email"
-                append-html="<i class='cui-envelope-closed'></i>"
-              />
+                prepend="Email"
+              >
+                <template #append-content><CIcon name="envelope-closed"/></template>
+              </CInput>
               <CInput
-                prepend-html="Password"
                 type="password"
                 autocomplete="current-password"
-                append-html="<i class='cui-shield'></i>"
-              />
+                prepend="Password"
+              >
+                <template #append-content><CIcon name="shield-alt"/></template>
+              </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" size="sm" color="primary">
                   Submit
@@ -723,22 +725,23 @@
           </CCardHeader>
           <CCardBody>
             <CForm>
-              <CInput
-                placeholder="Username"
-                append-html="<i class='cui-user'></i>"
-              />
+              <CInput placeholder="Username">
+                <template #append-content><CIcon name="user"/></template>
+              </CInput>
               <CInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                append-html="<i class='cui-envelope-closed'></i>"
-              />
+              >
+                <template #append-content><CIcon name="envelope-closed"/></template>
+              </CInput>
               <CInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                append-html="<i class='cui-shield'></i>"
-              />
+              >
+                <template #append-content><CIcon name="shield-alt"/></template>
+              </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" class="btn btn-sm btn-secondary">
                   Submit
@@ -755,22 +758,23 @@
           </CCardHeader>
           <CCardBody>
             <CForm>
-              <CInput
-                placeholder="Username"
-                prependHtml="<i class='cui-user'></i>"
-              />
+              <CInput placeholder="Username">
+                <template #prepend-content><CIcon name="user"/></template>
+              </CInput>
               <CInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                prependHtml="<i class='cui-envelope-closed'></i>"
-              />
+              >
+                <template #prepend-content><CIcon name="envelope-closed"/></template>
+              </CInput>
               <CInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                prependHtml="<i class='cui-shield'></i>"
               />
+                <template #prepend-content><CIcon name="shield-alt"/></template>
+              </CInput>
               <div class="form-group form-actions">
                 <CButton type="submit" size="sm" color="success">
                   Submit
@@ -786,19 +790,19 @@
         <transition name="fade">
           <CCard v-if="show">
             <CCardHeader>
-              <i class="cui-pencil"></i> Form Elements
+              <CIcon name="pencil"/> Form Elements
               <div class="card-header-actions">
                 <CLink href="#" class="card-header-action btn-setting">
-                  <i class="cui-settings"></i>
+                  <CIcon name="settings"/>
                 </CLink>
                 <CLink
                   class="card-header-action btn-minimize"
                   @click="formCollapsed=!formCollapsed"
                 >
-                  <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
+                  <CIcon :name="`chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
                 </CLink>
                 <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
-                  <i class="cui-circle-x"></i>
+                  <CIcon name="x-circle"/>
                 </CLink>
               </div>
             </CCardHeader>
@@ -806,21 +810,21 @@
               <CCardBody>
                 <CInput
                   label="Prepended text"
-                  prepend-html="@"
                   description="Here's some help text"
                   type="email"
                   autocomplete="email"
+                  prepend="@"
                 />
                 <CInput
                   label="Appended text"
-                  append-html=".00"
+                  append=".00"
                   description="Here's some help text"
                 />
                 <CInput
                   label="Appended and prepended text"
-                  prepend-html="$"
-                  append-html=".00"
+                  append=".00"
                   description="Here's some help text"
+                  prepend="$"
                 />
                 <CInput
                   label="Append with button"

src/views/base/Jumbotrons.vue

@@ -4,7 +4,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Bootstrap Jumbotron </strong>
             <div class="card-header-actions">
               <a 
@@ -30,7 +30,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <CIcon name="justify-center"/> <strong> Jumbotron </strong>
             <small>with slots</small>
           </CCardHeader>
           <CCardBody>
@@ -56,7 +56,7 @@
       <CCol>
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <CIcon name="justify-center"/> <strong> Jumbotron </strong>
             <small>colors</small>
           </CCardHeader>
           <CCardBody>

src/views/base/ListGroups.vue

@@ -4,7 +4,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Bootstrap list group </strong>
             <div class="card-header-actions">
               <a 
@@ -31,7 +31,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
+            <CIcon name="justify-center"/><strong> List group </strong><small>active items</small>
           </CCardHeader>
           <CCardBody>
             <CListGroup>
@@ -49,7 +49,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>disabled items</small>
           </CCardHeader>
@@ -67,7 +67,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>actionable items</small>
           </CCardHeader>
@@ -86,7 +86,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>buttons</small>
           </CCardHeader>
@@ -103,7 +103,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>with badges</small>
           </CCardHeader>
@@ -136,7 +136,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>colors</small>
           </CCardHeader>
@@ -158,7 +158,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>colors active</small>
           </CCardHeader>
@@ -182,7 +182,7 @@
       <CCol col="12">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> List group </strong>
             <small>inside cards</small>
           </CCardHeader>
@@ -223,7 +223,7 @@
       <CCol md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
+            <CIcon name="justify-center"/><strong> List group </strong><small>custom content</small>
           </CCardHeader>
           <CCardBody>
             <CListGroup>

src/views/base/Navbars.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navbar </strong>
         <div class="card-header-actions">
           <a 
@@ -67,7 +67,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="justify-center"/> <strong> Navbar </strong>
         <small>brand</small>
       </CCardHeader>
       <CCardBody>
@@ -82,7 +82,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="justify-center"/> <strong> Navbar </strong>
         <small>text</small>
       </CCardHeader>
       <CCardBody>
@@ -99,7 +99,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="justify-center"/> <strong> Navbar </strong>
         <small>dropdown</small>
       </CCardHeader>
       <CCardBody>
@@ -135,7 +135,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="justify-center"/> <strong> Navbar </strong>
         <small>form</small>
       </CCardHeader>
       <CCardBody>
@@ -153,7 +153,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="justify-center"/> <strong> Navbar </strong>
         <small>input group</small>
       </CCardHeader>
       <CCardBody>

src/views/base/Navs.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
+        <CIcon name="justify-center"/><strong> Bootstrap Navs</strong>
         <div class="card-header-actions">
           <a 
             href="https://coreui.io/vue/docs/3.0/components/Nav" 
@@ -25,14 +25,14 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>icons</small>
       </CCardHeader>
       <CCardBody>
         <CNav>
           <CNavItem active>
-            <i class="cui-basket-loaded"></i>
+            <CIcon name="basket"/>
           </CNavItem>
           <CNavItem>
             Link
@@ -46,7 +46,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>tab style</small>
       </CCardHeader>
@@ -67,7 +67,7 @@
     </CCard>
     <CCard>
       <CCardHeader @click="item++">
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>pill style</small>
       </CCardHeader>
@@ -82,7 +82,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>fill tabs</small>
       </CCardHeader>
@@ -97,7 +97,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>justified tabs</small>
       </CCardHeader>
@@ -112,7 +112,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>dropdown support</small>
       </CCardHeader>
@@ -137,7 +137,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Navs </strong>
         <small>vertical variation</small>
       </CCardHeader>

src/views/base/Paginations.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Responsive bootstrap Pagination</strong>
         <div class="card-header-actions">
           <a 
@@ -47,7 +47,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Pagination </strong>
         <small>alignment</small>
       </CCardHeader>

src/views/base/Popovers.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Popovers</strong>
         <div class="card-header-actions">
           <a 
@@ -49,7 +49,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Popovers </strong>
         <small>placement</small>
       </CCardHeader>

src/views/base/ProgressBars.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Progress</strong>
         <div class="card-header-actions">
           <a 
@@ -33,7 +33,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
+        <CIcon name="justify-center"/> <strong> Progress </strong><small>labels</small>
       </CCardHeader>
       <CCardBody>
         <h6>No label</h6>
@@ -50,7 +50,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Progress </strong>
         <small>width</small>
       </CCardHeader>
@@ -65,7 +65,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Progress </strong>
         <small>height</small>
       </CCardHeader>
@@ -80,7 +80,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Progress </strong>
         <small>colors</small>
       </CCardHeader>
@@ -99,7 +99,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Progress </strong>
         <small>striped</small>
       </CCardHeader>
@@ -135,7 +135,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Progress </strong>
         <small>animated</small>
       </CCardHeader>
@@ -174,7 +174,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Progress </strong>
         <small>multiple bars</small>
       </CCardHeader>

src/views/base/Table.vue

@@ -1,5 +1,9 @@
 <template>
-  <CCard :header="caption" body-wrapper>
+  <CCard>
+    <CCardHeader>
+      <CIcon name="justify-center"/> {{caption}}
+    </CCardHeader>
+    <CCardBody>
       <CDataTable
         :hover="hover"
         :striped="striped"
@@ -18,6 +22,7 @@
           </td>
         </template>
       </CDataTable>
+    </CCardBody>
   </CCard>
 </template>
 

src/views/base/Tables.vue

@@ -4,7 +4,7 @@
       <CCol lg="6">
         <CTableWrapper
           :items="getShuffledUsersData()"
-          caption="<i class='fa fa-align-justify'></i> Simple Table"
+          caption="Simple Table"
         />
       </CCol>
 
@@ -12,7 +12,7 @@
         <CTableWrapper
           :items="getShuffledUsersData()"
           striped
-          caption="<i class='fa fa-align-justify'></i> Striped Table"
+          caption="Striped Table"
         />
       </CCol>
     </CRow>
@@ -22,7 +22,7 @@
         <CTableWrapper
           :items="getShuffledUsersData()"
           small
-          caption="<i class='fa fa-align-justify'></i> Condensed Table"
+          caption="Condensed Table"
         />
       </CCol>
 
@@ -31,7 +31,7 @@
           :items="getShuffledUsersData()"
           fixed
           bordered
-          caption="<i class='fa fa-align-justify'></i> Bordered Table"
+          caption="Bordered Table"
         />
       </CCol>
     </CRow>
@@ -45,7 +45,7 @@
           bordered
           small
           fixed
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+          caption="Combined All Table"
         />
       </CCol>
     </CRow>
@@ -60,7 +60,7 @@
           small
           fixed
           dark
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+          caption="Combined All Table"
         />
       </CCol>
     </CRow>

src/views/base/Tabs.vue

@@ -84,7 +84,7 @@
             <CTabs>
               <CTab active>
                 <template slot="title">
-                  <i class="cui-calculator"></i>
+                  <CIcon name="calculator"/>
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -94,7 +94,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-basket-loaded"></i>
+                  <CIcon name="basket"/>
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -104,7 +104,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-chart-piechart"></i>
+                  <CIcon name="chart-pie"/>
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -125,7 +125,7 @@
             <CTabs add-tab-classes="mt-1">
               <CTab active>
                 <template slot="title">
-                  <i class="cui-calculator"></i> {{tabs[0]}}
+                  <CIcon name="calculator"/> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -135,7 +135,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
+                  <CIcon name="basket"/> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -145,7 +145,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-chart-piechart"></i> {{tabs[2]}}
+                  <CIcon name="chart-pie"/> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -166,7 +166,7 @@
             <CTabs variant="pills" vertical>
               <CTab active>
                 <template slot="title">
-                  <i class="cui-calculator"></i> {{tabs[0]}}
+                  <CIcon name="calculator"/> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -176,7 +176,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
+                  <CIcon name="basket"/> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -186,7 +186,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-chart-piechart"></i> {{tabs[2]}}
+                  <CIcon name="chart-pie"/> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

src/views/base/Tooltips.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Bootstrap Tooltips </strong>
         <small><code>v-c-tooltip</code> directive</small>
         <div class="card-header-actions">
@@ -43,7 +43,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="justify-center"/>
         <strong> Tooltips </strong>
         <small>placement</small>
       </CCardHeader>

src/views/buttons/ButtonGroups.vue

@@ -3,7 +3,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Bootstrap button group</strong>
           <div class="card-header-actions">
             <a 
@@ -41,7 +41,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Button group </strong>sizing
         </CCardHeader>
         <CCardBody>
@@ -70,7 +70,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
+          <CIcon name="justify-center"/><strong> Button group </strong>dropdown support
         </CCardHeader>
         <CCardBody>
           <div>
@@ -98,7 +98,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Button group </strong>vertical variation
         </CCardHeader>
         <CCardBody>
@@ -115,7 +115,7 @@
     <CCol col="12">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Button toolbar </strong>
           <small>with button groups</small>
           <!-- <div class="card-header-actions">
@@ -152,17 +152,17 @@
             <CInput
               class="mb-0 w-25 mx-1"
               size="sm"
-              prepend-html="$"
-              append-html=".00"
+              append=".00"
               value="100"
+              prepend="$"
             />
             <CSelect
               class="mb-0 w-25 mx-1"
               size="sm"
-              prepend-html="Size"
               value="Medium"
               :options="['Large','Medium','Small']"
               custom
+              prepend="Size"
             />
             <CButtonGroup size="sm" class="mx-1">
               <CButton color="secondary">Save</CButton>

src/views/buttons/Dropdowns.vue

@@ -4,7 +4,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Bootstrap Dropdown</strong>
             <div class="card-header-actions">
               <a 
@@ -69,7 +69,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Dropdown </strong>
             <small>positioning</small>
           </CCardHeader>
@@ -140,7 +140,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Dropdown </strong>
             <small>hidden caret</small>
           </CCardHeader>
@@ -165,7 +165,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Dropdown </strong>
             <small>sizing</small>
           </CCardHeader>
@@ -222,7 +222,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Dropdown </strong>
             <small>headers and accessibility</small>
           </CCardHeader>
@@ -254,7 +254,7 @@
       <CCol col="12" md="6">
         <CCard>
           <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="justify-center"/>
             <strong> Dropdown </strong>
             <small><code>color</code></small>
           </CCardHeader>

src/views/buttons/StandardButtons.vue

@@ -604,27 +604,27 @@
         <CRow class="align-items-center">
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="primary">
-              <i class="cui-lightbulb"></i>&nbsp;Standard Button
+              <CIcon name="lightbulb"/>&nbsp;Standard Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="secondary" variant="outline">
-              <i class="cui-lightbulb"></i>&nbsp;Outline Button
+              <CIcon name="lightbulb"/>&nbsp;Outline Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="success">
-              <i class="cui-lightbulb"></i>&nbsp;Ghost Button
+              <CIcon name="lightbulb"/>&nbsp;Ghost Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="warning" square>
-              <i class="cui-lightbulb"></i>&nbsp;Square Button
+              <CIcon name="lightbulb"/>&nbsp;Square Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
             <CButton color="danger" shape="pill">
-              <i class="cui-lightbulb"></i>&nbsp;Pill Button
+              <CIcon name="lightbulb"/>&nbsp;Pill Button
             </CButton>
           </CCol>
         </CRow>

src/views/icons/Brands.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-globe"></i>Font Awesome brand icons
+        <CIcon name="globe-alt"/>Font Awesome brand icons
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">

src/views/icons/Flags.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-globe"></i> Flags
+        <CIcon name="globe-alt"/> Flags
       </CCardHeader>
       <CCardBody>
         <CRow class="text-center">

src/views/notifications/Alerts.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Bootstrap Alert</strong>
           <div class="card-header-actions">
             <a 
@@ -34,7 +34,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alert
+          <CIcon name="justify-center"/> Alert
           <small> use <code>.alert-link</code> to provide links</small>
         </CCardHeader>
         <CCardBody>
@@ -72,7 +72,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
+          <CIcon name="justify-center"/> Alerts <small>with additional content</small>
         </CCardHeader>
         <CCardBody>
           <CAlert show color="success">
@@ -93,7 +93,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts
+          <CIcon name="justify-center"/> Alerts
           <small>dismissible</small>
         </CCardHeader>
         <CCardBody>
@@ -131,7 +131,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts
+          <CIcon name="justify-center"/> Alerts
           <small>auto dismissible</small>
         </CCardHeader>
         <CCardBody>

src/views/notifications/Badges.vue

@@ -3,7 +3,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="justify-center"/>
           <strong> Bootstrap Badge</strong>
           <div class="card-header-actions">
             <a 
@@ -34,7 +34,7 @@
     <CCol col="12" md="6">
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
+          <CIcon name="justify-center"/> Badge
           <small>contextual variations</small>
         </CCardHeader>
         <CCardBody>
@@ -50,7 +50,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
+          <CIcon name="justify-center"/> Badge
           <small>shape="pill"</small>
         </CCardHeader>
         <CCardBody>
@@ -66,7 +66,7 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
+          <CIcon name="justify-center"/> Badge
           <small>actionable</small>
         </CCardHeader>
         <CCardBody>

src/views/notifications/Modals.vue

@@ -5,7 +5,7 @@
         <CCol col="12">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i> Bootstrap Modals
+              <CIcon name="justify-center"/> Bootstrap Modals
               <div class="card-header-actions">
                 <a 
                   href="https://coreui.io/vue/docs/3.0/components/Modal" 

src/views/pages/Login.vue

@@ -9,16 +9,18 @@
                 <h1>Login</h1>
                 <p class="text-muted">Sign In to your account</p>
                 <CInput
-                  prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
                   autocomplete="username email"
-                />
+                >
+                  <template #prepend-content><CIcon name="user"/></template>
+                </CInput>
                 <CInput
-                  prependHtml="<i class='cui-lock-locked'></i>"
                   placeholder="Password"
                   type="password"
                   autocomplete="curent-password"
-                />
+                >
+                  <template #prepend-content><CIcon name="lock-locked"/></template>
+                </CInput>
                 <CRow>
                   <CCol col="6">
                     <CButton color="primary" class="px-4">Login</CButton>

src/views/pages/Page404.vue

@@ -10,9 +10,9 @@
         </div>
         <CInput
           class="mb-3"
-          prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
+          <template #prepend-content><CIcon name="magnifying-glass"/></template>
           <template #append>
             <CButton color="info">Search</CButton>
           </template>

src/views/pages/Page500.vue

@@ -9,9 +9,9 @@
         </div>
         <CInput
           class="mb-3"
-          prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
+          <template #prepend-content><CIcon name="magnifying-glass"/></template>
           <template #append>
             <CButton color="info">Search</CButton>
           </template>

src/views/pages/Register.vue

@@ -9,27 +9,30 @@
               <p class="text-muted">Create your account</p>
               <CInput
                 placeholder="Username"
-                prependHtml="<i class='cui-user'></i>"
                 autocomplete="username"
-              />
+              >
+                <template #prepend-content><CIcon name="user"/></template>
+              </CInput>
               <CInput
                 placeholder="Email"
-                prepend-html="@"
                 autocomplete="email"
+                prepend="@"
               />
               <CInput
                 placeholder="Password"
                 type="password"
-                prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
-              />
+              >
+                <template #prepend-content><CIcon name="lock-locked"/></template>
+              </CInput>
               <CInput
                 placeholder="Repeat password"
                 type="password"
-                prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
                 class="mb-4"
-              />
+              >
+                <template #prepend-content><CIcon name="lock-locked"/></template>
+              </CInput>
               <CButton color="success" block>Create Account</CButton>
             </CForm>
           </CCardBody>

src/views/theme/Colors.vue

@@ -2,7 +2,7 @@
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-drop"></i> Theme colors
+        <CIcon name="drop"/> Theme colors
       </CCardHeader>
       <CCardBody>
         <CRow>
@@ -21,7 +21,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="cui-drop"></i> Grays
+        <CIcon name="drop"/> Grays
       </CCardHeader>
       <CCardBody>
         <CRow>

src/views/widgets/WidgetsDropdown.vue

@@ -9,7 +9,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-              <i class="cui-settings"></i>
+              <CIcon name="settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -38,10 +38,9 @@
             color="transparent p-0"
             placement="bottom-end"
             :caret="false"
-            buttonHtml="<i class='cui-location-pin'></i>"
           >
             <template #toggler-content>
-              <i class="cui-location-pin"></i>
+              <CIcon name="location-pin"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -76,7 +75,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-              <i class="cui-settings"></i>
+              <CIcon name="settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -110,7 +109,7 @@
             placement="bottom-end"
           >
             <template #toggler-content>
-             <i class="cui-settings"></i>
+             <CIcon name="settings"/>
             </template>
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>

tests/unit/containers/__snapshots__/TheHeader.spec.js.snap

@@ -1,192 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TheHeader.vue renders correctly 1`] = `
-<cheader-stub
-  colorscheme="light"
-  fixed="true"
-  light=""
-  tag="header"
-  withsubheader="true"
->
-  <ctoggler-stub
-    class="ml-3 d-lg-none"
-    inheader="true"
-    tag="button"
-  />
-   
-  <ctoggler-stub
-    class="ml-3 d-md-down-none"
-    inheader="true"
-    tag="button"
-  />
-   
-  <cheaderbrand-stub
-    alt="CoreUI Logo"
-    class="mx-auto d-lg-none"
-    height="46"
-    src="img/brand/coreui-base.svg"
-    width="97"
-    wrappedinlink="[object Object]"
-  />
-   
-  <cheadernav-stub
-    class="d-md-down-none mr-auto"
-  >
-    <cheadernavitem-stub
-      activeclass="active"
-      class="px-3"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-      to="/dashboard"
-    >
-      <cheadernavlink-stub
-        activeclass="active"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        
-        Dashboard
-      
-      </cheadernavlink-stub>
-    </cheadernavitem-stub>
-     
-    <cheadernavitem-stub
-      activeclass="active"
-      class="px-3"
-      event="click"
-      exact="true"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-      to="/users"
-    >
-      <cheadernavlink-stub
-        activeclass="active"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        
-        Users
-      
-      </cheadernavlink-stub>
-    </cheadernavitem-stub>
-     
-    <cheadernavitem-stub
-      activeclass="active"
-      class="px-3"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      <cheadernavlink-stub
-        activeclass="active"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        
-        Settings
-      
-      </cheadernavlink-stub>
-    </cheadernavitem-stub>
-  </cheadernav-stub>
-   
-  <cheadernav-stub
-    class="mr-4"
-  >
-    <cheadernavitem-stub
-      activeclass="active"
-      class="d-md-down-none mx-2"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      <cheadernavlink-stub
-        activeclass="active"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        <i
-          class="cui-bell"
-        />
-      </cheadernavlink-stub>
-    </cheadernavitem-stub>
-     
-    <cheadernavitem-stub
-      activeclass="active"
-      class="d-md-down-none mx-2"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      <cheadernavlink-stub
-        activeclass="active"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        <i
-          class="cui-list"
-        />
-      </cheadernavlink-stub>
-    </cheadernavitem-stub>
-     
-    <cheadernavitem-stub
-      activeclass="active"
-      class="d-md-down-none mx-2"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      <cheadernavlink-stub
-        activeclass="active"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        <i
-          class="cui-envelope-open"
-        />
-      </cheadernavlink-stub>
-    </cheadernavitem-stub>
-     
-    <theheaderdropdownaccnt-stub />
-  </cheadernav-stub>
-   
-  <csubheader-stub
-    class="px-3"
-    tag="div"
-  >
-    <cbreadcrumbrouter-stub
-      class="border-0"
-    />
-  </csubheader-stub>
-</cheader-stub>
-`;

tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap

@@ -1,250 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
-<cdropdown-stub
-  addmenuclasses="pt-0"
-  caret="true"
-  class="c-header-nav-items"
-  flip="true"
-  innav="true"
-  placement="bottom-end"
-  togglertext="Dropdown"
->
-   
-  <cdropdownheader-stub
-    class="text-center"
-    color="light"
-    tag="div"
-  >
-    <strong>
-      Account
-    </strong>
-  </cdropdownheader-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-bell mr-2"
-    />
-     Updates
-    
-    <cbadge-stub
-      activeclass="active"
-      class="ml-auto"
-      color="info"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      42
-    </cbadge-stub>
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-envelope-open mr-2"
-    />
-     Messages
-    
-    <cbadge-stub
-      activeclass="active"
-      class="ml-auto"
-      color="success"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      42
-    </cbadge-stub>
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-task mr-2"
-    />
-     Tasks
-    
-    <cbadge-stub
-      activeclass="active"
-      class="ml-auto"
-      color="danger"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      42
-    </cbadge-stub>
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-comment-square mr-2"
-    />
-     Comments
-    
-    <cbadge-stub
-      activeclass="active"
-      class="ml-auto"
-      color="warning"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      42
-    </cbadge-stub>
-  </cdropdownitem-stub>
-   
-  <cdropdownheader-stub
-    class="text-center"
-    color="light"
-    tag="div"
-  >
-    <strong>
-      Settings
-    </strong>
-  </cdropdownheader-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-user mr-2"
-    />
-     Profile
-  
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-wrench mr-2"
-    />
-     Settings
-  
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-dollar mr-2"
-    />
-     Payments
-    
-    <cbadge-stub
-      activeclass="active"
-      class="ml-auto"
-      color="secondary"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      42
-    </cbadge-stub>
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-file mr-2"
-    />
-     Projects
-    
-    <cbadge-stub
-      activeclass="active"
-      class="ml-auto"
-      color="primary"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
-    >
-      42
-    </cbadge-stub>
-  </cdropdownitem-stub>
-   
-  <cdropdowndivider-stub
-    tag="div"
-  />
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-shield mr-2"
-    />
-     Lock Account
-  
-  </cdropdownitem-stub>
-   
-  <cdropdownitem-stub
-    activeclass="active"
-    event="click"
-    exactactiveclass="active"
-    routertag="a"
-    target="_self"
-  >
-    <i
-      class="cui-lock-locked mr-2"
-    />
-     Logout
-  
-  </cdropdownitem-stub>
-</cdropdown-stub>
-`;

tests/unit/views/__snapshots__/Dashboard.spec.js.snap

@@ -1,954 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dashboard.vue renders correctly 1`] = `
-<div>
-  <widgetsdropdown-stub />
-   
-  <ccard-stub>
-    <ccardbody-stub>
-      <crow-stub
-        gutters="true"
-      >
-        <ccol-stub
-          sm="5"
-          tag="div"
-        >
-          <h4
-            class="card-title mb-0"
-            id="traffic"
-          >
-            Traffic
-          </h4>
-           
-          <div
-            class="small text-muted"
-          >
-            November 2017
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          class="d-none d-md-block"
-          sm="7"
-          tag="div"
-        >
-          <cbutton-stub
-            activeclass="active"
-            class="float-right"
-            color="primary"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-            type="button"
-          >
-            <i
-              class="cui-cloud-download"
-            />
-          </cbutton-stub>
-           
-          <cbuttongroup-stub
-            class="float-right mr-3"
-          >
-            <cbutton-stub
-              activeclass="active"
-              class="mx-0"
-              color="outline-secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Day
-            
-            </cbutton-stub>
-            <cbutton-stub
-              activeclass="active"
-              class="mx-0"
-              color="outline-secondary"
-              event="click"
-              exactactiveclass="active"
-              pressed="true"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Month
-            
-            </cbutton-stub>
-            <cbutton-stub
-              activeclass="active"
-              class="mx-0"
-              color="outline-secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Year
-            
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </ccol-stub>
-      </crow-stub>
-       
-      <mainchartexample-stub
-        style="height: 300px; margin-top: 40px;"
-      />
-    </ccardbody-stub>
-     
-    <ccardfooter-stub>
-      <crow-stub
-        class="text-center"
-        gutters="true"
-      >
-        <ccol-stub
-          class="mb-sm-2 mb-0"
-          md="true"
-          sm="12"
-          tag="div"
-        >
-          <div
-            class="text-muted"
-          >
-            Visits
-          </div>
-           
-          <strong>
-            29.703 Users (40%)
-          </strong>
-           
-          <cprogress-stub
-            class="progress-xs mt-2"
-            color="success"
-            max="100"
-            precision="1"
-            value="40"
-          />
-        </ccol-stub>
-         
-        <ccol-stub
-          class="mb-sm-2 mb-0 d-md-down-none"
-          md="true"
-          sm="12"
-          tag="div"
-        >
-          <div
-            class="text-muted"
-          >
-            Unique
-          </div>
-           
-          <strong>
-            24.093 Users (20%)
-          </strong>
-           
-          <cprogress-stub
-            class="progress-xs mt-2"
-            color="info"
-            max="100"
-            precision="1"
-            value="20"
-          />
-        </ccol-stub>
-         
-        <ccol-stub
-          class="mb-sm-2 mb-0"
-          md="true"
-          sm="12"
-          tag="div"
-        >
-          <div
-            class="text-muted"
-          >
-            Pageviews
-          </div>
-           
-          <strong>
-            78.706 Views (60%)
-          </strong>
-           
-          <cprogress-stub
-            class="progress-xs mt-2"
-            color="warning"
-            max="100"
-            precision="1"
-            value="60"
-          />
-        </ccol-stub>
-         
-        <ccol-stub
-          class="mb-sm-2 mb-0"
-          md="true"
-          sm="12"
-          tag="div"
-        >
-          <div
-            class="text-muted"
-          >
-            New Users
-          </div>
-           
-          <strong>
-            22.123 Users (80%)
-          </strong>
-           
-          <cprogress-stub
-            class="progress-xs mt-2"
-            color="danger"
-            max="100"
-            precision="1"
-            value="80"
-          />
-        </ccol-stub>
-         
-        <ccol-stub
-          class="mb-sm-2 mb-0 d-md-down-none"
-          md="true"
-          sm="12"
-          tag="div"
-        >
-          <div
-            class="text-muted"
-          >
-            Bounce Rate
-          </div>
-           
-          <strong>
-            Average Rate (40.15%)
-          </strong>
-           
-          <cprogress-stub
-            class="progress-xs mt-2"
-            max="100"
-            precision="1"
-            value="40"
-          />
-        </ccol-stub>
-      </crow-stub>
-    </ccardfooter-stub>
-  </ccard-stub>
-   
-  <widgetsbrand-stub />
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      md="12"
-      tag="div"
-    >
-      <ccard-stub
-        bodywrapper="true"
-        headerhtml="Traffic & Sales"
-      >
-        <crow-stub
-          gutters="true"
-        >
-          <ccol-stub
-            lg="6"
-            sm="12"
-            tag="div"
-          >
-            <crow-stub
-              gutters="true"
-            >
-              <ccol-stub
-                sm="6"
-                tag="div"
-              >
-                <ccallout-stub
-                  color="info"
-                >
-                  <small
-                    class="text-muted"
-                  >
-                    New Clients
-                  </small>
-                  <br />
-                   
-                  <strong
-                    class="h4"
-                  >
-                    9,123
-                  </strong>
-                </ccallout-stub>
-              </ccol-stub>
-               
-              <ccol-stub
-                sm="6"
-                tag="div"
-              >
-                <ccallout-stub
-                  color="danger"
-                >
-                  <small
-                    class="text-muted"
-                  >
-                    Recurring Clients
-                  </small>
-                  <br />
-                   
-                  <strong
-                    class="h4"
-                  >
-                    22,643
-                  </strong>
-                </ccallout-stub>
-              </ccol-stub>
-            </crow-stub>
-             
-            <hr
-              class="mt-0"
-            />
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Monday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="34"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="78"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Tuesday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="56"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="94"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Wednesday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="12"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="67"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Thursday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="43"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="91"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Friday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="22"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="73"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Saturday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="53"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="82"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="progress-group mb-4"
-            >
-              <div
-                class="progress-group-prepend"
-              >
-                <span
-                  class="progress-group-text"
-                >
-                  
-                  Sunday
-                
-                </span>
-              </div>
-               
-              <div
-                class="progress-group-bars"
-              >
-                <cprogress-stub
-                  class="progress-xs"
-                  color="info"
-                  max="100"
-                  precision="0"
-                  value="9"
-                />
-                 
-                <cprogress-stub
-                  class="progress-xs"
-                  color="danger"
-                  max="100"
-                  precision="0"
-                  value="69"
-                />
-              </div>
-            </div>
-             
-            <div
-              class="legend text-center"
-            >
-              <small>
-                <sup>
-                  <cbadge-stub
-                    activeclass="active"
-                    color="info"
-                    event="click"
-                    exactactiveclass="active"
-                    routertag="a"
-                    shape="pill"
-                    tag="span"
-                    target="_self"
-                  >
-                     
-                  </cbadge-stub>
-                </sup>
-                
-                New clients
-                  
-                
-                <sup>
-                  <cbadge-stub
-                    activeclass="active"
-                    color="danger"
-                    event="click"
-                    exactactiveclass="active"
-                    routertag="a"
-                    shape="pill"
-                    tag="span"
-                    target="_self"
-                  >
-                     
-                  </cbadge-stub>
-                </sup>
-                
-                Recurring clients
-              
-              </small>
-            </div>
-          </ccol-stub>
-           
-          <ccol-stub
-            lg="6"
-            sm="12"
-            tag="div"
-          >
-            <crow-stub
-              gutters="true"
-            >
-              <ccol-stub
-                sm="6"
-                tag="div"
-              >
-                <ccallout-stub
-                  color="warning"
-                >
-                  <small
-                    class="text-muted"
-                  >
-                    Pageviews
-                  </small>
-                  <br />
-                   
-                  <strong
-                    class="h4"
-                  >
-                    78,623
-                  </strong>
-                </ccallout-stub>
-              </ccol-stub>
-               
-              <ccol-stub
-                sm="6"
-                tag="div"
-              >
-                <ccallout-stub
-                  color="success"
-                >
-                  <small
-                    class="text-muted"
-                  >
-                    Organic
-                  </small>
-                  <br />
-                   
-                  <strong
-                    class="h4"
-                  >
-                    49,123
-                  </strong>
-                </ccallout-stub>
-              </ccol-stub>
-            </crow-stub>
-             
-            <hr
-              class="mt-0"
-            />
-             
-            <ul
-              class="horizontal-bars type-2"
-            >
-              <div
-                class="progress-group"
-              >
-                <div
-                  class="progress-group-header"
-                >
-                  <i
-                    class="cui-user progress-group-icon"
-                  />
-                   
-                  <span
-                    class="title"
-                  >
-                    Male
-                  </span>
-                   
-                  <span
-                    class="ml-auto font-weight-bold"
-                  >
-                    43%
-                  </span>
-                </div>
-                 
-                <div
-                  class="progress-group-bars"
-                >
-                  <cprogress-stub
-                    class="progress-xs"
-                    color="warning"
-                    max="100"
-                    precision="0"
-                    value="43"
-                  />
-                </div>
-              </div>
-               
-              <div
-                class="progress-group mb-5"
-              >
-                <div
-                  class="progress-group-header"
-                >
-                  <i
-                    class="cui-user-female progress-group-icon"
-                  />
-                   
-                  <span
-                    class="title"
-                  >
-                    Female
-                  </span>
-                   
-                  <span
-                    class="ml-auto font-weight-bold"
-                  >
-                    37%
-                  </span>
-                </div>
-                 
-                <div
-                  class="progress-group-bars"
-                >
-                  <cprogress-stub
-                    class="progress-xs"
-                    color="warning"
-                    max="100"
-                    precision="0"
-                    value="37"
-                  />
-                </div>
-              </div>
-               
-              <div
-                class="progress-group"
-              >
-                <div
-                  class="progress-group-header"
-                >
-                  <i
-                    class="cui-globe progress-group-icon"
-                  />
-                   
-                  <span
-                    class="title"
-                  >
-                    Organic Search
-                  </span>
-                   
-                  <span
-                    class="ml-auto font-weight-bold"
-                  >
-                    
-                    191,235
-                    <span
-                      class="text-muted small"
-                    >
-                      (56%)
-                    </span>
-                  </span>
-                </div>
-                 
-                <div
-                  class="progress-group-bars"
-                >
-                  <cprogress-stub
-                    class="progress-xs"
-                    color="success"
-                    max="100"
-                    precision="0"
-                    value="56"
-                  />
-                </div>
-              </div>
-               
-              <div
-                class="progress-group"
-              >
-                <div
-                  class="progress-group-header"
-                >
-                  <cicon-stub
-                    class="progress-group-icon"
-                    fonticontag="i"
-                    height="17"
-                    name="socialFacebook"
-                  />
-                   
-                  <span
-                    class="title"
-                  >
-                    Facebook
-                  </span>
-                   
-                  <span
-                    class="ml-auto font-weight-bold"
-                  >
-                    
-                    51,223 
-                    <span
-                      class="text-muted small"
-                    >
-                      (15%)
-                    </span>
-                  </span>
-                </div>
-                 
-                <div
-                  class="progress-group-bars"
-                >
-                  <cprogress-stub
-                    class="progress-xs"
-                    color="success"
-                    max="100"
-                    precision="0"
-                    value="15"
-                  />
-                </div>
-              </div>
-               
-              <div
-                class="progress-group"
-              >
-                <div
-                  class="progress-group-header"
-                >
-                  <cicon-stub
-                    class="progress-group-icon"
-                    fonticontag="i"
-                    height="17"
-                    name="socialTwitter"
-                  />
-                   
-                  <span
-                    class="title"
-                  >
-                    Twitter
-                  </span>
-                   
-                  <span
-                    class="ml-auto font-weight-bold"
-                  >
-                    
-                    37,564 
-                    <span
-                      class="text-muted small"
-                    >
-                      (11%)
-                    </span>
-                  </span>
-                </div>
-                 
-                <div
-                  class="progress-group-bars"
-                >
-                  <cprogress-stub
-                    class="progress-xs"
-                    color="success"
-                    max="100"
-                    precision="0"
-                    value="11"
-                  />
-                </div>
-              </div>
-               
-              <div
-                class="progress-group"
-              >
-                <div
-                  class="progress-group-header"
-                >
-                  <cicon-stub
-                    class="progress-group-icon"
-                    fonticontag="i"
-                    height="17"
-                    name="socialLinkedin"
-                  />
-                   
-                  <span
-                    class="title"
-                  >
-                    LinkedIn
-                  </span>
-                   
-                  <span
-                    class="ml-auto font-weight-bold"
-                  >
-                    
-                    27,319 
-                    <span
-                      class="text-muted small"
-                    >
-                       (8%)
-                    </span>
-                  </span>
-                </div>
-                 
-                <div
-                  class="progress-group-bars"
-                >
-                  <cprogress-stub
-                    class="progress-xs"
-                    color="success"
-                    max="100"
-                    precision="0"
-                    value="8"
-                  />
-                </div>
-              </div>
-               
-              <div
-                class="divider text-center"
-              >
-                <cbutton-stub
-                  activeclass="active"
-                  class="text-muted"
-                  color="link"
-                  event="click"
-                  exactactiveclass="active"
-                  routertag="a"
-                  size="sm"
-                  target="_self"
-                  type="button"
-                >
-                  <i
-                    class="cui-options"
-                  />
-                </cbutton-stub>
-              </div>
-            </ul>
-          </ccol-stub>
-        </crow-stub>
-         
-        <br />
-         
-        <cdatatable-stub
-          class="mb-0 table-outline"
-          defaultsorter="[object Object]"
-          fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-          head-color="light"
-          hover="true"
-          items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-          itemsperpage="10"
-          no-sorting=""
-          responsive="true"
-        />
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap

@@ -1,172 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumbs.vue renders correctly 1`] = `
-<div
-  class="row"
->
-  <div
-    class="col"
-  >
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-        <strong>
-           Bootstrap Breadcrumb
-        </strong>
-         
-        <div
-          class="card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <ol
-          class="breadcrumb"
-        >
-          <li
-            class="breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="#"
-              target="_self"
-            >
-               Admin 
-            </a>
-          </li>
-          <li
-            class="breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="#"
-              target="_self"
-            >
-               Manage 
-            </a>
-          </li>
-          <li
-            class="active breadcrumb-item"
-            role="presentation"
-          >
-            <span>
-              Library
-            </span>
-          </li>
-        </ol>
-         
-        <ol
-          class="breadcrumb"
-        >
-          <li
-            class="breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="#"
-              target="_self"
-            >
-               Go to dashboard 
-            </a>
-          </li>
-          <li
-            class="breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="#"
-              target="_self"
-            >
-               Go to widgets 
-            </a>
-          </li>
-          <li
-            class="breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="http://google.com"
-              target="_self"
-            >
-               Go to Google 
-            </a>
-          </li>
-          <li
-            class="active breadcrumb-item"
-            role="presentation"
-          >
-            <span>
-              Current page
-            </span>
-          </li>
-        </ol>
-         
-        <ol
-          class="breadcrumb"
-        >
-          <li
-            class="font-xl breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="#"
-              target="_self"
-            >
-               Added 
-            </a>
-          </li>
-          <li
-            class="font-xl breadcrumb-item"
-            role="presentation"
-          >
-            <a
-              class=""
-              href="#"
-              target="_self"
-            >
-               Custom 
-            </a>
-          </li>
-          <li
-            class="active font-xl text-danger breadcrumb-item"
-            role="presentation"
-          >
-            <span>
-              Classes
-            </span>
-          </li>
-        </ol>
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;

tests/unit/views/base/__snapshots__/Cards.spec.js.snap

@@ -1,812 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Cards.vue renders correctly 1`] = `
-<div>
-  <div
-    class="row"
-  >
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card"
-      >
-        <!---->
-        <header
-          class="card-header"
-        >
-          
-          Card title
-          
-          <div
-            class="card-header-actions"
-          >
-            <a
-              class="card-header-action"
-              href="https://coreui.io/vue/docs/3.0/components/CardComponents"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              <small
-                class="text-muted"
-              >
-                docs
-              </small>
-            </a>
-          </div>
-        </header>
-         
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </div>
-        <footer
-          class="card-footer"
-        >
-          Card Footer
-        </footer>
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card"
-      >
-        <header
-          class="card-header"
-        >
-          <i
-            class="cui-check"
-          />
-           Card with icon
-        </header>
-        <div
-          class="card-body"
-        >
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card"
-      >
-        <!---->
-        <header
-          class="card-header"
-        >
-          
-          Card with switch
-          
-          <label
-            class="float-right c-switch form-check-label c-switch-info c-switch-sm c-switch-pill"
-          >
-            <input
-              class="c-switch-input form-check-input"
-              data-off="Off"
-              data-on="On"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="c-switch-slider"
-            />
-          </label>
-        </header>
-         
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card"
-      >
-        <!---->
-        <header
-          class="card-header"
-        >
-          
-          Card with label
-          
-          <span
-            class="badge float-right badge-success"
-          >
-            Success
-          </span>
-        </header>
-         
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card"
-      >
-        <!---->
-        <header
-          class="card-header"
-        >
-          
-          Card with label
-          
-          <span
-            class="badge float-right badge-danger"
-            shape="pill"
-          >
-            42
-          </span>
-        </header>
-         
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        
-        </div>
-        <!---->
-      </div>
-    </div>
-  </div>
-   
-  <div
-    class="row"
-  >
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card border-primary"
-        header="Card outline primary"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card border-secondary"
-        header="Card outline secondary"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card border-success"
-        header="Card outline success"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card border-info"
-      >
-        <header
-          class="card-header"
-        >
-          Card outline info
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card border-warning"
-      >
-        <header
-          class="card-header"
-        >
-          Card outline warning
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card border-danger"
-      >
-        <header
-          class="card-header"
-        >
-          Card outline danger
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-  </div>
-   
-  <div
-    class="row"
-  >
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card card-accent-primary"
-        header="Card with primary accent"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card card-accent-secondary"
-        header="Card with secondary accent"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card card-accent-success"
-        header="Card with success accent"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card card-accent-info"
-        header="Card with info accent"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card card-accent-warning"
-        header="Card with warning accent"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card card-accent-danger"
-        header="Card with danger accent"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-  </div>
-   
-  <div
-    class="row"
-  >
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-primary text-center"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          <blockquote
-            class="card-blockquote"
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-            </p>
-             
-            <footer>
-              Someone famous in
-            
-              <cite
-                title="Source Title"
-              >
-                Source Title
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-success text-center"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          <blockquote
-            class="card-blockquote"
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-            </p>
-             
-            <footer>
-              Someone famous in
-            
-              <cite
-                title="Source Title"
-              >
-                Source Title
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-info text-center"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          <blockquote
-            class="card-blockquote"
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-            </p>
-             
-            <footer>
-              Someone famous in
-            
-              <cite
-                title="Source Title"
-              >
-                Source Title
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-warning text-center"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          <blockquote
-            class="card-blockquote"
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-            </p>
-             
-            <footer>
-              Someone famous in
-            
-              <cite
-                title="Source Title"
-              >
-                Source Title
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-danger text-center"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          <blockquote
-            class="card-blockquote"
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-            </p>
-             
-            <footer>
-              Someone famous in
-            
-              <cite
-                title="Source Title"
-              >
-                Source Title
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-secondary text-center"
-      >
-        <!---->
-        <div
-          class="card-body"
-        >
-          <blockquote
-            class="card-blockquote"
-          >
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-            </p>
-             
-            <footer>
-              Someone famous in
-            
-              <cite
-                title="Source Title"
-              >
-                Source Title
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-        <!---->
-      </div>
-    </div>
-  </div>
-   
-  <div
-    class="row"
-  >
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-primary"
-      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-success"
-      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-info"
-      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-warning"
-      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-danger"
-      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
-        <div
-          class="card-body"
-        >
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
-        </div>
-        <!---->
-      </div>
-    </div>
-     
-    <div
-      class="col-sm-6 col-md-4"
-    >
-      <div
-        class="card bg-secondary"
-        name="fade"
-      >
-        <!---->
-        <header
-          class="card-header"
-        >
-          
-            Card with header actions
-            
-          <div
-            class="card-header-actions"
-          >
-            <a
-              class="card-header-action btn-setting"
-              href="#"
-              target="_self"
-            >
-              <i
-                class="cui-settings"
-              />
-            </a>
-             
-            <a
-              class="card-header-action btn-minimize"
-              href="#"
-              target="_self"
-            >
-              <i
-                class="cui-chevron-bottom"
-              />
-            </a>
-             
-            <a
-              class="card-header-action btn-close"
-              href="#"
-              target="_self"
-            >
-              <i
-                class="cui-circle-x"
-              />
-            </a>
-          </div>
-        </header>
-         
-        <div
-          class=""
-        >
-          <div
-            class="card-body"
-          >
-            
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-            
-          </div>
-        </div>
-        <!---->
-      </div>
-    </div>
-  </div>
-</div>
-`;

tests/unit/views/base/__snapshots__/Carousels.spec.js.snap

@@ -1,136 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Carousels.vue renders correctly 1`] = `
-<div
-  class="row"
->
-  <div
-    class="col-md-12 col-lg-7"
-  >
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Carousel
-        </strong>
-         
-        <div
-          class="card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Carousel"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <div
-          class="carousel slide"
-          style="height: 400px;"
-        >
-          <ol
-            class="carousel-indicators"
-          >
-            <li
-              class="active"
-            />
-            <li
-              class=""
-            />
-            <li
-              class=""
-            />
-          </ol>
-          <div
-            class="carousel-inner"
-          >
-            <div
-              class="carousel-item active"
-            >
-              <img
-                class="d-block w-100 h-100 img-fluid"
-                src="https://picsum.photos/1024/480/?image=52"
-              />
-              <div
-                class="carousel-caption"
-              >
-                <h3>
-                  First Slide
-                </h3>
-                <p>
-                  Nulla vitae elit libero, a pharetra augue mollis interdum.
-                </p>
-              </div>
-            </div>
-             
-            <div
-              class="carousel-item"
-            >
-              <svg
-                class="d-block w-100 h-100 img-fluid"
-                style="background-color: grey;"
-              />
-              <div
-                class="carousel-caption"
-              >
-                <h3>
-                  Blank page
-                </h3>
-                <p>
-                  Nulla vitae elit libero, a pharetra augue mollis interdum.
-                </p>
-              </div>
-            </div>
-             
-            <div
-              class="carousel-item"
-            >
-              <img
-                class="d-block w-100 h-100 img-fluid"
-                src="https://picsum.photos/1024/480/?image=54"
-              />
-              <!---->
-            </div>
-          </div>
-          <a
-            class="carousel-control-prev"
-          >
-            <span
-              aria-label="Previous"
-              class="carousel-control-prev-icon"
-            />
-          </a>
-          <a
-            class="carousel-control-next"
-          >
-            <span
-              aria-label="Next"
-              class="carousel-control-next-icon"
-            />
-          </a>
-        </div>
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;

tests/unit/views/base/__snapshots__/Collapses.spec.js.snap

@@ -1,106 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Collapses.vue renders correctly 1`] = `
-<div
-  class="row"
->
-  <div
-    class="col-12 col-md-6"
-  >
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Collapse 
-        </strong>
-         
-        <div
-          class="card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Collapse"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <button
-          class="btn btn-primary"
-          type="button"
-        >
-          
-          Toggle Collapse
-        
-        </button>
-         
-        <div
-          class="mt-2"
-          style="display: none;"
-        >
-          <div
-            class="card"
-          >
-            <!---->
-            <div
-              class="card-body"
-            >
-              <p
-                class="card-text"
-              >
-                Collapse contents Here
-              </p>
-               
-              <button
-                class="btn btn-secondary btn-sm"
-                type="button"
-              >
-                
-              Toggle Inner Collapse
-            
-              </button>
-               
-              <div
-                class="mt-2"
-                style="display: none;"
-              >
-                <div
-                  class="card"
-                >
-                  <!---->
-                  <div
-                    class="card-body"
-                  >
-                    Hello!
-                  </div>
-                  <!---->
-                </div>
-              </div>
-            </div>
-            <!---->
-          </div>
-        </div>
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;

tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap

@@ -1,216 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Jumbotrons.vue renders correctly 1`] = `
-<div>
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      tag="div"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
-          />
-           
-          <strong>
-             Bootstrap Jumbotron 
-          </strong>
-           
-          <div
-            class="card-header-actions"
-          >
-            <a
-              class="card-header-action"
-              href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              <small
-                class="text-muted"
-              >
-                docs
-              </small>
-            </a>
-          </div>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <cjumbotron-stub
-            tag="div"
-          >
-            <h1
-              class="display-3"
-            >
-              Bootstrap 4
-            </h1>
-             
-            <p
-              class="lead"
-            >
-              Bootstrap 4 Components for Vue.js 2.6+
-            </p>
-             
-            <p>
-              For more information visit website
-            </p>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              More Info
-            </cbutton-stub>
-          </cjumbotron-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      tag="div"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
-          />
-           
-          <strong>
-             Jumbotron 
-          </strong>
-           
-          <small>
-            with slots
-          </small>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <cjumbotron-stub
-            header="Bootstrap 4"
-            lead=""
-            tag="div"
-          >
-            <h1
-              class="display-3"
-            >
-              Bootstrap 4
-            </h1>
-             
-            <p
-              class="lead"
-            >
-              
-              This is a simple hero unit, a simple jumbotron-style component for
-              calling extra attention to featured content or information.
-            
-            </p>
-             
-            <hr
-              class="my-4"
-            />
-             
-            <p>
-              
-              It uses utility classes for typography and spacing to space content
-              out within the larger container.
-            
-            </p>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Do Something
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="success"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Do Something Else
-            </cbutton-stub>
-          </cjumbotron-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      tag="div"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
-          />
-           
-          <strong>
-             Jumbotron 
-          </strong>
-           
-          <small>
-            colors
-          </small>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <cjumbotron-stub
-            bordercolor="dark"
-            color="info"
-            tag="div"
-            textcolor="white"
-          >
-            <h1
-              class="display-3"
-            >
-              Bootstrap 4
-            </h1>
-             
-            <p
-              class="lead"
-            >
-              
-              This is a simple hero unit, a simple jumbotron-style component for
-              calling extra attention to featured content or information.
-            
-            </p>
-             
-            <hr
-              class="my-4"
-            />
-             
-            <p>
-              
-              It uses utility classes for typography and spacing to space content
-              out within the larger container.
-            
-            </p>
-          </cjumbotron-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/Navbars.spec.js.snap

@@ -1,523 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navbars.vue renders correctly 1`] = `
-<div>
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navbar 
-      </strong>
-       
-      <div
-        class="card-header-actions"
-      >
-        <a
-          class="card-header-action"
-          href="https://coreui.io/vue/docs/3.0/components/Navbar"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <small
-            class="text-muted"
-          >
-            docs
-          </small>
-        </a>
-      </div>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnavbar-stub
-        color="info"
-        expandable="md"
-        tag="nav"
-      >
-        <ctoggler-stub
-          innavbar="true"
-          tag="button"
-        />
-         
-        <cnavbarbrand-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          href="#"
-          routertag="a"
-          target="_self"
-        >
-          NavBar
-        </cnavbarbrand-stub>
-         
-        <ccollapse-stub
-          duration="400"
-          navbar="true"
-          transition="ease-in-out"
-        >
-          <cnavbarnav-stub
-            tag="ul"
-          >
-            <cnavitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Link
-            </cnavitem-stub>
-             
-            <cnavitem-stub
-              activeclass="active"
-              disabled="true"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Disabled
-            </cnavitem-stub>
-          </cnavbarnav-stub>
-           
-          <cnavbarnav-stub
-            class="ml-auto"
-            tag="ul"
-          >
-            <cform-stub
-              inline="true"
-            >
-              <cinput-stub
-                class="mr-sm-2"
-                lazy="400"
-                placeholder="Search"
-                size="sm"
-                type="text"
-              />
-               
-              <cbutton-stub
-                activeclass="active"
-                class="my-2 my-sm-0"
-                color="light"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                size="sm"
-                target="_self"
-                type="button"
-              >
-                
-                Search
-              
-              </cbutton-stub>
-            </cform-stub>
-             
-            <cdropdown-stub
-              caret="true"
-              flip="true"
-              innav="true"
-              placement="bottom-end"
-              togglertext="Lang"
-            >
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                EN
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                ES
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                RU
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                FA
-              </cdropdownitem-stub>
-            </cdropdown-stub>
-             
-            <cdropdown-stub
-              caret="true"
-              flip="true"
-              innav="true"
-              placement="bottom-end"
-              togglertext="User"
-            >
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Profile
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Signout
-              </cdropdownitem-stub>
-            </cdropdown-stub>
-          </cnavbarnav-stub>
-        </ccollapse-stub>
-      </cnavbar-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Navbar 
-      </strong>
-       
-      <small>
-        brand
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnavbar-stub
-        color="faded"
-        light="true"
-        tag="nav"
-      >
-        <cnavbarbrand-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          href="#"
-          routertag="a"
-          target="_self"
-        >
-          <img
-            alt="CoreuiVue"
-            class="d-inline-block align-top"
-            src="https://placekitten.com/g/30/30"
-          />
-          
-          CoreuiVue
-        
-        </cnavbarbrand-stub>
-      </cnavbar-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Navbar 
-      </strong>
-       
-      <small>
-        text
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnavbar-stub
-        color="light"
-        light="true"
-        tag="nav"
-        toggleable="sm"
-      >
-        <ctoggler-stub
-          innavbar="true"
-          tag="button"
-        />
-         
-        <cnavbarbrand-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          target="_self"
-        >
-          CoreuiVue
-        </cnavbarbrand-stub>
-         
-        <ccollapse-stub
-          duration="400"
-          navbar="true"
-          transition="ease-in-out"
-        >
-          <cnavbarnav-stub
-            tag="ul"
-          >
-            <cnavbartext-stub
-              tag="div"
-            >
-              Navbar text
-            </cnavbartext-stub>
-          </cnavbarnav-stub>
-        </ccollapse-stub>
-      </cnavbar-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Navbar 
-      </strong>
-       
-      <small>
-        dropdown
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnavbar-stub
-        color="primary"
-        expandable="sm"
-        tag="nav"
-      >
-        <ctoggler-stub
-          innavbar="true"
-          tag="button"
-        />
-         
-        <ccollapse-stub
-          duration="400"
-          navbar="true"
-          transition="ease-in-out"
-        >
-          <cnavbarnav-stub
-            tag="ul"
-          >
-            <cnavitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Home
-            </cnavitem-stub>
-             
-            <cnavitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Link
-            </cnavitem-stub>
-             
-            <cdropdown-stub
-              caret="true"
-              flip="true"
-              innav="true"
-              placement="bottom-end"
-              togglertext="Lang"
-            >
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                EN
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                ES
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                RU
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                FA
-              </cdropdownitem-stub>
-            </cdropdown-stub>
-             
-            <cdropdown-stub
-              caret="true"
-              flip="true"
-              innav="true"
-              placement="bottom-end"
-              togglertext="User"
-            >
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Account
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Settings
-              </cdropdownitem-stub>
-            </cdropdown-stub>
-          </cnavbarnav-stub>
-        </ccollapse-stub>
-      </cnavbar-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Navbar 
-      </strong>
-       
-      <small>
-        form
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnavbar-stub
-        color="light"
-        light="true"
-        tag="nav"
-      >
-        <cform-stub
-          inline="true"
-        >
-          <cinput-stub
-            class="mr-sm-2"
-            lazy="400"
-            placeholder="Search"
-            size="sm"
-            type="text"
-          />
-           
-          <cbutton-stub
-            activeclass="active"
-            class="my-2 my-sm-0"
-            color="outline-success"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-            type="submit"
-          >
-            Search
-          </cbutton-stub>
-        </cform-stub>
-      </cnavbar-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Navbar 
-      </strong>
-       
-      <small>
-        input group
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnavbar-stub
-        color="light"
-        light="true"
-        tag="nav"
-      >
-        <cform-stub
-          inline="true"
-        >
-          <cinput-stub
-            class="mr-sm-2"
-            lazy="400"
-            placeholder="Username"
-            type="text"
-          />
-        </cform-stub>
-      </cnavbar-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/Navs.spec.js.snap

@@ -1,602 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navs.vue renders correctly 1`] = `
-<div>
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-      <strong>
-         Bootstrap Navs
-      </strong>
-       
-      <div
-        class="card-header-actions"
-      >
-        <a
-          class="card-header-action"
-          href="https://coreui.io/vue/docs/3.0/components/Nav"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <small
-            class="text-muted"
-          >
-            docs
-          </small>
-        </a>
-      </div>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub>
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Active
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-          title="Link"
-        />
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Another Link
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          disabled="true"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Disabled
-        </cnavitem-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        icons
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub>
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          <i
-            class="cui-basket-loaded"
-          />
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          
-          Link
-        
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          
-          Another Link
-        
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          disabled="true"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Disabled
-        </cnavitem-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        tab style
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub
-        variant="tabs"
-      >
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          
-          Active
-        
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          
-          Link
-        
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          
-          Another Link
-        
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          disabled="true"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Disabled
-        </cnavitem-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        pill style
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub
-        variant="pills"
-      >
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Active
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Link
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Another Link
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          disabled="true"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Disabled
-        </cnavitem-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        fill tabs
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub
-        fill="true"
-        variant="tabs"
-      >
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Active
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Link
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Link with a long name 
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          disabled="true"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Disabled
-        </cnavitem-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        justified tabs
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub
-        justified="true"
-        variant="tabs"
-      >
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Active
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Link
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Link with a long name 
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          disabled="true"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Disabled
-        </cnavitem-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        dropdown support
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cnav-stub
-        pills=""
-      >
-        <cnavitem-stub
-          active="true"
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Active
-        </cnavitem-stub>
-         
-        <cnavitem-stub
-          activeclass="active"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          tag="span"
-          target="_self"
-        >
-          Link
-        </cnavitem-stub>
-         
-        <cdropdown-stub
-          button-content="Dropdown"
-          caret="true"
-          flip="true"
-          id="nav7_ddown"
-          nav=""
-          placement="bottom-end"
-          togglertext="Dropdown"
-        >
-          <cdropdownitem-stub
-            activeclass="active"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-          >
-            one
-          </cdropdownitem-stub>
-           
-          <cdropdownitem-stub
-            activeclass="active"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-          >
-            two
-          </cdropdownitem-stub>
-           
-          <cdropdowndivider-stub
-            tag="div"
-          />
-           
-          <cdropdownitem-stub
-            activeclass="active"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-          >
-            three
-          </cdropdownitem-stub>
-        </cdropdown-stub>
-      </cnav-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Navs 
-      </strong>
-       
-      <small>
-        vertical variation
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <crow-stub
-        gutters="true"
-      >
-        <ccol-stub
-          class="m-0"
-          col="3"
-          tag="div"
-        >
-          <cnav-stub
-            pills=""
-            vertical="true"
-          >
-            <cnavitem-stub
-              active="true"
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Active
-            </cnavitem-stub>
-             
-            <cnavitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Link
-            </cnavitem-stub>
-             
-            <cnavitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Another Link
-            </cnavitem-stub>
-             
-            <cnavitem-stub
-              activeclass="active"
-              disabled="true"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              Disabled
-            </cnavitem-stub>
-          </cnav-stub>
-        </ccol-stub>
-      </crow-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/Paginations.spec.js.snap

@@ -1,188 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Paginations.vue renders correctly 1`] = `
-<div>
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Responsive bootstrap Pagination
-      </strong>
-       
-      <div
-        class="card-header-actions"
-      >
-        <a
-          class="card-header-action"
-          href="https://coreui.io/vue/docs/3.0/components/Pagination"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <small
-            class="text-muted"
-          >
-            docs
-          </small>
-        </a>
-      </div>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <h6>
-        Default
-      </h6>
-       
-      <cpagination-stub
-        activepage="3"
-        align="start"
-        arrows="true"
-        dots="true"
-        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
-        limit="5"
-        nextbuttonhtml="&rsaquo;"
-        pages="10"
-        previousbuttonhtml="&lsaquo;"
-        responsive=""
-      />
-       
-      <br />
-       
-      <h6>
-        Small
-      </h6>
-       
-      <cpagination-stub
-        activepage="3"
-        align="start"
-        arrows="true"
-        dots="true"
-        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
-        limit="5"
-        nextbuttonhtml="&rsaquo;"
-        pages="10"
-        previousbuttonhtml="&lsaquo;"
-        size="sm"
-      />
-       
-      <br />
-       
-      <div>
-        <h6>
-          Large
-        </h6>
-         
-        <cpagination-stub
-          activepage="3"
-          align="start"
-          arrows="true"
-          dots="true"
-          doublearrows="true"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
-          limit="5"
-          nextbuttonhtml="&rsaquo;"
-          pages="10"
-          previousbuttonhtml="&lsaquo;"
-          responsive=""
-          size="lg"
-        />
-         
-        <br />
-      </div>
-       
-      <div>
-        currentPage: 3
-      </div>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Pagination 
-      </strong>
-       
-      <small>
-        alignment
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <h6>
-        Left alignment (default)
-      </h6>
-       
-      <cpagination-stub
-        activepage="3"
-        align="start"
-        arrows="true"
-        dots="true"
-        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
-        limit="5"
-        nextbuttonhtml="&rsaquo;"
-        pages="10"
-        previousbuttonhtml="&lsaquo;"
-      />
-       
-      <br />
-       
-      <h6>
-        Center alignment
-      </h6>
-       
-      <cpagination-stub
-        activepage="3"
-        align="center"
-        arrows="true"
-        dots="true"
-        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
-        limit="5"
-        nextbuttonhtml="&rsaquo;"
-        pages="10"
-        previousbuttonhtml="&lsaquo;"
-      />
-       
-      <br />
-       
-      <h6>
-        Right (end) alignment
-      </h6>
-       
-      <cpagination-stub
-        activepage="3"
-        align="end"
-        arrows="true"
-        dots="true"
-        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
-        limit="5"
-        nextbuttonhtml="&rsaquo;"
-        pages="10"
-        previousbuttonhtml="&lsaquo;"
-      />
-       
-      <br />
-       
-      <div>
-        currentPage: 3
-      </div>
-    </ccardbody-stub>
-  </ccard-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap

@@ -1,713 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProgressBars.vue renders correctly 1`] = `
-<div>
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Progress
-      </strong>
-       
-      <div
-        class="card-header-actions"
-      >
-        <a
-          class="card-header-action"
-          href="https://coreui.io/vue/docs/3.0/components/Progress"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <small
-            class="text-muted"
-          >
-            docs
-          </small>
-        </a>
-      </div>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cprogress-stub
-        animated="true"
-        max="100"
-        precision="0"
-        showpercentage="true"
-        value="73"
-      />
-       
-      <cprogress-stub
-        class="mt-1"
-        max="100"
-        precision="0"
-        showvalue="true"
-        value="0"
-      >
-        <cprogressbar-stub
-          color="success"
-          max="100"
-          precision="0"
-          value="43.8"
-        />
-         
-        <cprogressbar-stub
-          color="warning"
-          max="100"
-          precision="0"
-          value="18.25"
-        />
-         
-        <cprogressbar-stub
-          color="danger"
-          max="100"
-          precision="0"
-          value="10.95"
-        />
-      </cprogress-stub>
-       
-      <cbutton-stub
-        activeclass="active"
-        class="mt-4"
-        color="secondary"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        target="_self"
-        type="button"
-      >
-        
-        Click me to animate progress bars
-      
-      </cbutton-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-      <small>
-        labels
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <h6>
-        No label
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="50"
-        precision="0"
-        value="33.333333333"
-      />
-       
-      <h6>
-        Value label
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="50"
-        precision="0"
-        showvalue="true"
-        value="33.333333333"
-      />
-       
-      <h6>
-        Progress label
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="50"
-        precision="0"
-        showpercentage="true"
-        value="33.333333333"
-      />
-       
-      <h6>
-        Value label with precision
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="50"
-        precision="2"
-        showvalue="true"
-        value="33.333333333"
-      />
-       
-      <h6>
-        Progress label with precision
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="50"
-        precision="2"
-        showpercentage="true"
-        value="33.333333333"
-      />
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-       
-      <small>
-        width
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <h6>
-        Default width
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="100"
-        precision="0"
-        value="75"
-      />
-       
-      <h6>
-        Custom widths
-      </h6>
-       
-      <cprogress-stub
-        class="w-75 mb-2"
-        max="100"
-        precision="0"
-        value="75"
-      />
-       
-      <cprogress-stub
-        class="w-50 mb-2"
-        max="100"
-        precision="0"
-        value="75"
-      />
-       
-      <cprogress-stub
-        class="w-25"
-        max="100"
-        precision="0"
-        value="75"
-      />
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-       
-      <small>
-        height
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <h6>
-        Default height
-      </h6>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="100"
-        precision="0"
-        showpercentage="true"
-        value="75"
-      />
-       
-      <h6>
-        Custom heights
-      </h6>
-       
-      <cprogress-stub
-        class="mb-2"
-        height="2rem"
-        max="100"
-        precision="0"
-        showpercentage="true"
-        value="75"
-      />
-       
-      <cprogress-stub
-        class="mb-2"
-        height="20px"
-        max="100"
-        precision="0"
-        showpercentage="true"
-        value="75"
-      />
-       
-      <cprogress-stub
-        height="2px"
-        max="100"
-        precision="0"
-        value="75"
-      />
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-       
-      <small>
-        colors
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          success:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="success"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          info:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="info"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          warning:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="warning"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          danger:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="danger"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          primary:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="primary"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          secondary:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="secondary"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-      <div
-        class="row mb-1"
-      >
-        <div
-          class="col-sm-2"
-        >
-          dark:
-        </div>
-         
-        <div
-          class="col-sm-10 pt-1"
-        >
-          <cprogress-stub
-            color="dark"
-            max="100"
-            precision="0"
-            value="75"
-          />
-        </div>
-      </div>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-       
-      <small>
-        striped
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cprogress-stub
-        class="mb-2"
-        color="success"
-        max="100"
-        precision="0"
-        striped="true"
-        value="25"
-      />
-       
-      <cprogress-stub
-        class="mb-2"
-        color="info"
-        max="100"
-        precision="0"
-        striped="true"
-        value="50"
-      />
-       
-      <cprogress-stub
-        class="mb-2"
-        color="warning"
-        max="100"
-        precision="0"
-        striped="true"
-        value="75"
-      />
-       
-      <cprogress-stub
-        class="mb-2"
-        color="danger"
-        max="100"
-        precision="0"
-        striped="true"
-        value="100"
-      />
-       
-      <cbutton-stub
-        activeclass="active"
-        color="secondary"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        target="_self"
-        type="button"
-      >
-        
-        Remove Striped
-      
-      </cbutton-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-       
-      <small>
-        animated
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cprogress-stub
-        animated="true"
-        class="mb-2"
-        color="success"
-        max="100"
-        precision="0"
-        striped="true"
-        value="25"
-      />
-       
-      <cprogress-stub
-        animated="true"
-        class="mb-2"
-        color="info"
-        max="100"
-        precision="0"
-        striped="true"
-        value="50"
-      />
-       
-      <cprogress-stub
-        animated="true"
-        class="mb-2"
-        color="warning"
-        max="100"
-        precision="0"
-        striped="true"
-        value="75"
-      />
-       
-      <cprogress-stub
-        animated="true"
-        class="mb-3"
-        color="danger"
-        max="100"
-        precision="0"
-        value="100"
-      />
-       
-      <cbutton-stub
-        activeclass="active"
-        color="secondary"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        target="_self"
-        type="button"
-      >
-        
-        Stop Animation
-      
-      </cbutton-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Progress 
-      </strong>
-       
-      <small>
-        multiple bars
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <cprogress-stub
-        class="mb-3"
-        max="100"
-        precision="0"
-        value="0"
-      >
-        <cprogressbar-stub
-          color="primary"
-          max="100"
-          precision="0"
-          value="15"
-        />
-         
-        <cprogressbar-stub
-          color="success"
-          max="100"
-          precision="0"
-          value="30"
-        />
-         
-        <cprogressbar-stub
-          color="info"
-          max="100"
-          precision="0"
-          value="20"
-        />
-      </cprogress-stub>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="100"
-        precision="0"
-        showpercentage="true"
-        value="0"
-      >
-        <cprogressbar-stub
-          color="primary"
-          max="100"
-          precision="0"
-          value="15"
-        />
-         
-        <cprogressbar-stub
-          color="success"
-          max="100"
-          precision="0"
-          value="30"
-        />
-         
-        <cprogressbar-stub
-          color="info"
-          max="100"
-          precision="0"
-          value="20"
-        />
-      </cprogress-stub>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="100"
-        precision="0"
-        showvalue="true"
-        striped="true"
-        value="0"
-      >
-        <cprogressbar-stub
-          color="primary"
-          max="100"
-          precision="0"
-          value="15"
-        />
-         
-        <cprogressbar-stub
-          color="success"
-          max="100"
-          precision="0"
-          value="30"
-        />
-         
-        <cprogressbar-stub
-          color="info"
-          max="100"
-          precision="0"
-          value="20"
-        />
-      </cprogress-stub>
-       
-      <cprogress-stub
-        class="mb-3"
-        max="100"
-        precision="0"
-        value="0"
-      >
-        <cprogressbar-stub
-          color="primary"
-          max="100"
-          precision="0"
-          showpercentage="true"
-          value="15"
-        />
-         
-        <cprogressbar-stub
-          animated="true"
-          color="success"
-          max="100"
-          precision="0"
-          showpercentage="true"
-          value="30"
-        />
-         
-        <cprogressbar-stub
-          color="info"
-          max="100"
-          precision="0"
-          showpercentage="true"
-          striped="true"
-          value="20"
-        />
-      </cprogress-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/Tables.spec.js.snap

@@ -1,102 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tables.vue renders correctly 1`] = `
-<div>
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="6"
-      tag="div"
-    >
-      <ctablewrapper-stub
-        caption=<i class='fa fa-align-justify'></i> Simple Table
-        fields="username,registered,role,status"
-        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="6"
-      tag="div"
-    >
-      <ctablewrapper-stub
-        caption=<i class='fa fa-align-justify'></i> Striped Table
-        fields="username,registered,role,status"
-        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-        striped="true"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="6"
-      tag="div"
-    >
-      <ctablewrapper-stub
-        caption=<i class='fa fa-align-justify'></i> Condensed Table
-        fields="username,registered,role,status"
-        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-        small="true"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="6"
-      tag="div"
-    >
-      <ctablewrapper-stub
-        bordered="true"
-        caption=<i class='fa fa-align-justify'></i> Bordered Table
-        fields="username,registered,role,status"
-        fixed="true"
-        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      sm="12"
-      tag="div"
-    >
-      <ctablewrapper-stub
-        bordered="true"
-        caption=<i class='fa fa-align-justify'></i> Combined All Table
-        fields="username,registered,role,status"
-        fixed="true"
-        hover="true"
-        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-        small="true"
-        striped="true"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      sm="12"
-      tag="div"
-    >
-      <ctablewrapper-stub
-        bordered="true"
-        caption=<i class='fa fa-align-justify'></i> Combined All Table
-        dark="true"
-        fields="username,registered,role,status"
-        fixed="true"
-        hover="true"
-        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-        small="true"
-        striped="true"
-      />
-    </ccol-stub>
-  </crow-stub>
-</div>
-`;

tests/unit/views/base/__snapshots__/Tooltips.spec.js.snap

@@ -1,348 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tooltips.vue renders correctly 1`] = `
-<div>
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Bootstrap Tooltips 
-      </strong>
-       
-      <small>
-        <code>
-          v-c-tooltip
-        </code>
-         directive
-      </small>
-       
-      <div
-        class="card-header-actions"
-      >
-        <a
-          class="card-header-action"
-          href="https://coreui.io/vue/docs/3.0/components/Tooltip"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <small
-            class="text-muted"
-          >
-            docs
-          </small>
-        </a>
-      </div>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <crow-stub
-        gutters="true"
-      >
-        <ccol-stub
-          col="6"
-          tag="div"
-        >
-          <div
-            class="text-center my-3"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Hover Me
-            
-            </cbutton-stub>
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          tag="div"
-        >
-          <div
-            class="text-center my-3"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Hover me
-            
-            </cbutton-stub>
-          </div>
-        </ccol-stub>
-      </crow-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-   
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
-      />
-       
-      <strong>
-         Tooltips 
-      </strong>
-       
-      <small>
-        placement
-      </small>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <div
-        class="my-3"
-      >
-        <crow-stub
-          gutters="true"
-        >
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              top-start
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              top
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              top-end
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              bottom-start
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              bottom
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              bottom-end
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              right-start
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              right
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              right-end
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              left-start
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              left
-            
-            </cbutton-stub>
-          </ccol-stub>
-          <ccol-stub
-            class="py-4 text-center"
-            md="4"
-            tag="div"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              left-end
-            
-            </cbutton-stub>
-          </ccol-stub>
-        </crow-stub>
-      </div>
-    </ccardbody-stub>
-  </ccard-stub>
-</div>
-`;

tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap

@@ -1,875 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ButtonGroups.vue renders correctly 1`] = `
-<crow-stub
-  gutters="true"
->
-  <ccol-stub
-    col="12"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap button group
-        </strong>
-         
-        <div
-          class="card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <cbuttongroup-stub>
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              One
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Two
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Three
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Four
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Five
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <br />
-          <br />
-           
-          <cbuttongroup-stub>
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="success"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Success
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="info"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Info
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="warning"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Warn
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Primary
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="danger"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Danger
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="link"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Link
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Button group 
-        </strong>
-        sizing
-      
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <cbuttongroup-stub>
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Left
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Middle
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Right
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <br />
-          <br />
-           
-          <cbuttongroup-stub
-            size="sm"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Left
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Middle
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Right
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <br />
-          <br />
-           
-          <cbuttongroup-stub
-            size="lg"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Left
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Middle
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Right
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-        <strong>
-           Button group 
-        </strong>
-        dropdown support
-      
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <cbuttongroup-stub>
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Button 1
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Button 2
-            </cbutton-stub>
-             
-            <cdropdown-stub
-              caret="true"
-              color="success"
-              flip="true"
-              placement="bottom-start"
-              right=""
-              text="Menu"
-              togglertext="Dropdown"
-            >
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Item 1
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Item 2
-              </cdropdownitem-stub>
-               
-              <cdropdowndivider-stub
-                tag="div"
-              />
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Item 3
-              </cdropdownitem-stub>
-            </cdropdown-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Button 3
-            </cbutton-stub>
-             
-            <cdropdown-stub
-              caret="true"
-              color="info"
-              flip="true"
-              placement="bottom-start"
-              right=""
-              split="true"
-              text="Split Menu"
-              togglertext="Dropdown"
-            >
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Item 1
-              </cdropdownitem-stub>
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Item 2
-              </cdropdownitem-stub>
-               
-              <cdropdowndivider-stub
-                tag="div"
-              />
-               
-              <cdropdownitem-stub
-                activeclass="active"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-              >
-                Item 3
-              </cdropdownitem-stub>
-            </cdropdown-stub>
-          </cbuttongroup-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Button group 
-        </strong>
-        vertical variation
-      
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <cbuttongroup-stub
-            vertical="true"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Top
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Middle
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Bottom
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Button toolbar 
-        </strong>
-         
-        <small>
-          with button groups
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <cbuttontoolbar-stub
-          aria-label="Toolbar with button groups"
-        >
-          <cbuttongroup-stub
-            class="mx-1"
-          >
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              «
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              ‹
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <cbuttongroup-stub
-            class="mx-1"
-          >
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Edit
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Undo
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Redo
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <cbuttongroup-stub
-            class="mx-1"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              ›
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="d-sm-down-none"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              »
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </cbuttontoolbar-stub>
-         
-        <hr
-          class="d-sm-down-none"
-        />
-         
-        <cbuttontoolbar-stub
-          aria-label="Toolbar with button groups and input groups"
-          class="d-sm-down-none"
-        >
-          <cbuttongroup-stub
-            class="mx-1"
-            size="sm"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              New
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Edit
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <cinput-stub
-            appendhtml=".00"
-            class="mb-0 w-25 mx-1"
-            lazy="400"
-            prependhtml="$"
-            size="sm"
-            type="text"
-            value="100"
-          />
-           
-          <cselect-stub
-            class="mb-0 w-25 mx-1"
-            custom="true"
-            options="Large,Medium,Small"
-            prependhtml="Size"
-            size="sm"
-            value="Medium"
-          />
-           
-          <cbuttongroup-stub
-            class="mx-1"
-            size="sm"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Save
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Cancel
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </cbuttontoolbar-stub>
-         
-        <hr />
-         
-        <cbuttontoolbar-stub
-          aria-label="Toolbar with button groups and dropdown menu"
-        >
-          <cbuttongroup-stub
-            class="mx-1 d-sm-down-none"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              New
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Edit
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Undo
-            </cbutton-stub>
-          </cbuttongroup-stub>
-           
-          <cdropdown-stub
-            button-content="Menu"
-            caret="true"
-            class="mx-1"
-            color="secondary"
-            flip="true"
-            placement="bottom-end"
-            togglertext="Dropdown"
-          >
-            <cdropdownitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-            >
-              Item 1
-            </cdropdownitem-stub>
-             
-            <cdropdownitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-            >
-              Item 2
-            </cdropdownitem-stub>
-             
-            <cdropdownitem-stub
-              activeclass="active"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-            >
-              Item 3
-            </cdropdownitem-stub>
-          </cdropdown-stub>
-           
-          <cbuttongroup-stub
-            class="mx-1"
-          >
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Save
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Cancel
-            </cbutton-stub>
-          </cbuttongroup-stub>
-        </cbuttontoolbar-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-</crow-stub>
-`;

tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap

@@ -1,471 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Alerts.vue renders correctly 1`] = `
-<crow-stub
-  gutters="true"
->
-  <ccol-stub
-    col="12"
-    md="6"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Alert
-        </strong>
-         
-        <div
-          class="card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Alert"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <p />
-           
-          <calert-stub
-            color="primary"
-            fade="true"
-            show="true"
-          >
-            Primary Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="secondary"
-            fade="true"
-            show="true"
-          >
-            Secondary Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="success"
-            fade="true"
-            show="true"
-          >
-            Success Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="danger"
-            fade="true"
-            show="true"
-          >
-            Danger Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="warning"
-            fade="true"
-            show="true"
-          >
-            Warning Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="info"
-            fade="true"
-            show="true"
-          >
-            Info Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="light"
-            fade="true"
-            show="true"
-          >
-            Light Alert
-          </calert-stub>
-           
-          <calert-stub
-            color="dark"
-            fade="true"
-            show="true"
-          >
-            Dark Alert
-          </calert-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    md="6"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         Alert
-        
-        <small>
-           use 
-          <code>
-            .alert-link
-          </code>
-           to provide links
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <calert-stub
-            color="primary"
-            fade="true"
-            show="true"
-          >
-            
-            Primary Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="secondary"
-            fade="true"
-            show="true"
-          >
-            
-            Secondary Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="success"
-            fade="true"
-            show="true"
-          >
-            
-            Success Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="danger"
-            fade="true"
-            show="true"
-          >
-            
-            Danger Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="warning"
-            fade="true"
-            show="true"
-          >
-            
-            Warning Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="info"
-            fade="true"
-            show="true"
-          >
-            
-            Info Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="light"
-            fade="true"
-            show="true"
-          >
-            
-            Light Alert with 
-            <a
-              class="alert-link"
-              href="#"
-            >
-              an example link
-            </a>
-            .
-          
-          </calert-stub>
-           
-          <calert-stub
-            color="dark"
-            fade="true"
-            show="true"
-          >
-            
-            Dark Alert with
-            
-            <clink-stub
-              activeclass="active"
-              class="alert-link"
-              event="click"
-              exactactiveclass="active"
-              href="#"
-              routertag="a"
-              tag="span"
-              target="_self"
-            >
-              an example link
-            </clink-stub>
-            
-            .
-          
-          </calert-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    md="6"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         Alerts 
-        <small>
-          with additional content
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <calert-stub
-          color="success"
-          fade="true"
-          show="true"
-        >
-          <h4
-            class="alert-heading"
-          >
-            Well done!
-          </h4>
-           
-          <p>
-            
-            Aww yeah, you successfully read this important alert message.
-            This example text is going to run a bit longer so that you can see
-            how spacing within an alert works with this kind of content.
-          
-          </p>
-           
-          <hr />
-           
-          <p
-            class="mb-0"
-          >
-            
-            Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-          
-          </p>
-        </calert-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-   
-  <ccol-stub
-    col="12"
-    md="6"
-    tag="div"
-  >
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         Alerts
-        
-        <small>
-          dismissible
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <calert-stub
-          closebutton="true"
-          color="secondary"
-          fade="true"
-          show="true"
-        >
-          
-          Dismissible Alert!
-        
-        </calert-stub>
-         
-        <calert-stub
-          class="alert-dismissible"
-          color="secondary"
-          fade="true"
-          show="true"
-        >
-          
-          Dismissible Alert with custom button!
-          
-          <cbutton-stub
-            activeclass="active"
-            class="position-absolute"
-            color="secondary"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-            type="button"
-          >
-            
-            Close
-          
-          </cbutton-stub>
-        </calert-stub>
-         
-        <cbutton-stub
-          activeclass="active"
-          class="m-1"
-          color="info"
-          event="click"
-          exactactiveclass="active"
-          routertag="a"
-          target="_self"
-          type="button"
-        >
-          
-          Show dismissible alerts
-        
-        </cbutton-stub>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub>
-      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
-        />
-         Alerts
-        
-        <small>
-          auto dismissible
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub>
-        <div>
-          <calert-stub
-            closebutton="true"
-            color="warning"
-            fade="true"
-            show="10"
-          >
-            
-            Alert will dismiss after
-            
-            <strong>
-              10
-            </strong>
-             seconds...
-          
-          </calert-stub>
-           
-          <calert-stub
-            closebutton="true"
-            color="info"
-            fade="true"
-            show="10"
-          >
-            
-            Alert will dismiss after 10 seconds...
-            
-            <cprogress-stub
-              color="info"
-              height="4px"
-              max="10"
-              precision="0"
-              value="10"
-            />
-          </calert-stub>
-           
-          <cbutton-stub
-            activeclass="active"
-            class="m-1"
-            color="info"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-            type="button"
-          >
-            
-            Show alert with timer
-          
-          </cbutton-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </ccol-stub>
-</crow-stub>
-`;

tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap

@@ -1,354 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Badges.vue renders correctly 1`] = `
-<div
-  class="row"
->
-  <div
-    class="col-12 col-md-6"
-  >
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Badge
-        </strong>
-         
-        <div
-          class="card-header-actions"
-        >
-          <a
-            class="card-header-action"
-            href="https://coreui.io/vue/docs/3.0/components/Badge"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            <small
-              class="text-muted"
-            >
-              docs
-            </small>
-          </a>
-        </div>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <h2>
-          Example heading 
-          <span
-            class="badge badge-primary"
-          >
-            New
-          </span>
-        </h2>
-         
-        <h3>
-          Example heading 
-          <span
-            class="badge badge-primary"
-          >
-            New
-          </span>
-        </h3>
-         
-        <h4>
-          Example heading 
-          <span
-            class="badge badge-primary"
-          >
-            New
-          </span>
-        </h4>
-         
-        <h5>
-          Example heading 
-          <span
-            class="badge badge-primary"
-          >
-            New
-          </span>
-        </h5>
-         
-        <h6>
-          Example heading 
-          <span
-            class="badge badge-primary"
-          >
-            New
-          </span>
-        </h6>
-      </div>
-       
-      <footer
-        class="card-footer"
-      >
-        <button
-          class="btn btn-primary"
-          type="button"
-        >
-          
-          Notifications
-          
-          <span
-            class="badge ml-2 position-static badge-light"
-          >
-            4
-          </span>
-        </button>
-      </footer>
-      <!---->
-    </div>
-  </div>
-   
-  <div
-    class="col-12 col-md-6"
-  >
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         Badge
-        
-        <small>
-          contextual variations
-        </small>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <span
-          class="badge badge-primary"
-        >
-          Primary
-        </span>
-         
-        <span
-          class="badge badge-secondary"
-        >
-          Secondary
-        </span>
-         
-        <span
-          class="badge badge-success"
-        >
-          Success
-        </span>
-         
-        <span
-          class="badge badge-danger"
-        >
-          Danger
-        </span>
-         
-        <span
-          class="badge badge-warning"
-        >
-          Warning
-        </span>
-         
-        <span
-          class="badge badge-info"
-        >
-          Info
-        </span>
-         
-        <span
-          class="badge badge-light"
-        >
-          Light
-        </span>
-         
-        <span
-          class="badge badge-dark"
-        >
-          Dark
-        </span>
-      </div>
-      <!---->
-    </div>
-     
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         Badge
-        
-        <small>
-          shape="pill"
-        </small>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <span
-          class="badge badge-primary"
-          shape="pill"
-        >
-          Primary
-        </span>
-         
-        <span
-          class="badge badge-secondary"
-          shape="pill"
-        >
-          Secondary
-        </span>
-         
-        <span
-          class="badge badge-success"
-          shape="pill"
-        >
-          Success
-        </span>
-         
-        <span
-          class="badge badge-danger"
-          shape="pill"
-        >
-          Danger
-        </span>
-         
-        <span
-          class="badge badge-warning"
-          shape="pill"
-        >
-          Warning
-        </span>
-         
-        <span
-          class="badge badge-info"
-          shape="pill"
-        >
-          Info
-        </span>
-         
-        <span
-          class="badge badge-light"
-          shape="pill"
-        >
-          Light
-        </span>
-         
-        <span
-          class="badge badge-dark"
-          shape="pill"
-        >
-          Dark
-        </span>
-      </div>
-      <!---->
-    </div>
-     
-    <div
-      class="card"
-    >
-      <!---->
-      <header
-        class="card-header"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         Badge
-        
-        <small>
-          actionable
-        </small>
-      </header>
-       
-      <div
-        class="card-body"
-      >
-        <a
-          class="badge badge-primary"
-          href="#"
-          target="_self"
-        >
-          Primary
-        </a>
-         
-        <a
-          class="badge badge-secondary"
-          href="#"
-          target="_self"
-        >
-          Secondary
-        </a>
-         
-        <a
-          class="badge badge-success"
-          href="#"
-          target="_self"
-        >
-          Success
-        </a>
-         
-        <a
-          class="badge badge-danger"
-          href="#"
-          target="_self"
-        >
-          Danger
-        </a>
-         
-        <a
-          class="badge badge-warning"
-          href="#"
-          target="_self"
-        >
-          Warning
-        </a>
-         
-        <a
-          class="badge badge-info"
-          href="#"
-          target="_self"
-        >
-          Info
-        </a>
-         
-        <a
-          class="badge badge-light"
-          href="#"
-          target="_self"
-        >
-          Light
-        </a>
-         
-        <a
-          class="badge badge-dark"
-          href="#"
-          target="_self"
-        >
-          Dark
-        </a>
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;

tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap

@@ -1,338 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modals.vue renders correctly 1`] = `
-<div
-  class="wrapper"
->
-  <div>
-    <crow-stub
-      gutters="true"
-    >
-      <ccol-stub
-        col="12"
-        tag="div"
-      >
-        <ccard-stub>
-          <ccardheader-stub>
-            <i
-              class="fa fa-align-justify"
-            />
-             Bootstrap Modals
-            
-            <div
-              class="card-header-actions"
-            >
-              <a
-                class="card-header-action"
-                href="https://coreui.io/vue/docs/3.0/components/Modal"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                <small
-                  class="text-muted"
-                >
-                  docs
-                </small>
-              </a>
-            </div>
-          </ccardheader-stub>
-           
-          <ccardbody-stub>
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch demo modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch large modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="secondary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch small modal
-            
-            </cbutton-stub>
-             
-            <hr />
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="primary"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch primary modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="success"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch success modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="warning"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch warning modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="danger"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch danger modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="info"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch info modal
-            
-            </cbutton-stub>
-             
-            <cbutton-stub
-              activeclass="active"
-              class="mr-1"
-              color="dark"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              
-              Launch dark modal
-            
-            </cbutton-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-    </crow-stub>
-  </div>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    fade="true"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    fade="true"
-    size="lg"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    fade="true"
-    size="sm"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    color="primary"
-    fade="true"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    color="success"
-    fade="true"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    color="warning"
-    fade="true"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    color="danger"
-    fade="true"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    closeonbackdrop="true"
-    color="info"
-    fade="true"
-    title="Modal title"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  
-  </cmodal-stub>
-   
-  <cmodal-stub
-    backdrop="true"
-    centered="true"
-    closeonbackdrop="true"
-    color="dark"
-    fade="true"
-    no-close-on-backdrop="true"
-    size="lg"
-    title="Modal title 2"
-  >
-    
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    
-  </cmodal-stub>
-</div>
-`;

tests/unit/views/pages/__snapshots__/Login.spec.js.snap

@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Login.vue renders correctly 1`] = `
-<ccontainer-stub
-  class="d-flex align-items-center min-vh-100"
->
-  <crow-stub
-    class="justify-content-center"
-    gutters="true"
-  >
-    <ccol-stub
-      md="8"
-      tag="div"
-    >
-      <ccardgroup-stub>
-        <ccard-stub
-          class="p-4"
-        >
-          <ccardbody-stub>
-            <cform-stub>
-              <h1>
-                Login
-              </h1>
-               
-              <p
-                class="text-muted"
-              >
-                Sign In to your account
-              </p>
-               
-              <cinput-stub
-                autocomplete="username email"
-                lazy="400"
-                placeholder="Username"
-                prependhtml=<i class='cui-user'></i>
-                type="text"
-              />
-               
-              <cinput-stub
-                autocomplete="curent-password"
-                lazy="400"
-                placeholder="Password"
-                prependhtml=<i class='cui-lock-locked'></i>
-                type="password"
-              />
-               
-              <crow-stub
-                gutters="true"
-              >
-                <ccol-stub
-                  col="6"
-                  tag="div"
-                >
-                  <cbutton-stub
-                    activeclass="active"
-                    class="px-4"
-                    color="primary"
-                    event="click"
-                    exactactiveclass="active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                  >
-                    Login
-                  </cbutton-stub>
-                </ccol-stub>
-                 
-                <ccol-stub
-                  class="text-right"
-                  col="6"
-                  tag="div"
-                >
-                  <cbutton-stub
-                    activeclass="active"
-                    class="px-0"
-                    color="link"
-                    event="click"
-                    exactactiveclass="active"
-                    routertag="a"
-                    target="_self"
-                    type="button"
-                  >
-                    Forgot password?
-                  </cbutton-stub>
-                </ccol-stub>
-              </crow-stub>
-            </cform-stub>
-          </ccardbody-stub>
-        </ccard-stub>
-         
-        <ccard-stub
-          bodywrapper="true"
-          class="text-white text-center bg-primary py-5 d-md-down-none"
-        >
-          <h2>
-            Sign up
-          </h2>
-           
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-           
-          <cbutton-stub
-            activeclass="active"
-            class="active mt-3"
-            color="primary"
-            event="click"
-            exactactiveclass="active"
-            routertag="a"
-            target="_self"
-            type="button"
-          >
-            
-            Register Now!
-          
-          </cbutton-stub>
-        </ccard-stub>
-      </ccardgroup-stub>
-    </ccol-stub>
-  </crow-stub>
-</ccontainer-stub>
-`;

tests/unit/views/pages/__snapshots__/Page404.spec.js.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Page404.vue renders correctly 1`] = `
-<ccontainer-stub
-  class="d-flex align-items-center min-vh-100"
->
-  <crow-stub
-    class="w-100 justify-content-center"
-    gutters="true"
-  >
-    <ccol-stub
-      md="6"
-      tag="div"
-    >
-      <div
-        class="w-100"
-      >
-        <div
-          class="clearfix"
-        >
-          <h1
-            class="float-left display-3 mr-4"
-          >
-            404
-          </h1>
-           
-          <h4
-            class="pt-3"
-          >
-            Oops! You're lost.
-          </h4>
-           
-          <p
-            class="text-muted"
-          >
-            The page you are looking for was not found.
-          </p>
-        </div>
-         
-        <cinput-stub
-          class="mb-3"
-          lazy="400"
-          placeholder="What are you looking for?"
-          prependhtml=<i class='cui-magnifying-glass'></i>
-          type="text"
-        />
-      </div>
-    </ccol-stub>
-  </crow-stub>
-</ccontainer-stub>
-`;

tests/unit/views/pages/__snapshots__/Page500.spec.js.snap

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Page500.vue renders correctly 1`] = `
-<ccontainer-stub
-  class="d-flex align-items-center min-vh-100"
->
-  <crow-stub
-    class="w-100 justify-content-center"
-    gutters="true"
-  >
-    <ccol-stub
-      md="6"
-      tag="div"
-    >
-      <div
-        class="clearfix"
-      >
-        <h1
-          class="float-left display-3 mr-4"
-        >
-          500
-        </h1>
-         
-        <h4
-          class="pt-3"
-        >
-          Houston, we have a problem!
-        </h4>
-         
-        <p
-          class="text-muted"
-        >
-          The page you are looking for is temporarily unavailable.
-        </p>
-      </div>
-       
-      <cinput-stub
-        class="mb-3"
-        lazy="400"
-        placeholder="What are you looking for?"
-        prependhtml=<i class='cui-magnifying-glass'></i>
-        type="text"
-      />
-    </ccol-stub>
-  </crow-stub>
-</ccontainer-stub>
-`;

tests/unit/views/pages/__snapshots__/Register.spec.js.snap

@@ -1,132 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Register.vue renders correctly 1`] = `
-<ccontainer-stub
-  class="min-vh-100 d-flex align-items-center"
->
-  <crow-stub
-    class="w-100 justify-content-center"
-    gutters="true"
-  >
-    <ccol-stub
-      md="6"
-      sm="8"
-      tag="div"
-    >
-      <ccard-stub
-        class="mx-4 mb-0"
-      >
-        <ccardbody-stub
-          class="p-4"
-        >
-          <cform-stub>
-            <h1>
-              Register
-            </h1>
-             
-            <p
-              class="text-muted"
-            >
-              Create your account
-            </p>
-             
-            <cinput-stub
-              autocomplete="username"
-              lazy="400"
-              placeholder="Username"
-              prependhtml=<i class='cui-user'></i>
-              type="text"
-            />
-             
-            <cinput-stub
-              autocomplete="email"
-              lazy="400"
-              placeholder="Email"
-              prependhtml="@"
-              type="text"
-            />
-             
-            <cinput-stub
-              autocomplete="new-password"
-              lazy="400"
-              placeholder="Password"
-              prependhtml=<i class='cui-lock-locked'></i>
-              type="password"
-            />
-             
-            <cinput-stub
-              autocomplete="new-password"
-              class="mb-4"
-              lazy="400"
-              placeholder="Repeat password"
-              prependhtml=<i class='cui-lock-locked'></i>
-              type="password"
-            />
-             
-            <cbutton-stub
-              activeclass="active"
-              block="true"
-              color="success"
-              event="click"
-              exactactiveclass="active"
-              routertag="a"
-              target="_self"
-              type="button"
-            >
-              Create Account
-            </cbutton-stub>
-          </cform-stub>
-        </ccardbody-stub>
-         
-        <ccardfooter-stub
-          class="p-4"
-        >
-          <crow-stub
-            gutters="true"
-          >
-            <ccol-stub
-              col="6"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="active"
-                block="true"
-                color="facebook"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-                type="button"
-              >
-                
-                Facebook
-              
-              </cbutton-stub>
-            </ccol-stub>
-             
-            <ccol-stub
-              col="6"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="active"
-                block="true"
-                color="twitter"
-                event="click"
-                exactactiveclass="active"
-                routertag="a"
-                target="_self"
-                type="button"
-              >
-                
-                Twitter
-              
-              </cbutton-stub>
-            </ccol-stub>
-          </crow-stub>
-        </ccardfooter-stub>
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-</ccontainer-stub>
-`;

tests/unit/views/theme/__snapshots__/Colors.spec.js.snap

@@ -1,852 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Colors.vue renders correctly 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <!---->
-    <header
-      class="card-header"
-    >
-      <i
-        class="cui-drop"
-      />
-       Theme colors
-    
-    </header>
-     
-    <div
-      class="card-body"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-primary"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Primary Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-secondary"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Secondary Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-success"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Success Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-danger"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Danger Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-warning"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Warning Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-info"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Info Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-light"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Light Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-dark"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand Dark Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <!---->
-  </div>
-   
-  <div
-    class="card"
-  >
-    <!---->
-    <header
-      class="card-header"
-    >
-      <i
-        class="cui-drop"
-      />
-       Grays
-    
-    </header>
-     
-    <div
-      class="card-body"
-    >
-      <div
-        class="row"
-      >
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-100"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 100 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-200"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 200 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-300"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 300 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-400"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 400 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-500"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 500 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-600"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 600 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-700"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 700 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-800"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 800 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-         
-        <div
-          class="mb-4 col-xs-12 col-sm-6 col-md-4 col-xl-2"
-        >
-          <div
-            class="theme-color w-75 rounded mb-3 bg-gray-900"
-            style="padding-top: 75%;"
-          />
-           
-          <h6>
-            Brand 900 Color
-          </h6>
-           
-          <table
-            class="w-100"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  HEX:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  #ffffff
-                </td>
-              </tr>
-               
-              <tr>
-                <td
-                  class="text-muted"
-                >
-                  RGB:
-                </td>
-                 
-                <td
-                  class="font-weight-bold"
-                >
-                  rgb(255, 255, 255)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <!---->
-  </div>
-</div>
-`;