fix: remove eslint and prettier warnings

src/App.vue

@@ -3,7 +3,6 @@
 </template>
 
 <style lang="scss">
-  // Import Main styles for this application
-  @import 'styles/style';
+// Import Main styles for this application
+@import 'styles/style';
 </style>
-

src/assets/icons/index.js

@@ -22,9 +22,9 @@ import {
   cibCcStripe,
   cibCcPaypal,
   cibCcApplePay,
-  cibCcAmex
-} from "@coreui/icons";
-import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons";
+  cibCcAmex,
+} from '@coreui/icons'
+import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
 import {
   cilArrowBottom,
   cilArrowRight,
@@ -76,8 +76,8 @@ import {
   cilUser,
   cilUserFemale,
   cilUserFollow,
-  cilXCircle
-} from "@coreui/icons";
+  cilXCircle,
+} from '@coreui/icons'
 
 export const iconsSet = Object.assign(
   {},
@@ -132,7 +132,7 @@ export const iconsSet = Object.assign(
     cilUser,
     cilUserFemale,
     cilUserFollow,
-    cilXCircle
+    cilXCircle,
   },
   {
     cifUs,
@@ -140,7 +140,7 @@ export const iconsSet = Object.assign(
     cifIn,
     cifFr,
     cifEs,
-    cifPl
+    cifPl,
   },
   {
     cibFacebook,
@@ -166,6 +166,6 @@ export const iconsSet = Object.assign(
     cibCcStripe,
     cibCcPaypal,
     cibCcApplePay,
-    cibCcAmex
-  }
-);
+    cibCcAmex,
+  },
+)

src/components/AppBreadcrumb.vue

@@ -2,9 +2,9 @@
   <CBreadcrumb class="d-md-down-none me-auto mb-0">
     <CBreadcrumbItem
       v-for="item in breadcrumbs"
+      :key="item"
       :href="item.active ? '' : item.path"
       :active="item.active"
-      :key="item"
     >
       {{ item.name }}
     </CBreadcrumbItem>

src/components/AppHeader.vue

@@ -55,7 +55,6 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
-
     return {
       logo,
     }

src/components/AppSidebar.vue

@@ -13,12 +13,12 @@
   >
     <CSidebarBrand>
       <CIcon
-        customClassName="sidebar-brand-full"
+        custom-class-name="sidebar-brand-full"
         :icon="logoNegative"
         :height="35"
       />
       <CIcon
-        customClassName="sidebar-brand-narrow"
+        custom-class-name="sidebar-brand-narrow"
         :icon="sygnet"
         :height="35"
       />

src/components/AppSidebarNav.js

@@ -1,39 +1,45 @@
 import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
-import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
+import {
+  CBadge,
+  CSidebarNav,
+  CNavItem,
+  CNavGroup,
+  CNavTitle,
+} from '@coreui/vue'
 import nav from '@/_nav.js'
 
 const normalizePath = (path) =>
-decodeURI(path)
-  .replace(/#.*$/, '')
-  .replace(/(index)?\.(html)$/, '')
+  decodeURI(path)
+    .replace(/#.*$/, '')
+    .replace(/(index)?\.(html)$/, '')
 
 const isActiveLink = (route, link) => {
-if (link === undefined) {
-  return false
-}
+  if (link === undefined) {
+    return false
+  }
 
-if (route.hash === link) {
-  return true
-}
+  if (route.hash === link) {
+    return true
+  }
 
-const currentPath = normalizePath(route.path)
-const targetPath = normalizePath(link)
+  const currentPath = normalizePath(route.path)
+  const targetPath = normalizePath(link)
 
-return currentPath === targetPath
+  return currentPath === targetPath
 }
 
 const isActiveItem = (route, item) => {
-if (isActiveLink(route, item.to)) {
-  return true
-}
+  if (isActiveLink(route, item.to)) {
+    return true
+  }
 
-if (item.items) {
-  return item.items.some((child) => isActiveItem(route, child))
-}
+  if (item.items) {
+    return item.items.some((child) => isActiveItem(route, child))
+  }
 
-return false
+  return false
 }
 
 const AppSidebarNav = defineComponent({
@@ -56,7 +62,9 @@ const AppSidebarNav = defineComponent({
         return h(
           CNavGroup,
           {
-            ...firstRender.value && { visible: item.items.some((child) => isActiveItem(route, child))}
+            ...(firstRender.value && {
+              visible: item.items.some((child) => isActiveItem(route, child)),
+            }),
           },
           {
             togglerContent: () => [

src/components/DocsCallout.vue

@@ -1,16 +1,20 @@
 <template>
   <CCallout color="info" class="bg-white">
-    {{content
+    {{
+      content
         ? content
         : `A Vue ${name} component ${
             plural ? 'have' : 'has'
           } been created as a native Vue.js version
-      of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
-      variants, and unique design that matches CoreUI Design System requirements.`}}
+      of Bootstrap ${name}. ${name} ${
+            plural ? 'are' : 'is'
+          } delivered with some new features,
+      variants, and unique design that matches CoreUI Design System requirements.`
+    }}
     <br />
     <br />
     For more information please visit our official
-    <CLink :href="href" target="_blank">
+    <CLink :href="url" target="_blank">
       documentation of CoreUI Components Library for Vue.js
     </CLink>
     .
@@ -40,10 +44,10 @@ export default {
     plural: Boolean,
   },
   setup(props) {
-    const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`
+    const url = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.url}`
 
     return {
-      href,
+      url,
     }
   },
 }

src/components/DocsExample.vue

@@ -7,7 +7,7 @@
         </CNavLink>
       </CNavItem>
       <CNavItem>
-        <CNavLink :href="href" target="_blank">
+        <CNavLink :href="url" target="_blank">
           <CIcon icon="cil-code" class="me-2" />
           Code
         </CNavLink>
@@ -33,10 +33,10 @@ export default {
     },
   },
   setup(props) {
-    const href = `https://coreui.io/vue/docs/${pkg.config.coreui_library_short_version}/${props.href}`
+    const url = `https://coreui.io/vue/docs/${pkg.config.coreui_library_short_version}/${props.href}`
 
     return {
-      href,
+      url,
     }
   },
 }

src/layouts/DefaultLayout.vue

@@ -13,18 +13,18 @@
   </div>
 </template>
 <script>
-import { CContainer, CDropdown, CDropdownItem } from "@coreui/vue";
-import AppFooter from "@/components/AppFooter.vue";
-import AppHeader from "@/components/AppHeader.vue";
-import AppSidebar from "@/components/AppSidebar.vue";
+import { CContainer } from '@coreui/vue'
+import AppFooter from '@/components/AppFooter.vue'
+import AppHeader from '@/components/AppHeader.vue'
+import AppSidebar from '@/components/AppSidebar.vue'
 
 export default {
-  name: "DefaultLayout",
+  name: 'DefaultLayout',
   components: {
     AppFooter,
     AppHeader,
     AppSidebar,
     CContainer,
   },
-};
+}
 </script>

src/router/index.js

@@ -274,17 +274,17 @@ const routes = [
       {
         path: '500',
         name: 'Page500',
-        component: () => import('@/views/pages/Page500')
+        component: () => import('@/views/pages/Page500'),
       },
       {
         path: 'login',
         name: 'Login',
-        component: () => import('@/views/pages/Login')
+        component: () => import('@/views/pages/Login'),
       },
       {
         path: 'register',
         name: 'Register',
-        component: () => import('@/views/pages/Register')
+        component: () => import('@/views/pages/Register'),
       },
     ],
   },

src/store/index.js

@@ -14,7 +14,7 @@ export default createStore({
     },
     updateSidebarVisible(state, payload) {
       state.sidebarVisible = payload.value
-    }
+    },
   },
   actions: {},
   modules: {},

src/views/Dashboard.vue

@@ -128,9 +128,15 @@
                   </CCol>
                 </CRow>
                 <hr class="mt-0" />
-                <div class="progress-group mb-4" v-for="item in progressGroupExample1" :key="item.title">
+                <div
+                  v-for="item in progressGroupExample1"
+                  :key="item.title"
+                  class="progress-group mb-4"
+                >
                   <div class="progress-group-prepend">
-                    <span class="text-medium-emphasis small">{{item.title}}</span>
+                    <span class="text-medium-emphasis small">{{
+                      item.title
+                    }}</span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress thin color="info" :value="item.value1" />
@@ -168,11 +174,15 @@
                   </CCol>
                 </CRow>
                 <hr class="mt-0" />
-                <div class="progress-group" v-for="item in progressGroupExample2" :key="item.title">
+                <div
+                  v-for="item in progressGroupExample2"
+                  :key="item.title"
+                  class="progress-group"
+                >
                   <div class="progress-group-header">
                     <CIcon :icon="item.icon" class="me-2" size="lg" />
-                    <span class="title">{{item.title}}</span>
-                    <span class="ms-auto fw-semibold">{{item.value}}%</span>
+                    <span class="title">{{ item.title }}</span>
+                    <span class="ms-auto fw-semibold">{{ item.value }}%</span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress thin :value="item.value" color="warning" />
@@ -181,13 +191,19 @@
 
                 <div class="mb-5"></div>
 
-                <div class="progress-group" v-for="item in progressGroupExample3" :key="item.title">
+                <div
+                  v-for="item in progressGroupExample3"
+                  :key="item.title"
+                  class="progress-group"
+                >
                   <div class="progress-group-header">
                     <CIcon :icon="item.icon" class="me-2" size="lg" />
                     <span class="title">Organic Search</span>
                     <span class="ms-auto fw-semibold">
-                      {{item.value}}
-                      <span class="text-medium-emphasis small">({{item.percent}}%)</span>
+                      {{ item.value }}
+                      <span class="text-medium-emphasis small"
+                        >({{ item.percent }}%)</span
+                      >
                     </span>
                   </div>
                   <div class="progress-group-bars">

src/views/base/Accordion.vue

@@ -14,7 +14,7 @@
           </p>
           <DocsExample href="components/accordion">
             <CAccordion>
-              <CAccordionItem :itemKey="1">
+              <CAccordionItem :item-key="1">
                 <CAccordionHeader> Accordion Item #1 </CAccordionHeader>
                 <CAccordionBody>
                   <strong>This is the first item's accordion body.</strong> It
@@ -28,7 +28,7 @@
                   overflow.
                 </CAccordionBody>
               </CAccordionItem>
-              <CAccordionItem :itemKey="2">
+              <CAccordionItem :item-key="2">
                 <CAccordionHeader> Accordion Item #2 </CAccordionHeader>
                 <CAccordionBody>
                   <strong>This is the second item's accordion body.</strong> It
@@ -42,7 +42,7 @@
                   overflow.
                 </CAccordionBody>
               </CAccordionItem>
-              <CAccordionItem :itemKey="3">
+              <CAccordionItem :item-key="3">
                 <CAccordionHeader> Accordion Item #3 </CAccordionHeader>
                 <CAccordionBody>
                   <strong>This is the third item's accordion body.</strong> It
@@ -129,8 +129,8 @@
             open when another item is opened.
           </p>
           <DocsExample href="components/accordion#always-open">
-            <CAccordion :activeItemKey="2" alwaysOpen>
-              <CAccordionItem :itemKey="1">
+            <CAccordion :active-item-key="2" always-open>
+              <CAccordionItem :item-key="1">
                 <CAccordionHeader> Accordion Item #1 </CAccordionHeader>
                 <CAccordionBody>
                   <strong>This is the first item's accordion body.</strong> It
@@ -144,7 +144,7 @@
                   overflow.
                 </CAccordionBody>
               </CAccordionItem>
-              <CAccordionItem :itemKey="2">
+              <CAccordionItem :item-key="2">
                 <CAccordionHeader> Accordion Item #2 </CAccordionHeader>
                 <CAccordionBody>
                   <strong>This is the second item's accordion body.</strong> It
@@ -158,7 +158,7 @@
                   overflow.
                 </CAccordionBody>
               </CAccordionItem>
-              <CAccordionItem :itemKey="3">
+              <CAccordionItem :item-key="3">
                 <CAccordionHeader> Accordion Item #3 </CAccordionHeader>
                 <CAccordionBody>
                   <strong>This is the third item's accordion body.</strong> It

src/views/base/Cards.vue

@@ -571,7 +571,7 @@
                   <CCard
                     class="mb-3"
                     :color="item.color"
-                    :textColor="item.textColor"
+                    :text-color="item.textColor"
                   >
                     <CCardHeader>Header</CCardHeader>
                     <CCardBody>
@@ -612,7 +612,7 @@
               :key="item"
             >
               <CCard
-                :textColor="item.textColor"
+                :text-color="item.textColor"
                 class="mb-3"
                 :class="'border-' + item.color"
                 style="max-width: 18rem"
@@ -654,7 +654,7 @@
               :key="item.color"
             >
               <CCard
-                :textColor="item.textColor"
+                :text-color="item.textColor"
                 class="mb-3 border-top-3"
                 :class="'border-top-' + item.color"
                 style="max-width: 18rem"
@@ -802,16 +802,13 @@
         <CCardBody>
           <p class="text-medium-emphasis small">
             Use the <code>CRow</code> component and set
-            <code
-              >&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: *
-              &#125;"</code
-            >
+            <code>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: * &#125;"</code>
             property to control how many grid columns (wrapped around your
             cards) you show per row. For example, here&#39;s
-            <code>xs="&#123;cols: 1&#125;"</code> laying out the cards
-            on one column, and
-            <code>md="&#123;cols: 1&#125;"</code> splitting four cards
-            to equal width across multiple rows, from the medium breakpoint up.
+            <code>xs="&#123;cols: 1&#125;"</code> laying out the cards on one
+            column, and <code>md="&#123;cols: 1&#125;"</code> splitting four
+            cards to equal width across multiple rows, from the medium
+            breakpoint up.
           </p>
           <DocsExample href="components/card/#grid-cards">
             <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
@@ -890,8 +887,8 @@
             </CRow>
           </DocsExample>
           <p class="text-medium-emphasis small">
-            Change it to <code>md="&#123; cols: 3&#125;"</code> and
-            you&#39;ll see the fourth card wrap.
+            Change it to <code>md="&#123; cols: 3&#125;"</code> and you&#39;ll
+            see the fourth card wrap.
           </p>
           <DocsExample href="components/card/#grid-cards">
             <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">

src/views/base/Carousels.vue

@@ -15,25 +15,13 @@
           <DocsExample href="components/carousel.html#slides-only">
             <CCarousel>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="VueImg"
-                  alt="slide 1"
-                />
+                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="ReactImg"
-                  alt="slide 2"
-                />
+                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="AngularImg"
-                  alt="slide 3"
-                />
+                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
               </CCarouselItem>
             </CCarousel>
           </DocsExample>
@@ -51,25 +39,13 @@
           <DocsExample href="components/carousel.html#with-controls">
             <CCarousel controls>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="VueImg"
-                  alt="slide 1"
-                />
+                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="ReactImg"
-                  alt="slide 2"
-                />
+                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="AngularImg"
-                  alt="slide 3"
-                />
+                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
               </CCarouselItem>
             </CCarousel>
           </DocsExample>
@@ -87,25 +63,13 @@
           <DocsExample href="components/carousel.html#with-indicators">
             <CCarousel controls indicators>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="VueImg"
-                  alt="slide 1"
-                />
+                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="ReactImg"
-                  alt="slide 2"
-                />
+                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="AngularImg"
-                  alt="slide 3"
-                />
+                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
               </CCarouselItem>
             </CCarousel>
           </DocsExample>
@@ -129,11 +93,7 @@
           <DocsExample href="components/carousel.html#with-captions">
             <CCarousel controls indicators>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="VueImg"
-                  alt="slide 1"
-                />
+                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
                 <CCarouselCaption class="d-none d-md-block">
                   <h5>First slide label</h5>
                   <p>
@@ -142,11 +102,7 @@
                 </CCarouselCaption>
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="ReactImg"
-                  alt="slide 2"
-                />
+                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
                 <CCarouselCaption class="d-none d-md-block">
                   <h5>First slide label</h5>
                   <p>
@@ -155,11 +111,7 @@
                 </CCarouselCaption>
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="AngularImg"
-                  alt="slide 3"
-                />
+                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
                 <CCarouselCaption class="d-none d-md-block">
                   <h5>First slide label</h5>
                   <p>
@@ -183,25 +135,13 @@
           <DocsExample href="components/carousel.html#crossfade">
             <CCarousel controls indicators transition="crossfade">
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="VueImg"
-                  alt="slide 1"
-                />
+                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="ReactImg"
-                  alt="slide 2"
-                />
+                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="AngularImg"
-                  alt="slide 3"
-                />
+                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
               </CCarouselItem>
             </CCarousel>
           </DocsExample>
@@ -223,25 +163,13 @@
           <DocsExample href="components/carousel.html#dark-variant">
             <CCarousel controls indicators dark>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="VueImg"
-                  alt="slide 1"
-                />
+                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="ReactImg"
-                  alt="slide 2"
-                />
+                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
               </CCarouselItem>
               <CCarouselItem>
-                <img
-                  class="d-block w-100"
-                  :src="AngularImg"
-                  alt="slide 3"
-                />
+                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
               </CCarouselItem>
             </CCarousel>
           </DocsExample>
@@ -263,6 +191,6 @@ export default {
       ReactImg,
       VueImg,
     }
-  }
+  },
 }
 </script>

src/views/base/ListGroups.vue

@@ -192,8 +192,8 @@
                   'light',
                   'dark',
                 ]"
-                :color="item"
                 :key="item"
+                :color="item"
                 >A simple {{ item }} list group item</CListGroupItem
               >
             </CListGroup>
@@ -221,10 +221,10 @@
                   'light',
                   'dark',
                 ]"
+                :key="item"
                 component="a"
                 href="#"
                 :color="item"
-                :key="item"
                 >A simple {{ item }} list group item</CListGroupItem
               >
             </CListGroup>
@@ -340,10 +340,10 @@
                 <CFormCheck label="Cras justo odio" />
               </CListGroupItem>
               <CListGroupItem>
-                <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
+                <CFormCheck label="Dapibus ac facilisis in" checked />
               </CListGroupItem>
               <CListGroupItem>
-                <CFormCheck label="Morbi leo risus" defaultChecked />
+                <CFormCheck label="Morbi leo risus" checked />
               </CListGroupItem>
               <CListGroupItem>
                 <CFormCheck label="orta ac consectetur ac" />

src/views/base/Navs.vue

@@ -34,9 +34,8 @@
           </DocsExample>
           <p class="text-medium-emphasis small">
             Classes are used throughout, so your markup can be super flexible.
-            Use{' '}
-            <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the
-            order of your items is important, or roll your own with a
+            Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if
+            the order of your items is important, or roll your own with a
             <code>&lt;nav&gt;</code> element. Because the .nav uses display:
             flex, the nav links behave the same as nav items would, but without
             the extra markup.
@@ -59,7 +58,7 @@
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
-            Change the horizontal alignment of your nav with{' '}
+            Change the horizontal alignment of your nav with
             <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
               flexbox utilities
             </a>
@@ -207,7 +206,7 @@
           <p class="text-medium-emphasis small">
             Force your <code>.nav</code>&#39;s contents to extend the full
             available width one of two modifier classes. To proportionately fill
-            all available space with your{' '} <code>.nav-item</code>s, use
+            all available space with your <code>.nav-item</code>s, use
             <code>layout=&#34;fill&#34;</code>. Notice that all horizontal space
             is occupied, but not every nav item has the same width.
           </p>

src/views/base/Popovers.vue

@@ -11,14 +11,14 @@
         <CCardBody>
           <DocsExample href="components/popover.html#example">
             <CButton
-              color="danger"
-              size="lg"
               v-c-popover="{
                 header: 'Popover title',
                 content:
                   'And here\’s some amazing content. It’s very engaging. Right?',
                 placement: 'right',
               }"
+              color="danger"
+              size="lg"
             >
               Click to toggle popover
             </CButton>
@@ -38,39 +38,39 @@
           </p>
           <DocsExample href="components/popover.html#four-directions">
             <CButton
-              color="secondary"
               v-c-popover="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'top',
               }"
+              color="secondary"
               >Popover on top</CButton
             >
             <CButton
-              color="secondary"
               v-c-popover="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'right',
               }"
+              color="secondary"
               >Popover on right</CButton
             >
             <CButton
-              color="secondary"
               v-c-popover="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'bottom',
               }"
+              color="secondary"
               >Popover on bottom</CButton
             >
             <CButton
-              color="secondary"
               v-c-popover="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'left',
               }"
+              color="secondary"
               >Popover on left</CButton
             >
           </DocsExample>

src/views/base/Tables.vue

@@ -38,7 +38,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -153,7 +153,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -187,7 +187,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -218,7 +218,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -262,7 +262,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -293,7 +293,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -324,7 +324,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -364,7 +364,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2" active>
+                  <CTableDataCell colspan="2" active>
                     Larry the Bird
                   </CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
@@ -397,7 +397,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2" active>
+                  <CTableDataCell colspan="2" active>
                     Larry the Bird
                   </CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
@@ -443,7 +443,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -456,7 +456,7 @@
             can be added to change colors:
           </p>
           <DocsExample href="components/table.html#bordered-tables">
-            <CTable bordered borderColor="primary">
+            <CTable bordered border-color="primary">
               <CTableHead>
                 <CTableRow>
                   <CTableHeaderCell scope="col">#</CTableHeaderCell>
@@ -480,7 +480,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -523,7 +523,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -554,7 +554,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -599,7 +599,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -730,7 +730,7 @@
                   <CTableDataCell>@mdo</CTableDataCell>
                 </CTableRow>
                 <CTableRow>
-                  <CTableHeaderCell colSpan="4">
+                  <CTableHeaderCell colspan="4">
                     <CTable>
                       <CTableHead>
                         <CTableRow>
@@ -767,7 +767,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -845,7 +845,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>
@@ -885,7 +885,7 @@
                 </CTableRow>
                 <CTableRow>
                   <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                  <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
                   <CTableDataCell>@twitter</CTableDataCell>
                 </CTableRow>
               </CTableBody>

src/views/base/Tooltips.vue

@@ -34,39 +34,39 @@
           </p>
           <DocsExample href="components/tooltip.html">
             <CButton
-              color="secondary"
               v-c-tooltip="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'top',
               }"
+              color="secondary"
               >Tooltip on top</CButton
             >
             <CButton
-              color="secondary"
               v-c-tooltip="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'right',
               }"
+              color="secondary"
               >Tooltip on right</CButton
             >
             <CButton
-              color="secondary"
               v-c-tooltip="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'bottom',
               }"
+              color="secondary"
               >Tooltip on bottom</CButton
             >
             <CButton
-              color="secondary"
               v-c-tooltip="{
                 content:
                   'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
                 placement: 'left',
               }"
+              color="secondary"
               >Tooltip on left</CButton
             >
           </DocsExample>

src/views/buttons/ButtonGroups.vue

@@ -86,21 +86,21 @@
               aria-label="Basic checkbox toggle button group"
             >
               <CFormCheck
-                :button="{ color: 'primary', variant: 'outline' }"
                 id="btncheck1"
-                autoComplete="off"
+                :button="{ color: 'primary', variant: 'outline' }"
+                autocomplete="off"
                 label="Checkbox 1"
               />
               <CFormCheck
-                :button="{ color: 'primary', variant: 'outline' }"
                 id="btncheck2"
-                autoComplete="off"
+                :button="{ color: 'primary', variant: 'outline' }"
+                autocomplete="off"
                 label="Checkbox 2"
               />
               <CFormCheck
-                :button="{ color: 'primary', variant: 'outline' }"
                 id="btncheck3"
-                autoComplete="off"
+                :button="{ color: 'primary', variant: 'outline' }"
+                autocomplete="off"
                 label="Checkbox 3"
               />
             </CButtonGroup>
@@ -113,27 +113,27 @@
               aria-label="Basic checkbox toggle button group"
             >
               <CFormCheck
+                id="btnradio1"
                 type="radio"
                 :button="{ color: 'primary', variant: 'outline' }"
                 name="btnradio"
-                id="btnradio1"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio 1"
               />
               <CFormCheck
+                id="btnradio2"
                 type="radio"
                 :button="{ color: 'primary', variant: 'outline' }"
                 name="btnradio"
-                id="btnradio2"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio 2"
               />
               <CFormCheck
+                id="btnradio3"
                 type="radio"
                 :button="{ color: 'primary', variant: 'outline' }"
                 name="btnradio"
-                id="btnradio3"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio 3"
               />
             </CButtonGroup>
@@ -384,30 +384,30 @@
               aria-label="Vertical button group"
             >
               <CFormCheck
+                id="vbtnradio1"
                 type="radio"
                 :button="{ color: 'danger', variant: 'outline' }"
                 name="vbtnradio"
-                id="vbtnradio1"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio
               1"
-                defaultChecked
+                checked
               />
               <CFormCheck
+                id="vbtnradio2"
                 type="radio"
                 :button="{ color: 'danger', variant: 'outline' }"
                 name="vbtnradio"
-                id="vbtnradio2"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio
               2"
               />
               <CFormCheck
+                id="vbtnradio3"
                 type="radio"
                 :button="{ color: 'danger', variant: 'outline' }"
                 name="vbtnradio"
-                id="vbtnradio3"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio
               3"
               />

src/views/buttons/Buttons.vue

@@ -294,10 +294,7 @@
               ]"
               :key="color"
             >
-              <CButton
-                :color="color"
-                shape="rounded-pill"
-              >
+              <CButton :color="color" shape="rounded-pill">
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
               </CButton>
             </template>
@@ -325,10 +322,7 @@
               ]"
               :key="color"
             >
-              <CButton
-                :color="color"
-                shape="rounded-0"
-              >
+              <CButton :color="color" shape="rounded-0">
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
               </CButton>
             </template>

src/views/buttons/Dropdowns.vue

@@ -224,8 +224,8 @@
                   <span class="navbar-toggler-icon"></span>
                 </button>
                 <div
-                  class="collapse navbar-collapse"
                   id="navbarNavDarkDropdown"
+                  class="collapse navbar-collapse"
                 >
                   <ul class="navbar-nav">
                     <CDropdown dark component="li" variant="nav-item">

src/views/forms/ChecksRadios.vue

@@ -14,7 +14,7 @@
             <CFormCheck
               id="flexCheckChecked"
               label="Checked checkbox"
-              defaultChecked
+              checked
             />
           </DocsExample>
         </CCardBody>
@@ -33,11 +33,7 @@
           </p>
           <DocsExample href="forms/checks-radios.html#disabled">
             <CFormCheck label="Disabled checkbox" disabled />
-            <CFormCheck
-              label="Disabled checked checkbox"
-              defaultChecked
-              disabled
-            />
+            <CFormCheck label="Disabled checked checkbox" checked disabled />
           </DocsExample>
         </CCardBody>
       </CCard>
@@ -55,17 +51,17 @@
           </p>
           <DocsExample href="forms/checks-radios.html#radios">
             <CFormCheck
+              id="flexRadioDefault1"
               type="radio"
               name="flexRadioDefault"
-              id="flexRadioDefault1"
               label="Default radio"
             />
             <CFormCheck
+              id="flexRadioDefault2"
               type="radio"
               name="flexRadioDefault"
-              id="flexRadioDefault2"
               label="Checked radio"
-              defaultChecked
+              checked
             />
           </DocsExample>
         </CCardBody>
@@ -79,18 +75,18 @@
         <CCardBody>
           <DocsExample href="forms/checks-radios.html#disabled-1">
             <CFormCheck
+              id="flexRadioDisabled"
               type="radio"
               name="flexRadioDisabled"
-              id="flexRadioDisabled"
               label="Disabled radio"
               disabled
             />
             <CFormCheck
+              id="flexRadioCheckedDisabled"
               type="radio"
               name="flexRadioDisabled"
-              id="flexRadioCheckedDisabled"
               label="Disabled checked radio"
-              defaultChecked
+              checked
               disabled
             />
           </DocsExample>
@@ -110,23 +106,23 @@
           </p>
           <DocsExample href="forms/checks-radios.html#switches">
             <CFormSwitch
-              label="Default switch checkbox input"
               id="formSwitchCheckDefault"
+              label="Default switch checkbox input"
             />
             <CFormSwitch
-              label="Checked switch checkbox input"
               id="formSwitchCheckChecked"
-              defaultChecked
+              label="Checked switch checkbox input"
+              checked
             />
             <CFormSwitch
-              label="Disabled switch checkbox input"
               id="formSwitchCheckDisabled"
+              label="Disabled switch checkbox input"
               disabled
             />
             <CFormSwitch
-              label="Disabled checked switch checkbox input"
               id="formSwitchCheckCheckedDisabled"
-              defaultChecked
+              label="Disabled checked switch checkbox input"
+              checked
               disabled
             />
           </DocsExample>
@@ -141,18 +137,18 @@
         <CCardBody>
           <DocsExample href="forms/checks-radios.html#sizes">
             <CFormSwitch
-              label="Default switch checkbox input"
               id="formSwitchCheckDefault"
+              label="Default switch checkbox input"
             />
             <CFormSwitch
+              id="formSwitchCheckDefaultLg"
               size="lg"
               label="Large switch checkbox input"
-              id="formSwitchCheckDefaultLg"
             />
             <CFormSwitch
+              id="formSwitchCheckDefaultXL"
               size="xl"
               label="Extra large switch checkbox input"
-              id="formSwitchCheckDefaultXL"
             />
           </DocsExample>
         </CCardBody>
@@ -175,24 +171,24 @@
           </DocsExample>
           <DocsExample href="forms/checks-radios.html#default-stacked">
             <CFormCheck
+              id="exampleRadios1"
               type="radio"
               name="exampleRadios"
-              id="exampleRadios1"
               value="option1"
               label="Default radio"
-              defaultChecked
+              checked
             />
             <CFormCheck
+              id="exampleRadios2"
               type="radio"
               name="exampleRadios"
-              id="exampleRadios2"
               value="option2"
               label="Second default radio"
             />
             <CFormCheck
+              id="exampleRadios3"
               type="radio"
               name="exampleRadios"
-              id="exampleRadios3"
               value="option3"
               label="Disabled radio"
               disabled
@@ -213,11 +209,11 @@
             <code>&lt;CFormCheck&gt;</code>.
           </p>
           <DocsExample href="forms/checks-radios.html#inline">
-            <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
-            <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
+            <CFormCheck id="inlineCheckbox1" inline value="option1" label="1" />
+            <CFormCheck id="inlineCheckbox2" inline value="option2" label="2" />
             <CFormCheck
-              inline
               id="inlineCheckbox3"
+              inline
               value="option3"
               label="3 (disabled)"
               disabled
@@ -225,26 +221,26 @@
           </DocsExample>
           <DocsExample href="forms/checks-radios.html#inline">
             <CFormCheck
+              id="inlineCheckbox1"
               inline
               type="radio"
               name="inlineRadioOptions"
-              id="inlineCheckbox1"
               value="option1"
               label="1"
             />
             <CFormCheck
+              id="inlineCheckbox2"
               inline
               type="radio"
               name="inlineRadioOptions"
-              id="inlineCheckbox2"
               value="option2"
               label="2"
             />
             <CFormCheck
+              id="inlineCheckbox3"
               inline
               type="radio"
               name="inlineRadioOptions"
-              id="inlineCheckbox3"
               value="option3"
               label="3 (disabled)"
               disabled
@@ -269,9 +265,9 @@
             </div>
             <div>
               <CFormCheck
+                id="radioNoLabel"
                 type="radio"
                 name="radioNoLabel"
-                id="radioNoLabel"
                 value=""
                 aria-label="..."
               />
@@ -294,26 +290,26 @@
           </p>
           <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
-              :button="{ color: 'primary' }"
               id="btn-check"
-              autoComplete="off"
+              :button="{ color: 'primary' }"
+              autocomplete="off"
               label="Single toggle"
             />
           </DocsExample>
           <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
-              :button="{ color: 'primary' }"
               id="btn-check-2"
-              autoComplete="off"
+              :button="{ color: 'primary' }"
+              autocomplete="off"
               label="Checked"
-              defaultChecked
+              checked
             />
           </DocsExample>
           <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
-              :button="{ color: 'primary' }"
               id="btn-check-3"
-              autoComplete="off"
+              :button="{ color: 'primary' }"
+              autocomplete="off"
               label="Disabled"
               disabled
             />
@@ -321,37 +317,37 @@
           <h3>Radio toggle buttons</h3>
           <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <CFormCheck
+              id="option1"
               :button="{ color: 'secondary' }"
               type="radio"
               name="options"
-              id="option1"
-              autoComplete="off"
+              autocomplete="off"
               label="Checked"
-              defaultChecked
+              checked
             />
             <CFormCheck
+              id="option2"
               :button="{ color: 'secondary' }"
               type="radio"
               name="options"
-              id="option2"
-              autoComplete="off"
+              autocomplete="off"
               label="Radio"
             />
             <CFormCheck
+              id="option3"
               :button="{ color: 'secondary' }"
               type="radio"
               name="options"
-              id="option3"
-              autoComplete="off"
+              autocomplete="off"
               label="Radio"
               disabled
             />
             <CFormCheck
+              id="option4"
               :button="{ color: 'secondary' }"
               type="radio"
               name="options"
-              id="option4"
-              autoComplete="off"
+              autocomplete="off"
               label="Radio"
             />
           </DocsExample>
@@ -363,37 +359,37 @@
           <DocsExample href="forms/checks-radios.html#toggle-buttons">
             <div>
               <CFormCheck
-                :button="{ color: 'primary', variant: 'outline' }"
                 id="btn-check-outlined"
-                autoComplete="off"
+                :button="{ color: 'primary', variant: 'outline' }"
+                autocomplete="off"
                 label="Single toggle"
               />
             </div>
             <div>
               <CFormCheck
-                :button="{ color: 'secondary', variant: 'outline' }"
                 id="btn-check-2-outlined"
-                autoComplete="off"
+                :button="{ color: 'secondary', variant: 'outline' }"
+                autocomplete="off"
                 label="Checked"
-                defaultChecked
+                checked
               />
             </div>
             <div>
               <CFormCheck
+                id="success-outlined"
                 :button="{ color: 'success', variant: 'outline' }"
                 type="radio"
                 name="options-outlined"
-                id="success-outlined"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio"
-                defaultChecked
+                checked
               />
               <CFormCheck
+                id="danger-outlined"
                 :button="{ color: 'danger', variant: 'outline' }"
                 type="radio"
                 name="options-outlined"
-                id="danger-outlined"
-                autoComplete="off"
+                autocomplete="off"
                 label="Radio"
               />
             </div>

src/views/forms/FloatingLabels.vue

@@ -22,19 +22,19 @@
           <DocsExample href="forms/floating-labels.html">
             <CFormFloating class="mb-3">
               <CFormInput
-                type="email"
                 id="floatingInput"
+                type="email"
                 placeholder="name@example.com"
               />
-              <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
+              <CFormLabel for="floatingInput">Email address</CFormLabel>
             </CFormFloating>
             <CFormFloating>
               <CFormInput
-                type="password"
                 id="floatingPassword"
+                type="password"
                 placeholder="Password"
               />
-              <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
+              <CFormLabel for="floatingPassword">Password</CFormLabel>
             </CFormFloating>
           </DocsExample>
           <p class="text-medium-emphasis small">
@@ -45,14 +45,12 @@
           <DocsExample href="forms/floating-labels.html">
             <CFormFloating>
               <CFormInput
-                type="email"
                 id="floatingInputValue"
+                type="email"
                 placeholder="name@example.com"
-                defaultValue="test@example.com"
+                value="test@example.com"
               />
-              <CFormLabel htmlFor="floatingInputValue"
-                >Input with value</CFormLabel
-              >
+              <CFormLabel for="floatingInputValue">Input with value</CFormLabel>
             </CFormFloating>
           </DocsExample>
         </CCardBody>
@@ -74,7 +72,7 @@
                 id="floatingTextarea"
                 placeholder="Leave a comment here"
               ></CFormTextarea>
-              <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
+              <CFormLabel for="floatingTextarea">Comments</CFormLabel>
             </CFormFloating>
           </DocsExample>
           <p class="text-medium-emphasis small">
@@ -85,11 +83,11 @@
           <DocsExample href="forms/floating-labels.html#textareas">
             <CFormFloating>
               <CFormTextarea
-                placeholder="Leave a comment here"
                 id="floatingTextarea2"
+                placeholder="Leave a comment here"
                 style="height: 100px"
               ></CFormTextarea>
-              <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
+              <CFormLabel for="floatingTextarea2">Comments</CFormLabel>
             </CFormFloating>
           </DocsExample>
         </CCardBody>
@@ -123,9 +121,7 @@
                 <option value="2">Two</option>
                 <option value="3">Three</option>
               </CFormSelect>
-              <CFormLabel htmlFor="floatingSelect"
-                >Works with selects</CFormLabel
-              >
+              <CFormLabel for="floatingSelect">Works with selects</CFormLabel>
             </CFormFloating>
           </DocsExample>
         </CCardBody>
@@ -146,14 +142,12 @@
               <CCol md>
                 <CFormFloating>
                   <CFormInput
-                    type="email"
                     id="floatingInputGrid"
+                    type="email"
                     placeholder="name@example.com"
-                    defaultValue="email@example.com"
+                    value="email@example.com"
                   />
-                  <CFormLabel htmlFor="floatingInputGrid"
-                    >Email address</CFormLabel
-                  >
+                  <CFormLabel for="floatingInputGrid">Email address</CFormLabel>
                 </CFormFloating>
               </CCol>
               <CCol md>
@@ -167,7 +161,7 @@
                     <option value="2">Two</option>
                     <option value="3">Three</option>
                   </CFormSelect>
-                  <CFormLabel htmlFor="floatingSelectGrid"
+                  <CFormLabel for="floatingSelectGrid"
                     >Works with selects</CFormLabel
                   >
                 </CFormFloating>

src/views/forms/FormControl.vue

@@ -16,8 +16,8 @@
                   >Email address</CFormLabel
                 >
                 <CFormInput
-                  type="email"
                   id="exampleFormControlInput1"
+                  type="email"
                   placeholder="name@example.com"
                 />
               </div>
@@ -92,7 +92,7 @@
               placeholder="Disabled readonly input"
               aria-label="Disabled input example"
               disabled
-              readOnly
+              readonly
             />
             <br />
           </DocsExample>
@@ -106,7 +106,7 @@
         </CCardHeader>
         <CCardBody>
           <p class="text-medium-emphasis small">
-            Add the <code>readOnly</code> boolean attribute on an input to
+            Add the <code>readonly</code> boolean attribute on an input to
             prevent modification of the input&#39;s value. Read-only inputs
             appear lighter (just like disabled inputs), but retain the standard
             cursor.
@@ -116,7 +116,7 @@
               type="text"
               placeholder="Readonly input here..."
               aria-label="readonly input example"
-              readOnly
+              readonly
             />
           </DocsExample>
         </CCardBody>
@@ -131,7 +131,7 @@
           <p class="text-medium-emphasis small">
             If you want to have <code>&lt;input readonly&gt;</code> elements in
             your form styled as plain text, use the
-            <code>plainText</code> boolean property to remove the default form
+            <code>plain-text</code> boolean property to remove the default form
             field styling and preserve the correct margin and padding.
           </p>
           <DocsExample href="components/accordion">
@@ -141,11 +141,11 @@
               </CFormLabel>
               <div class="col-sm-10">
                 <CFormInput
-                  type="text"
                   id="staticEmail"
-                  defaultValue="email@example.com"
-                  readOnly
-                  plainText
+                  type="text"
+                  value="email@example.com"
+                  readonly
+                  plain-text
                 />
               </div>
             </CRow>
@@ -154,7 +154,7 @@
                 Password
               </CFormLabel>
               <div class="col-sm-10">
-                <CFormInput type="password" id="inputPassword" />
+                <CFormInput id="inputPassword" type="password" />
               </div>
             </CRow>
           </DocsExample>
@@ -165,11 +165,11 @@
                   Email
                 </CFormLabel>
                 <CFormInput
-                  type="text"
                   id="staticEmail2"
-                  defaultValue="email@example.com"
-                  readOnly
-                  plainText
+                  type="text"
+                  value="email@example.com"
+                  readonly
+                  plain-text
                 />
               </div>
               <div class="col-auto">
@@ -177,8 +177,8 @@
                   Password
                 </CFormLabel>
                 <CFormInput
-                  type="password"
                   id="inputPassword2"
+                  type="password"
                   placeholder="Password"
                 />
               </div>
@@ -199,27 +199,27 @@
           <DocsExample href="forms/form-control.html#file-input">
             <div class="mb-3">
               <CFormLabel for="formFile">Default file input example</CFormLabel>
-              <CFormInput type="file" id="formFile" />
+              <CFormInput id="formFile" type="file" />
             </div>
             <div class="mb-3">
               <CFormLabel for="formFileMultiple"
                 >Multiple files input example</CFormLabel
               >
-              <CFormInput type="file" id="formFileMultiple" multiple />
+              <CFormInput id="formFileMultiple" type="file" multiple />
             </div>
             <div class="mb-3">
               <CFormLabel for="formFileDisabled"
                 >Disabled file input example</CFormLabel
               >
-              <CFormInput type="file" id="formFileDisabled" disabled />
+              <CFormInput id="formFileDisabled" type="file" disabled />
             </div>
             <div class="mb-3">
               <CFormLabel for="formFileSm">Small file input example</CFormLabel>
-              <CFormInput type="file" size="sm" id="formFileSm" />
+              <CFormInput id="formFileSm" type="file" size="sm" />
             </div>
             <div>
               <CFormLabel for="formFileLg">Large file input example</CFormLabel>
-              <CFormInput type="file" size="lg" id="formFileLg" />
+              <CFormInput id="formFileLg" type="file" size="lg" />
             </div>
           </DocsExample>
         </CCardBody>
@@ -234,9 +234,9 @@
           <DocsExample href="forms/form-control.html#color">
             <CFormLabel for="exampleColorInput">Color picker</CFormLabel>
             <CFormInput
-              type="color"
               id="exampleColorInput"
-              defaultValue="#563d7c"
+              type="color"
+              value="#563d7c"
               title="Choose your color"
             />
           </DocsExample>

src/views/forms/InputGroup.vue

@@ -224,10 +224,10 @@
           <DocsExample href="forms/input-group.html#button-addons">
             <CInputGroup class="mb-3">
               <CButton
+                id="button-addon1"
                 type="button"
                 color="secondary"
                 variant="outline"
-                id="button-addon1"
               >
                 Button
               </CButton>
@@ -244,10 +244,10 @@
                 aria-describedby="button-addon2"
               />
               <CButton
+                id="button-addon2"
                 type="button"
                 color="secondary"
                 variant="outline"
-                id="button-addon2"
               >
                 Button
               </CButton>
@@ -467,42 +467,42 @@
               <CInputGroupText component="label" for="inputGroupFile01">
                 Upload
               </CInputGroupText>
-              <CFormInput type="file" id="inputGroupFile01" />
+              <CFormInput id="inputGroupFile01" type="file" />
             </CInputGroup>
             <CInputGroup class="mb-3">
-              <CFormInput type="file" id="inputGroupFile02" />
+              <CFormInput id="inputGroupFile02" type="file" />
               <CInputGroupText component="label" for="inputGroupFile02">
                 Upload
               </CInputGroupText>
             </CInputGroup>
             <CInputGroup class="mb-3">
               <CButton
+                id="inputGroupFileAddon03"
                 type="button"
                 color="secondary"
                 variant="outline"
-                id="inputGroupFileAddon03"
               >
                 Button
               </CButton>
               <CFormInput
-                type="file"
                 id="inputGroupFile03"
+                type="file"
                 aria-describedby="inputGroupFileAddon03"
                 aria-label="Upload"
               />
             </CInputGroup>
             <CInputGroup>
               <CFormInput
-                type="file"
                 id="inputGroupFile04"
+                type="file"
                 aria-describedby="inputGroupFileAddon04"
                 aria-label="Upload"
               />
               <CButton
+                id="inputGroupFileAddon04"
                 type="button"
                 color="secondary"
                 variant="outline"
-                id="inputGroupFileAddon04"
               >
                 Button
               </CButton>

src/views/forms/Layout.vue

@@ -55,11 +55,11 @@
             <CForm class="row g-3">
               <CCol :md="6">
                 <CFormLabel for="inputEmail4">Email</CFormLabel>
-                <CFormInput type="email" id="inputEmail4" />
+                <CFormInput id="inputEmail4" type="email" />
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="inputPassword4">Password</CFormLabel>
-                <CFormInput type="password" id="inputPassword4" />
+                <CFormInput id="inputPassword4" type="password" />
               </CCol>
               <CCol :xs="12">
                 <CFormLabel for="inputAddress">Address</CFormLabel>
@@ -89,8 +89,8 @@
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
-                  type="checkbox"
                   id="gridCheck"
+                  type="checkbox"
                   label="Check me out"
                 />
               </CCol>
@@ -129,7 +129,7 @@
                   Email
                 </CFormLabel>
                 <CCol :sm="10">
-                  <CFormInput type="email" id="inputEmail3" />
+                  <CFormInput id="inputEmail3" type="email" />
                 </CCol>
               </CRow>
               <CRow class="mb-3">
@@ -140,31 +140,31 @@
                   Password
                 </CFormLabel>
                 <CCol :sm="10">
-                  <CFormInput type="password" id="inputPassword3" />
+                  <CFormInput id="inputPassword3" type="password" />
                 </CCol>
               </CRow>
               <fieldset class="row mb-3">
                 <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
                 <CCol :sm="10">
                   <CFormCheck
+                    id="gridRadios1"
                     type="radio"
                     name="gridRadios"
-                    id="gridRadios1"
                     value="option1"
                     label="First radio"
-                    defaultChecked
+                    checked
                   />
                   <CFormCheck
+                    id="gridRadios2"
                     type="radio"
                     name="gridRadios"
-                    id="gridRadios2"
                     value="option2"
                     label="Second radio"
                   />
                   <CFormCheck
+                    id="gridRadios3"
                     type="radio"
                     name="gridRadios"
-                    id="gridRadios3"
                     value="option3"
                     label="Third disabled radio"
                     disabled
@@ -174,8 +174,8 @@
               <CRow class="mb-3">
                 <div class="col-sm-10 offset-sm-2">
                   <CFormCheck
-                    type="checkbox"
                     id="gridCheck1"
+                    type="checkbox"
                     label="Example checkbox"
                   />
                 </div>
@@ -209,9 +209,9 @@
               </CFormLabel>
               <CCol :sm="10">
                 <CFormInput
+                  id="colFormLabelSm"
                   type="email"
                   class="form-control form-control-sm"
-                  id="colFormLabelSm"
                   placeholder="col-form-label-sm"
                 />
               </CCol>
@@ -222,8 +222,8 @@
               </CFormLabel>
               <CCol :sm="10">
                 <CFormInput
-                  type="email"
                   id="colFormLabel"
+                  type="email"
                   placeholder="col-form-label"
                 />
               </CCol>
@@ -237,9 +237,9 @@
               </CFormLabel>
               <CCol :sm="10">
                 <CFormInput
+                  id="colFormLabelLg"
                   type="email"
                   class="form-control form-control-lg"
-                  id="colFormLabelLg"
                   placeholder="col-form-label-lg"
                 />
               </CCol>
@@ -327,8 +327,8 @@
               </CCol>
               <CCol xs="auto">
                 <CFormCheck
-                  type="checkbox"
                   id="autoSizingCheck"
+                  type="checkbox"
                   label="Remember me"
                 />
               </CCol>
@@ -377,8 +377,8 @@
               </CCol>
               <CCol xs="auto">
                 <CFormCheck
-                  type="checkbox"
                   id="autoSizingCheck2"
+                  type="checkbox"
                   label="Remember me"
                 />
               </CCol>
@@ -435,8 +435,8 @@
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
-                  type="checkbox"
                   id="inlineFormCheck"
+                  type="checkbox"
                   label="Remember me"
                 />
               </CCol>

src/views/forms/Range.vue

@@ -50,7 +50,7 @@
           </p>
           <DocsExample href="forms/range.html#min-and-max">
             <CFormLabel for="customRange2">Example range</CFormLabel>
-            <CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
+            <CFormRange id="customRange2" :min="0" :max="5" value="3" />
           </DocsExample>
         </CCardBody>
       </CCard>
@@ -70,11 +70,11 @@
           <DocsExample href="forms/range.html#steps">
             <CFormLabel for="customRange3">Example range</CFormLabel>
             <CFormRange
+              id="customRange3"
               :min="0"
               :max="5"
               :step="0.5"
-              defaultValue="3"
-              id="customRange3"
+              value="3"
             />
           </DocsExample>
         </CCardBody>

src/views/forms/Validation.vue

@@ -9,7 +9,7 @@
           <p class="text-medium-emphasis small">
             For custom CoreUI form validation messages, you&#39;ll need to add
             the
-            <code>noValidate</code> boolean property to your
+            <code>novalidate</code> boolean property to your
             <code>&lt;CForm&gt;</code>. This disables the browser default
             feedback tooltips, but still provides access to the form validation
             APIs in JavaScript. Try to submit the form below; our JavaScript
@@ -24,26 +24,18 @@
           <DocsExample href="forms/validation.html">
             <CForm
               class="row g-3 needs-validation"
-              noValidate
+              novalidate
               :validated="validatedCustom01"
               @submit="handleSubmitCustom01"
             >
               <CCol :md="4">
                 <CFormLabel for="validationCustom01">Email</CFormLabel>
-                <CFormInput
-                  id="validationCustom01"
-                  defaultValue="Mark"
-                  required
-                />
+                <CFormInput id="validationCustom01" value="Mark" required />
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
                 <CFormLabel for="validationCustom02">Email</CFormLabel>
-                <CFormInput
-                  id="validationCustom02"
-                  defaultValue="Otto"
-                  required
-                />
+                <CFormInput id="validationCustom02" value="Otto" required />
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
@@ -52,7 +44,7 @@
                   <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
                   <CFormInput
                     id="validationCustomUsername"
-                    defaultValue=""
+                    value=""
                     aria-describedby="inputGroupPrepend"
                     required
                   />
@@ -87,8 +79,8 @@
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
-                  type="checkbox"
                   id="invalidCheck"
+                  type="checkbox"
                   label="Agree to terms and conditions"
                   required
                 />
@@ -129,20 +121,12 @@
             >
               <CCol :md="4">
                 <CFormLabel for="validationDefault01">Email</CFormLabel>
-                <CFormInput
-                  id="validationDefault01"
-                  defaultValue="Mark"
-                  required
-                />
+                <CFormInput id="validationDefault01" value="Mark" required />
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
                 <CFormLabel for="validationDefault02">Email</CFormLabel>
-                <CFormInput
-                  id="validationDefault02"
-                  defaultValue="Otto"
-                  required
-                />
+                <CFormInput id="validationDefault02" value="Otto" required />
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
@@ -153,7 +137,7 @@
                   <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
                   <CFormInput
                     id="validationDefaultUsername"
-                    defaultValue=""
+                    value=""
                     aria-describedby="inputGroupPrepend02"
                     required
                   />
@@ -188,8 +172,8 @@
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
-                  type="checkbox"
                   id="invalidCheck"
+                  type="checkbox"
                   label="Agree to terms and conditions"
                   required
                 />
@@ -227,37 +211,35 @@
           <DocsExample href="forms/validation.html#server-side">
             <CForm class="row g-3 needs-validation">
               <CCol ::md="4">
-                <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
+                <CFormLabel for="validationServer01">Email</CFormLabel>
                 <CFormInput
-                  type="text"
                   id="validationServer01"
-                  defaultValue="Mark"
-                  valid
-                  required
-                />
-                <CFormFeedback valid>Looks good!</CFormFeedback>
-              </CCol>
-              <CCol ::md="4">
-                <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
-                <CFormInput
                   type="text"
-                  id="validationServer02"
-                  defaultValue="Otto"
+                  value="Mark"
                   valid
                   required
                 />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
               <CCol ::md="4">
-                <CFormLabel htmlFor="validationServerUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationServer02">Email</CFormLabel>
+                <CFormInput
+                  id="validationServer02"
+                  type="text"
+                  value="Otto"
+                  valid
+                  required
+                />
+                <CFormFeedback valid>Looks good!</CFormFeedback>
+              </CCol>
+              <CCol ::md="4">
+                <CFormLabel for="validationServerUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
                   <CFormInput
-                    type="text"
                     id="validationServerUsername"
-                    defaultValue=""
+                    type="text"
+                    value=""
                     aria-describedby="inputGroupPrepend03"
                     invalid
                     required
@@ -268,10 +250,10 @@
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
-                <CFormLabel htmlFor="validationServer03">City</CFormLabel>
+                <CFormLabel for="validationServer03">City</CFormLabel>
                 <CFormInput
-                  type="text"
                   id="validationServer03"
+                  type="text"
                   invalid
                   required
                 />
@@ -280,7 +262,7 @@
                 >
               </CCol>
               <CCol :md="3">
-                <CFormLabel htmlFor="validationServer04">City</CFormLabel>
+                <CFormLabel for="validationServer04">City</CFormLabel>
                 <CFormSelect id="validationServer04" invalid>
                   <option disabled>Choose...</option>
                   <option>...</option>
@@ -290,10 +272,10 @@
                 >
               </CCol>
               <CCol :md="3">
-                <CFormLabel htmlFor="validationServer05">City</CFormLabel>
+                <CFormLabel for="validationServer05">City</CFormLabel>
                 <CFormInput
-                  type="text"
                   id="validationServer05"
+                  type="text"
                   invalid
                   required
                 />
@@ -303,8 +285,8 @@
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
-                  type="checkbox"
                   id="invalidCheck"
+                  type="checkbox"
                   label="Agree to terms and conditions"
                   invalid
                   required
@@ -353,8 +335,8 @@
                 </CFormFeedback>
               </div>
               <CFormCheck
-                class="mb-3"
                 id="validationFormCheck1"
+                class="mb-3"
                 label="Check this checkbox"
                 required
               />
@@ -362,17 +344,17 @@
                 >Example invalid feedback text</CFormFeedback
               >
               <CFormCheck
+                id="validationFormCheck2"
                 type="radio"
                 name="radio-stacked"
-                id="validationFormCheck2"
                 label="Check this checkbox"
                 required
               />
               <CFormCheck
+                id="validationFormCheck3"
                 class="mb-3"
                 type="radio"
                 name="radio-stacked"
-                id="validationFormCheck3"
                 label="Or toggle this other radio"
                 required
               />
@@ -392,8 +374,8 @@
               </div>
               <div class="mb-3">
                 <CFormInput
-                  type="file"
                   id="validationTextarea"
+                  type="file"
                   aria-label="file example"
                   required
                 />
@@ -428,26 +410,18 @@
           <DocsExample href="forms/validation.html#tooltips">
             <CForm
               class="row g-3 needs-validation"
-              noValidate
+              novalidate
               :validated="validatedTooltip01"
               @submit="handleSubmitTooltip01"
             >
               <CCol :md="4" class="position-relative">
                 <CFormLabel for="validationTooltip01">Email</CFormLabel>
-                <CFormInput
-                  id="validationTooltip01"
-                  defaultValue="Mark"
-                  required
-                />
+                <CFormInput id="validationTooltip01" value="Mark" required />
                 <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4" class="position-relative">
                 <CFormLabel for="validationTooltip02">Email</CFormLabel>
-                <CFormInput
-                  id="validationTooltip02"
-                  defaultValue="Otto"
-                  required
-                />
+                <CFormInput id="validationTooltip02" value="Otto" required />
                 <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4" class="position-relative">
@@ -458,7 +432,7 @@
                   <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
                   <CFormInput
                     id="validationTooltipUsername"
-                    defaultValue=""
+                    value=""
                     aria-describedby="inputGroupPrepend"
                     required
                   />

src/views/icons/Brands.vue

@@ -3,13 +3,11 @@
     <CCol>
       <DocsCallout
         name="CoreUI Brand Icons"
-        href="components/chart"
+        href="components/icon"
         content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
       />
       <CCard>
-        <CCardHeader>
-          CoreUI Icons - Brand
-        </CCardHeader>
+        <CCardHeader>CoreUI Icons - Brand</CCardHeader>
         <CCardBody>
           <CRow class="text-center">
             <template v-for="(icon, iconName) in icons" :key="iconName">
@@ -30,13 +28,14 @@ import { brandSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
   setup() {
-    const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    const toKebabCase = (str) =>
+      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
     const icons = brandSet
 
     return {
       icons,
-      toKebabCase
+      toKebabCase,
     }
-  }
+  },
 }
 </script>

src/views/icons/CoreUIIcons.vue

@@ -3,13 +3,11 @@
     <CCol>
       <DocsCallout
         name="CoreUI Icons"
-        href="components/chart"
+        href="components/icon"
         content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
       />
       <CCard>
-        <CCardHeader>
-          CoreUI Icons Free
-        </CCardHeader>
+        <CCardHeader>CoreUI Icons Free</CCardHeader>
         <CCardBody>
           <CRow class="text-center">
             <template v-for="(icon, iconName) in icons" :key="iconName">
@@ -30,13 +28,14 @@ import { freeSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
   setup() {
-    const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    const toKebabCase = (str) =>
+      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
     const icons = freeSet
 
     return {
       icons,
-      toKebabCase
+      toKebabCase,
     }
-  }
+  },
 }
 </script>

src/views/icons/Flags.vue

@@ -3,13 +3,11 @@
     <CCol>
       <DocsCallout
         name="CoreUI Flag Icons"
-        href="components/chart"
+        href="components/icon"
         content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
       />
       <CCard>
-        <CCardHeader>
-          CoreUI Icons - Flag
-        </CCardHeader>
+        <CCardHeader>CoreUI Icons - Flag</CCardHeader>
         <CCardBody>
           <CRow class="text-center">
             <template v-for="(icon, iconName) in icons" :key="iconName">
@@ -30,13 +28,14 @@ import { flagSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
   setup() {
-    const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    const toKebabCase = (str) =>
+      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
     const icons = flagSet
 
     return {
       icons,
-      toKebabCase
+      toKebabCase,
     }
-  }
+  },
 }
 </script>

src/views/notifications/Modals.vue

@@ -593,11 +593,11 @@
                 <p>
                   This
                   <CButton
-                    color="secondary"
                     v-c-popover="{
                       header: 'Popover title',
                       content: 'Popover body content is set in this property.',
                     }"
+                    color="secondary"
                     >button</CButton
                   >
                 </p>

src/views/pages/Login.vue

@@ -15,7 +15,7 @@
                     </CInputGroupText>
                     <CFormInput
                       placeholder="Username"
-                      autoComplete="username"
+                      autocomplete="username"
                     />
                   </CInputGroup>
                   <CInputGroup class="mb-4">
@@ -25,7 +25,7 @@
                     <CFormInput
                       type="password"
                       placeholder="Password"
-                      autoComplete="current-password"
+                      autocomplete="current-password"
                     />
                   </CInputGroup>
                   <CRow>

src/views/pages/Register.vue

@@ -12,11 +12,11 @@
                   <CInputGroupText>
                     <CIcon icon="cil-user" />
                   </CInputGroupText>
-                  <CFormInput placeholder="Username" autoComplete="username" />
+                  <CFormInput placeholder="Username" autocomplete="username" />
                 </CInputGroup>
                 <CInputGroup class="mb-3">
                   <CInputGroupText>@</CInputGroupText>
-                  <CFormInput placeholder="Email" autoComplete="email" />
+                  <CFormInput placeholder="Email" autocomplete="email" />
                 </CInputGroup>
                 <CInputGroup class="mb-3">
                   <CInputGroupText>
@@ -25,7 +25,7 @@
                   <CFormInput
                     type="password"
                     placeholder="Password"
-                    autoComplete="new-password"
+                    autocomplete="new-password"
                   />
                 </CInputGroup>
                 <CInputGroup class="mb-4">
@@ -35,7 +35,7 @@
                   <CFormInput
                     type="password"
                     placeholder="Repeat password"
-                    autoComplete="new-password"
+                    autocomplete="new-password"
                   />
                 </CInputGroup>
                 <div class="d-grid">

src/views/theme/ColorTheme.vue

@@ -12,7 +12,10 @@
 export default {
   name: 'ColorTheme',
   props: {
-    color: String,
+    color: {
+      type: String,
+      default: undefined,
+    },
   },
 }
 </script>

src/views/widgets/WidgetsStatsTypeA.vue

@@ -369,11 +369,11 @@
 </template>
 
 <script>
-import { CChart } from "@coreui/vue-chartjs";
+import { CChart } from '@coreui/vue-chartjs'
 export default {
-  name: "WidgetsStatsA",
+  name: 'WidgetsStatsA',
   components: {
     CChart,
   },
-};
+}
 </script>

src/views/widgets/WidgetsStatsTypeD.vue

@@ -132,7 +132,7 @@
         color="warning"
         :values="[
           { title: 'events', value: '12+' },
-            { title: 'meetings', value: '4' },
+          { title: 'meetings', value: '4' },
         ]"
       >
         <template #icon
@@ -155,11 +155,11 @@
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
-                      borderColor: 'rgba(255,255,255,.55)',
-                      pointHoverBackgroundColor: '#fff',
-                      borderWidth: 2,
-                      data: [35, 23, 56, 22, 97, 23, 64],
-                      fill: true,
+                  borderColor: 'rgba(255,255,255,.55)',
+                  pointHoverBackgroundColor: '#fff',
+                  borderWidth: 2,
+                  data: [35, 23, 56, 22, 97, 23, 64],
+                  fill: true,
                 },
               ],
             }"
@@ -172,9 +172,9 @@
 </template>
 
 <script>
-import { CChart } from "@coreui/vue-chartjs";
+import { CChart } from '@coreui/vue-chartjs'
 export default {
-  name: "WidgetsStatsD",
+  name: 'WidgetsStatsD',
   components: {
     CChart,
   },
@@ -205,11 +205,11 @@ export default {
           display: false,
         },
       },
-    };
+    }
 
     return {
       options,
-    };
+    }
   },
-};
+}
 </script>