refactor: minor bug fixes and refactors

src/App.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'app'
+  name: 'App'
 }
 </script>
 

src/containers/TheContainer.vue

@@ -23,7 +23,7 @@ import TheHeader from './TheHeader'
 import TheFooter from './TheFooter'
 
 export default {
-  name: 'full',
+  name: 'TheContainer',
   components: {
     TheSidebar,
     TheHeader,

src/containers/TheFooter.vue

@@ -2,7 +2,7 @@
   <CFooter>
     <div>
       <a href="https://coreui.io">CoreUI</a>
-      <span class="ml-1">&copy; 2018 creativeLabs.</span>
+      <span class="ml-1">&copy; 2019 creativeLabs.</span>
     </div>
     <div class="ml-auto">
       <span class="mr-1">Powered by</span>

src/containers/_nav.js

@@ -447,6 +447,7 @@ export default [
           href: 'http://coreui.io/vue/',
           icon: 'cui-cloud-download',
           addLinkClasses: 'c-nav-link-success',
+          target: '_blank'
         },
         attrs: {
           class: 'mt-auto',
@@ -461,6 +462,7 @@ export default [
           href: 'http://coreui.io/pro/vue/',
           icon: 'cui-layers',
           addLinkClasses: 'c-nav-link-danger',
+          target: '_blank'
         }
       }
     ]

src/router/index.js

@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
 const Colors = () => import('@/views/theme/Colors')
 const Typography = () => import('@/views/theme/Typography')
 
-const Charts = () => import('@/views/Charts')
+const Charts = () => import('@/views/charts/Charts')
 const Widgets = () => import('@/views/widgets/Widgets')
 
 // Views - Components

src/views/base/Breadcrumbs.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col>
       <CCard>
@@ -25,13 +23,11 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'breadcrumbs',
+  name: 'Breadcrumbs',
   data () {
     return {
       items: [

src/views/base/Cards.vue

@@ -233,11 +233,11 @@
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" v-if="show" >
+          <CCard class="bg-secondary" v-if="show">
             <CCardHeader>
               Card with header actions
               <div class="card-header-actions">
-                <CLink href="#" class="card-header-action btn-setting" >
+                <CLink href="#" class="card-header-action btn-setting">
                   <i class="cui-settings"></i>
                 </CLink>
                 <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
@@ -263,7 +263,7 @@
 <script>
 
 export default {
-  name: 'cards',
+  name: 'Cards',
   data: function () {
     return {
       show: true,

src/views/base/Carousels.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <CRow>
     <CCol md="12" lg="7">
       <CCard>
@@ -42,11 +41,10 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
 </template>
 
 <script>
 export default {
-  name: 'carousels'
+  name: 'Carousels'
 }
 </script>

src/views/base/Collapses.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12" md="6">
       <CCard>
@@ -37,13 +35,11 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'collapses',
+  name: 'Collapses',
   data () {
     return {
       showCollapse: true,

src/views/base/Forms.vue

@@ -852,7 +852,7 @@
 
 <script>
 export default {
-  name: 'forms',
+  name: 'Forms',
   data () {
     return {
       selected: [], // Must be an array reference!

src/views/base/Jumbotrons.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CRow>
       <CCol>
@@ -79,11 +78,10 @@
       </CCol>
     </CRow>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'jumbotrons'
+  name: 'Jumbotrons'
 }
 </script>

src/views/base/ListGroups.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CRow>
       <CCol md="6">
@@ -271,11 +270,10 @@
       </CCol>
     </CRow>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'list-groups'
+  name: 'ListGroups'
 }
 </script>

src/views/base/Navbars.vue

@@ -1,35 +1,5 @@
 <template>
-  <div class="wrapper">
   <div>
-      <!-- <CCard>
-        <CNavbar toggleable="md" light variant="light">
-          <CNavbarToggle class="hehe" @click="test2 = !test2"/>
-          <CLink class="navbar-brand">NavBar</CLink>
-          <CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
-            <CNavbarNav pills class="navbar-nav">
-              <CNavItem>
-                hehehe1
-              </CNavItem>
-              <CNavItem class="nav-item">
-                hehehe1
-              </CNavItem>
-              <CNavItem class="nav-item">
-                hehehe2
-              </CNavItem>
-              <DefaultHeaderDropdownAccnt/>
-            </CNavbarNav>
-            <CNavbarNav class="ml-auto">
-              <CDropdown right class="nav-item " toggle-classes="nav-link">
-                <CDropdownItem><i class="cui-file" /> Projects
-                  <CBadge variant="primary">32</CBadge>
-                </CDropdownItem>
-                <CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
-                <CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
-              </CDropdown>
-            </CNavbarNav>
-          </CCollapse>
-        </CNavbar>
-      </CCard> -->
     <CCard>
       <CCardHeader>
         <i class="fa fa-align-justify"></i>
@@ -198,15 +168,10 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 <script>
-import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
 export default {
-  name: 'navbars',
+  name: 'Navbars',
-  components: {
-    DefaultHeaderDropdownAccnt
-  },
   data () {
     return {
       show: false,

src/views/base/Navs.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -156,12 +155,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'navs',
+  name: 'Navs',
   data () {
     return {
       item: 2

src/views/base/Paginations.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -80,12 +79,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'paginations',
+  name: 'Paginations',
   data () {
     return {
       currentPage: 3,

src/views/base/Popovers.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -90,12 +89,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'popovers',
+  name: 'Popovers',
   data () {
     return {
       placements: [

src/views/base/ProgressBars.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -203,12 +202,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'progress-bars',
+  name: 'ProgressBars',
   data () {
     return {
       counter: 73,
@@ -235,8 +233,6 @@ export default {
   methods: {
     clicked () {
       this.counter = Math.random() * this.max
-      // console.log('Change progress to ' +
-      //     Math.round(this.counter * 100) / 100)
     }
   },
   mounted () {

src/views/base/Switches.vue

@@ -526,21 +526,33 @@
 
 <script>
 export default {
-  name: 'switches',
+  name: 'Switches',
   data () {
     return {
-      variants:[
+      variants: [
         'primary','secondary','warning','success','info','danger','light','dark'
       ],
       fields: [
-        {key: 'size'},
+        { key: 'size' },
-        {key: 'example'},
+        { key: 'example' },
-        {key: 'size_prop', label: 'Size prop'}
+        { key: 'size_prop', label: 'Size prop' }
       ],
       items: [
-        {size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
+        {
-        {size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
+          size: 'Large', 
-        {size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
+          example: { shape: '3d', variant: 'primary', size: 'lg', checked: true }, 
+          size_prop: 'Add following prop <code>size="lg"</code>'
+        },
+        {
+          size: 'Normal', 
+          example: { shape: '3d', variant: 'primary', size: '', checked: true }, 
+          size_prop: '-'
+        },
+        {
+          size: 'Small', 
+          example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, 
+          size_prop: 'Add following prop <code>size="sm"</code>'
+        }
       ],
       checker: 'yes',
       radio: 'primary',
@@ -551,8 +563,7 @@ export default {
       labelTxt: {
         labelOn: 'yes',
         labelOff: 'no'
-      },
+      }
-
     }
   }
 }

src/views/base/Table.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: 'TableWrapper',
+  name: 'Table',
   props: {
     items: Array,
     fields: {
@@ -49,7 +49,7 @@ export default {
         : status === 'Inactive' ? 'secondary'
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
-    },
+    }
   }
 }
 </script>

src/views/base/Tables.vue

@@ -137,10 +137,7 @@
         />
       </CCol>
     </CRow>
-
-
   </div>
-
 </template>
 
 <script>
@@ -154,42 +151,40 @@ const fields = [
   { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
-  {number:11.1, username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
+  { username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
-  {number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
+  { username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
-  {number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
+  { username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
-  {number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
+  { username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-  {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
+  { username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
 
 export default {
-  name: 'tables',
+  name: 'Tables',
   components: { CTableWrapper },
   data () {
     return {
-      items: items,
+      items,
-      fields: fields,
+      fields,
-      page: 1,
-      pages: null,
       details: [],
     }
   },

src/views/base/Tabs.vue

@@ -25,7 +25,7 @@
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="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
@@ -57,7 +57,7 @@
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="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
@@ -116,7 +116,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <!-- <CCol xs="12" lg="6">
+      <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
             Tabs with icons
@@ -156,7 +156,7 @@
             </CTabs>
           </CCardBody>
         </CCard>
-      </CCol> -->
+      </CCol>
       <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
@@ -204,7 +204,7 @@
 
 <script>
 export default {
-  name: 'tabs',
+  name: 'Tabs',
   data () {
     return {
       tabs: [

src/views/base/Tooltips.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -84,12 +83,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'tooltips',
+  name: 'Tooltips',
   data () {
     return {
       placements: [

src/views/buttons/BrandButtons.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <CRow>
     <CCol col="12">
       <CCard>
@@ -18,9 +17,7 @@
         </CCardHeader>
         <CCardBody>
           <small>Usage </small>
-            <code>
+          <code>{{ $options.usage }}</code>
-              &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
-            </code>
           <hr/>
           <h6>
             Size Small
@@ -76,9 +73,7 @@
         </CCardHeader>
         <CCardBody>
           <small>Usage </small>
-              <code>
+            <code>{{ $options.iconsOnlyUsage }}</code>
-                {{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
-              </code>
           <hr/>
           <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
@@ -128,7 +123,10 @@
           <strong>Brand Button </strong> <small>Text only</small>
         </CCardHeader>
         <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+          <small>Usage </small> 
+          <code>
+            {{ $options.textOnlyUsage }}
+          </code>
           <hr/>
           <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
@@ -172,12 +170,14 @@
       </CCard>
     </CCol>
   </CRow>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'brand-buttons',
+  name: 'BrandButtons',
+  usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
+  iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
+  textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
   brands: [
     'facebook',
     'twitter',

src/views/buttons/ButtonGroups.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
-        <CCol col="12" >
+    <CCol col="12">
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
@@ -203,19 +201,9 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 <script>
 export default {
-  name: 'button-groups',
+  name: 'ButtonGroups',
-  data () {
-    return {
-      myToggle: false,
-      myToggle2: false,
-      itemsCount: 33
-
-    }
-  }
 }
 </script>

src/views/buttons/Dropdowns.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CRow>
       <CCol col="12" md="6">
@@ -355,7 +354,6 @@
       </CCol>
     </CRow>
   </div>
-  </div>
 </template>
 
 <script>

src/views/buttons/StandardButtons.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Standard buttons</strong>
         <div class="card-header-actions">
@@ -113,7 +113,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Outline Buttons</strong>
       </CCardHeader>
@@ -213,7 +213,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Ghost Buttons</strong>
       </CCardHeader>
@@ -226,7 +226,7 @@
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
-          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
+          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
             <CButton block ghost variant="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
@@ -314,7 +314,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Square Buttons</strong>
       </CCardHeader>
@@ -421,7 +421,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Pill Buttons</strong>
       </CCardHeader>
@@ -528,7 +528,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>Sizes</strong>
       </CCardHeader>
@@ -562,7 +562,7 @@
             <CButton variant="primary">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline variant="secondary" >Outline Button</CButton>
+            <CButton outline variant="secondary">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton ghost variant="success">Ghost Button</CButton>
@@ -596,7 +596,7 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <strong>With Icons</strong>
       </CCardHeader>
@@ -696,15 +696,9 @@
 
 <script>
 export default {
-  name: 'standard-buttons',
+  name: 'StandardButtons',
   data () {
     return { togglePress: false }
   }
 }
 </script>
-
-<style scoped>
-  .btn.disabled {
-    cursor: auto;
-  }
-</style>

src/views/charts/Charts.vue

@@ -47,7 +47,7 @@
   </div>
 </template>
 <script>
-import * as Charts from './charts/index.js'
+import * as Charts from './index.js'
 
 export default {
   name: 'Charts',

src/views/icons/CoreUIIcons.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <i class="cui-pencil"></i>CoreUI Icons
         <CBadge variant="info">New</CBadge>
@@ -18,7 +18,7 @@
       <CCardBody>
         <!-- <CRow class="text-center mb-5">
           <template v-for="(name, key) in $options.iconNames">
-            <CCol :key="key" col="6" sm="4" md="3" xl="2" >
+            <CCol :key="key" col="6" sm="4" md="3" xl="2">
               <CIcon :name="name" width="24" class="mt-4"/>
               <div>{{name}}</div>
             </CCol>

src/views/icons/Flags.vue

@@ -33,9 +33,11 @@
 <script>
 import { iconSet } from '@coreui/icons/flags'
 export default {
-  name: 'flags',
+  name: 'Flags',
   iconSet,
   computed: {
+    // Avoid duplication caused by displaying 1x1 and 4x3 formats
+    // (adding Q to name makes icon quadratic)
     displayedFlags () {
       return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
     }

src/views/notifications/Alerts.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12" md="6">
       <CCard>
@@ -178,13 +176,11 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'alerts',
+  name: 'Alerts',
   data () {
     return {
       dismissSecs: 10,

src/views/notifications/Badges.vue

@@ -1,6 +1,4 @@
 <template functional>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12" md="6">
       <CCard>
@@ -84,12 +82,10 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'badges'
+  name: 'Badges'
 }
 </script>

src/views/notifications/Modals.vue

@@ -176,7 +176,7 @@
 
 <script>
 export default {
-  name: 'modals',
+  name: 'Modals',
   data () {
     return {
       myModal: false,

src/views/theme/ColorTheme.vue

@@ -15,10 +15,7 @@ export default {
   name: 'ColorTheme',
   components: { ColorView },
   props: {
-    color: {
+    color: String,
-      type: String,
-      default: 'bg-secondary'
-    }
   }
 }
 </script>

src/views/theme/Colors.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <CCard >
+    <CCard>
       <CCardHeader>
         <i class="cui-drop"></i> Theme colors
       </CCardHeader>
@@ -37,32 +37,13 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
-      <CCardHeader>
-        <i class="cui-drop"></i> Additional colors
-      </CCardHeader>
-      <CCardBody>
-        <CRow>
-          <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
-          <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
-          <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
-          <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
-          <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
-          <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
-          <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
-          <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
-          <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
-          <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
-        </CRow>
-      </CCardBody>
-    </CCard>
   </div>
 </template>
 
 <script>
 import ColorTheme from './ColorTheme'
 export default {
-  name: 'colors',
+  name: 'Colors',
   components: { ColorTheme }
 }
 </script>

src/views/theme/Typography.vue

@@ -215,6 +215,6 @@
 
 <script>
 export default {
-  name: 'typography'
+  name: 'Typography'
 }
 </script>

src/views/users/UsersData.js

@@ -1,5 +1,4 @@
 const usersData = [
-  // {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
   {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
   {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
   {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},