refactor: update examples

src/components/AppSidebar.vue

@@ -1,7 +1,6 @@
 <template>
   <CSidebar
     position="fixed"
-    selfHiding="md"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
     @visible-change="

src/components/DocsCallout.vue

@@ -1,10 +1,12 @@
 <template>
   <CCallout color="info" class="bg-white">
-    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.
+    {{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.`}}
     <br />
     <br />
     For more information please visit our official
@@ -20,6 +22,11 @@ import packageJson from '../../package.json'
 export default {
   name: 'DocsCallout',
   props: {
+    content: {
+      type: String,
+      default: undefined,
+      required: false,
+    },
     href: {
       type: String,
       default: undefined,

src/main.js

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 
 import CoreuiVue from '@coreui/vue'
-import { CIcon } from '@coreui/icons-vue'
+import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
 import DocsCallout from '@/components/DocsCallout'
 import DocsExample from '@/components/DocsExample'

src/views/buttons/Buttons.vue

@@ -296,8 +296,6 @@
             >
               <CButton
                 :color="color"
-                :active="state === 'active' ? true : false"
-                :disabled="state === 'disabled' ? true : false"
                 shape="rounded-pill"
               >
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
@@ -329,8 +327,6 @@
             >
               <CButton
                 :color="color"
-                :active="state === 'active' ? true : false"
-                :disabled="state === 'disabled' ? true : false"
                 shape="rounded-0"
               >
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}

src/views/charts/Charts.vue

@@ -1,5 +1,12 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsCallout
+        name="Chart"
+        href="components/chart"
+        content="React wrapper component for Chart.js 3.0, the most popular charting library."
+      />
+    </CCol>
     <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader> Line Chart </CCardHeader>

src/views/icons/Brands.vue

@@ -1,9 +1,14 @@
 <template>
   <CRow>
     <CCol>
+      <DocsCallout
+        name="CoreUI Brand Icons"
+        href="components/chart"
+        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>
-          <strong>Vue CoreUI Brand Icons</strong>
+          CoreUI Icons - Brand
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">

src/views/icons/CoreUIIcons.vue

@@ -1,9 +1,14 @@
 <template>
   <CRow>
     <CCol>
+      <DocsCallout
+        name="CoreUI Icons"
+        href="components/chart"
+        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>
-          <strong>Vue CoreUI Icons</strong>
+          CoreUI Icons Free
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">

src/views/icons/Flags.vue

@@ -1,9 +1,14 @@
 <template>
   <CRow>
     <CCol>
+      <DocsCallout
+        name="CoreUI Flag Icons"
+        href="components/chart"
+        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>
-          <strong>Vue CoreUI Flag Icons</strong>
+          CoreUI Icons - Flag
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">

src/views/theme/ColorTheme.vue

@@ -5,7 +5,6 @@
       style="padding-top: 75%"
     ></div>
     <slot></slot>
-    <ColorView />
   </CCol>
 </template>