From 989220f82adc95d70ff0586f0d5276f9b4b83133 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 3 Jun 2019 15:47:41 +0200
Subject: [PATCH] refactor: change camelCase props to kebab-case

---
 src/containers/DefaultHeaderDropdownAccnt.vue |  10 +-
 src/containers/TheAside.vue                   |  13 +-
 src/containers/TheSidebar.vue                 |   2 +-
 src/views/Charts.vue                          |  24 ++--
 src/views/Dashboard.vue                       |   6 +-
 src/views/base/Breadcrumbs.vue                |   2 +-
 src/views/base/Cards.vue                      |  66 ++++-----
 src/views/base/Carousels.vue                  |   6 +-
 src/views/base/Collapses.vue                  | 130 +-----------------
 src/views/base/Forms.vue                      |  30 ++--
 src/views/base/Jumbotrons.vue                 |   4 +-
 src/views/base/ListGroups.vue                 |   2 +-
 src/views/base/Navbars.vue                    |   8 +-
 src/views/base/Navs.vue                       |   9 +-
 src/views/base/Paginations.vue                |  12 +-
 src/views/base/Switches.vue                   | 120 ++++++++--------
 src/views/base/Table.vue                      |   4 +-
 src/views/base/Tables.vue                     |  30 ++--
 src/views/base/Tabs.vue                       |  20 +--
 src/views/buttons/BrandButtons.vue            | 118 ++++++++++++----
 src/views/buttons/ButtonGroups.vue            |   8 +-
 src/views/buttons/Dropdowns.vue               |  46 +++----
 src/views/icons/FontAwesome.vue               |  32 ++---
 src/views/icons/SimpleLineIcons.vue           |   2 +-
 src/views/notifications/Modals.vue            |  20 +--
 src/views/pages/Login.vue                     |   2 +-
 src/views/pages/Register.vue                  |   2 +-
 src/views/users/Users.vue                     |   4 +-
 src/views/widgets/Widgets.vue                 |  70 +++++-----
 src/views/widgets/WidgetsDropdown.vue         |  18 +--
 src/views/widgets/WidgetsSocial.vue           |  80 +++++------
 31 files changed, 420 insertions(+), 480 deletions(-)

diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index 9a53623a..1b376f62 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -1,9 +1,9 @@
 <template>
   <CDropdown
     nav
-    noCaret
-    noPopper
-    addMenuClasses="c-dropdown-menu-right"
+    no-caret
+    no-popper
+    add-menu-classes="c-dropdown-menu-right"
   >
     <template #button-content>
       <img
@@ -17,7 +17,7 @@
     </CDropdownHeader>
     <CDropdownItem>
       <i class="cui-bell"/> Updates
-      <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
+      <CBadge variant="info" additional-classes="hehe">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
       <i class="cui-envelope-open" /> Messages
@@ -32,7 +32,7 @@
       <CBadge variant="warning">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
-      tag="div"
+     tag="div"
       class="c-text-center"
     >
       <strong>Settings</strong>
diff --git a/src/containers/TheAside.vue b/src/containers/TheAside.vue
index 6e6e8fc9..05ad4bd3 100644
--- a/src/containers/TheAside.vue
+++ b/src/containers/TheAside.vue
@@ -1,13 +1,14 @@
 <template>
   <CSidebar aside fixed light :display="false">
-    <CTabs addTabClasses="c-p-0">
+    <CTabs add-tab-classes="c-p-0">
       <CTab active>
         <template slot="title">
           <i class="cui-list"></i>
         </template>
         <CListGroup class="c-list-group-accent">
           <CListGroupItem
-            class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase c-small">
+            class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase c-small"
+          >
             Today
           </CListGroupItem>
           <CListGroupItem href="#" class="c-list-group-item-accent-warning c-list-group-item-divider">
@@ -207,7 +208,7 @@
           <div class="c-aside-options">
             <div class="c-clearfix c-mt-3">
               <small><b>Option 3</b></small>
-              <CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" disabled defaultChecked/>
+              <CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" disabled default-checked/>
             </div>
             <div>
               <small class="c-text-muted">Disabled option.</small>
@@ -224,17 +225,17 @@
           <div class="c-text-uppercase c-mb-1 c-mt-4">
             <small><b>CPU Usage</b></small>
           </div>
-          <CProgress  class="c-progress-xs" variant="info" :value="25"></CProgress>
+          <CProgress class="c-progress-xs" variant="info" :value="25"></CProgress>
           <small class="c-text-muted">348 Processes. 1/4 Cores.</small>
           <div class="c-text-uppercase c-mb-1 c-mt-2">
             <small><b>Memory Usage</b></small>
           </div>
-          <CProgress  class="c-progress-xs" variant="warning" :value="70"></CProgress>
+          <CProgress class="c-progress-xs" variant="warning" :value="70"></CProgress>
           <small class="c-text-muted">11444GB/16384MB</small>
           <div class="c-text-uppercase c-mb-1 c-mt-2">
             <small><b>SSD 1 Usage</b></small>
           </div>
-          <CProgress  class="c-progress-xs" variant="danger" :value="95"></CProgress>
+          <CProgress class="c-progress-xs" variant="danger" :value="95"></CProgress>
           <small class="c-text-muted">243GB/256GB</small>
           <div class="c-text-uppercase c-mb-1 c-mt-2">
             <small><b>SSD 2 Usage</b></small>
diff --git a/src/containers/TheSidebar.vue b/src/containers/TheSidebar.vue
index e91da539..16f24aaa 100644
--- a/src/containers/TheSidebar.vue
+++ b/src/containers/TheSidebar.vue
@@ -2,7 +2,7 @@
   <CSidebar fixed>
     <CSidebarHeader/>
     <CSidebarForm/>
-    <CSidebarNav :navItems="computedNav"/>
+    <CSidebarNav :nav-items="computedNav"/>
     <CSidebarFooter/>
     <CSidebarMinimizer/>
   </CSidebar>
diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index fdcf70c9..fce93c71 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,32 +1,32 @@
 <template>
   <div class="c-animated c-fadeIn">
     <CCardGroup columns class="c-card-columns c-cols-2">
-      <CCard headerHtml="Line Chart" bodyWrapper>
+      <CCard header-html="Line Chart" body-wrapper>
         <CChartLineExample/>
       </CCard>
-      <CCard headerHtml="Bar Chart" bodyWrapper>
+      <CCard header-html="Bar Chart" body-wrapper>
         <CChartBarExample/>
       </CCard>
-      <CCard headerHtml="Doughnut Chart" bodyWrapper>
+      <CCard header-html="Doughnut Chart" body-wrapper>
         <CChartDoughnutExample/>
       </CCard>
-      <CCard headerHtml="Radar Chart" bodyWrapper>
+      <CCard header-html="Radar Chart" body-wrapper>
         <CChartRadarExample/>
       </CCard>
-      <CCard headerHtml="Pie Chart" bodyWrapper>
+      <CCard header-html="Pie Chart" body-wrapper>
         <CChartPieExample/>
       </CCard>
-      <CCard headerHtml="Polar Area Chart" bodyWrapper>
+      <CCard header-html="Polar Area Chart" body-wrapper>
         <CChartPolarAreaExample/>
       </CCard>
-      <CCard headerHtml="Simple line chart" bodyWrapper>
-        <CChartLineSimple borderColor="success" labels="months"/>
+      <CCard header-html="Simple line chart" body-wrapper>
+        <CChartLineSimple border-color="success" labels="months"/>
       </CCard>
-      <CCard headerHtml="Simple pointed chart" bodyWrapper>
-        <CChartLineSimple pointed borderColor="warning"/>
+      <CCard header-html="Simple pointed chart" body-wrapper>
+        <CChartLineSimple pointed border-color="warning"/>
       </CCard>
-      <CCard headerHtml="Simple bar chart" bodyWrapper>
-        <CChartBarSimple backgroundColor="danger"/>
+      <CCard header-html="Simple bar chart" body-wrapper>
+        <CChartBarSimple background-color="danger"/>
       </CCard>
     </CCardGroup>
   </div>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 16fbc00f..d03477c0 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -85,7 +85,7 @@
     <WidgetsSocial/>
     <CRow>
       <CCol md="12">
-        <CCard headerHtml="Traffic &amp; Sales" bodyWrapper>
+        <CCard header-html="Traffic &amp; Sales" body-wrapper>
           <CRow>
             <CCol sm="12" lg="6">
               <CRow>
@@ -350,7 +350,7 @@
                 <div class="c-progress-group">
                   <div class="c-progress-group-header">
                     <CIcon
-                      name="socialLinkedin" 
+                      name="socialLinkedin"
                       height="17"
                       class="c-progress-group-icon"
                     />
@@ -382,7 +382,7 @@
             :items="tableItems"
             :fields="tableFields"
             head-variant="light"
-            noSorting
+            no-sorting
           >
             <!-- <div slot="activity-header">
               A tu nic
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 673c4f32..355870c1 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -13,7 +13,7 @@
               </div> -->
             </CCardHeader>
             <CCardBody>
-              <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
+              <CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
               <CBreadcrumb :items="items2"/>
               <CBreadcrumb :items="items3"/>
             </CCardBody>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 36049260..03729da2 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -2,10 +2,10 @@
   <div class="c-animated c-fadeIn">
     <CRow>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" :bodyHtml="loremIpsum"/>
+        <CCard header-html="Card title" :body-html="loremIpsum"/>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard footerHtml="Card Footer" :bodyHtml="loremIpsum" />
+        <CCard footer-html="Card Footer" :body-html="loremIpsum" />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
@@ -22,8 +22,8 @@
               size="sm"
               shape="pill"
               variant="info"
-              dataOn="On"
-              dataOff="Off"
+              data-on="On"
+              data-off="Off"
               :checked="true"
             />
           </CCardHeader>
@@ -49,7 +49,7 @@
             Card with label
             <CBadge pill variant="danger" class="c-float-right">42</CBadge>
           </CCardHeader>
-          <CCardBody :bodyHtml="loremIpsum"/>
+          <CCardBody :body-html="loremIpsum"/>
         </CCard>
       </CCol>
     </CRow>
@@ -57,38 +57,38 @@
       <CCol sm="6" md="4">
         <CCard
           header="Card outline primary"
-          borderVariant="primary"
-          :bodyHtml="loremIpsum"
+          border-variant="primary"
+          :body-html="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline secondary"
-          borderVariant="secondary"
-          :bodyHtml="loremIpsum"
+          border-variant="secondary"
+          :body-html="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline success"
-          borderVariant="success"
-          bodyWrapper
+          border-variant="success"
+          body-wrapper
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card outline info" borderVariant="info" bodyWrapper>
+        <CCard header-html="Card outline info" border-variant="info" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card outline warning" borderVariant="warning" bodyWrapper>
+        <CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card outline danger" borderVariant="danger" bodyWrapper>
+        <CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
@@ -96,39 +96,39 @@
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-primary" header="Card with primary accent" bodyWrapper>
+        <CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-secondary" header="Card with secondary accent" bodyWrapper>
+        <CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-success" header="Card with success accent" bodyWrapper>
+        <CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-info" header="Card with info accent" bodyWrapper>
+        <CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-warning" header="Card with warning accent" bodyWrapper>
+        <CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-card-accent-danger" header="Card with danger accent" bodyWrapper>
+        <CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-primary c-text-center" bodyWrapper>
+        <CCard class="c-bg-primary c-text-center" body-wrapper>
           <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -138,7 +138,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-success c-text-center" bodyWrapper>
+        <CCard class="c-bg-success c-text-center" body-wrapper>
           <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -148,7 +148,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-info c-text-center" bodyWrapper>
+        <CCard class="c-bg-info c-text-center" body-wrapper>
           <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -158,7 +158,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-warning c-text-center" bodyWrapper>
+        <CCard class="c-bg-warning c-text-center" body-wrapper>
           <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -168,7 +168,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-danger c-text-center" bodyWrapper>
+        <CCard class="c-bg-danger c-text-center" body-wrapper>
           <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -178,7 +178,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="c-bg-secondary c-text-center" bodyWrapper>
+        <CCard class="c-bg-secondary c-text-center" body-wrapper>
           <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -190,27 +190,27 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="c-bg-primary" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-primary" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="c-bg-success" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-success" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="c-bg-info" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-info" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="c-bg-warning" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-warning" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard headerHtml="Card title" class="c-bg-danger" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-danger" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
@@ -243,8 +243,8 @@
     <!-- <CRow>
       <CCol sm="6" md="4">
         <CCard >
-          <CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
-          <CCardHeader headerHtml="Card title"/>
+          <CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
+          <CCardHeader header-html="Card title"/>
           <CCardBody style="max-height:200px;overflow-y:auto">
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 89edff7d..86d930a2 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -26,15 +26,15 @@
               >
                 <CCarouselItem
                   caption="First Slide"
-                  imgSrc="https://lorempixel.com/1024/480/technics/2/"
+                  img-src="https://lorempixel.com/1024/480/technics/2/"
                   text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                 />
                 <CCarouselItem
                   active
-                  imgSrc="https://lorempixel.com/1024/480/technics/4/"
+                  img-src="https://lorempixel.com/1024/480/technics/4/"
                 />
                 <CCarouselItem
-                  imgSrc="https://lorempixel.com/1024/480/technics/8/"
+                 img-src="https://lorempixel.com/1024/480/technics/8/"
                 />
               </CCarousel>
             </CCardBody>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 10e9ebeb..2c2d245a 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -18,145 +18,19 @@
                 Toggle Collapse
               </CButton>
               <CCollapse toggler="collapse1" class="c-mt-2">
-                <CCard bodyWrapper>
+                <CCard body-wrapper>
                   <p class="c-card-text">Collapse contents Here</p>
                   <CButton id="collapse2" size="sm">
                     Toggle Inner Collapse
                   </CButton>
                   <CCollapse toggler="collapse2" class="c-mt-2">
-                    <CCard bodyWrapper>Hello!</CCard>
+                    <CCard body-wrapper>Hello!</CCard>
                   </CCollapse>
                 </CCard>
               </CCollapse>
             </CCardBody>
           </CCard>
         </CCol>
-        <!-- <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
-            </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
-
-              <CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
-
-              <CCollapse id="collapse2">
-                <CCard>
-                  I am collapsible content!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
-            </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
-              <CCollapse visible id="collapse3">
-                <CCard>
-                  I should start open!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
-            </CCardHeader>
-            <div>
-              <CButton @click="showCollapse = !showCollapse"
-                     :class="showCollapse ? 'collapsed' : null"
-                     aria-controls="collapse4"
-                     :aria-expanded="showCollapse ? 'true' : 'false'">
-                Toggle Collapse
-              </CButton>
-              <CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
-                <CCard>
-                  I should start open!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
-            </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
-
-              <CCollapse id="collapseA" class="mt-2">
-                <CCard>
-                  I am collapsable content A!
-                </CCard>
-              </CCollapse>
-              <CCollapse id="collapseB" class="mt-2">
-                <CCard>
-                  I am collapsable content B!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol col="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
-            </CCardHeader>
-            <div role="tablist">
-              <CCard  class="mb-1">
-                <CCardHeader  class="p-1" role="tab">
-                  <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
-                </CCardHeader>
-                <CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
-                  <CCardBody>
-                    <p class="card-text">
-                      I start opened because <code>visible</code> is <code>true</code>
-                    </p>
-                    <p class="card-text">
-                      {{ text }}
-                    </p>
-                  </CCardBody>
-                </CCollapse>
-              </CCard>
-              <CCard  class="mb-1">
-                <CCardHeader  class="p-1" role="tab">
-                  <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
-                </CCardHeader>
-                <CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
-                  <CCardBody>
-                    <p class="card-text">
-                      {{ text }}
-                    </p>
-                  </CCardBody>
-                </CCollapse>
-              </CCard>
-              <CCard  class="mb-1">
-                <CCardHeader  class="p-1" role="tab">
-                  <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
-                </CCardHeader>
-                <CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
-                  <CCardBody>
-                    <p class="card-text">
-                      {{ text }}
-                    </p>
-                  </CCardBody>
-                </CCollapse>
-              </CCard>
-            </div>
-          </CCard>
-        </CCol> -->
       </CRow>
     </div>
   </div>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index 140e1e67..3bc883d0 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -315,7 +315,7 @@
                 label="Email"
                 placeholder="Enter Email..."
                 required
-                wasValidated
+                was-validated
               />
               <CFormInput
                 type="password"
@@ -324,7 +324,7 @@
                 label="Password"
                 placeholder="Enter Password..."
                 required
-                wasValidated
+                was-validated
               />
             </CCardBody>
             <CCardFooter>
@@ -459,13 +459,13 @@
                 valid-feedback="Input is valid."
                 invalid-feedback="Please provide at least 4 characters."
                 value="Valid value"
-                :isValid="validator"
+                :is-valid="validator"
               />
               <CFormInput
                 label="Input is invalid"
                 valid-feedback="Thank you :)"
                 invalid-feedback="Please provide at least 4 characters."
-                :isValid="validator"
+                :is-valid="validator"
               />
             </CForm>
           </CCardBody>
@@ -551,7 +551,7 @@
             <CFormInput placeholder="Username">
               <template #prepend>
                 <CDropdown
-                  buttonHtml="Action"
+                  button-html="Action"
                   variant="primary"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -568,7 +568,7 @@
             >
               <template #append>
                 <CDropdown
-                  buttonHtml="Action"
+                  button-html="Action"
                   variant="primary"
                   right
                 >
@@ -583,7 +583,7 @@
 
               <template #prepend>
                 <CDropdown
-                  buttonHtml="Split"
+                  button-html="Split"
                   variant="primary"
                   split
                 >
@@ -596,7 +596,7 @@
 
               <template #append>
                 <CDropdown
-                  buttonHtml="Action"
+                  button-html="Action"
                   variant="primary"
                   right
                 >
@@ -683,17 +683,17 @@
           <CCardBody>
             <CForm>
               <CFormInput
-                prependHtml="Username"
+                prepend-html="Username"
                 appendHtml="<i class='cui-user'></i>"
               />
               <CFormInput
-                prependHtml="Email"
+                prepend-html="Email"
                 type="email"
                 autocomplete="email"
                 appendHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
-                prependHtml="Password"
+                prepend-html="Password"
                 type="password"
                 autocomplete="current-password"
                 appendHtml="<i class='fa fa-asterisk'></i>"
@@ -797,20 +797,20 @@
               <CCardBody>
                 <CFormInput
                   label="Prepended text"
-                  prependHtml="@"
+                  prepend-html="@"
                   description="Here's some help text"
                   type="email"
                   autocomplete="email"
                 />
                 <CFormInput
                   label="Appended text"
-                  appendHtml=".00"
+                  append-html=".00"
                   description="Here's some help text"
                 />
                 <CFormInput
                   label="Appended and prepended text"
-                  prependHtml="$"
-                  appendHtml=".00"
+                  prepend-html="$"
+                  append-html=".00"
                   description="Here's some help text"
                 />
                 <CFormInput
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 1f6c8749..cb0d6bd0 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -55,8 +55,8 @@
             <CCardBody>
               <CJumbotron
                 variant="info"
-                textVariant="white"
-                borderVariant="dark"
+                text-variant="white"
+                border-variant="dark"
                 header="Bootstrap 4"
               >
                 <p slot="lead" class="c-lead">
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 9ebadfbd..ea1887e3 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -197,7 +197,7 @@
                     ad sit ipsum anim Lorem.
                   </p>
                 </CCard>
-                <CCard  header="<b>Card with flush list group</b>">
+                <CCard header="<b>Card with flush list group</b>">
                   <CListGroup flush>
                     <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                     <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index a1be8f71..83071e0e 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -19,7 +19,7 @@
               <DefaultHeaderDropdownAccnt/>
             </CNavbarNav>
             <CNavbarNav class="ml-auto">
-              <CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
+              <CDropdown right class="nav-item b-nav-dropdown" toggle-classes="nav-link">
                 <CDropdownItem><i class="cui-file" /> Projects
                   <CBadge variant="primary">32</CBadge>
                 </CDropdownItem>
@@ -67,7 +67,7 @@
                 </CForm>
 
                 <CDropdown
-                  buttonHtml="Lang"
+                  button-html="Lang"
                   nav
                   placement="bottom-end"
                 >
@@ -136,7 +136,7 @@
                 <CNavItem href="#">Link</CNavItem>
                 <!-- Navbar dropdowns -->
                 <CDropdown
-                  buttonHtml="Lang"
+                  button-html="Lang"
                   right
                   nav
                 >
@@ -146,7 +146,7 @@
                   <CDropdownItem>FA</CDropdownItem>
                 </CDropdown>
                 <CDropdown
-                  buttonHtml="User"
+                  button-html="User"
                   right
                   nav
                 >
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 083fca15..02f16cde 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -119,10 +119,11 @@
           <CNav pills>
             <CNavItem active>Active</CNavItem>
             <CNavItem>Link</CNavItem>
-            <CDropdown id="nav7_ddown"
-                       nav
-                       placement="bottom-end"
-                       buttonContent="Dropdown"
+            <CDropdown
+              id="nav7_ddown"
+              nav
+              placement="bottom-end"
+              button-content="Dropdown"
             >
               <!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
               <CDropdownItem>one</CDropdownItem>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index bafce39d..b92c8540 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -14,7 +14,7 @@
         <CCardBody>
           <h6>Default</h6>
           <CPagination
-            :activePage.sync="currentPage"
+            :active-page.sync="currentPage"
             :pages="10"
           />
           <br>
@@ -22,7 +22,7 @@
           <h6>Small</h6>
           <CPagination
             size="sm"
-            :activePage.sync="currentPage"
+            :active-page.sync="currentPage"
             :pages="10"/>
           <br>
 
@@ -30,7 +30,7 @@
             <h6>Large</h6>
             <CPagination
               size="lg"
-              :activePage.sync="currentPage"
+              :active-page.sync="currentPage"
               :pages="10"
             />
             <br>
@@ -48,7 +48,7 @@
         <CCardBody>
           <h6>Left alignment (default)</h6>
           <CPagination
-            :activePage.sync="currentPage"
+            :active-page.sync="currentPage"
             :pages="10"
           />
           <br>
@@ -57,14 +57,14 @@
           <CPagination
             align="center"
             :pages="10"
-            :activePage.sync="currentPage"
+            :active-page.sync="currentPage"
           />
           <br>
 
           <h6>Right (end) alignment</h6>
           <CPagination
             align="end"
-            :activePage.sync="currentPage"
+            :active-page.sync="currentPage"
             :pages="10"
           />
           <br>
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 6ce6dcce..4e1442a6 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -13,13 +13,13 @@
           <CCardBody>
             <!-- <CSwitch
               :checked.sync="test11"
-              trueValue="yes"
-              falseValue="no"
+              true-value="yes"
+              false-value="no"
               id="alt"
               name="lg"
               required
             /> -->
-            <!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
+            <!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
             <CSwitch
               class="c-mx-1"
               :key="key"
@@ -50,8 +50,8 @@
               variant="primary"
               name="switch1"
               :checked.sync="checker"
-              trueValue="yes"
-              falseValue="no"
+              true-value="yes"
+              false-value="no"
             />
             <CSwitch
               class="c-mx-1"
@@ -70,15 +70,15 @@
             Switch pills
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked  shape="pill"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked  shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" disabled  shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
+            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -88,15 +88,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="secondary" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="success" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="warning" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="info" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="danger" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="light" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="dark" checked   shape="3d" />
-            <CSwitch class="c-mx-1" variant="primary" disabled   shape="3d" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -124,15 +124,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="success" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="warning" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="info" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="danger" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="light" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="dark" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -160,15 +160,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="c-mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -178,15 +178,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="secondary" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="success" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="warning" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="info" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="danger" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="light" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="dark" checked   shape="3d" outline="alt" />
-            <CSwitch class="c-mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -214,15 +214,15 @@
             Switch <small><code>outline  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="c-mx-1" variant="primary" checked outline  shape="pill"/>
-            <CSwitch class="c-mx-1" variant="secondary" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="success" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="warning" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="info" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="danger" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="light" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="dark" checked outline  shape="pill" />
-            <CSwitch class="c-mx-1" variant="primary" outline  shape="pill" disabled />
+            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
+            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -492,7 +492,7 @@
               class="c-table-align-middle c-mb-0"
               :items="items"
               :fields="fields"
-              noSorting
+              no-sorting
             >
               <template #example="{item}">
                 <td>
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index d11ef264..5197a56e 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <CCard :header="caption" bodyWrapper>
+  <CCard :header="caption" body-wrapper>
     <CTable
       :hover="hover"
       :striped="striped"
@@ -10,7 +10,7 @@
       :fields="fields"
       :per-page="small ? 10 : 5"
       :dark="dark"
-      noSorting
+      no-sorting
     >
       <template #status="{item}">
         <td>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 21841777..5f4ce83c 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -2,19 +2,19 @@
   <div class="c-animated c-fadeIn">
     <CRow>
       <CCol sm="12">
-        <CCard headerHtml="CTable power presentation" bodyWrapper>
+        <CCard header-html="CTable power presentation" body-wrapper>
           <CTable
             :items="getItems()"
             :fields="fields"
-            :perPage="6"
-            :activePage="page"
-            indexColumn
-            filterRow
-            optionsRow="noFilter"
+            :per-page="6"
+            :active-page="page"
+            index-column
+            filter-row
+            options-row="noFilter"
             loadings
             hover
-            :defaultColumnFilter="{ role:'staff' }"
-            darkHeader
+            :default-column-filter="{ role:'staff' }"
+            dark-header
             footer
             :pagination="{size: 'lg'}"
           >
@@ -45,7 +45,7 @@
                   square
                   size="sm"
                   @click="toggleDetails(index)"
-                  :textHtml="details.includes(index) ? 'Hide' : 'Show'"
+                  :text-html="details.includes(index) ? 'Hide' : 'Show'"
                 />
               </td>
             </template>
@@ -67,15 +67,15 @@
     </CRow>
     <!-- <CRow>
       <CCol sm="12">
-        <CCard headerHtml="test2">
+        <CCard header-html="test2">
           <CTable
             :items="items.slice(0)"
             :fields="fields"
-            :perPage="5"
-            indexCol="onlyCleaner"
-            filterRow
-            optionsRow="onlyFiltesr"
-            :paginationProps="{align:'center'}"
+            :per-page="5"
+            index-col="onlyCleaner"
+            filter-row
+            options-row="onlyFiltesr"
+            :pagination-props="{align:'center'}"
           >
               <td slot="status" slot-scope="{item}">
                 <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index f3fd3602..7e5c7511 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -7,22 +7,22 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="c-mt-1">
-              <CTab titleHtml="Home" active>
+            <CTabs add-tab-classes="c-mt-1">
+              <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
                 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>
-              <CTab titleHtml="Profile" >
+              <CTab title-html="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>
-              <CTab titleHtml="Disabled" disabled>
+              <CTab title-html="Disabled" 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
@@ -41,23 +41,23 @@
           <CCardBody>
             <CTabs
               pills
-              addNavClasses="c-mb-3"
+              add-nav-classes="c-mb-3"
             >
-              <CTab titleHtml="Home" active>
+              <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
                 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>
-              <CTab titleHtml="Profile" >
+              <CTab title-html="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>
-              <CTab titleHtml="Disabled" disabled>
+              <CTab title-html="Disabled" 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
@@ -74,7 +74,7 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="c-mt-1">
+            <CTabs add-tab-classes="c-mt-1">
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i>
@@ -115,7 +115,7 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="c-mt-1">
+            <CTabs add-tab-classes="c-mt-1">
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i> {{tabs[0]}}
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 168a48ca..ce5d6a84 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -10,33 +10,96 @@
             <small>Usage </small>
             <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
             <hr/>
-            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+            <h6>
+              Size Small
+              <small>Add <code>size="sm"</code></small>
+            </h6>
             <p>
-              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-              <CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-              <CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-              <CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-              <CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-              <CButton size="sm" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-              <CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-              <CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-              <CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+              <!-- <template v-for="(brand, key) in $options.brands">
+                <button
+                  type="button"
+                  :class="`c-btn-${brand}`"
+                  class="c-btn c-btn-sm c-btn-brand c-mr-1"
+                >
+                  <i :class="`fa fa-${brand}`"></i>
+                  <span>{{brand}}</span>
+                </button>
+              </template> -->
+              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
+                <i class="fa fa-facebook"></i><span>Facebook</span>
+              </CButton>
+              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
+                <i class="fa fa-twitter"></i><span>Twitter</span>
+              </CButton>
+              <CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-linkedin"></i><span>LinkedIn</span>
+              </CButton>
+              <CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-flickr"></i><span>Flickr</span>
+              </CButton>
+              <CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-tumblr"></i><span>Tumblr</span>
+              </CButton>
+              <CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-xing"></i><span>Xing</span>
+              </CButton>
+              <CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-github"></i><span>Github</span>
+              </CButton>
+              <CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-html5"></i><span>HTML5</span>
+              </CButton>
+              <CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-openid"></i><span>OpenID</span>
+              </CButton>
+              <CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
+              </CButton>
+              <CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-css3"></i><span>CSS3</span>
+              </CButton>
+              <CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-youtube"></i><span>YouTube</span>
+              </CButton>
+              <CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-dribbble"></i><span>Dribbble</span>
+              </CButton>
+              <CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-google-plus"></i><span>Google+</span>
+              </CButton>
+              <CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-instagram"></i><span>Instagram</span>
+              </CButton>
+              <CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-pinterest"></i><span>Pinterest</span>
+              </CButton>
+              <CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-vk"></i><span>VK</span>
+              </CButton>
+              <CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-yahoo"></i><span>Yahoo</span>
+              </CButton>
+              <CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-behance"></i><span>Behance</span>
+              </CButton>
+              <CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-dropbox"></i><span>Dropbox</span>
+              </CButton>
+              <CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-reddit"></i><span>Reddit</span>
+              </CButton>
+              <CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-spotify"></i><span>Spotify</span>
+              </CButton>
+              <CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-vine"></i><span>Vine</span>
+              </CButton>
+              <CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-foursquare"></i><span>Forsquare</span>
+              </CButton>
+              <CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
+                <i class="fa fa-vimeo"></i><span>Vimeo</span>
+              </CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
@@ -294,7 +357,8 @@
 
 <script>
 export default {
-  name: 'brand-buttons'
+  name: 'brand-buttons',
+  brands: ['facebook', 'twitter', 'linkedin']
 }
 </script>
 
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 87294161..c6d5c315 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -152,14 +152,14 @@
                   <CFormInput
                     class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
-                    prependHtml="$"
-                    appendHtml=".00"
+                    prepend-html="$"
+                    append-html=".00"
                     value="100"
                   />
                   <CFormSelect
                     class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
-                    prependHtml="Size"
+                    prepend-html="Size"
                     value="Medium"
                     :options="['Large','Medium','Small']"
                     custom
@@ -181,7 +181,7 @@
                   <CDropdown
                     class="c-mx-1"
                     placement="bottom-end"
-                    buttonContent="Menu"
+                    button-content="Menu"
                   >
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index b40e39a2..85959fea 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -15,7 +15,7 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown buttonHtml="Dropdown Button" class="c-m-2">
+                <CDropdown button-html="Dropdown Button" class="c-m-2">
                   <CDropdownItem>First Action</CDropdownItem>
                   <CDropdownItem>Second Action</CDropdownItem>
                   <CDropdownItem>Third Action</CDropdownItem>
@@ -25,7 +25,7 @@
                 </CDropdown>
               </div>
               <!-- <div>
-                <CDropdown buttonHtml="Dropdown using buttons as menu items" class="c-m-2">
+                <CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
                   <CDropdownItem>I'm a button</CDropdownItem>
                   <CDropdownItem>I'm also a button</CDropdownItem>
                   <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -33,7 +33,7 @@
                 </CDropdown>
               </div> -->
               <div>
-                <CDropdown buttonHtml="Dropdown with divider" class="c-m-2">
+                <CDropdown button-html="Dropdown with divider" class="c-m-2">
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second item</CDropdownItem>
                   <CDropdownDivider></CDropdownDivider>
@@ -41,7 +41,7 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown buttonHtml="Dropdown with header" class="c-m-2">
+                <CDropdown button-html="Dropdown with header" class="c-m-2">
                   <CDropdownHeader>Dropdown header</CDropdownHeader>
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second Item</CDropdownItem>
@@ -60,7 +60,7 @@
             <CCardBody>
               <div>
                 <CDropdown
-                  buttonHtml="Left align"
+                  button-html="Left align"
                   variant="primary"
                   class="c-m-2"
                 >
@@ -70,7 +70,7 @@
                 </CDropdown>
                 <CDropdown
                   placement="bottom-end"
-                  buttonHtml="Right align"
+                  button-html="Right align"
                   variant="primary"
                   class="c-m-2"
                 >
@@ -81,7 +81,7 @@
               </div>
               <div>
                 <CDropdown
-                  buttonHtml="Drop-Up"
+                  button-html="Drop-Up"
                   variant="info"
                   class="c-m-2"
                   dropup
@@ -94,7 +94,7 @@
               <div>
                 <CDropdown
                   :offset="25"
-                  buttonHtml="Offset Dropdown"
+                  button-html="Offset Dropdown"
                   class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -105,7 +105,7 @@
               <div>
                 <CDropdown
                   split
-                  buttonHtml="Split Dropdown"
+                  button-html="Split Dropdown"
                   class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -152,7 +152,7 @@
               <div>
                 <CDropdown
                   size="lg"
-                  buttonHtml="Large"
+                  button-html="Large"
                   class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -162,7 +162,7 @@
                 <CDropdown
                   size="lg"
                   split
-                  buttonHtml="Large Split"
+                  button-html="Large Split"
                   class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -172,7 +172,7 @@
                 <br>
                 <CDropdown
                   size="sm"
-                  buttonHtml="Small"
+                  button-html="Small"
                   class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -181,7 +181,7 @@
                 </CDropdown>
                 <CDropdown
                   size="sm"
-                  split buttonHtml="Small Split"
+                  split button-html="Small Split"
                   class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -204,7 +204,7 @@
             <CCardBody>
               <div>
                 <CDropdown
-                  buttonHtml="Dropdown ARIA" variant="primary"
+                  button-html="Dropdown ARIA" variant="primary"
                   class="c-m-2"
                 >
                   <div role="group">
@@ -236,7 +236,7 @@
             <CCardBody>
               <CDropdown
                 size="sm"
-                buttonHtml="Primary"
+                button-html="Primary"
                 variant="primary"
                 class="c-m-0"
               >
@@ -246,7 +246,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Secondary"
+                button-html="Secondary"
                 variant="secondary"
                 class="c-m-0"
               >
@@ -256,7 +256,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Success"
+                button-html="Success"
                 variant="success"
                 class="c-m-0"
               >
@@ -266,7 +266,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Warning"
+                button-html="Warning"
                 variant="warning"
                 class="c-m-0"
               >
@@ -276,7 +276,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Danger"
+                button-html="Danger"
                 variant="danger"
                 class="c-m-0"
               >
@@ -286,7 +286,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Info"
+                button-html="Info"
                 variant="info"
                 class="c-m-0"
               >
@@ -296,7 +296,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Light"
+                button-html="Light"
                 variant="light"
                 class="c-m-0"
               >
@@ -306,7 +306,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Dark"
+                button-html="Dark"
                 variant="dark"
                 class="c-m-0"
               >
@@ -316,7 +316,7 @@
               </CDropdown>
               <CDropdown
                 size="sm"
-                buttonHtml="Link"
+                button-html="Link"
                 variant="link"
                 class="c-m-0"
               >
diff --git a/src/views/icons/FontAwesome.vue b/src/views/icons/FontAwesome.vue
index c447ec6f..3037e8f3 100644
--- a/src/views/icons/FontAwesome.vue
+++ b/src/views/icons/FontAwesome.vue
@@ -174,7 +174,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard  id="new">
+    <CCard id="new">
       <CCardHeader>20 New Icons in 4.5</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -245,7 +245,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="web-application">
+    <CCard id="web-application">
       <CCardHeader>Web Application Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1432,7 +1432,7 @@
 
     </CCard>
 
-    <CCard  id="hand">
+    <CCard id="hand">
       <CCardHeader>Hand Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1494,7 +1494,7 @@
 
     </CCard>
 
-    <CCard  id="transportation">
+    <CCard id="transportation">
       <CCardHeader>Transportation Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1555,7 +1555,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="gender">
+    <CCard id="gender">
       <CCardHeader>Gender Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1607,7 +1607,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="file-type">
+    <CCard id="file-type">
       <CCardHeader>File Type Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1671,7 +1671,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="spinner">
+    <CCard id="spinner">
       <CCardHeader>Spinner Icons</CCardHeader>
       <CCardBody>
         <div class="alert alert-success">
@@ -1704,7 +1704,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="form-control">
+    <CCard id="form-control">
       <CCardHeader>Form Control Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1747,7 +1747,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="payment">
+    <CCard id="payment">
       <CCardHeader>Payment Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1793,7 +1793,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="chart">
+    <CCard id="chart">
       <CCardHeader>Chart Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1818,7 +1818,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="currency">
+    <CCard id="currency">
       <CCardHeader>Currency Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -1906,7 +1906,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="text-editor">
+    <CCard id="text-editor">
       <CCardHeader>Text Editor Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -2063,7 +2063,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="directional">
+    <CCard id="directional">
       <CCardHeader>Directional Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -2232,7 +2232,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="video-player">
+    <CCard id="video-player">
       <CCardHeader>Video Player Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
@@ -2305,7 +2305,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="brand">
+    <CCard id="brand">
       <CCardHeader>Brand Icons</CCardHeader>
       <CCardBody>
         <div class="alert alert-warning">
@@ -2796,7 +2796,7 @@
       </CCardBody>
     </CCard>
 
-    <CCard  id="medical">
+    <CCard id="medical">
       <CCardHeader>Medical Icons</CCardHeader>
       <CCardBody>
         <CRow class="text-center">
diff --git a/src/views/icons/SimpleLineIcons.vue b/src/views/icons/SimpleLineIcons.vue
index a363fcb1..23ab452d 100644
--- a/src/views/icons/SimpleLineIcons.vue
+++ b/src/views/icons/SimpleLineIcons.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="c-animated c-fadeIn">
-    <CCard  class="c-card-default">
+    <CCard class="c-card-default">
       <CCardHeader>
         <i class="fa fa-picture-o"></i> Simple Line Icons
       </CCardHeader>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index a172e753..e5d36cf4 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -140,20 +140,20 @@
     </CModal>
     <CModal
       :visible.sync="darkModal"
-      :noBackdrop="false"
-      :noCloseOnBackdrop="fsalse"
-      :noFade="false"
+      :no-backdrop="false"
+      :no-close-on-backdrop="fsalse"
+      :no-fade="false"
       :centered="true"
       title="Modal title 2"
       size="lg"
       variant="dark"
-      borderVariant="danger2"
-      addModalClassess="hehe1"
-      addDialogClassess="hehe2"
-      addContentClassess="hehe3"
-      :noHeader="false"
-      :noBody="false"
-      :noFooter="false"
+      border-variant="danger2"
+      add-modal-classess="hehe1"
+      add-dialog-classess="hehe2"
+      add-content-classess="hehe3"
+      :no-header="false"
+      :no-body="false"
+      :no-footer="false"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 9ca24a8d..275fbfbd 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -36,7 +36,7 @@
           <CCard
             class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
             style="width:44%"
-            bodyWrapper
+            body-wrapper
           >
             <h2>Sign up</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index 9ac624cb..d25ac23c 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -15,7 +15,7 @@
                 />
                 <CFormInput
                   placeholder="Email"
-                  prependHtml="@"
+                  prepend-html="@"
                   autocomplete="email"
                 />
                 <CFormInput
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index e61fa023..19201435 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -2,7 +2,7 @@
   <CRow>
     <CCol col="12" xl="8">
       <transition name="slide">
-        <CCard headerHtml="users" bodyWrapper>
+        <CCard header-html="users" body-wrapper>
           <CTable
             hover
             striped
@@ -11,7 +11,7 @@
             :current-page="currentPage"
             :per-page="perPage"
             @row-clicked="rowClicked"
-            :paginationProps="$options.paginationProps"
+            :pagination-props="$options.paginationProps"
           >
             <td slot="id" slot-scope="data">
               <strong>{{data.item.id}}</strong>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index d12f541d..bd4e91a7 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -169,7 +169,7 @@
           header="$1.999,50"
           text="Income"
           variant="primary"
-          noPadding
+          no-padding
         >
           <CIcon name="settings" width="24"/>
         </CWidgetIcon>
@@ -179,7 +179,7 @@
           header="$1.999,50"
           text="Income"
           variant="info"
-          noPadding
+          no-padding
         >
           <CIcon name="laptop" width="24"/>
         </CWidgetIcon>
@@ -189,7 +189,7 @@
           header="$1.999,50"
           text="Income"
           variant="warning"
-          noPadding
+          no-padding
         >
           <CIcon name="moon" width="24"/>
         </CWidgetIcon>
@@ -199,7 +199,7 @@
           header="$1.999,50"
           text="Income"
           variant="danger"
-          noPadding
+          no-padding
         >
           <CIcon name="bell" width="24"/>
         </CWidgetIcon>
@@ -211,7 +211,7 @@
           header="$1.999,50"
           text="Income"
           variant="primary"
-          noPadding
+          no-padding
         >
           <CIcon name="settings" class="c-mx-5 " width="24"/>
         </CWidgetIcon>
@@ -221,7 +221,7 @@
           header="$1.999,50"
           text="Income"
           variant="info"
-          noPadding
+          no-padding
         >
           <CIcon name="laptop" class="c-mx-5 " width="24"/>
         </CWidgetIcon>
@@ -231,7 +231,7 @@
           header="$1.999,50"
           text="Income"
           variant="warning"
-          noPadding
+          no-padding
         >
           <CIcon name="moon" class="c-mx-5 " width="24"/>
         </CWidgetIcon>
@@ -243,7 +243,7 @@
           header="$1.999,50"
           text="Income"
           variant="primary"
-          noPadding
+          no-padding
           link="#"
         >
           <CIcon name="settings" class="c-mx-5 " width="24"/>
@@ -254,7 +254,7 @@
           header="$1.999,50"
           text="Income"
           variant="info"
-          noPadding
+          no-padding
           link="#"
         >
           <CIcon name="laptop" class="c-mx-5 " width="24"/>
@@ -265,7 +265,7 @@
           header="$1.999,50"
           text="Income"
           variant="warning"
-          noPadding
+          no-padding
           link="#"
         >
           <CIcon name="moon" class="c-mx-5" width="24"/>
@@ -474,10 +474,10 @@
     <CRow>
       <CCol sm="6" lg="3">
         <CWidgetSmallText
-          rightHeader="SALE"
-          rightFooter="Today 6:43 AM"
-          leftHeader="$1.890,65"
-          leftFooter="+432,50 (15,78%)"
+          right-header="SALE"
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
@@ -486,10 +486,10 @@
       <CCol sm="6" lg="3">
         <CWidgetSmallText
           variant="success"
-          rightHeader="SALE"
-          rightFooter="Today 6:43 AM"
-          leftHeader="$1.890,65"
-          leftFooter="+432,50 (15,78%)"
+          right-header="SALE"
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
@@ -498,10 +498,10 @@
       <CCol sm="6" lg="3">
         <CWidgetSmallText
           variant="danger"
-          rightHeader="SALE"
-          rightFooter="Today 6:43 AM"
-          leftHeader="$1.890,65"
-          leftFooter="+432,50 (15,78%)"
+          right-header="SALE"
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
@@ -510,10 +510,10 @@
       <CCol sm="6" lg="3">
         <CWidgetSmallText
           variant="warning"
-          rightHeader="SALE"
-          rightFooter="Today 6:43 AM"
-          leftHeader="$1.890,65"
-          leftFooter="+432,50 (15,78%)"
+          right-header="SALE"
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
         >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
@@ -523,32 +523,32 @@
     <CRow>
       <CCol sm="4" lg="2">
         <CWidgetSimple header="title" text="1,123">
-          <CChartLineSimple style="height:40px" borderColor="danger"/>
+          <CChartLineSimple style="height:40px" border-color="danger"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple header="title" text="1,123">
-          <CChartLineSimple style="height:40px" borderColor="primary"/>
+          <CChartLineSimple style="height:40px" border-color="primary"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
         <CWidgetSimple header="title" text="1,123">
-          <CChartLineSimple style="height:40px" borderColor="success"/>
+          <CChartLineSimple style="height:40px" border-color="success"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple  header="title" text="1,123">
-          <CChartBarSimple style="height:40px" backgroundColor="danger"/>
+        <CWidgetSimple header="title" text="1,123">
+          <CChartBarSimple style="height:40px" background-color="danger"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple  header="title" text="1,123">
-          <CChartBarSimple style="height:40px" backgroundColor="primary"/>
+        <CWidgetSimple header="title" text="1,123">
+          <CChartBarSimple style="height:40px" background-color="primary"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple  header="title" text="1,123">
-          <CChartBarSimple style="height:40px" backgroundColor="success"/>
+        <CWidgetSimple header="title" text="1,123">
+          <CChartBarSimple style="height:40px" background-color="success"/>
         </CWidgetSimple>
       </CCol>
     </CRow>
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index c66c5097..1e0e7dc8 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -19,8 +19,8 @@
           pointed
           class="c-px-3"
           style="height:70px"
-          :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
-          backgroundColor="primary"
+          :data-points="[65, 59, 84, 84, 51, 55, 40]"
+          background-color="primary"
           label="Members"
           labels="months"
         />
@@ -33,7 +33,7 @@
             class="c-float-right"
             variant="transparent c-p-0"
             placement="bottom-end"
-            noCaret
+            no-caret
             buttonHtml="<i class='cui-location-pin'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
@@ -46,8 +46,8 @@
           pointed
           class="c-px-3"
           style="height:70px"
-          :dataPoints="[1, 18, 9, 17, 34, 22, 11]"
-          backgroundColor="info"
+          :data-points="[1, 18, 9, 17, 34, 22, 11]"
+          background-color="info"
           :options="{ elements: { line: { tension: 0.00001 }}}"
           label="Members"
           labels="months"
@@ -76,10 +76,10 @@
         </template>
           <CChartLineSimple
             style="height:70px"
-            backgroundColor="rgba(255,255,255,.2)"
-            :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+            background-color="rgba(255,255,255,.2)"
+            :data-points="[78, 81, 80, 45, 34, 12, 40]"
             :options="{ elements: { line: { borderWidth: 2.5 }}}"
-            pointHoverBackgroundColor="warning"
+            point-hover-background-color="warning"
             label="Members"
             labels="months"
           />
@@ -107,7 +107,7 @@
         </template>
         <CChartBarSimple
           style="height:70px"
-          backgroundColor="rgb(250, 152, 152)"
+          background-color="rgb(250, 152, 152)"
           label="Members"
           labels="months"
         />
diff --git a/src/views/widgets/WidgetsSocial.vue b/src/views/widgets/WidgetsSocial.vue
index 07439fa5..f84237cb 100644
--- a/src/views/widgets/WidgetsSocial.vue
+++ b/src/views/widgets/WidgetsSocial.vue
@@ -4,10 +4,10 @@
       <CCol md="3" sm="6">
         <CWidgetSocial
           variant="facebook"
-          rightHeader="89k"
-          rightFooter="friends"
-          leftHeader="459"
-          leftFooter="feeds"
+          right-header="89k"
+          right-footer="friends"
+          left-header="459"
+          left-footer="feeds"
         >
           <CIcon
             name="socialFacebook"
@@ -16,8 +16,8 @@
           />
           <CChartLineSimple
             style="height:100px"
-            backgroundColor="rgba(255,255,255,.1)"
-            :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[65, 59, 84, 84, 51, 55, 40]"
             label="Friends"
             labels="months"
           />
@@ -26,10 +26,10 @@
        <CCol md="3" sm="6">
         <CWidgetSocial
           variant="twitter"
-          rightHeader="973k"
-          rightFooter="followers"
-          leftHeader="1.792"
-          leftFooter="tweets"
+          right-header="973k"
+          right-footer="followers"
+          left-header="1.792"
+          left-footer="tweets"
         >
           <CIcon
             name="socialTwitter"
@@ -38,8 +38,8 @@
           />
           <CChartLineSimple
             style="height:100px"
-            backgroundColor="rgba(255,255,255,.1)"
-            :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[1, 13, 9, 17, 34, 41, 38]"
             label="Followers"
             labels="months"
           />
@@ -48,10 +48,10 @@
        <CCol md="3" sm="6">
         <CWidgetSocial
           variant="linkedin"
-          rightHeader="500+"
-          rightFooter="contracts"
-          leftHeader="292"
-          leftFooter="feeds"
+          right-header="500+"
+          right-footer="contracts"
+          left-header="292"
+          left-footer="feeds"
         >
           <CIcon
             name="socialLinkedin"
@@ -60,8 +60,8 @@
           />
           <CChartLineSimple
             style="height:100px"
-            backgroundColor="rgba(255,255,255,.1)"
-            :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[78, 81, 80, 45, 34, 12, 40]"
             label="Contracts"
             labels="months"
           />
@@ -69,10 +69,10 @@
        </CCol>
        <CCol md="3" sm="6">
         <CWidgetSocial
-          rightHeader="12"
-          rightFooter="events"
-          leftHeader="4"
-          leftFooter="meetings"
+          right-header="12"
+          right-footer="events"
+          left-header="4"
+          left-footer="meetings"
           variant="warning"
         >
           <CIcon
@@ -82,8 +82,8 @@
           />
           <CChartLineSimple
             style="height:100px"
-            backgroundColor="rgba(255,255,255,.1)"
-            :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[35, 23, 56, 22, 97, 23, 64]"
             label="Followers"
             labels="months"
           />
@@ -94,10 +94,10 @@
       <CCol md="3" sm="6">
         <CWidgetSocial
           variant="facebook"
-          rightHeader="89k"
-          rightFooter="friends"
-          leftHeader="459"
-          leftFooter="feeds"
+          right-header="89k"
+          right-footer="friends"
+          left-header="459"
+          left-footer="feeds"
         >
           <CIcon
             name="socialFacebook"
@@ -109,10 +109,10 @@
        <CCol md="3" sm="6">
         <CWidgetSocial
           variant="twitter"
-          rightHeader="973k"
-          rightFooter="followers"
-          leftHeader="1.792"
-          leftFooter="tweets"
+          right-header="973k"
+          right-footer="followers"
+          left-header="1.792"
+          left-footer="tweets"
         >
           <CIcon
             name="socialTwitter"
@@ -124,10 +124,10 @@
        <CCol md="3" sm="6">
         <CWidgetSocial
           variant="linkedin"
-          rightHeader="500+"
-          rightFooter="contracts"
-          leftHeader="292"
-          leftFooter="feeds"
+          right-header="500+"
+          right-footer="contracts"
+          left-header="292"
+          left-footer="feeds"
         >
           <CIcon
             name="socialLinkedin"
@@ -138,10 +138,10 @@
        </CCol>
       <CCol md="3" sm="6">
         <CWidgetSocial
-          rightHeader="12"
-          rightFooter="events"
-          leftHeader="4"
-          leftFooter="meetings"
+          right-header="12"
+          right-footer="events"
+          left-header="4"
+          left-footer="meetings"
           variant="warning"
         >
           <CIcon