refacor: update dashboard to coreui-vue changes

src/containers/TheHeader.vue

@@ -19,19 +19,37 @@
       :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
     />
     <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/dashboard">
-      <CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
+        <CHeaderNavLink>
-      <CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
+          Dashboard
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/users" exact>
+        <CHeaderNavLink>
+          Users
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink>
+          Settings
+        </CHeaderNavLink>
+      </CHeaderNavItem>
     </CHeaderNav>
     <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
+        <CHeaderNavLink>
           <i class="cui-bell"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
+        <CHeaderNavLink>
           <i class="cui-list"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
+        <CHeaderNavLink>
           <i class="cui-envelope-open"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>
     </CHeaderNav>

src/containers/TheHeaderDropdownAccnt.vue

@@ -1,20 +1,19 @@
 <template>
   <CDropdown
-    nav
+    inNav
-    no-caret
     class="c-header-nav-items"
     placement="bottom-end"
     add-menu-classes="pt-0"
   >
     <template #toggler>
-      <CHeaderNavItem only-link>
+      <CHeaderNavLink>
         <div class="c-avatar">
           <img
             src="img/avatars/6.jpg"
             class="c-avatar-img "
           />
         </div>
-      </CHeaderNavItem>
+      </CHeaderNavLink>
     </template>
     <CDropdownHeader tag="div" class="text-center" color="light">
       <strong>Account</strong>

src/views/Dashboard.vue

@@ -238,10 +238,10 @@
               </div>
               <div class="legend text-center">
                 <small>
-                  <sup><CBadge pill color="info">&nbsp;</CBadge></sup>
+                  <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
                   New clients
                   &nbsp;&nbsp;
-                  <sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
+                  <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
                   Recurring clients
                 </small>
               </div>
@@ -310,7 +310,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialFacebook"
+                      name="facebook"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -330,7 +330,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialTwitter"
+                      name="twitter"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -350,7 +350,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialLinkedin"
+                      name="linkedin"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -376,7 +376,7 @@
             </CCol>
           </CRow>
           <br/>
-          <CTable
+          <CDataTable
             class="mb-0 table-outline"
             hover
             :items="tableItems"
@@ -441,7 +441,7 @@
               <div class="small text-muted">Last login</div>
               <strong>{{item.activity}}</strong>
             </td>
-          </CTable>
+          </CDataTable>
         </CCard>
       </CCol>
     </CRow>

src/views/base/Cards.vue

@@ -64,7 +64,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill color="danger" class="float-right">42</CBadge>
+            <CBadge shape="pill" color="danger" class="float-right">42</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}

src/views/base/Carousels.vue

@@ -25,16 +25,16 @@
           >
             <CCarouselItem
               captionHeader="First Slide"
-              image="https://lorempixel.com/1024/480/technics/2/"
+              image="https://picsum.photos/1024/480/?image=52"
               captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
               captionHeader="Blank page"
-              :image="{ blankColor: 'grey' }"
+              :image="{ placeholderColor: 'grey' }"
               captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-              image="https://lorempixel.com/1024/480/technics/8/"
+            image="https://picsum.photos/1024/480/?image=54"
             />
           </CCarousel>
         </CCardBody>

src/views/base/Forms.vue

@@ -190,13 +190,13 @@
                   </CCol>
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputCheckbox
-                      v-for="option in options"
+                      v-for="(option, optionIndex) in options"
-                      :key="option"
+                      :key="key + option"
                       :label="option"
                       :value="option"
                       :custom="key > 1"
                       :name="`Option 1${key}`"
-                      :checked="Math.random() > 0.6"
+                      :checked="optionIndex === key"
                       :inline="key % 2 === 1"
                     />
                   </CCol>
@@ -210,7 +210,7 @@
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputRadio
                       v-for="(option, optionIndex) in options"
-                      :key="option"
+                      :key="key + option"
                       :label="option"
                       type="radio"
                       :value="option"

src/views/base/Jumbotrons.vue

@@ -20,7 +20,7 @@
           <CCardBody>
             <CJumbotron>
               <h1 class="display-3">Bootstrap 4</h1>
-              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
               <p>For more information visit website</p>
               <CButton color="primary" href="#">More Info</CButton>
             </CJumbotron>

src/views/base/ListGroups.vue

@@ -113,19 +113,19 @@
                 class="d-flex justify-content-between align-items-center"
               >
                 Cras justo odio
-                <CBadge color="primary" pill>14</CBadge>
+                <CBadge color="primary" shape="pill">14</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Dapibus ac facilisis in
-                <CBadge color="primary" pill>2</CBadge>
+                <CBadge color="primary" shape="pill">2</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Morbi leo risus
-                <CBadge color="primary" pill>1</CBadge>
+                <CBadge color="primary" shape="pill">1</CBadge>
               </CListGroupItem>
             </CListGroup>
           </CCardBody>

src/views/base/Navs.vue

@@ -51,7 +51,7 @@
         <small>tab style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav tabs>
+        <CNav variant="tabs">
           <CNavItem active>
             Active
           </CNavItem>
@@ -72,7 +72,7 @@
         <small>pill style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav pills>
+        <CNav variant="pills">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Another Link</CNavItem>
@@ -87,7 +87,7 @@
         <small>fill tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav fill tabs>
+        <CNav fill variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>
@@ -102,7 +102,7 @@
         <small>justified tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav justified tabs>
+        <CNav justified variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>

src/views/base/Switches.vue

@@ -23,8 +23,7 @@
               :key="'radio' + key"
               class="mx-1"
               :color="color"
-              shape="3d"
+             variant="3d"
-              outline="alt"
               v-bind="labelIcon"
               type="radio"
               name="radio"
@@ -85,15 +84,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -103,33 +102,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="success" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="success" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="info" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="info" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="light" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="light" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -139,235 +120,90 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>outline</code></small>
+            Switch <small><code>variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" />
-            <CSwitch class="mx-1" color="secondary" checked outline />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" />
-            <CSwitch class="mx-1" color="success" checked outline />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" />
-            <CSwitch class="mx-1" color="warning" checked outline />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" />
-            <CSwitch class="mx-1" color="info" checked outline />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" />
-            <CSwitch class="mx-1" color="danger" checked outline />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" />
-            <CSwitch class="mx-1" color="light" checked outline />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" />
-            <CSwitch class="mx-1" color="dark" checked outline />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" />
-            <CSwitch class="mx-1" color="primary" outline disabled />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>outline  shape="pill"</code></small>
+            Switch <small><code>variant="opposite"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked />
-            <CSwitch class="mx-1" color="secondary" checked />
-            <CSwitch class="mx-1" color="success" checked />
-            <CSwitch class="mx-1" color="warning" checked />
-            <CSwitch class="mx-1" color="info" checked />
-            <CSwitch class="mx-1" color="danger" checked />
-            <CSwitch class="mx-1" color="light" checked />
-            <CSwitch class="mx-1" color="dark" checked />
-            <CSwitch class="mx-1" color="primary" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" color="success" checked shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked shape="pill" />
-            <CSwitch class="mx-1" color="info" checked shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked shape="pill" />
-            <CSwitch class="mx-1" color="light" checked shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked shape="pill" />
-            <CSwitch class="mx-1" color="primary" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
@@ -407,72 +243,72 @@
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -483,7 +319,7 @@
             Sizes
           </CCardHeader>
           <CCardBody class="p-0">
-            <CTable
+            <CDataTable
               hover
               striped
               class="table-align-middle mb-0"
@@ -506,7 +342,7 @@
                   <span v-html="item.size_prop"></span>
                 </td>
               </template>
-            </CTable>
+            </CDataTable>
           </CCardBody>
         </CCard>
       </CCol>

src/views/base/Table.vue

@@ -1,6 +1,6 @@
 <template>
   <CCard :header="caption" body-wrapper>
-    <CTable
+    <CDataTable
       :hover="hover"
       :striped="striped"
       :bordered="bordered"
@@ -17,7 +17,7 @@
           <CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
         </td>
       </template>
-    </CTable>
+    </CDataTable>
   </CCard>
 </template>
 

src/views/base/Tabs.vue

@@ -49,7 +49,7 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs pills>
+            <CTabs variant="pills">
               <CTab title-html="Home" active>
                 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
@@ -104,7 +104,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-pie-chart"></i>
+                  <i class="cui-chart-piechart"></i>
                 </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
@@ -145,7 +145,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-chart-piechart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -163,7 +163,7 @@
             Tabs vertical
           </CCardHeader>
           <CCardBody>
-            <CTabs pills vertical>
+            <CTabs variant="pills" vertical>
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i> {{tabs[0]}}
@@ -186,7 +186,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-chart-piechart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

src/views/buttons/StandardButtons.vue

@@ -119,35 +119,35 @@
       </CCardHeader>
       <CCardBody>
         <p>
-          Use <code>outline</code> prop
+          Use <code>variant="outline"</code> prop
         </p>
         <CRow class="align-items-center">
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary">Primary</CButton>
+            <CButton block variant="outline" color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary">Secondary</CButton>
+            <CButton block variant="outline" color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success">Success</CButton>
+            <CButton block variant="outline" color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning">Warning</CButton>
+            <CButton block variant="outline" color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger">Danger</CButton>
+            <CButton block variant="outline" color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info">Info</CButton>
+            <CButton block variant="outline" color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light">Light</CButton>
+            <CButton block variant="outline" color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark">Dark</CButton>
+            <CButton block variant="outline" color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -156,28 +156,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -186,28 +186,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary" disabled>Primary</CButton>
+            <CButton block variant="outline" color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success" disabled>Success</CButton>
+            <CButton block variant="outline" color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning" disabled>Warning</CButton>
+            <CButton block variant="outline" color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger" disabled>Danger</CButton>
+            <CButton block variant="outline" color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info" disabled>Info</CButton>
+            <CButton block variant="outline" color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light" disabled>Light</CButton>
+            <CButton block variant="outline" color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark" disabled>Dark</CButton>
+            <CButton block variant="outline" color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -220,35 +220,35 @@
       <CCardBody>
         <p>
           Use
-          <code>ghost</code> prop for ghost buttons.
+          <code>variant="ghost"</code> prop for ghost buttons.
         </p>
         <CRow class="align-items-center">
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary">Primary</CButton>
+            <CButton block variant="ghost" color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary">Secondary</CButton>
+            <CButton block variant="ghost" color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success">Success</CButton>
+            <CButton block variant="ghost" color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning">Warning</CButton>
+            <CButton block variant="ghost" color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger">Danger</CButton>
+            <CButton block variant="ghost" color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info">Info</CButton>
+            <CButton block variant="ghost" color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light">Light</CButton>
+            <CButton block variant="ghost" color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark">Dark</CButton>
+            <CButton block variant="ghost" color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -257,28 +257,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -287,28 +287,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary" disabled>Primary</CButton>
+            <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success" disabled>Success</CButton>
+            <CButton block variant="ghost" color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning" disabled>Warning</CButton>
+            <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger" disabled>Danger</CButton>
+            <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info" disabled>Info</CButton>
+            <CButton block variant="ghost" color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light" disabled>Light</CButton>
+            <CButton block variant="ghost" color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark" disabled>Dark</CButton>
+            <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -435,31 +435,31 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill>Primary</CButton>
+            <CButton block color="primary" shape="pill">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill>Secondary</CButton>
+            <CButton block color="secondary" shape="pill">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill>Success</CButton>
+            <CButton block color="success" shape="pill">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill>Warning</CButton>
+            <CButton block color="warning" shape="pill">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill>Danger</CButton>
+            <CButton block color="danger" shape="pill">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill>Info</CButton>
+            <CButton block color="info" shape="pill">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill>Light</CButton>
+            <CButton block color="light" shape="pill">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill>Dark</CButton>
+            <CButton block color="dark" shape="pill">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill>Link</CButton>
+            <CButton block color="link" shape="pill">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill disabled>Primary</CButton>
+            <CButton block color="primary" shape="pill" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill disabled>Secondary</CButton>
+            <CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill disabled>Success</CButton>
+            <CButton block color="success" shape="pill" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill disabled>Warning</CButton>
+            <CButton block color="warning" shape="pill" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill disabled>Danger</CButton>
+            <CButton block color="danger" shape="pill" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill disabled>Info</CButton>
+            <CButton block color="info" shape="pill" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill disabled>Light</CButton>
+            <CButton block color="light" shape="pill" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill disabled>Dark</CButton>
+            <CButton block color="dark" shape="pill" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill disabled>Link</CButton>
+            <CButton block color="link" shape="pill" disabled>Link</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -542,16 +542,16 @@
             <CButton color="primary" size="sm">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="sm">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton size="sm" ghost color="success">Ghost Button</CButton>
+            <CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" size="sm" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="sm" pill>Pill Button</CButton>
+            <CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -562,16 +562,16 @@
             <CButton color="primary">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary">Outline Button</CButton>
+            <CButton variant="outline" color="secondary">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success">Ghost Button</CButton>
+            <CButton variant="ghost" color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" pill>Pill Button</CButton>
+            <CButton color="danger" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -582,16 +582,16 @@
             <CButton color="primary" size="lg">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="lg">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success" size="lg">Ghost Button</CButton>
+            <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" size="lg" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="lg" pill>Pill Button</CButton>
+            <CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -608,7 +608,7 @@
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="secondary" outline>
+            <CButton color="secondary" variant="outline">
               <i class="cui-lightbulb"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
@@ -623,7 +623,7 @@
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="danger" pill>
+            <CButton color="danger" shape="pill">
               <i class="cui-lightbulb"></i>&nbsp;Pill Button
             </CButton>
           </CCol>
@@ -637,22 +637,22 @@
       <CCardBody>
         <CRow>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -680,13 +680,13 @@
             <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
           <CCardBody>
-            <CButton size="lg" outline color="secondary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
-            <CButton size="lg" outline color="primary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
-            <CButton size="lg" outline color="success" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
-            <CButton size="lg" outline color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
-            <CButton size="lg" outline color="warning" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
-            <CButton size="lg" outline color="danger" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
-            <CButton size="lg" ghost color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
           </CCardBody>
         </CCard>
       </CCol>

src/views/icons/Brands.vue

@@ -13,7 +13,7 @@
               sm="2"
               :key="brandName"
             >
-              <CIcon :height="42" :content="$options.brands[brandName]"/>
+              <CIcon :height="42" :content="brand"/>
               <div>{{brandName}}</div>
             </CCol>
           </template>
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { iconSet as brands } from '@coreui/icons/brands'
+import { brandSet as brands } from '@coreui/icons'
 export default {
   name: 'Brands',
   brands

src/views/icons/CoreUIIcons.vue

@@ -1,8 +1,9 @@
+
 <template>
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-pencil"></i>CoreUI Icons
+        <CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
         <CBadge color="info">New</CBadge>
         <div class="card-header-actions">
           <a
@@ -16,427 +17,28 @@
         </div>
       </CCardHeader>
       <CCardBody>
-        <!-- <CRow class="text-center mb-5">
+        <CRow class="text-center">
-          <template v-for="(name, key) in $options.iconNames">
+          <template v-for="(icon, iconName) in $options.freeSet">
-            <CCol :key="key" col="6" sm="4" md="3" xl="2">
+            <CCol
-              <CIcon :name="name" width="24" class="mt-4"/>
+              class="mb-5"
-              <div>{{name}}</div>
+              col="3"
+              sm="2"
+              :key="iconName"
+            >
+              <CIcon :height="42" :content="icon"/>
+              <div>{{iconName}}</div>
             </CCol>
           </template>
         </CRow>
-         -->
-        <CRow class="text-center ">
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
-            <div>account-logout</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
-            <div>action-redo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
-            <div>action-undo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-center icons font-2xl d-block mt-4"></i>
-            <div>align-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-left icons font-2xl d-block mt-4"></i>
-            <div>align-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-right icons font-2xl d-block mt-4"></i>
-            <div>align-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
-            <div>arrow-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
-            <div>arrow-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
-            <div>arrow-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
-            <div>arrow-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-ban icons font-2xl d-block mt-4"></i>
-            <div>ban</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
-            <div>basket-loaded</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bell icons font-2xl d-block mt-4"></i>
-            <div>bell</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bold icons font-2xl d-block mt-4"></i>
-            <div>bold</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
-            <div>bookmark</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
-            <div>briefcase</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
-            <div>british-pound</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-brush icons font-2xl d-block mt-4"></i>
-            <div>brush</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calculator icons font-2xl d-block mt-4"></i>
-            <div>calculator</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calendar icons font-2xl d-block mt-4"></i>
-            <div>calendar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cart icons font-2xl d-block mt-4"></i>
-            <div>cart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chart icons font-2xl d-block mt-4"></i>
-            <div>chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-check icons font-2xl d-block mt-4"></i>
-            <div>check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
-            <div>chevron-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
-            <div>chevron-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
-            <div>chevron-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
-            <div>chevron-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
-            <div>circle-check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
-            <div>circle-x</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud icons font-2xl d-block mt-4"></i>
-            <div>cloud</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
-            <div>cloud-download</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
-            <div>cloud-upload</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-code icons font-2xl d-block mt-4"></i>
-            <div>code</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cog icons font-2xl d-block mt-4"></i>
-            <div>cog</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
-            <div>comment-square</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
-            <div>credit-card</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cursor icons font-2xl d-block mt-4"></i>
-            <div>cursor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
-            <div>dashboard</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-delete icons font-2xl d-block mt-4"></i>
-            <div>delete</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dollar icons font-2xl d-block mt-4"></i>
-            <div>dollar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-drop icons font-2xl d-block mt-4"></i>
-            <div>drop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
-            <div>envelope-closed</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
-            <div>envelope-letter</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
-            <div>envelope-open</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-euro icons font-2xl d-block mt-4"></i>
-            <div>euro</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-file icons font-2xl d-block mt-4"></i>
-            <div>file</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-globe icons font-2xl d-block mt-4"></i>
-            <div>globe</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-graph icons font-2xl d-block mt-4"></i>
-            <div>graph</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-home icons font-2xl d-block mt-4"></i>
-            <div>home</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-inbox icons font-2xl d-block mt-4"></i>
-            <div>inbox</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-info icons font-2xl d-block mt-4"></i>
-            <div>info</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-italic icons font-2xl d-block mt-4"></i>
-            <div>italic</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
-            <div>justify-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
-            <div>justify-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
-            <div>justify-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-laptop icons font-2xl d-block mt-4"></i>
-            <div>laptop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-layers icons font-2xl d-block mt-4"></i>
-            <div>layers</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
-            <div>lightbulb</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-list icons font-2xl d-block mt-4"></i>
-            <div>list</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
-            <div>location-pin</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
-            <div>lock-locked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
-            <div>lock-unlocked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
-            <div>magnifying-glass</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-map icons font-2xl d-block mt-4"></i>
-            <div>map</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-monitor icons font-2xl d-block mt-4"></i>
-            <div>monitor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-moon icons font-2xl d-block mt-4"></i>
-            <div>moon</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-note icons font-2xl d-block mt-4"></i>
-            <div>note</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-options icons font-2xl d-block mt-4"></i>
-            <div>options</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
-            <div>paperclip</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pencil icons font-2xl d-block mt-4"></i>
-            <div>pencil</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-people icons font-2xl d-block mt-4"></i>
-            <div>people</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-phone icons font-2xl d-block mt-4"></i>
-            <div>phone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
-            <div>pie-chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-print icons font-2xl d-block mt-4"></i>
-            <div>print</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
-            <div>puzzle</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-rss icons font-2xl d-block mt-4"></i>
-            <div>rss</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
-            <div>screen-desktop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
-            <div>screen-smartphone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-settings icons font-2xl d-block mt-4"></i>
-            <div>settings</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-share icons font-2xl d-block mt-4"></i>
-            <div>share</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-shield icons font-2xl d-block mt-4"></i>
-            <div>shield</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
-            <div>sort-ascending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
-            <div>sort-descending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speech icons font-2xl d-block mt-4"></i>
-            <div>speech</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
-            <div>speedometer</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-star icons font-2xl d-block mt-4"></i>
-            <div>star</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sun icons font-2xl d-block mt-4"></i>
-            <div>sun</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tablet icons font-2xl d-block mt-4"></i>
-            <div>tablet</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tags icons font-2xl d-block mt-4"></i>
-            <div>tags</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-task icons font-2xl d-block mt-4"></i>
-            <div>task</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
-            <div>thumb-down</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
-            <div>thumb-up</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-trash icons font-2xl d-block mt-4"></i>
-            <div>trash</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-underline icons font-2xl d-block mt-4"></i>
-            <div>underline</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user icons font-2xl d-block mt-4"></i>
-            <div>user</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-female icons font-2xl d-block mt-4"></i>
-            <div>user-female</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
-            <div>user-follow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
-            <div>user-unfollow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-wrench icons font-2xl d-block mt-4"></i>
-            <div>wrench</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-yen icons font-2xl d-block mt-4"></i>
-            <div>yen</div>
-          </CCol>
-        </CRow>
       </CCardBody>
     </CCard>
   </div>
 </template>
-<script>
-// import { iconSet } from '@coreui/icons'
-// const iconNames = Object.keys(iconSet)
 
+<script>
+import { freeSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
-  // iconNames,
+  freeSet
 }
 </script>

src/views/icons/Flags.vue

@@ -20,8 +20,8 @@
               sm="2"
               :key="key"
             >
-              <CIcon :height="42" :content="$options.iconSet[flag]"/>
+              <CIcon :height="42" :content="flag"/>
-              <div>{{flag}}</div>
+              <div>{{key}}</div>
             </CCol>
           </template>
         </CRow>
@@ -31,15 +31,15 @@
 </template>
 
 <script>
-import { iconSet } from '@coreui/icons/flags'
+import { flagSet } from '@coreui/icons'
 export default {
   name: 'Flags',
-  iconSet,
+  flagSet,
   computed: {
     // Avoid duplication caused by displaying 1x1 and 4x3 formats
     // (adding Q to name makes icon quadratic)
     displayedFlags () {
-      return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
+      return this.$options.flagSet
     }
   }
 }

src/views/notifications/Alerts.vue

@@ -107,16 +107,7 @@
 
           <CAlert
             color="secondary"
-            closeButton
-            fade
             :show.sync="alert2"
-          >
-            Dismissible Alert with fade effect!
-          </CAlert>
-
-          <CAlert
-            color="secondary"
-            :show.sync="alert3"
             class="alert-dismissible"
           >
             Dismissible Alert with custom button!
@@ -124,7 +115,7 @@
               class="position-absolute"
               color="secondary"
               style="right:10px;top: 50%;transform: translateY(-50%);"
-              @click="alert3 = false"
+              @click="alert2 = false"
             >
               Close
             </CButton>
@@ -186,8 +177,7 @@ export default {
       dismissSecs: 10,
       dismissCountDown: 10,
       alert1: true,
-      alert2: true,
+      alert2: true
-      alert3: true
     }
   },
   methods: {

src/views/notifications/Badges.vue

@@ -51,17 +51,17 @@
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i> Badge
-          <small>pills</small>
+          <small>shape="pill"</small>
         </CCardHeader>
         <CCardBody>
-          <CBadge pill color="primary">Primary</CBadge>
+          <CBadge shape="pill" color="primary">Primary</CBadge>
-          <CBadge pill color="secondary">Secondary</CBadge>
+          <CBadge shape="pill" color="secondary">Secondary</CBadge>
-          <CBadge pill color="success">Success</CBadge>
+          <CBadge shape="pill" color="success">Success</CBadge>
-          <CBadge pill color="danger">Danger</CBadge>
+          <CBadge shape="pill" color="danger">Danger</CBadge>
-          <CBadge pill color="warning">Warning</CBadge>
+          <CBadge shape="pill" color="warning">Warning</CBadge>
-          <CBadge pill color="info">Info</CBadge>
+          <CBadge shape="pill" color="info">Info</CBadge>
-          <CBadge pill color="light">Light</CBadge>
+          <CBadge shape="pill" color="light">Light</CBadge>
-          <CBadge pill color="dark">Dark</CBadge>
+          <CBadge shape="pill" color="dark">Dark</CBadge>
         </CCardBody>
       </CCard>
       <CCard>

src/views/notifications/Modals.vue

@@ -91,6 +91,7 @@
     <CModal
       title="Modal title"
       :show.sync="primaryModal"
+      color="primary"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

src/views/users/User.vue

@@ -6,7 +6,7 @@
           User id:  {{ $route.params.id }}
         </CCardHeader>
         <CCardBody>
-          <CTable
+          <CDataTable
             striped
             small
             fixed

src/views/users/Users.vue

@@ -3,7 +3,7 @@
     <CCol col="12" xl="8">
       <transition name="slide">
         <CCard header-html="Users" body-wrapper>
-          <CTable
+          <CDataTable
             hover
             striped
             :items="items"
@@ -27,7 +27,7 @@
                 </CBadge>
               </td>
             </template>
-          </CTable>
+          </CDataTable>
         </CCard>
       </transition>
     </CCol>

src/views/widgets/Widgets.vue

@@ -276,7 +276,7 @@
         text="Products sold"
         color="warning"
       >
-        <CIcon name="basketLoaded" height="36"/>
+        <CIcon name="basket" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="28%"
@@ -315,7 +315,7 @@
         color="warning"
         inverse
       >
-        <CIcon name="basketLoaded" height="36"/>
+        <CIcon name="basket" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="28%"
@@ -359,7 +359,7 @@
           text="Products sold"
           color="warning"
         >
-          <CIcon name="basketLoaded" height="36"/>
+          <CIcon name="basket" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -418,7 +418,7 @@
           color="warning"
           inverse
         >
-          <CIcon name="basketLoaded" height="36"/>
+          <CIcon name="basket" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">

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

@@ -42,7 +42,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       target="_self"
       to="/dashboard"
     >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        
         Dashboard
+      
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -56,7 +67,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       target="_self"
       to="/users"
     >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        
         Users
+      
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -68,7 +90,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
     >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        
         Settings
+      
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
   </cheadernav-stub>
    
@@ -83,10 +116,19 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
       >
         <i
           class="cui-bell"
         />
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -97,10 +139,19 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
       >
         <i
           class="cui-list"
         />
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -111,10 +162,19 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
       >
         <i
           class="cui-envelope-open"
         />
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <theheaderdropdownaccnt-stub />

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

@@ -6,8 +6,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
   caret="true"
   class="c-header-nav-items"
   flip="true"
-  nav=""
+  innav="true"
-  no-caret=""
   placement="bottom-end"
   togglertext="Dropdown"
 >

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

@@ -569,8 +569,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     color="info"
                     event="click"
                     exactactiveclass="active"
-                    pill="true"
                     routertag="a"
+                    shape="pill"
                     tag="span"
                     target="_self"
                   >
@@ -587,8 +587,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     color="danger"
                     event="click"
                     exactactiveclass="active"
-                    pill="true"
                     routertag="a"
+                    shape="pill"
                     tag="span"
                     target="_self"
                   >
@@ -936,7 +936,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
          
         <br />
          
-        <ctable-stub
+        <cdatatable-stub
           class="mb-0 table-outline"
           defaultsorter="[object Object]"
           fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"

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

@@ -175,7 +175,8 @@ exports[`Cards.vue renders correctly 1`] = `
           Card with label
           
           <span
-            class="badge float-right badge-danger badge-pill"
+            class="badge float-right badge-danger"
+            shape="pill"
           >
             42
           </span>

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

@@ -68,7 +68,7 @@ exports[`Carousels.vue renders correctly 1`] = `
             >
               <img
                 class="d-block w-100 h-100 img-fluid"
-                src="https://lorempixel.com/1024/480/technics/2/"
+                src="https://picsum.photos/1024/480/?image=52"
               />
               <div
                 class="carousel-caption"
@@ -86,9 +86,8 @@ exports[`Carousels.vue renders correctly 1`] = `
               class="carousel-item"
             >
               <svg
-                blankColor="grey"
                 class="d-block w-100 h-100 img-fluid"
-                style="background-color: transparent;"
+                style="background-color: grey;"
               />
               <div
                 class="carousel-caption"
@@ -107,7 +106,7 @@ exports[`Carousels.vue renders correctly 1`] = `
             >
               <img
                 class="d-block w-100 h-100 img-fluid"
-                src="https://lorempixel.com/1024/480/technics/8/"
+                src="https://picsum.photos/1024/480/?image=54"
               />
               <!---->
             </div>

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

@@ -49,7 +49,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
             <p
               class="lead"
             >
-              Bootstrap 4 Components for Vue.js 2
+              Bootstrap 4 Components for Vue.js 2.6+
             </p>
              
             <p>

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

@@ -462,8 +462,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                pill="true"
                 routertag="a"
+                shape="pill"
                 tag="span"
                 target="_self"
               >
@@ -488,8 +488,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                pill="true"
                 routertag="a"
+                shape="pill"
                 tag="span"
                 target="_self"
               >
@@ -514,8 +514,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                pill="true"
                 routertag="a"
+                shape="pill"
                 tag="span"
                 target="_self"
               >

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

@@ -168,7 +168,7 @@ exports[`Navs.vue renders correctly 1`] = `
      
     <ccardbody-stub>
       <cnav-stub
-        tabs="true"
+        variant="tabs"
       >
         <cnavitem-stub
           active="true"
@@ -242,7 +242,7 @@ exports[`Navs.vue renders correctly 1`] = `
      
     <ccardbody-stub>
       <cnav-stub
-        pills="true"
+        variant="pills"
       >
         <cnavitem-stub
           active="true"
@@ -311,7 +311,7 @@ exports[`Navs.vue renders correctly 1`] = `
     <ccardbody-stub>
       <cnav-stub
         fill="true"
-        tabs="true"
+        variant="tabs"
       >
         <cnavitem-stub
           active="true"
@@ -380,7 +380,7 @@ exports[`Navs.vue renders correctly 1`] = `
     <ccardbody-stub>
       <cnav-stub
         justified="true"
-        tabs="true"
+        variant="tabs"
       >
         <cnavitem-stub
           active="true"
@@ -448,7 +448,7 @@ exports[`Navs.vue renders correctly 1`] = `
      
     <ccardbody-stub>
       <cnav-stub
-        pills="true"
+        pills=""
       >
         <cnavitem-stub
           active="true"
@@ -545,7 +545,7 @@ exports[`Navs.vue renders correctly 1`] = `
           tag="div"
         >
           <cnav-stub
-            pills="true"
+            pills=""
             vertical="true"
           >
             <cnavitem-stub

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

@@ -48,7 +48,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         pages="10"
         previousbuttonhtml="‹"
         responsive=""
-        size="md"
       />
        
       <br />
@@ -136,7 +135,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        size="md"
       />
        
       <br />
@@ -157,7 +155,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        size="md"
       />
        
       <br />
@@ -178,7 +175,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        size="md"
       />
        
       <br />

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

@@ -2568,7 +2568,7 @@ exports[`Switches.vue renders correctly 1`] = `
         <ccardbody-stub
           class="p-0"
         >
-          <ctable-stub
+          <cdatatable-stub
             class="table-align-middle mb-0"
             defaultsorter="[object Object]"
             fields="[object Object],[object Object],[object Object]"

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

@@ -5,7 +5,7 @@ exports[`Table.vue renders correctly 1`] = `
   bodywrapper="true"
   header="Table"
 >
-  <ctable-stub
+  <cdatatable-stub
     defaultsorter="[object Object]"
     fields="username,registered,role,status"
     itemsperpage="5"

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

@@ -1,363 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tabs.vue renders correctly 1`] = `
-<div>
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="6"
-      tag="div"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs
-          
-          <div
-            class="card-header-actions"
-          >
-            <a
-              class="card-header-action"
-              href="https://coreui.io/vue/docs/3.0/components/Tabs"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              <small
-                class="text-muted"
-              >
-                docs
-              </small>
-            </a>
-          </div>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-              titlehtml="Home"
-            >
-              
-              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
-              titlehtml="Profile"
-            >
-              
-              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
-              disabled="true"
-              titlehtml="Disabled"
-            >
-              
-              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"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            pills="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-              titlehtml="Home"
-            >
-              
-              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
-              titlehtml="Profile"
-            >
-              
-              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
-              disabled="true"
-              titlehtml="Disabled"
-            >
-              
-              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"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs with icons
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-            >
-              <template>
-                <i
-                  class="cui-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"
-                />
-              </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"
-                />
-              </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"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs with icons
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            addtabclasses="mt-1"
-            fade="true"
-            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"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs vertical
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            pills="true"
-            tabs="true"
-            vertical="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>
-  </crow-stub>
-</div>
-`;

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

@@ -43,6 +43,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="primary"
+            fade="true"
             show="true"
           >
             Primary Alert
@@ -50,6 +51,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="secondary"
+            fade="true"
             show="true"
           >
             Secondary Alert
@@ -57,6 +59,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="success"
+            fade="true"
             show="true"
           >
             Success Alert
@@ -64,6 +67,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="danger"
+            fade="true"
             show="true"
           >
             Danger Alert
@@ -71,6 +75,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="warning"
+            fade="true"
             show="true"
           >
             Warning Alert
@@ -78,6 +83,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="info"
+            fade="true"
             show="true"
           >
             Info Alert
@@ -85,6 +91,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="light"
+            fade="true"
             show="true"
           >
             Light Alert
@@ -92,6 +99,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="dark"
+            fade="true"
             show="true"
           >
             Dark Alert
@@ -126,6 +134,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         <div>
           <calert-stub
             color="primary"
+            fade="true"
             show="true"
           >
             
@@ -142,6 +151,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="secondary"
+            fade="true"
             show="true"
           >
             
@@ -158,6 +168,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="success"
+            fade="true"
             show="true"
           >
             
@@ -174,6 +185,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="danger"
+            fade="true"
             show="true"
           >
             
@@ -190,6 +202,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="warning"
+            fade="true"
             show="true"
           >
             
@@ -206,6 +219,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="info"
+            fade="true"
             show="true"
           >
             
@@ -222,6 +236,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="light"
+            fade="true"
             show="true"
           >
             
@@ -238,6 +253,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="dark"
+            fade="true"
             show="true"
           >
             
@@ -283,6 +299,7 @@ exports[`Alerts.vue renders correctly 1`] = `
       <ccardbody-stub>
         <calert-stub
           color="success"
+          fade="true"
           show="true"
         >
           <h4
@@ -334,6 +351,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         <calert-stub
           closebutton="true"
           color="secondary"
+          fade="true"
           show="true"
         >
           
@@ -341,20 +359,10 @@ exports[`Alerts.vue renders correctly 1`] = `
         
         </calert-stub>
          
-        <calert-stub
-          closebutton="true"
-          color="secondary"
-          fade="true"
-          show="true"
-        >
-          
-          Dismissible Alert with fade effect!
-        
-        </calert-stub>
-         
         <calert-stub
           class="alert-dismissible"
           color="secondary"
+          fade="true"
           show="true"
         >
           
@@ -426,6 +434,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           <calert-stub
             closebutton="true"
             color="info"
+            fade="true"
             show="10"
           >
             

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

@@ -197,7 +197,7 @@ exports[`Badges.vue renders correctly 1`] = `
          Badge
         
         <small>
-          pills
+          shape="pill"
         </small>
       </header>
        
@@ -205,49 +205,57 @@ exports[`Badges.vue renders correctly 1`] = `
         class="card-body"
       >
         <span
-          class="badge badge-primary badge-pill"
+          class="badge badge-primary"
+          shape="pill"
         >
           Primary
         </span>
          
         <span
-          class="badge badge-secondary badge-pill"
+          class="badge badge-secondary"
+          shape="pill"
         >
           Secondary
         </span>
          
         <span
-          class="badge badge-success badge-pill"
+          class="badge badge-success"
+          shape="pill"
         >
           Success
         </span>
          
         <span
-          class="badge badge-danger badge-pill"
+          class="badge badge-danger"
+          shape="pill"
         >
           Danger
         </span>
          
         <span
-          class="badge badge-warning badge-pill"
+          class="badge badge-warning"
+          shape="pill"
         >
           Warning
         </span>
          
         <span
-          class="badge badge-info badge-pill"
+          class="badge badge-info"
+          shape="pill"
         >
           Info
         </span>
          
         <span
-          class="badge badge-light badge-pill"
+          class="badge badge-light"
+          shape="pill"
         >
           Light
         </span>
          
         <span
-          class="badge badge-dark badge-pill"
+          class="badge badge-dark"
+          shape="pill"
         >
           Dark
         </span>

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

@@ -233,6 +233,7 @@ exports[`Modals.vue renders correctly 1`] = `
   <cmodal-stub
     backdrop="true"
     closeonbackdrop="true"
+    color="primary"
     fade="true"
     title="Modal title"
   >

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

@@ -17,7 +17,7 @@ exports[`User.vue renders correctly 1`] = `
       </ccardheader-stub>
        
       <ccardbody-stub>
-        <ctable-stub
+        <cdatatable-stub
           defaultsorter="[object Object]"
           fields="[object Object],[object Object]"
           fixed="true"

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

@@ -14,12 +14,12 @@ exports[`Users.vue renders correctly 1`] = `
       headerhtml="Users"
       name="slide"
     >
-      <ctable-stub
+      <cdatatable-stub
         clickablerows="true"
         defaultsorter="[object Object]"
         fields="[object Object],[object Object],[object Object],[object Object]"
         hover="true"
-        indexcolumn="true"
+        index-column=""
         items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         itemsperpage="5"
         pagination="[object Object]"

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

@@ -1,991 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Widgets.vue renders correctly 1`] = `
-<div>
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        footer="Lorem ipsum dolor sit amet enim."
-        header="89.9%"
-        text="Lorem ipsum..."
-        value="25"
-      >
-        <cprogress-stub
-          class="progress-xs my-3 mb-0"
-          color="success"
-          max="100"
-          precision="0"
-          value="25"
-        />
-      </cwidgetprogress-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="info"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="12.124"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="warning"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="$98.111,00"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="danger"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="2 TB"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="success"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="89.9%"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="info"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="12.124"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="warning"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="$98.111,00"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="danger"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="2 TB"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="danger"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="bell"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="danger"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="bell"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      col="12"
-      lg="4"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          class="mx-5 "
-          fonticontag="i"
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="4"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          class="mx-5 "
-          fonticontag="i"
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="4"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          class="mx-5 "
-          fonticontag="i"
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <widgetsbrand-stub
-    nocharts="true"
-  />
-   
-  <widgetsbrand-stub />
-   
-  <ccardgroup-stub
-    class="mb-4"
-  >
-    <cwidgetprogressicon-stub
-      color="info"
-      header="87.500"
-      text="Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="people"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="success"
-      header="385"
-      text="New Clients"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="userFollow"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="warning"
-      header="1238"
-      text="Products sold"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="basketLoaded"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      header="28%"
-      text="Returning Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="chartPie"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="danger"
-      header="5:34:11"
-      text="Avg. Time"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="speedometer"
-      />
-    </cwidgetprogressicon-stub>
-  </ccardgroup-stub>
-   
-  <ccardgroup-stub
-    class="mb-4"
-  >
-    <cwidgetprogressicon-stub
-      color="info"
-      header="87.500"
-      inverse="true"
-      text="Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="people"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="success"
-      header="385"
-      inverse="true"
-      text="New Clients"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="userFollow"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="warning"
-      header="1238"
-      inverse="true"
-      text="Products sold"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="basketLoaded"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="primary"
-      header="28%"
-      inverse="true"
-      text="Returning Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="chartPie"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="danger"
-      header="5:34:11"
-      inverse="true"
-      text="Avg. Time"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="speedometer"
-      />
-    </cwidgetprogressicon-stub>
-  </ccardgroup-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="87.500"
-        text="Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="people"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="success"
-        header="385"
-        text="New Clients"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="userFollow"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="warning"
-        header="1238"
-        text="Products sold"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="basketLoaded"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="primary"
-        header="28%"
-        text="Returning Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="chartPie"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="danger"
-        header="5:34:11"
-        text="Avg. Time"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speedometer"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="972"
-        text="comments"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speech"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="87.500"
-        inverse="true"
-        text="Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="people"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="success"
-        header="385"
-        inverse="true"
-        text="New Clients"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="userFollow"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="warning"
-        header="1238"
-        inverse="true"
-        text="Products sold"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="basketLoaded"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="primary"
-        header="28%"
-        inverse="true"
-        text="Returning Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="chartPie"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="danger"
-        header="5:34:11"
-        inverse="true"
-        text="Avg. Time"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speedometer"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="972"
-        inverse="true"
-        text="comments"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speech"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <widgetsdropdown-stub />
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="primary"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="success"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="danger"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="warning"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="danger"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="primary"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="success"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartbarsimple-stub
-          backgroundcolor="danger"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartbarsimple-stub
-          backgroundcolor="primary"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartbarsimple-stub
-          backgroundcolor="success"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-  </crow-stub>
-</div>
-`;