test: update tests and snapshots

tests/unit/App.spec.js

@@ -12,7 +12,7 @@ localVue.use(CoreuiVue)
 
 describe('App.vue', () => {
   it('has a name', () => {
-    expect(App.name).toMatch('app')
+    expect(App.name).toBe('App')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(App, {

tests/unit/containers/TheContainer.spec.js

@@ -11,7 +11,7 @@ localVue.use(CoreuiVue)
 
 describe('TheContainer.vue', () => {
   it('has a name', () => {
-    expect(TheContainer.name).toMatch('full')
+    expect(TheContainer.name).toBe('TheContainer')
   })
   test('renders correctly', () => {
     const wrapper = shallowMount(TheContainer, {

tests/unit/containers/TheHeaderDropdownAccnt.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('TheHeaderDropdownAccnt.vue', () => {
   it('has a name', () => {
-    expect(TheHeaderDropdownAccnt.name).toMatch('TheHeaderDropdownAccnt')
+    expect(TheHeaderDropdownAccnt.name).toBe('TheHeaderDropdownAccnt')
   })
   it('has a created hook', () => {
     expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')

tests/unit/containers/TheSidebar.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('TheSidebar.vue', () => {
   it('has a name', () => {
-    expect(TheSidebar.name).toMatch('TheSidebar')
+    expect(TheSidebar.name).toBe('TheSidebar')
   })
   test('renders correctly', () => {
     const wrapper = shallowMount(TheSidebar)

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DefaultContainer.vue renders correctly 1`] = `
-<div
-  class="c-app c-default-layout"
->
-  <theheader-stub />
-   
-  <thesidebar-stub />
-   
-  <div
-    class="c-body"
-  >
-    <main
-      class="c-main"
-    >
-      <cbreadcrumbrouter-stub />
-       
-      <ccontainer-stub
-        fluid="true"
-      >
-        <router-view-stub
-          name="fade"
-        />
-      </ccontainer-stub>
-    </main>
-  </div>
-   
-  <thefooter-stub />
-</div>
-`;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TheContainer.vue renders correctly 1`] = `
+<div
+  class="c-app"
+>
+  <thesidebar-stub />
+   
+  <div
+    class="c-wrapper"
+  >
+    <theheader-stub />
+     
+    <div
+      class="c-body"
+    >
+      <main
+        class="c-main"
+      >
+        <ccontainer-stub
+          fluid="true"
+        >
+          <router-view-stub
+            name="fade"
+          />
+        </ccontainer-stub>
+      </main>
+    </div>
+     
+    <thefooter-stub />
+  </div>
+</div>
+`;

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

@@ -10,17 +10,17 @@ exports[`TheFooter.vue renders correctly 1`] = `
     </a>
      
     <span
-      class="c-ml-1"
+      class="ml-1"
     >
-      © 2018 creativeLabs.
+      © 2019 creativeLabs.
     </span>
   </div>
    
   <div
-    class="c-ml-auto"
+    class="ml-auto"
   >
     <span
-      class="c-mr-1"
+      class="mr-1"
     >
       Powered by
     </span>

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

@@ -3,153 +3,82 @@
 exports[`TheHeader.vue renders correctly 1`] = `
 <cheader-stub
   fixed="true"
+  light=""
+  with-subheader=""
 >
   <csidebartoggler-stub
-    class="c-header-toggler c-d-lg-none c-mr-auto"
+    class="c-header-toggler ml-3"
   />
    
-  <clink-stub
+  <img
-    activeclass="c-active"
+    alt="CoreUI Logo"
-    class="c-header-brand,[object Object]"
+    class="c-header-brand mx-auto d-lg-none"
-    event="click"
+    height="46"
-    exactactiveclass="c-active"
+    src="img/brand/coreui-base.svg"
-    routertag="a"
+    width="97"
-    tag="span"
-    target="_self"
-    to="/"
-  >
-    <img
-      alt="CoreUI Logo"
-      class="c-navbar-brand-minimized c-d-md-down-none"
-      height="30"
-      src="img/brand/sygnet.svg"
-      style="display: none;"
-      width="30"
-    />
-     
-    <img
-      alt="CoreUI Logo"
-      class="c-navbar-brand-full c-d-md-down-none"
-      height="25"
-      src="img/brand/logo.svg"
-      width="89"
-    />
-     
-    <img
-      alt="CoreUI Logo"
-      class="c-navbar-brand-full c-d-lg-none"
-      height="25"
-      src="img/brand/logo.svg"
-      width="89"
-    />
-  </clink-stub>
-   
-  <csidebartoggler-stub
-    class="c-header-toggler c-d-md-down-none"
   />
    
   <ul
-    class="c-header-nav c-d-md-down-none"
+    class="c-header-nav d-md-down-none mr-auto"
   >
-    <cnavitem-stub
+    <cheadernavitem
-      activeclass="c-active"
+      class="px-3"
-      class="c-px-3"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
       to="/dashboard"
     >
       Dashboard
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
+    <cheadernavitem
-      activeclass="c-active"
+      class="px-3"
-      class="c-px-3"
+      exact=""
-      event="click"
-      exact="true"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
       to="/users"
     >
       Users
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
+    <cheadernavitem
-      activeclass="c-active"
+      class="px-3"
-      class="c-px-3"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
     >
       Settings
-    </cnavitem-stub>
+    </cheadernavitem>
   </ul>
    
-  <cnav-stub
+  <ul
-    class="c-header-nav c-ml-auto"
+    class="c-header-nav mr-4"
   >
-    <cnavitem-stub
+    <cheadernavitem
-      activeclass="c-active"
+      class="d-md-down-none mx-2"
-      class="c-d-md-down-none"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
     >
       <i
         class="cui-bell"
       />
-       
+    </cheadernavitem>
-      <cbadge-stub
-        activeclass="c-active"
-        event="click"
-        exactactiveclass="c-active"
-        pill="true"
-        routertag="a"
-        tag="span"
-        target="_self"
-        variant="danger"
-      >
-        5
-      </cbadge-stub>
-    </cnavitem-stub>
      
-    <cnavitem-stub
+    <cheadernavitem
-      activeclass="c-active"
+      class="d-md-down-none mx-2"
-      class="c-d-md-down-none"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
     >
       <i
         class="cui-list"
       />
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <cnavitem-stub
+    <cheadernavitem
-      activeclass="c-active"
+      class="d-md-down-none mx-2"
-      class="d-md-down-none"
-      event="click"
-      exactactiveclass="c-active"
-      routertag="a"
-      tag="span"
-      target="_self"
     >
       <i
-        class="cui-location-pin"
+        class="cui-envelope-open"
       />
-    </cnavitem-stub>
+    </cheadernavitem>
      
-    <defaultheaderdropdownaccnt-stub />
+    <theheaderdropdownaccnt-stub />
-  </cnav-stub>
+  </ul>
+   
+  <div
+    class="c-subheader px-3"
+  >
+    <cbreadcrumbrouter-stub
+      class="border-0"
+    />
+  </div>
 </cheader-stub>
 `;

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

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
+exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
 <cdropdown-stub
-  addmenuclasses="c-dropdown-menu-right"
+  addmenuclasses="pt-0"
+  class="c-header-nav-items"
   nav="true"
   nocaret="true"
-  nopopper="true"
+  placement="bottom-end"
-  placement="bottom-start"
   togglertext="Dropdown"
 >
    
   <cdropdownheader-stub
-    class="c-text-center"
+    class="text-center bg-light"
     tag="div"
   >
     <strong>
@@ -20,22 +20,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownheader-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-bell"
+      class="cui-bell mr-2"
     />
      Updates
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
-      additional-classes="hehe"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -46,21 +46,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-envelope-open"
+      class="cui-envelope-open mr-2"
     />
      Messages
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -71,21 +72,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-task"
+      class="cui-task mr-2"
     />
      Tasks
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -96,21 +98,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-comment-square"
+      class="cui-comment-square mr-2"
     />
      Comments
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -121,7 +124,7 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownheader-stub
-    class="c-text-center"
+    class="text-center bg-light"
     tag="div"
   >
     <strong>
@@ -130,49 +133,50 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownheader-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-user"
+      class="cui-user mr-2"
     />
      Profile
   
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-wrench"
+      class="cui-wrench mr-2"
     />
      Settings
   
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-dollar"
+      class="cui-dollar mr-2"
     />
      Payments
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -183,21 +187,22 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-file"
+      class="cui-file mr-2"
     />
      Projects
     
     <cbadge-stub
-      activeclass="c-active"
+      activeclass="active"
+      class="ml-auto"
       event="click"
-      exactactiveclass="c-active"
+      exactactiveclass="active"
       routertag="a"
       tag="span"
       target="_self"
@@ -212,28 +217,28 @@ exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
   />
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-shield"
+      class="cui-shield mr-2"
     />
      Lock Account
   
   </cdropdownitem-stub>
    
   <cdropdownitem-stub
-    activeclass="c-active"
+    activeclass="active"
     event="click"
-    exactactiveclass="c-active"
+    exactactiveclass="active"
     routertag="a"
     target="_self"
   >
     <i
-      class="cui-lock-locked"
+      class="cui-lock-locked mr-2"
     />
      Logout
   

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

@@ -3,25 +3,22 @@
 exports[`TheSidebar.vue renders correctly 1`] = `
 <csidebar-stub
   breakpoint="lg"
-  dropdownbehaviors="closeOnInactiveRoute"
+  dropdownstateonroutechange="openActive"
   fixed="true"
   show="true"
 >
-  <csidebarheader-stub />
+  <csidebarbrand
+    fullsrc="img/brand/coreui-base-white.svg"
+    minimizedsrc="img/brand/coreui-signet-white.svg"
+    wrappedinlink="[object Object]"
+  />
    
-  <csidebarform-stub />
+  <crenderfunction-stub
-   
+    contenttorender="CSidebarNav,CSidebarNavLink,[object Object],CSidebarNavTitle,Theme,CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavTitle,Components,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDivider,CSidebarNavTitle,Extras,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object]"
-  <csidebarnav-stub>
+  />
-    <ctreegenerator-stub
-      components="[object Object]"
-      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]"
-    />
-  </csidebarnav-stub>
-   
-  <csidebarfooter-stub />
    
   <csidebarminimizer-stub
-    class="c-d-md-down-none"
+    class="d-md-down-none"
   />
 </csidebar-stub>
 `;

tests/unit/views/Charts.spec.js

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils';
 import CoreuiVue from '@coreui/vue'
-import Charts from '@/views/Charts'
+import Charts from '@/views/charts/Charts'
 
 Vue.use(CoreuiVue)
 
 describe('Charts.vue', () => {
   it('has a name', () => {
-    expect(Charts.name).toMatch('Charts')
+    expect(Charts.name).toBe('Charts')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Charts)

tests/unit/views/Dashboard.spec.js

@@ -11,7 +11,7 @@ Vue.use(CIconPlugin, iconsSet)
 
 describe('Dashboard.vue', () => {
   it('has a name', () => {
-    expect(Dashboard.name).toMatch('Dashboard')
+    expect(Dashboard.name).toBe('Dashboard')
   })
   it('has a created hook', () => {
     expect(typeof Dashboard.data).toMatch('function')

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

@@ -3,7 +3,7 @@
 exports[`Charts.vue renders correctly 1`] = `
 <div>
   <ccardgroup-stub
-    class="c-card-columns c-cols-2"
+    class="card-columns cols-2"
     columns="true"
   >
     <ccard-stub
@@ -18,7 +18,7 @@ exports[`Charts.vue renders correctly 1`] = `
         Line Chart
         
         <div
-          class="c-card-header-actions"
+          class="card-header-actions"
         >
           <a
             class="card-header-action"

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

@@ -18,29 +18,29 @@ exports[`Dashboard.vue renders correctly 1`] = `
           tag="div"
         >
           <h4
-            class="c-card-title c-mb-0"
+            class="card-title mb-0"
             id="traffic"
           >
             Traffic
           </h4>
            
           <div
-            class="c-small c-text-muted"
+            class="small text-muted"
           >
             November 2017
           </div>
         </ccol-stub>
          
         <ccol-stub
-          class="c-d-none c-d-md-block"
+          class="d-none d-md-block"
           sm="7"
           tag="div"
         >
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
-            class="c-float-right"
+            class="float-right"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"
@@ -52,13 +52,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </cbutton-stub>
            
           <cbuttongroup-stub
-            class="c-float-right c-mr-3"
+            class="float-right mr-3"
           >
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mx-0"
+              class="mx-0"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -69,10 +69,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
             
             </cbutton-stub>
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mx-0"
+              class="mx-0"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               pressed="true"
               routertag="a"
               target="_self"
@@ -84,10 +84,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
             
             </cbutton-stub>
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mx-0"
+              class="mx-0"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -111,16 +111,16 @@ exports[`Dashboard.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-text-center"
+        class="text-center"
       >
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0"
+          class="mb-sm-2 mb-0"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Visits
           </div>
@@ -130,7 +130,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="40"
@@ -139,13 +139,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0 c-d-md-down-none"
+          class="mb-sm-2 mb-0 d-md-down-none"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Unique
           </div>
@@ -155,7 +155,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="20"
@@ -164,13 +164,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0"
+          class="mb-sm-2 mb-0"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Pageviews
           </div>
@@ -180,7 +180,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="60"
@@ -189,13 +189,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0"
+          class="mb-sm-2 mb-0"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             New Users
           </div>
@@ -205,7 +205,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="80"
@@ -214,13 +214,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
         </ccol-stub>
          
         <ccol-stub
-          class="c-mb-sm-2 c-mb-0 c-d-md-down-none"
+          class="mb-sm-2 mb-0 d-md-down-none"
           md="true"
           sm="12"
           tag="div"
         >
           <div
-            class="c-text-muted"
+            class="text-muted"
           >
             Bounce Rate
           </div>
@@ -230,7 +230,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
           </strong>
            
           <cprogress-stub
-            class="c-progress-xs c-mt-2"
+            class="progress-xs mt-2"
             max="100"
             precision="1"
             value="40"
@@ -268,14 +268,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="info"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     New Clients
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     9,123
                   </strong>
@@ -290,14 +290,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="danger"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     Recurring Clients
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     22,643
                   </strong>
@@ -306,17 +306,17 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </crow-stub>
              
             <hr
-              class="c-mt-0"
+              class="mt-0"
             />
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Monday
@@ -325,10 +325,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="34"
@@ -336,7 +336,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="78"
@@ -346,13 +346,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Tuesday
@@ -361,10 +361,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="56"
@@ -372,7 +372,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="94"
@@ -382,13 +382,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Wednesday
@@ -397,10 +397,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="12"
@@ -408,7 +408,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="67"
@@ -418,13 +418,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Thursday
@@ -433,10 +433,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="43"
@@ -444,7 +444,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="91"
@@ -454,13 +454,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Friday
@@ -469,10 +469,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="22"
@@ -480,7 +480,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="73"
@@ -490,13 +490,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Saturday
@@ -505,10 +505,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="53"
@@ -516,7 +516,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="82"
@@ -526,13 +526,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-progress-group c-mb-4"
+              class="progress-group mb-4"
             >
               <div
-                class="c-progress-group-prepend"
+                class="progress-group-prepend"
               >
                 <span
-                  class="c-progress-group-text"
+                  class="progress-group-text"
                 >
                   
                   Sunday
@@ -541,10 +541,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group-bars"
+                class="progress-group-bars"
               >
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="9"
@@ -552,7 +552,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 />
                  
                 <cprogress-stub
-                  class="c-progress-xs"
+                  class="progress-xs"
                   max="100"
                   precision="0"
                   value="69"
@@ -562,14 +562,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-legend c-text-center"
+              class="legend text-center"
             >
               <small>
                 <sup>
                   <cbadge-stub
-                    activeclass="c-active"
+                    activeclass="active"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     pill="true"
                     routertag="a"
                     tag="span"
@@ -585,9 +585,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 
                 <sup>
                   <cbadge-stub
-                    activeclass="c-active"
+                    activeclass="active"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     pill="true"
                     routertag="a"
                     tag="span"
@@ -618,14 +618,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="warning"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     Pageviews
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     78,623
                   </strong>
@@ -640,14 +640,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
                   variant="success"
                 >
                   <small
-                    class="c-text-muted"
+                    class="text-muted"
                   >
                     Organic
                   </small>
                   <br />
                    
                   <strong
-                    class="c-h4"
+                    class="h4"
                   >
                     49,123
                   </strong>
@@ -656,40 +656,40 @@ exports[`Dashboard.vue renders correctly 1`] = `
             </crow-stub>
              
             <hr
-              class="c-mt-0"
+              class="mt-0"
             />
              
             <ul
-              class="c-horizontal-bars c-type-2"
+              class="horizontal-bars type-2"
             >
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <i
-                    class="cui-user c-progress-group-icon"
+                    class="cui-user progress-group-icon"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Male
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     43%
                   </span>
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="43"
@@ -699,33 +699,33 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group c-mb-5"
+                class="progress-group mb-5"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <i
-                    class="cui-user-female c-progress-group-icon"
+                    class="cui-user-female progress-group-icon"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Female
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     37%
                   </span>
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="37"
@@ -735,23 +735,23 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <i
-                    class="cui-globe c-progress-group-icon"
+                    class="cui-globe progress-group-icon"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Organic Search
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     191,235
@@ -764,10 +764,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="56"
@@ -777,30 +777,30 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <cicon-stub
-                    class="c-progress-group-icon"
+                    class="progress-group-icon"
                     height="17"
                     name="socialFacebook"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Facebook
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     51,223 
                     <span
-                      class="c-text-muted small"
+                      class="text-muted small"
                     >
                       (15%)
                     </span>
@@ -808,10 +808,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="15"
@@ -821,30 +821,30 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <cicon-stub
-                    class="c-progress-group-icon"
+                    class="progress-group-icon"
                     height="17"
                     name="socialTwitter"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     Twitter
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     37,564 
                     <span
-                      class="c-text-muted c-small"
+                      class="text-muted small"
                     >
                       (11%)
                     </span>
@@ -852,10 +852,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="11"
@@ -865,30 +865,30 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-progress-group"
+                class="progress-group"
               >
                 <div
-                  class="c-progress-group-header"
+                  class="progress-group-header"
                 >
                   <cicon-stub
-                    class="c-progress-group-icon"
+                    class="progress-group-icon"
                     height="17"
                     name="socialLinkedin"
                   />
                    
                   <span
-                    class="c-title"
+                    class="title"
                   >
                     LinkedIn
                   </span>
                    
                   <span
-                    class="c-ml-auto c-font-weight-bold"
+                    class="ml-auto font-weight-bold"
                   >
                     
                     27,319 
                     <span
-                      class="c-text-muted small"
+                      class="text-muted small"
                     >
                        (8%)
                     </span>
@@ -896,10 +896,10 @@ exports[`Dashboard.vue renders correctly 1`] = `
                 </div>
                  
                 <div
-                  class="c-progress-group-bars"
+                  class="progress-group-bars"
                 >
                   <cprogress-stub
-                    class="c-progress-xs"
+                    class="progress-xs"
                     max="100"
                     precision="0"
                     value="8"
@@ -909,13 +909,13 @@ exports[`Dashboard.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-divider c-text-center"
+                class="divider text-center"
               >
                 <cbutton-stub
-                  activeclass="c-active"
+                  activeclass="active"
-                  class="c-text-muted"
+                  class="text-muted"
                   event="click"
-                  exactactiveclass="c-active"
+                  exactactiveclass="active"
                   routertag="a"
                   size="sm"
                   target="_self"
@@ -934,7 +934,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
         <br />
          
         <ctable-stub
-          class="c-mb-0 c-table-outline"
+          class="mb-0 table-outline"
           defaultsorter="[object Object]"
           fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
           head-variant="light"

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Breadcrumbs.vue', () => {
   it('has a name', () => {
-    expect(Breadcrumbs.name).toMatch('breadcrumbs')
+    expect(Breadcrumbs.name).toBe('Breadcrumbs')
   })
   it('has a created hook', () => {
     expect(typeof Breadcrumbs.data).toMatch('function')

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Cards.vue', () => {
   it('has a name', () => {
-    expect(Cards.name).toMatch('cards')
+    expect(Cards.name).toBe('Cards')
   })
   it('has a created hook', () => {
     expect(typeof Cards.data).toMatch('function')

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Carousels.vue', () => {
   it('has a name', () => {
-    expect(Carousels.name).toMatch('carousels')
+    expect(Carousels.name).toBe('Carousels')
   })
   it('is Carousels', () => {
     const wrapper = shallowMount(Carousels)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Collapses.vue', () => {
   it('has a name', () => {
-    expect(Collapses.name).toMatch('collapses')
+    expect(Collapses.name).toBe('Collapses')
   })
   it('has a created hook', () => {
     expect(typeof Collapses.data).toMatch('function')

tests/unit/views/base/Forms.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Forms.vue', () => {
   it('has a name', () => {
-    expect(Forms.name).toMatch('forms')
+    expect(Forms.name).toBe('Forms')
   })
   it('is Forms', () => {
     const wrapper = shallowMount(Forms)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Jumbotrons.vue', () => {
   it('has a name', () => {
-    expect(Jumbotrons.name).toMatch('jumbotrons')
+    expect(Jumbotrons.name).toBe('Jumbotrons')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Jumbotrons)

tests/unit/views/base/ListGroups.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('ListGroups.vue', () => {
   it('has a name', () => {
-    expect(ListGroups.name).toMatch('list-groups')
+    expect(ListGroups.name).toBe('ListGroups')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(ListGroups)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Navbars.vue', () => {
   it('has a name', () => {
-    expect(Navbars.name).toMatch('navbars')
+    expect(Navbars.name).toBe('Navbars')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Navbars)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Navs.vue', () => {
   it('has a name', () => {
-    expect(Navs.name).toMatch('navs')
+    expect(Navs.name).toBe('Navs')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Navs)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Paginations.vue', () => {
   it('has a name', () => {
-    expect(Paginations.name).toMatch('paginations')
+    expect(Paginations.name).toBe('Paginations')
   })
   it('has a created hook', () => {
     expect(typeof Paginations.data).toMatch('function')

tests/unit/views/base/Popovers.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Popovers.vue', () => {
   it('has a name', () => {
-    expect(Popovers.name).toMatch('popovers')
+    expect(Popovers.name).toBe('Popovers')
   })
   it('has a created hook', () => {
     expect(typeof Popovers.data).toMatch('function')

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

@@ -9,7 +9,7 @@ jest.useFakeTimers()
 
 describe('ProgressBars.vue', () => {
   it('has a name', () => {
-    expect(ProgressBars.name).toMatch('progress-bars')
+    expect(ProgressBars.name).toBe('ProgressBars')
   })
   it('has a created hook', () => {
     expect(typeof ProgressBars.data).toMatch('function')

tests/unit/views/base/Switches.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Switches.vue', () => {
   it('has a name', () => {
-    expect(Switches.name).toMatch('switches')
+    expect(Switches.name).toBe('Switches')
   })
   it('has a created hook', () => {
     expect(typeof Switches.data).toMatch('function')

tests/unit/views/base/Table.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Table.vue', () => {
   it('has a name', () => {
-    expect(Table.name).toMatch('TableWrapper')
+    expect(Table.name).toBe('Table')
   })
   it('is Vue instance', () => {
     const wrapper = mount(Table)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Tables.vue', () => {
   it('has a name', () => {
-    expect(Tables.name).toMatch('tables')
+    expect(Tables.name).toBe('Tables')
   })
   it('is Vue instance', () => {
     const wrapper = mount(Tables)

tests/unit/views/base/Tabs.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Tabs.vue', () => {
   it('has a name', () => {
-    expect(Tabs.name).toMatch('tabs')
+    expect(Tabs.name).toBe('Tabs')
   })
   it('has a created hook', () => {
     expect(typeof Tabs.data).toMatch('function')

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Tooltips.vue', () => {
   it('has a name', () => {
-    expect(Tooltips.name).toMatch('tooltips')
+    expect(Tooltips.name).toBe('Tooltips')
   })
   it('has a created hook', () => {
     expect(typeof Tooltips.data).toMatch('function')

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

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

@@ -3,23 +3,23 @@
 exports[`Cards.vue renders correctly 1`] = `
 <div>
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card title
           
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -37,7 +37,7 @@ exports[`Cards.vue renders correctly 1`] = `
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -50,19 +50,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <div
-          class="c-card-body"
+          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="c-card-footer"
+          class="card-footer"
         >
           Card Footer
         </footer>
@@ -70,13 +70,13 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           <i
             class="cui-check"
@@ -84,7 +84,7 @@ exports[`Cards.vue renders correctly 1`] = `
            Card with icon
         </header>
         <div
-          class="c-card-body"
+          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>
@@ -93,36 +93,36 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card with switch
           
           <label
-            class="c-float-right c-switch c-form-check-label c-switch-info c-switch-sm c-switch-pill"
+            class="float-right switch form-check-label switch-info switch-sm switch-pill"
           >
             <input
-              class="c-switch-input c-form-check-input"
+              class="switch-input form-check-input"
               data-off="Off"
               data-on="On"
               type="checkbox"
               value=""
             />
             <span
-              class="c-switch-slider"
+              class="switch-slider"
             />
           </label>
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -135,27 +135,27 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card with label
           
           <span
-            class="c-badge c-float-right c-badge-success"
+            class="badge float-right badge-success"
           >
             Success
           </span>
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -168,27 +168,27 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card"
+        class="card"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
           Card with label
           
           <span
-            class="c-badge c-float-right c-badge-danger c-badge-pill"
+            class="badge float-right badge-danger badge-pill"
           >
             42
           </span>
         </header>
          
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -202,18 +202,18 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-primary"
+        class="card border-primary"
         header="Card outline primary"
       >
         <!---->
         <div
-          class="c-card-body"
+          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>
@@ -222,15 +222,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-secondary"
+        class="card border-secondary"
         header="Card outline secondary"
       >
         <!---->
         <div
-          class="c-card-body"
+          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>
@@ -239,15 +239,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-success"
+        class="card border-success"
         header="Card outline success"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -260,18 +260,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-info"
+        class="card border-info"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card outline info
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -284,18 +284,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-warning"
+        class="card border-warning"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card outline warning
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -308,18 +308,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-border-danger"
+        class="card border-danger"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card outline danger
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -333,18 +333,18 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-primary"
+        class="card card-accent-primary"
         header="Card with primary accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -357,15 +357,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-secondary"
+        class="card card-accent-secondary"
         header="Card with secondary accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -378,15 +378,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-success"
+        class="card card-accent-success"
         header="Card with success accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -399,15 +399,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-info"
+        class="card card-accent-info"
         header="Card with info accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -420,15 +420,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-warning"
+        class="card card-accent-warning"
         header="Card with warning accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -441,15 +441,15 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-card-accent-danger"
+        class="card card-accent-danger"
         header="Card with danger accent"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -463,22 +463,22 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-primary c-text-center"
+        class="card bg-primary text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -500,19 +500,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-success c-text-center"
+        class="card bg-success text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -534,19 +534,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-info c-text-center"
+        class="card bg-info text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -568,19 +568,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-warning c-text-center"
+        class="card bg-warning text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -602,19 +602,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-danger c-text-center"
+        class="card bg-danger text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -636,19 +636,19 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-secondary c-text-center"
+        class="card bg-secondary text-center"
       >
         <!---->
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
           <blockquote
-            class="c-card-blockquote"
+            class="card-blockquote"
           >
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -671,21 +671,21 @@ exports[`Cards.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-row"
+    class="row"
   >
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-primary"
+        class="card bg-primary"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -698,18 +698,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-success"
+        class="card bg-success"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -722,18 +722,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-info"
+        class="card bg-info"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -746,18 +746,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-warning"
+        class="card bg-warning"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -770,18 +770,18 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-danger"
+        class="card bg-danger"
       >
         <header
-          class="c-card-header"
+          class="card-header"
         >
           Card title
         </header>
         <div
-          class="c-card-body"
+          class="card-body"
         >
           <!---->
           <!---->
@@ -794,24 +794,24 @@ exports[`Cards.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-col-sm-6 c-col-md-4"
+      class="col-sm-6 col-md-4"
     >
       <div
-        class="c-card c-bg-secondary"
+        class="card bg-secondary"
         name="fade"
       >
         <!---->
         <header
-          class="c-card-header"
+          class="card-header"
         >
           
             Card with header actions
             
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
-              class="c-card-header-action btn-setting"
+              class="card-header-action btn-setting"
               href="#"
               target="_self"
             >
@@ -821,7 +821,7 @@ exports[`Cards.vue renders correctly 1`] = `
             </a>
              
             <a
-              class="c-card-header-action btn-minimize"
+              class="card-header-action btn-minimize"
               href="#"
               target="_self"
             >
@@ -831,7 +831,7 @@ exports[`Cards.vue renders correctly 1`] = `
             </a>
              
             <a
-              class="c-card-header-action c-btn-close"
+              class="card-header-action btn-close"
               href="#"
               target="_self"
             >
@@ -844,11 +844,11 @@ exports[`Cards.vue renders correctly 1`] = `
          
         <div
           class=""
-          data-v-98918eb0=""
+          data-v-1b076234=""
         >
           <div
-            class="c-card-body"
+            class="card-body"
-            data-v-98918eb0=""
+            data-v-1b076234=""
           >
             <!---->
             <!---->

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

@@ -2,150 +2,136 @@
 
 exports[`Carousels.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="row"
 >
-  <div>
+  <div
+    class="col-md-12 col-lg-7"
+  >
     <div
-      class="c-row"
+      class="card"
     >
-      <div
+      <!---->
-        class="c-col-md-12 c-col-lg-7"
+      <header
+        class="card-header"
       >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Carousel
+        </strong>
+         
         <div
-          class="c-card"
+          class="card-header-actions"
         >
-          <!---->
+          <a
-          <header
+            class="card-header-action"
-            class="c-card-header"
+            href="https://coreui.io/vue/docs/3.0/components/Carousel"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
+            <small
-              class="fa fa-align-justify"
+              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
-            <strong>
+              class=""
-               Bootstrap Carousel
+            />
-            </strong>
+            <li
-             
+              class=""
-            <div
+            />
-              class="c-card-header-actions"
+          </ol>
-            >
-              <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="c-card-body"
+            class="carousel-inner"
           >
-            <!---->
-            <!---->
             <div
-              class="c-carousel c-slide"
+              class="carousel-item active"
-              style="height: 400px;"
             >
-              <ol
+              <img
-                class="c-carousel-indicators"
+                class="d-block w-100 h-100 img-fluid"
-              >
+                src="https://lorempixel.com/1024/480/technics/2/"
-                <li
+              />
-                  class="c-active"
-                />
-                <li
-                  class=""
-                />
-                <li
-                  class=""
-                />
-              </ol>
               <div
-                class="c-carousel-inner"
+                class="carousel-caption"
               >
-                <div
+                <h3>
-                  class="c-carousel-item c-active"
+                  First Slide
-                >
+                </h3>
-                  <img
+                <p>
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
+                  Nulla vitae elit libero, a pharetra augue mollis interdum.
-                    src="https://lorempixel.com/1024/480/technics/2/"
+                </p>
-                  />
-                  <div
-                    class="c-carousel-caption"
-                  >
-                    <h3>
-                      First Slide
-                    </h3>
-                    <p>
-                      Nulla vitae elit libero, a pharetra augue mollis interdum.
-                    </p>
-                  </div>
-                </div>
-                 
-                <div
-                  class="c-carousel-item"
-                >
-                  <svg
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
-                    style="background-color: grey;"
-                  />
-                  <div
-                    class="c-carousel-caption"
-                  >
-                    <h3>
-                      Blank page
-                    </h3>
-                    <p>
-                      Nulla vitae elit libero, a pharetra augue mollis interdum.
-                    </p>
-                  </div>
-                </div>
-                 
-                <div
-                  class="c-carousel-item"
-                >
-                  <img
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
-                    src="https://lorempixel.com/1024/480/technics/8/"
-                  />
-                  <!---->
-                </div>
               </div>
-              <a
+            </div>
-                class="c-carousel-control-prev"
+             
+            <div
+              class="carousel-item"
+            >
+              <svg
+                class="d-block w-100 h-100 img-fluid"
+                style="background-color: grey;"
+              />
+              <div
+                class="carousel-caption"
               >
-                <span
+                <h3>
-                  class="c-carousel-control-prev-icon"
+                  Blank page
-                />
+                </h3>
-                <span
+                <p>
-                  class="sr-only"
+                  Nulla vitae elit libero, a pharetra augue mollis interdum.
-                >
+                </p>
-                  Previous
+              </div>
-                </span>
+            </div>
-              </a>
+             
-              <a
+            <div
-                class="c-carousel-control-next"
+              class="carousel-item"
-              >
+            >
-                <span
+              <img
-                  class="c-carousel-control-next-icon"
+                class="d-block w-100 h-100 img-fluid"
-                />
+                src="https://lorempixel.com/1024/480/technics/8/"
-                <span
+              />
-                  class="sr-only"
+              <!---->
-                >
-                  Next
-                </span>
-              </a>
             </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

@@ -2,126 +2,120 @@
 
 exports[`Collapses.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="row"
 >
-  <div>
+  <div
+    class="col-12 col-md-6"
+  >
     <div
-      class="c-row"
+      class="card"
     >
-      <div
+      <!---->
-        class="c-col-12 c-col-md-6"
+      <header
+        class="card-header"
       >
+        <i
+          class="fa fa-align-justify"
+        />
+         
+        <strong>
+           Bootstrap Collapse 
+        </strong>
+         
         <div
-          class="c-card"
+          class="card-header-actions"
         >
-          <!---->
+          <a
-          <header
+            class="card-header-action"
-            class="c-card-header"
+            href="https://coreui.io/vue/docs/3.0/components/Collapse"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
+            <small
-              class="fa fa-align-justify"
+              class="text-muted"
-            />
-             
-            <strong>
-               Bootstrap Collapse 
-            </strong>
-             
-            <div
-              class="c-card-header-actions"
             >
-              <a
+              docs
-                class="card-header-action"
+            </small>
-                href="https://coreui.io/vue/docs/3.0/components/Collapse"
+          </a>
-                rel="noreferrer noopener"
+        </div>
-                target="_blank"
+      </header>
-              >
+       
-                <small
+      <div
-                  class="text-muted"
+        class="card-body"
-                >
+      >
-                  docs
+        <!---->
-                </small>
+        <!---->
-              </a>
+        <button
-            </div>
+          class="btn btn-primary"
-          </header>
+          id="collapse1"
-           
+          type="button"
+        >
+          
+          Toggle Collapse
+        
+        </button>
+         
+        <div
+          class="mt-2"
+          data-v-1b076234=""
+          style="display: none;"
+        >
           <div
-            class="c-card-body"
+            class="card"
+            data-v-1b076234=""
           >
             <!---->
-            <!---->
-            <button
-              class="c-btn c-btn-primary"
-              id="collapse1"
-              type="button"
-            >
-              
-              Toggle Collapse
-            
-            </button>
-             
             <div
-              class="c-mt-2"
+              class="card-body"
-              data-v-98918eb0=""
+              data-v-1b076234=""
-              style="display: none;"
             >
-              <div
+              <!---->
-                class="c-card"
+              <!---->
-                data-v-98918eb0=""
+              <p
+                class="card-text"
+                data-v-1b076234=""
+              >
+                Collapse contents Here
+              </p>
+               
+              <button
+                class="btn btn-secondary btn-sm"
+                data-v-1b076234=""
+                id="collapse2"
+                type="button"
+              >
+                
+              Toggle Inner Collapse
+            
+              </button>
+               
+              <div
+                class="mt-2"
+                data-v-1b076234=""
+                style="display: none;"
               >
-                <!---->
                 <div
-                  class="c-card-body"
+                  class="card"
-                  data-v-98918eb0=""
+                  data-v-1b076234=""
                 >
                   <!---->
-                  <!---->
-                  <p
-                    class="c-card-text"
-                    data-v-98918eb0=""
-                  >
-                    Collapse contents Here
-                  </p>
-                   
-                  <button
-                    class="c-btn c-btn-secondary c-btn-sm"
-                    data-v-98918eb0=""
-                    id="collapse2"
-                    type="button"
-                  >
-                    
-                  Toggle Inner Collapse
-                
-                  </button>
-                   
                   <div
-                    class="c-mt-2"
+                    class="card-body"
-                    data-v-98918eb0=""
+                    data-v-1b076234=""
-                    style="display: none;"
                   >
-                    <div
+                    <!---->
-                      class="c-card"
+                    <!---->
-                      data-v-98918eb0=""
+                    Hello!
-                    >
-                      <!---->
-                      <div
-                        class="c-card-body"
-                        data-v-98918eb0=""
-                      >
-                        <!---->
-                        <!---->
-                        Hello!
-                      </div>
-                      <!---->
-                    </div>
                   </div>
+                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
+            <!---->
           </div>
-          <!---->
         </div>
       </div>
+      <!---->
     </div>
   </div>
 </div>

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

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

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

@@ -1,50 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Paginations.vue renders correctly 1`] = `
-<div
+<div>
-  class="c-wrapper"
+  <ccard-stub
->
+    subtitletag="h6"
-  <div>
+    titletag="h4"
-    <ccard-stub
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
+      <i
-        subtitletag="h6"
+        class="fa fa-align-justify"
-        titletag="h4"
+      />
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Responsive bootstrap Pagination
-        </strong>
-         
-        <div
-          class="c-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
+      <strong>
-        subtitletag="h6"
+         Responsive bootstrap Pagination
-        titletag="h4"
+      </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
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <h6>
+        Default
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="start"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        responsive="true"
+        size="md"
+      />
+       
+      <br />
+       
+      <h6>
+        Small
+      </h6>
+       
+      <cpagination-stub
+        activepage="3"
+        align="start"
+        firstbuttonhtml="&laquo;"
+        lastbuttonhtml="&raquo;"
+        limit="5"
+        nextbuttonhtml="&rsaquo;"
+        pages="10"
+        previousbuttonhtml="&lsaquo;"
+        size="sm"
+      />
+       
+      <br />
+       
+      <div>
         <h6>
-          Default
+          Large
         </h6>
          
         <cpagination-stub
@@ -57,140 +92,101 @@ exports[`Paginations.vue renders correctly 1`] = `
           pages="10"
           previousbuttonhtml="&lsaquo;"
           responsive="true"
-          size="md"
+          size="lg"
         />
          
         <br />
-         
+      </div>
-        <h6>
+       
-          Small
+      <div>
-        </h6>
+        currentPage: 3
-         
+      </div>
-        <cpagination-stub
+    </ccardbody-stub>
-          activepage="3"
+  </ccard-stub>
-          align="start"
+   
-          firstbuttonhtml="&laquo;"
+  <ccard-stub
-          lastbuttonhtml="&raquo;"
+    subtitletag="h6"
-          limit="5"
+    titletag="h4"
-          nextbuttonhtml="&rsaquo;"
+  >
-          pages="10"
+    <ccardheader-stub
-          previousbuttonhtml="&lsaquo;"
-          size="sm"
-        />
-         
-        <br />
-         
-        <div>
-          <h6>
-            Large
-          </h6>
-           
-          <cpagination-stub
-            activepage="3"
-            align="start"
-            firstbuttonhtml="&laquo;"
-            lastbuttonhtml="&raquo;"
-            limit="5"
-            nextbuttonhtml="&rsaquo;"
-            pages="10"
-            previousbuttonhtml="&lsaquo;"
-            responsive="true"
-            size="lg"
-          />
-           
-          <br />
-        </div>
-         
-        <div>
-          currentPage: 3
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-     
-    <ccard-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
+      <i
-        subtitletag="h6"
+        class="fa fa-align-justify"
-        titletag="h4"
+      />
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Pagination 
-        </strong>
-         
-        <small>
-          alignment
-        </small>
-      </ccardheader-stub>
        
-      <ccardbody-stub
+      <strong>
-        subtitletag="h6"
+         Pagination 
-        titletag="h4"
+      </strong>
-      >
+       
-        <h6>
+      <small>
-          Left alignment (default)
+        alignment
-        </h6>
+      </small>
-         
+    </ccardheader-stub>
-        <cpagination-stub
+     
-          activepage="3"
+    <ccardbody-stub
-          align="start"
+      subtitletag="h6"
-          firstbuttonhtml="&laquo;"
+      titletag="h4"
-          lastbuttonhtml="&raquo;"
+    >
-          limit="5"
+      <h6>
-          nextbuttonhtml="&rsaquo;"
+        Left alignment (default)
-          pages="10"
+      </h6>
-          previousbuttonhtml="&lsaquo;"
+       
-          size="md"
+      <cpagination-stub
-        />
+        activepage="3"
-         
+        align="start"
-        <br />
+        firstbuttonhtml="&laquo;"
-         
+        lastbuttonhtml="&raquo;"
-        <h6>
+        limit="5"
-          Center alignment
+        nextbuttonhtml="&rsaquo;"
-        </h6>
+        pages="10"
-         
+        previousbuttonhtml="&lsaquo;"
-        <cpagination-stub
+        size="md"
-          activepage="3"
+      />
-          align="center"
+       
-          firstbuttonhtml="&laquo;"
+      <br />
-          lastbuttonhtml="&raquo;"
+       
-          limit="5"
+      <h6>
-          nextbuttonhtml="&rsaquo;"
+        Center alignment
-          pages="10"
+      </h6>
-          previousbuttonhtml="&lsaquo;"
+       
-          size="md"
+      <cpagination-stub
-        />
+        activepage="3"
-         
+        align="center"
-        <br />
+        firstbuttonhtml="&laquo;"
-         
+        lastbuttonhtml="&raquo;"
-        <h6>
+        limit="5"
-          Right (end) alignment
+        nextbuttonhtml="&rsaquo;"
-        </h6>
+        pages="10"
-         
+        previousbuttonhtml="&lsaquo;"
-        <cpagination-stub
+        size="md"
-          activepage="3"
+      />
-          align="end"
+       
-          firstbuttonhtml="&laquo;"
+      <br />
-          lastbuttonhtml="&raquo;"
+       
-          limit="5"
+      <h6>
-          nextbuttonhtml="&rsaquo;"
+        Right (end) alignment
-          pages="10"
+      </h6>
-          previousbuttonhtml="&lsaquo;"
+       
-          size="md"
+      <cpagination-stub
-        />
+        activepage="3"
-         
+        align="end"
-        <br />
+        firstbuttonhtml="&laquo;"
-         
+        lastbuttonhtml="&raquo;"
-        <div>
+        limit="5"
-          currentPage: 3
+        nextbuttonhtml="&rsaquo;"
-        </div>
+        pages="10"
-      </ccardbody-stub>
+        previousbuttonhtml="&lsaquo;"
-    </ccard-stub>
+        size="md"
-  </div>
+      />
+       
+      <br />
+       
+      <div>
+        currentPage: 3
+      </div>
+    </ccardbody-stub>
+  </ccard-stub>
 </div>
 `;

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

@@ -19,7 +19,7 @@ exports[`Tables.vue renders correctly 1`] = `
           CTable component functionality presentation
           
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -41,10 +41,6 @@ exports[`Tables.vue renders correctly 1`] = `
           titletag="h4"
         >
           <ctable-stub
-            dark-header=""
-            default-filter="2012"
-            default-sorters="username,asc"
-            defaultcolumnfilter="[object Object]"
             defaultsorter="[object Object]"
             fields="[object Object],registered,[object Object],[object Object],[object Object]"
             filterrow="true"
@@ -55,7 +51,7 @@ exports[`Tables.vue renders correctly 1`] = `
             itemsperpage="10"
             optionsrow="true"
             pagination="true"
-            per-page="6"
+            sorting="true"
           />
         </ccardbody-stub>
       </ccard-stub>

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

@@ -20,7 +20,7 @@ exports[`Tabs.vue renders correctly 1`] = `
           Tabs
           
           <div
-            class="c-card-header-actions"
+            class="card-header-actions"
           >
             <a
               class="card-header-action"
@@ -230,6 +230,89 @@ exports[`Tabs.vue renders correctly 1`] = `
       </ccard-stub>
     </ccol-stub>
      
+    <ccol-stub
+      lg="6"
+      tag="div"
+      xs="12"
+    >
+      <ccard-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <ccardheader-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          
+          Tabs with icons
+        
+        </ccardheader-stub>
+         
+        <ccardbody-stub
+          subtitletag="h6"
+          titletag="h4"
+        >
+          <ctabs-stub
+            addtabclasses="mt-1"
+            tabs="true"
+          >
+            <ctab-stub
+              active="true"
+            >
+              <template>
+                <i
+                  class="cui-calculator"
+                />
+                 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
+              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.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-basket-loaded"
+                />
+                 Shopping cart
+              
+              </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
+              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.
+            
+            </ctab-stub>
+             
+            <ctab-stub>
+              <template>
+                <i
+                  class="cui-pie-chart"
+                />
+                 Charts
+              
+              </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
+              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.
+            
+            </ctab-stub>
+          </ctabs-stub>
+        </ccardbody-stub>
+      </ccard-stub>
+    </ccol-stub>
+     
     <ccol-stub
       lg="6"
       tag="div"

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

@@ -1,389 +1,385 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltips.vue renders correctly 1`] = `
-<div
+<div>
-  class="c-wrapper"
+  <ccard-stub
->
+    subtitletag="h6"
-  <div>
+    titletag="h4"
-    <ccard-stub
+  >
+    <ccardheader-stub
       subtitletag="h6"
       titletag="h4"
     >
-      <ccardheader-stub
+      <i
-        subtitletag="h6"
+        class="fa fa-align-justify"
-        titletag="h4"
+      />
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Bootstrap Tooltips 
-        </strong>
-         
-        <small>
-          <code>
-            v-c-tooltip
-          </code>
-           directive
-        </small>
-         
-        <div
-          class="c-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
+      <strong>
-        subtitletag="h6"
+         Bootstrap Tooltips 
-        titletag="h4"
+      </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
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <crow-stub>
+        <ccol-stub
+          col="4"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Hover Me
+            
+            </cbutton-stub>
+          </div>
+        </ccol-stub>
+         
+        <ccol-stub
+          col="4"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Hover me
+            
+            </cbutton-stub>
+          </div>
+        </ccol-stub>
+         
+        <ccol-stub
+          col="4"
+          tag="div"
+        >
+          <div
+            class="text-center my-3"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="secondary"
+            >
+              
+              Click me
+            
+            </cbutton-stub>
+          </div>
+        </ccol-stub>
+      </crow-stub>
+    </ccardbody-stub>
+  </ccard-stub>
+   
+  <ccard-stub
+    subtitletag="h6"
+    titletag="h4"
+  >
+    <ccardheader-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <i
+        class="fa fa-align-justify"
+      />
+       
+      <strong>
+         Tooltips 
+      </strong>
+       
+      <small>
+        placement
+      </small>
+    </ccardheader-stub>
+     
+    <ccardbody-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <div
+        class="my-3"
       >
         <crow-stub>
           <ccol-stub
-            col="4"
+            class="py-4 text-center"
+            md="4"
             tag="div"
           >
-            <div
+            <cbutton-stub
-              class="c-text-center c-my-3"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="secondary"
-              >
-                
-                Hover Me
               
-              </cbutton-stub>
+              top-start
-            </div>
+            
+            </cbutton-stub>
           </ccol-stub>
-           
           <ccol-stub
-            col="4"
+            class="py-4 text-center"
+            md="4"
             tag="div"
           >
-            <div
+            <cbutton-stub
-              class="c-text-center c-my-3"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="secondary"
-              >
-                
-                Hover me
               
-              </cbutton-stub>
+              top
-            </div>
+            
+            </cbutton-stub>
           </ccol-stub>
-           
           <ccol-stub
-            col="4"
+            class="py-4 text-center"
+            md="4"
             tag="div"
           >
-            <div
+            <cbutton-stub
-              class="c-text-center c-my-3"
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
             >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="secondary"
-              >
-                
-                Click me
               
-              </cbutton-stub>
+              top-end
-            </div>
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom-start
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              bottom-end
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right-start
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              right-end
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left-start
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left
+            
+            </cbutton-stub>
+          </ccol-stub>
+          <ccol-stub
+            class="py-4 text-center"
+            md="4"
+            tag="div"
+          >
+            <cbutton-stub
+              activeclass="active"
+              event="click"
+              exactactiveclass="active"
+              routertag="a"
+              target="_self"
+              type="button"
+              variant="primary"
+            >
+              
+              left-end
+            
+            </cbutton-stub>
           </ccol-stub>
         </crow-stub>
-      </ccardbody-stub>
+      </div>
-    </ccard-stub>
+    </ccardbody-stub>
-     
+  </ccard-stub>
-    <ccard-stub
-      subtitletag="h6"
-      titletag="h4"
-    >
-      <ccardheader-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <i
-          class="fa fa-align-justify"
-        />
-         
-        <strong>
-           Tooltips 
-        </strong>
-         
-        <small>
-          placement
-        </small>
-      </ccardheader-stub>
-       
-      <ccardbody-stub
-        subtitletag="h6"
-        titletag="h4"
-      >
-        <div
-          class="c-my-3"
-        >
-          <crow-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                top-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                top
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                top-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                bottom-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                bottom
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                bottom-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                right-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                right
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                right-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                left-start
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                left
-              
-              </cbutton-stub>
-            </ccol-stub>
-            <ccol-stub
-              class="c-py-4 c-text-center"
-              md="4"
-              tag="div"
-            >
-              <cbutton-stub
-                activeclass="c-active"
-                event="click"
-                exactactiveclass="c-active"
-                routertag="a"
-                target="_self"
-                type="button"
-                variant="primary"
-              >
-                
-                left-end
-              
-              </cbutton-stub>
-            </ccol-stub>
-          </crow-stub>
-        </div>
-      </ccardbody-stub>
-    </ccard-stub>
-  </div>
 </div>
 `;

tests/unit/views/buttons/BrandButtons.spec.js

@@ -11,7 +11,7 @@ Vue.use(CoreuiVue)
 
 describe('BrandButtons.vue', () => {
   it('has a name', () => {
-    expect(BrandButtons.name).toMatch('brand-buttons')
+    expect(BrandButtons.name).toBe('BrandButtons')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(BrandButtons)

tests/unit/views/buttons/ButtonDropdowns.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Dropdowns.vue', () => {
   it('has a name', () => {
-    expect(Dropdowns.name).toMatch('Dropdowns')
+    expect(Dropdowns.name).toBe('Dropdowns')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Dropdowns)

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

@@ -8,7 +8,7 @@ Vue.use(CoreuiVue)
 describe('ButtonGroups.vue', () => {
   const wrapper = shallowMount(ButtonGroups)
   it('has a name', () => {
-    expect(ButtonGroups.name).toMatch('button-groups')
+    expect(ButtonGroups.name).toBe('ButtonGroups')
   })
   it('is Vue instance', () => {
     expect(wrapper.isVueInstance()).toBe(true)

tests/unit/views/buttons/StandardButtons.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('StandardButtons.vue', () => {
   it('has a name', () => {
-    expect(StandardButtons.name).toMatch('standard-buttons')
+    expect(StandardButtons.name).toBe('StandardButtons')
   })
   it('has a created hook', () => {
     expect(typeof StandardButtons.data).toMatch('function')

tests/unit/views/icons/Brands.spec.js

@@ -9,7 +9,7 @@ Vue.use(CoreuiVue)
 
 describe('Brands.vue', () => {
   it('has a name', () => {
-    expect(Brands.name).toMatch('Brands')
+    expect(Brands.name).toBe('Brands')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Brands)

tests/unit/views/icons/CoreUIIcons.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('CoreUIIcons.vue', () => {
   it('has a name', () => {
-    expect(CoreUIIcons.name).toMatch('CoreUIIcons')
+    expect(CoreUIIcons.name).toBe('CoreUIIcons')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(CoreUIIcons)

tests/unit/views/icons/Flags.spec.js

@@ -9,7 +9,7 @@ Vue.use(CIconPlugin)
 
 describe('Flags.vue', () => {
   it('has a name', () => {
-    expect(Flags.name).toMatch('flags')
+    expect(Flags.name).toBe('Flags')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Flags)

tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap

@@ -16,9 +16,9 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       CoreUI Icons
       
       <cbadge-stub
-        activeclass="c-active"
+        activeclass="active"
         event="click"
-        exactactiveclass="c-active"
+        exactactiveclass="active"
         routertag="a"
         tag="span"
         target="_self"
@@ -28,16 +28,16 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       </cbadge-stub>
        
       <div
-        class="c-card-header-actions"
+        class="card-header-actions"
       >
         <a
-          class="c-card-header-action"
+          class="card-header-action"
           href="https://github.com/coreui/coreui-icons"
           rel="noreferrer noopener"
           target="_blank"
         >
           <small
-            class="c-text-muted"
+            class="text-muted"
           >
             Github
           </small>
@@ -50,7 +50,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
       titletag="h4"
     >
       <crow-stub
-        class="c-text-center "
+        class="text-center "
       >
         <ccol-stub
           col="6"
@@ -60,7 +60,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-account-logout icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -76,7 +76,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-action-redo icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -92,7 +92,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-action-undo icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -108,7 +108,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-align-center icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -124,7 +124,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-align-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -140,7 +140,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-align-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -156,7 +156,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-bottom icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -172,7 +172,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -188,7 +188,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -204,7 +204,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-arrow-top icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -220,7 +220,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-ban icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -236,7 +236,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-basket-loaded icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -252,7 +252,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-bell icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -268,7 +268,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-bold icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -284,7 +284,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-bookmark icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -300,7 +300,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-briefcase icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -316,7 +316,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-british-pound icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -332,7 +332,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-brush icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -348,7 +348,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-calculator icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -364,7 +364,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-calendar icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -380,7 +380,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cart icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -396,7 +396,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chart icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -412,7 +412,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-check c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-check icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -428,7 +428,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-bottom icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -444,7 +444,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -460,7 +460,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -476,7 +476,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-chevron-top icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -492,7 +492,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-circle-check icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -508,7 +508,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-circle-x icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -524,7 +524,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cloud icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -540,7 +540,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cloud-download icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -556,7 +556,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cloud-upload icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -572,7 +572,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-code c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-code icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -588,7 +588,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cog icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -604,7 +604,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-comment-square icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -620,7 +620,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-credit-card icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -636,7 +636,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-cursor icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -652,7 +652,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-dashboard icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -668,7 +668,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-delete icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -684,7 +684,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-dollar icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -700,7 +700,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-drop icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -716,7 +716,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-envelope-closed icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -732,7 +732,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-envelope-letter icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -748,7 +748,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-envelope-open icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -764,7 +764,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-euro icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -780,7 +780,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-file c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-file icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -796,7 +796,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-globe icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -812,7 +812,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-graph icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -828,7 +828,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-home c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-home icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -844,7 +844,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-inbox icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -860,7 +860,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-info c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-info icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -876,7 +876,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-italic icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -892,7 +892,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-justify-center icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -908,7 +908,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-justify-left icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -924,7 +924,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-justify-right icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -940,7 +940,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-laptop icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -956,7 +956,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-layers icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -972,7 +972,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-lightbulb icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -988,7 +988,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-list c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-list icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1004,7 +1004,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-location-pin icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1020,7 +1020,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-lock-locked icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1036,7 +1036,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-lock-unlocked icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1052,7 +1052,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-magnifying-glass icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1068,7 +1068,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-map c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-map icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1084,7 +1084,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-monitor icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1100,7 +1100,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-moon icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1116,7 +1116,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-note c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-note icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1132,7 +1132,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-options c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-options icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1148,7 +1148,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-paperclip icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1164,7 +1164,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-pencil icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1180,7 +1180,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-people c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-people icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1196,7 +1196,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-phone icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1212,7 +1212,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-pie-chart icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1228,7 +1228,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-print c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-print icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1244,7 +1244,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-puzzle icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1260,7 +1260,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-rss icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1276,7 +1276,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-screen-desktop icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1292,7 +1292,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-screen-smartphone icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1308,7 +1308,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-settings icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1324,7 +1324,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-share c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-share icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1340,7 +1340,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-shield icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1356,7 +1356,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-sort-ascending icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1372,7 +1372,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-sort-descending icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1388,7 +1388,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-speech icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1404,7 +1404,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-speedometer icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1420,7 +1420,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-star c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-star icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1436,7 +1436,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-sun icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1452,7 +1452,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-tablet icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1468,7 +1468,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-tags icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1484,7 +1484,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-task c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-task icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1500,7 +1500,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-thumb-down icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1516,7 +1516,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-thumb-up icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1532,7 +1532,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-trash icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1548,7 +1548,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-underline icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1564,7 +1564,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1580,7 +1580,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user-female icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1596,7 +1596,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user-follow icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1612,7 +1612,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-user-unfollow icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1628,7 +1628,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-wrench icons font-2xl d-block mt-4"
           />
            
           <div>
@@ -1644,7 +1644,7 @@ exports[`CoreUIIcons.vue renders correctly 1`] = `
           xl="2"
         >
           <i
-            class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"
+            class="cui-yen icons font-2xl d-block mt-4"
           />
            
           <div>

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Alerts.vue', () => {
   it('has a name', () => {
-    expect(Alerts.name).toMatch('alerts')
+    expect(Alerts.name).toBe('Alerts')
   })
   it('has a created hook', () => {
     expect(typeof Alerts.data).toMatch('function')

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Badges.vue', () => {
   it('has a name', () => {
-    expect(Badges.name).toMatch('badges')
+    expect(Badges.name).toBe('Badges')
   })
   it('is Badges', () => {
     const wrapper = shallowMount(Badges)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Modals.vue', () => {
   it('has a name', () => {
-    expect(Modals.name).toMatch('modals')
+    expect(Modals.name).toBe('Modals')
   })
   it('has a created hook', () => {
     expect(typeof Modals.data).toMatch('function')

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

@@ -1,493 +1,487 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alerts.vue renders correctly 1`] = `
-<div
+<crow-stub>
-  class="c-wrapper"
+  <ccol-stub
->
+    col="12"
-  <div>
+    md="6"
-    <crow-stub>
+    tag="div"
-      <ccol-stub
+  >
-        col="12"
+    <ccard-stub
-        md="6"
+      subtitletag="h6"
-        tag="div"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
       >
-        <ccard-stub
+        <i
-          subtitletag="h6"
+          class="fa fa-align-justify"
-          titletag="h4"
+        />
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             
-            <strong>
-               Bootstrap Alert
-            </strong>
-             
-            <div
-              class="c-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
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <p />
-               
-              <calert-stub
-                show="true"
-                variant="primary"
-              >
-                Primary Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="secondary"
-              >
-                Secondary Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="success"
-              >
-                Success Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="danger"
-              >
-                Danger Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="warning"
-              >
-                Warning Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="info"
-              >
-                Info Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="light"
-              >
-                Light Alert
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="dark"
-              >
-                Dark Alert
-              </calert-stub>
-            </div>
-          </ccardbody-stub>
-        </ccard-stub>
-      </ccol-stub>
-       
-      <ccol-stub
-        col="12"
-        md="6"
-        tag="div"
-      >
-        <ccard-stub
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alert
-            
-            <small>
-               use 
-              <code>
-                .c-alert-link
-              </code>
-               to provide links
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <div>
-              <calert-stub
-                show="true"
-                variant="primary"
-              >
-                
-                Primary Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="secondary"
-              >
-                
-                Secondary Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="success"
-              >
-                
-                Success Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="danger"
-              >
-                
-                Danger Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="warning"
-              >
-                
-                Warning Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="info"
-              >
-                
-                Info Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="light"
-              >
-                
-                Light Alert with 
-                <a
-                  class="c-alert-link"
-                  href="#"
-                >
-                  an example link
-                </a>
-                .
-              
-              </calert-stub>
-               
-              <calert-stub
-                show="true"
-                variant="dark"
-              >
-                
-                Dark Alert with
-                
-                <clink-stub
-                  activeclass="c-active"
-                  class="c-alert-link"
-                  event="click"
-                  exactactiveclass="c-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
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alerts 
-            <small>
-              with additional content
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <calert-stub
-              show="true"
-              variant="success"
-            >
-              <h4
-                class="c-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="c-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
-          subtitletag="h6"
-          titletag="h4"
-        >
-          <ccardheader-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <i
-              class="fa fa-align-justify"
-            />
-             Alerts
-            
-            <small>
-              dismissible
-            </small>
-          </ccardheader-stub>
-           
-          <ccardbody-stub
-            subtitletag="h6"
-            titletag="h4"
-          >
-            <calert-stub
-              closebutton="true"
-              show="true"
-              variant="secondary"
-            >
-              
-              Dismissible Alert!
-            
-            </calert-stub>
-             
-            <calert-stub
-              closebutton="true"
-              fade="true"
-              show="true"
-              variant="secondary"
-            >
-              
-              Dismissible Alert with fade effect!
-            
-            </calert-stub>
-             
-            <calert-stub
-              class="c-alert-dismissible"
-              show="true"
-              variant="secondary"
-            />
-             
-            <cbutton-stub
-              activeclass="c-active"
-              class="c-m-1"
-              event="click"
-              exactactiveclass="c-active"
-              routertag="a"
-              target="_self"
-              type="button"
-              variant="info"
-            >
-              
-              Show dismissible alerts
-            
-            </cbutton-stub>
-          </ccardbody-stub>
-        </ccard-stub>
          
-        <ccard-stub
+        <strong>
-          subtitletag="h6"
+           Bootstrap Alert
-          titletag="h4"
+        </strong>
+         
+        <div
+          class="card-header-actions"
         >
-          <ccardheader-stub
+          <a
-            subtitletag="h6"
+            class="card-header-action"
-            titletag="h4"
+            href="https://coreui.io/vue/docs/3.0/components/Alert"
+            rel="noreferrer noopener"
+            target="_blank"
           >
-            <i
+            <small
-              class="fa fa-align-justify"
+              class="text-muted"
-            />
+            >
-             Alerts
+              docs
-            
-            <small>
-              auto dismissible
             </small>
-          </ccardheader-stub>
+          </a>
+        </div>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <p />
            
-          <ccardbody-stub
+          <calert-stub
-            subtitletag="h6"
+            show="true"
-            titletag="h4"
+            variant="primary"
           >
-            <div>
+            Primary Alert
-              <calert-stub
+          </calert-stub>
-                closebutton="true"
+           
-                fade="true"
+          <calert-stub
-                show="10"
+            show="true"
-                variant="warning"
+            variant="secondary"
-              >
+          >
-                
+            Secondary Alert
-                Alert will dismiss after
+          </calert-stub>
-                
+           
-                <strong>
+          <calert-stub
-                  10
+            show="true"
-                </strong>
+            variant="success"
-                 seconds...
+          >
-              
+            Success Alert
-              </calert-stub>
+          </calert-stub>
-               
+           
-              <calert-stub
+          <calert-stub
-                closebutton="true"
+            show="true"
-                show="10"
+            variant="danger"
-                variant="info"
+          >
-              >
+            Danger Alert
-                
+          </calert-stub>
-                Alert will dismiss after 10 seconds...
+           
-                
+          <calert-stub
-                <cprogress-stub
+            show="true"
-                  height="4px"
+            variant="warning"
-                  max="10"
+          >
-                  precision="0"
+            Warning Alert
-                  value="10"
+          </calert-stub>
-                  variant="info"
+           
-                />
+          <calert-stub
-              </calert-stub>
+            show="true"
-               
+            variant="info"
-              <cbutton-stub
+          >
-                activeclass="c-active"
+            Info Alert
-                class="c-m-1"
+          </calert-stub>
-                event="click"
+           
-                exactactiveclass="c-active"
+          <calert-stub
-                routertag="a"
+            show="true"
-                target="_self"
+            variant="light"
-                type="button"
+          >
-                variant="info"
+            Light Alert
-              >
+          </calert-stub>
-                
+           
-                Show alert with timer
+          <calert-stub
-              
+            show="true"
-              </cbutton-stub>
+            variant="dark"
-            </div>
+          >
-          </ccardbody-stub>
+            Dark Alert
-        </ccard-stub>
+          </calert-stub>
-      </ccol-stub>
+        </div>
-    </crow-stub>
+      </ccardbody-stub>
-  </div>
+    </ccard-stub>
-</div>
+  </ccol-stub>
+   
+  <ccol-stub
+    col="12"
+    md="6"
+    tag="div"
+  >
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alert
+        
+        <small>
+           use 
+          <code>
+            .alert-link
+          </code>
+           to provide links
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <calert-stub
+            show="true"
+            variant="primary"
+          >
+            
+            Primary Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="secondary"
+          >
+            
+            Secondary Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="success"
+          >
+            
+            Success Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="danger"
+          >
+            
+            Danger Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="warning"
+          >
+            
+            Warning Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="info"
+          >
+            
+            Info Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="light"
+          >
+            
+            Light Alert with 
+            <a
+              class="alert-link"
+              href="#"
+            >
+              an example link
+            </a>
+            .
+          
+          </calert-stub>
+           
+          <calert-stub
+            show="true"
+            variant="dark"
+          >
+            
+            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
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alerts 
+        <small>
+          with additional content
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <calert-stub
+          show="true"
+          variant="success"
+        >
+          <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
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alerts
+        
+        <small>
+          dismissible
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <calert-stub
+          closebutton="true"
+          show="true"
+          variant="secondary"
+        >
+          
+          Dismissible Alert!
+        
+        </calert-stub>
+         
+        <calert-stub
+          closebutton="true"
+          fade="true"
+          show="true"
+          variant="secondary"
+        >
+          
+          Dismissible Alert with fade effect!
+        
+        </calert-stub>
+         
+        <calert-stub
+          class="alert-dismissible"
+          show="true"
+          variant="secondary"
+        />
+         
+        <cbutton-stub
+          activeclass="active"
+          class="m-1"
+          event="click"
+          exactactiveclass="active"
+          routertag="a"
+          target="_self"
+          type="button"
+          variant="info"
+        >
+          
+          Show dismissible alerts
+        
+        </cbutton-stub>
+      </ccardbody-stub>
+    </ccard-stub>
+     
+    <ccard-stub
+      subtitletag="h6"
+      titletag="h4"
+    >
+      <ccardheader-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <i
+          class="fa fa-align-justify"
+        />
+         Alerts
+        
+        <small>
+          auto dismissible
+        </small>
+      </ccardheader-stub>
+       
+      <ccardbody-stub
+        subtitletag="h6"
+        titletag="h4"
+      >
+        <div>
+          <calert-stub
+            closebutton="true"
+            fade="true"
+            show="10"
+            variant="warning"
+          >
+            
+            Alert will dismiss after
+            
+            <strong>
+              10
+            </strong>
+             seconds...
+          
+          </calert-stub>
+           
+          <calert-stub
+            closebutton="true"
+            show="10"
+            variant="info"
+          >
+            
+            Alert will dismiss after 10 seconds...
+            
+            <cprogress-stub
+              height="4px"
+              max="10"
+              precision="0"
+              value="10"
+              variant="info"
+            />
+          </calert-stub>
+           
+          <cbutton-stub
+            activeclass="active"
+            class="m-1"
+            event="click"
+            exactactiveclass="active"
+            routertag="a"
+            target="_self"
+            type="button"
+            variant="info"
+          >
+            
+            Show alert with timer
+          
+          </cbutton-stub>
+        </div>
+      </ccardbody-stub>
+    </ccard-stub>
+  </ccol-stub>
+</crow-stub>
 `;

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

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

@@ -2,7 +2,7 @@
 
 exports[`Modals.vue renders correctly 1`] = `
 <div
-  class="c-wrapper"
+  class="wrapper"
 >
   <div>
     <crow-stub>
@@ -24,7 +24,7 @@ exports[`Modals.vue renders correctly 1`] = `
              Bootstrap Modals
             
             <div
-              class="c-card-header-actions"
+              class="card-header-actions"
             >
               <a
                 class="card-header-action"
@@ -46,10 +46,10 @@ exports[`Modals.vue renders correctly 1`] = `
             titletag="h4"
           >
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -61,10 +61,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -76,10 +76,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -93,10 +93,10 @@ exports[`Modals.vue renders correctly 1`] = `
             <hr />
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -108,10 +108,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -123,10 +123,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -138,10 +138,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -153,10 +153,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -168,10 +168,10 @@ exports[`Modals.vue renders correctly 1`] = `
             </cbutton-stub>
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
-              class="c-mr-1"
+              class="mr-1"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Login.vue', () => {
   it('has a name', () => {
-    expect(Login.name).toMatch('Login')
+    expect(Login.name).toBe('Login')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Login)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Page404.vue', () => {
   it('has a name', () => {
-    expect(Page404.name).toMatch('Page404')
+    expect(Page404.name).toBe('Page404')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Page404)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Page500.vue', () => {
   it('has a name', () => {
-    expect(Page500.name).toMatch('Page500')
+    expect(Page500.name).toBe('Page500')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Page500)

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Register.vue', () => {
   it('has a name', () => {
-    expect(Register.name).toMatch('Register')
+    expect(Register.name).toBe('Register')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Register)

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

@@ -2,10 +2,10 @@
 
 exports[`Login.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="c-d-flex c-align-items-center c-min-vh-100"
+  class="d-flex align-items-center min-vh-100"
 >
   <crow-stub
-    class="c-justify-content-center"
+    class="justify-content-center"
   >
     <ccol-stub
       md="8"
@@ -13,7 +13,7 @@ exports[`Login.vue renders correctly 1`] = `
     >
       <ccardgroup-stub>
         <ccard-stub
-          class="c-p-4"
+          class="p-4"
           subtitletag="h6"
           titletag="h4"
         >
@@ -27,7 +27,7 @@ exports[`Login.vue renders correctly 1`] = `
               </h1>
                
               <p
-                class="c-text-muted"
+                class="text-muted"
               >
                 Sign In to your account
               </p>
@@ -54,10 +54,10 @@ exports[`Login.vue renders correctly 1`] = `
                   tag="div"
                 >
                   <cbutton-stub
-                    activeclass="c-active"
+                    activeclass="active"
-                    class="c-px-4"
+                    class="px-4"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     routertag="a"
                     target="_self"
                     type="button"
@@ -68,15 +68,15 @@ exports[`Login.vue renders correctly 1`] = `
                 </ccol-stub>
                  
                 <ccol-stub
-                  class="c-text-right"
+                  class="text-right"
                   col="6"
                   tag="div"
                 >
                   <cbutton-stub
-                    activeclass="c-active"
+                    activeclass="active"
-                    class="c-px-0"
+                    class="px-0"
                     event="click"
-                    exactactiveclass="c-active"
+                    exactactiveclass="active"
                     routertag="a"
                     target="_self"
                     type="button"
@@ -92,7 +92,7 @@ exports[`Login.vue renders correctly 1`] = `
          
         <ccard-stub
           bodywrapper="true"
-          class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
+          class="text-white text-center bg-primary py-5 d-md-down-none"
           subtitletag="h6"
           titletag="h4"
         >
@@ -105,10 +105,10 @@ exports[`Login.vue renders correctly 1`] = `
           </p>
            
           <cbutton-stub
-            activeclass="c-active"
+            activeclass="active"
-            class="c-active c-mt-3"
+            class="active mt-3"
             event="click"
-            exactactiveclass="c-active"
+            exactactiveclass="active"
             routertag="a"
             target="_self"
             type="button"

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

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

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

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

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

@@ -2,10 +2,10 @@
 
 exports[`Register.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="c-min-vh-100 c-d-flex c-align-items-center"
+  class="min-vh-100 d-flex align-items-center"
 >
   <crow-stub
-    class="c-w-100 c-justify-content-center"
+    class="w-100 justify-content-center"
   >
     <ccol-stub
       md="6"
@@ -13,12 +13,12 @@ exports[`Register.vue renders correctly 1`] = `
       tag="div"
     >
       <ccard-stub
-        class="c-mx-4"
+        class="mx-4"
         subtitletag="h6"
         titletag="h4"
       >
         <ccardbody-stub
-          class="c-p-4"
+          class="p-4"
           subtitletag="h6"
           titletag="h4"
         >
@@ -28,7 +28,7 @@ exports[`Register.vue renders correctly 1`] = `
             </h1>
              
             <p
-              class="c-text-muted"
+              class="text-muted"
             >
               Create your account
             </p>
@@ -59,7 +59,7 @@ exports[`Register.vue renders correctly 1`] = `
              
             <cforminput-stub
               autocomplete="new-password"
-              class="c-mb-4"
+              class="mb-4"
               lazy="400"
               placeholder="Repeat password"
               prependhtml=<i class='cui-lock-locked'></i>
@@ -67,10 +67,10 @@ exports[`Register.vue renders correctly 1`] = `
             />
              
             <cbutton-stub
-              activeclass="c-active"
+              activeclass="active"
               block="true"
               event="click"
-              exactactiveclass="c-active"
+              exactactiveclass="active"
               routertag="a"
               target="_self"
               type="button"
@@ -82,7 +82,7 @@ exports[`Register.vue renders correctly 1`] = `
         </ccardbody-stub>
          
         <ccardfooter-stub
-          class="c-p-4"
+          class="p-4"
           subtitletag="h6"
           titletag="h4"
         >
@@ -92,10 +92,10 @@ exports[`Register.vue renders correctly 1`] = `
               tag="div"
             >
               <cbutton-stub
-                activeclass="c-active"
+                activeclass="active"
                 block="true"
                 event="click"
-                exactactiveclass="c-active"
+                exactactiveclass="active"
                 routertag="a"
                 target="_self"
                 texthtml="Facebook"
@@ -109,10 +109,10 @@ exports[`Register.vue renders correctly 1`] = `
               tag="div"
             >
               <cbutton-stub
-                activeclass="c-active"
+                activeclass="active"
                 block="true"
                 event="click"
-                exactactiveclass="c-active"
+                exactactiveclass="active"
                 routertag="a"
                 target="_self"
                 texthtml="Twitter"

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

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Colors.vue', () => {
   it('has a name', () => {
-    expect(Colors.name).toMatch('colors')
+    expect(Colors.name).toBe('Colors')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Colors)

tests/unit/views/theme/Typography.spec.js

@@ -7,7 +7,7 @@ Vue.use(CoreuiVue)
 
 describe('Typography.vue', () => {
   it('has a name', () => {
-    expect(Typography.name).toMatch('typography')
+    expect(Typography.name).toBe('Typography')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Typography)

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

@@ -3,10 +3,10 @@
 exports[`Typography.vue renders correctly 1`] = `
 <div>
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Headings
@@ -14,7 +14,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         Documentation and examples for Bootstrap typography,
@@ -22,7 +22,7 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <table
-        class="c-table"
+        class="table"
       >
         <thead>
           <tr>
@@ -41,7 +41,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h1&gt;&lt;/h1&gt;
@@ -52,7 +52,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h1"
+                class="h1"
               >
                 h1. Bootstrap heading
               </span>
@@ -63,7 +63,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h2&gt;&lt;/h2&gt;
@@ -74,7 +74,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h2"
+                class="h2"
               >
                 h2. Bootstrap heading
               </span>
@@ -85,7 +85,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h3&gt;&lt;/h3&gt;
@@ -96,7 +96,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h3"
+                class="h3"
               >
                 h3. Bootstrap heading
               </span>
@@ -107,7 +107,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h4&gt;&lt;/h4&gt;
@@ -118,7 +118,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h4"
+                class="h4"
               >
                 h4. Bootstrap heading
               </span>
@@ -129,7 +129,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h5&gt;&lt;/h5&gt;
@@ -140,7 +140,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h5"
+                class="h5"
               >
                 h5. Bootstrap heading
               </span>
@@ -151,7 +151,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <td>
               <p>
                 <code
-                  class="c-highlighter-rouge"
+                  class="highlighter-rouge"
                 >
                   
                   &lt;h6&gt;&lt;/h6&gt;
@@ -162,7 +162,7 @@ exports[`Typography.vue renders correctly 1`] = `
              
             <td>
               <span
-                class="c-h6"
+                class="h6"
               >
                 h6. Bootstrap heading
               </span>
@@ -174,10 +174,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Headings
@@ -185,18 +185,18 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         <code
-          class="c-highlighter-rouge"
+          class="highlighter-rouge"
         >
           .h1
         </code>
          through
         
         <code
-          class="c-highlighter-rouge"
+          class="highlighter-rouge"
         >
           .h6
         </code>
@@ -207,40 +207,40 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example"
+        class="bd-example"
       >
         <p
-          class="c-h1"
+          class="h1"
         >
           h1. Bootstrap heading
         </p>
          
         <p
-          class="c-h2"
+          class="h2"
         >
           h2. Bootstrap heading
         </p>
          
         <p
-          class="c-h3"
+          class="h3"
         >
           h3. Bootstrap heading
         </p>
          
         <p
-          class="c-h4"
+          class="h4"
         >
           h4. Bootstrap heading
         </p>
          
         <p
-          class="c-h5"
+          class="h5"
         >
           h5. Bootstrap heading
         </p>
          
         <p
-          class="c-h6"
+          class="h6"
         >
           h6. Bootstrap heading
         </p>
@@ -249,10 +249,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Display headings
@@ -260,7 +260,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         
@@ -276,16 +276,16 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example c-bd-example-type"
+        class="bd-example bd-example-type"
       >
         <table
-          class="c-table"
+          class="table"
         >
           <tbody>
             <tr>
               <td>
                 <span
-                  class="c-display-1"
+                  class="display-1"
                 >
                   Display 1
                 </span>
@@ -295,7 +295,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <tr>
               <td>
                 <span
-                  class="c-display-2"
+                  class="display-2"
                 >
                   Display 2
                 </span>
@@ -305,7 +305,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <tr>
               <td>
                 <span
-                  class="c-display-3"
+                  class="display-3"
                 >
                   Display 3
                 </span>
@@ -315,7 +315,7 @@ exports[`Typography.vue renders correctly 1`] = `
             <tr>
               <td>
                 <span
-                  class="c-display-4"
+                  class="display-4"
                 >
                   Display 4
                 </span>
@@ -328,10 +328,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Inline text elements
@@ -339,7 +339,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         
@@ -355,7 +355,7 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example"
+        class="bd-example"
       >
         <p>
           You can use the mark tag to 
@@ -419,10 +419,10 @@ exports[`Typography.vue renders correctly 1`] = `
   </div>
    
   <div
-    class="c-card"
+    class="card"
   >
     <div
-      class="c-card-header"
+      class="card-header"
     >
       
       Description list alignment
@@ -430,7 +430,7 @@ exports[`Typography.vue renders correctly 1`] = `
     </div>
      
     <div
-      class="c-card-body"
+      class="card-body"
     >
       <p>
         
@@ -448,19 +448,19 @@ exports[`Typography.vue renders correctly 1`] = `
       </p>
        
       <div
-        class="c-bd-example"
+        class="bd-example"
       >
         <dl
-          class="c-row"
+          class="row"
         >
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Description lists
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             
             A description list is perfect for defining terms.
@@ -468,13 +468,13 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Euismod
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             <p>
               Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
@@ -486,13 +486,13 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Malesuada porta
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             
             Etiam porta sem malesuada magna mollis euismod.
@@ -500,13 +500,13 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3 text-truncate"
+            class="col-sm-3 text-truncate"
           >
             Truncated term is truncated
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             
             Fusce dapibus, tellus ac cursus commodo, tortor mauris
@@ -515,25 +515,25 @@ exports[`Typography.vue renders correctly 1`] = `
           </dd>
            
           <dt
-            class="c-col-sm-3"
+            class="col-sm-3"
           >
             Nesting
           </dt>
            
           <dd
-            class="c-col-sm-9"
+            class="col-sm-9"
           >
             <dl
-              class="c-row"
+              class="row"
             >
               <dt
-                class="c-col-sm-4"
+                class="col-sm-4"
               >
                 Nested definition list
               </dt>
                
               <dd
-                class="c-col-sm-8"
+                class="col-sm-8"
               >
                 
                 Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.

tests/unit/views/users/User.spec.js

@@ -11,7 +11,7 @@ localVue.use(CoreuiVue)
 
 describe('User.vue', () => {
   it('has a name', () => {
-    expect(User.name).toMatch('User')
+    expect(User.name).toBe('User')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(User, {

tests/unit/views/users/Users.spec.js

@@ -11,7 +11,7 @@ localVue.use(CoreuiVue)
 
 describe('Users.vue', () => {
   it('has a name', () => {
-    expect(Users.name).toMatch('Users')
+    expect(Users.name).toBe('Users')
   })
   it('has a created hook', () => {
     expect(typeof Users.data).toMatch('function')

tests/unit/views/users/__snapshots__/User.spec.js.snap

@@ -40,9 +40,9 @@ exports[`User.vue renders correctly 1`] = `
         titletag="h4"
       >
         <cbutton-stub
-          activeclass="c-active"
+          activeclass="active"
           event="click"
-          exactactiveclass="c-active"
+          exactactiveclass="active"
           routertag="a"
           target="_self"
           type="button"

tests/unit/views/widgets/Widgets.spec.js

@@ -9,7 +9,7 @@ Vue.use(CoreuiVue)
 
 describe('Widgets.vue', () => {
   it('has a name', () => {
-    expect(Widgets.name).toMatch('Widgets')
+    expect(Widgets.name).toBe('Widgets')
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(Widgets)

tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap

@@ -15,7 +15,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         value="25"
       >
         <cprogress-stub
-          class="c-progress-xs c-my-3 c-mb-0"
+          class="progress-xs my-3 mb-0"
           max="100"
           precision="0"
           value="25"
@@ -295,7 +295,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         variant="primary"
       >
         <cicon-stub
-          class="c-mx-5 "
+          class="mx-5 "
           name="settings"
           width="24"
         />
@@ -315,7 +315,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         variant="info"
       >
         <cicon-stub
-          class="c-mx-5 "
+          class="mx-5 "
           name="laptop"
           width="24"
         />
@@ -335,7 +335,7 @@ exports[`Widgets.vue renders correctly 1`] = `
         variant="warning"
       >
         <cicon-stub
-          class="c-mx-5 "
+          class="mx-5 "
           name="moon"
           width="24"
         />
@@ -350,7 +350,7 @@ exports[`Widgets.vue renders correctly 1`] = `
   <widgetsbrand-stub />
    
   <ccardgroup-stub
-    class="c-mb-4"
+    class="mb-4"
   >
     <cwidgetprogressicon-stub
       header="87.500"
@@ -413,7 +413,7 @@ exports[`Widgets.vue renders correctly 1`] = `
   </ccardgroup-stub>
    
   <ccardgroup-stub
-    class="c-mb-4"
+    class="mb-4"
   >
     <cwidgetprogressicon-stub
       header="87.500"