From e8465516a7a7adedd37db887146ad15677df78bd Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 18:45:24 +0200
Subject: [PATCH 01/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@babel/core             ^7.20.2  →          ^7.22.5
@babel/eslint-parser    ^7.19.1  →          ^7.22.5
@coreui/chartjs          ^3.0.0  →           ^3.1.2
@coreui/coreui           ^4.2.3  →    ^4.3.0-beta.0
@coreui/icons            ^2.1.0  →           ^3.0.1
@coreui/utils            ^1.3.1  →           ^2.0.2
@coreui/vue              ^4.5.0  →    ^4.9.0-beta.0
@vue/test-utils          ^2.2.4  →           ^2.3.2
@vue/vue3-jest          ^27.0.0  →          ^29.2.4
babel-jest              ^27.5.1  →          ^29.5.0
core-js                 ^3.26.1  →          ^3.31.0
cypress                  ^8.7.0  →         ^12.14.0
eslint                  ^7.32.0  →          ^8.42.0
eslint-config-prettier   ^8.3.0  →           ^8.8.0
eslint-plugin-prettier   ^4.0.0  →           ^4.2.1
eslint-plugin-vue        ^8.0.3  →          ^9.14.1
jest                    ^27.5.1  →          ^29.5.0
prettier                 ^2.8.0  →           ^2.8.8
sass                    ^1.56.1  →          ^1.63.3
sass-loader             ^12.0.0  →          ^13.3.2
vue                     ^3.2.45  →           ^3.3.4
vue-router               ^4.1.6  →           ^4.2.2
---
 package.json | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 2251e0b0..4c933636 100644
--- a/package.json
+++ b/package.json
@@ -19,21 +19,21 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@coreui/chartjs": "^3.0.0",
-    "@coreui/coreui": "^4.2.3",
-    "@coreui/icons": "^2.1.0",
+    "@coreui/chartjs": "^3.1.2",
+    "@coreui/coreui": "^4.3.0-beta.0",
+    "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
-    "@coreui/utils": "^1.3.1",
-    "@coreui/vue": "^4.5.0",
+    "@coreui/utils": "^2.0.2",
+    "@coreui/vue": "^4.9.0-beta.0",
     "@coreui/vue-chartjs": "2.0.1",
-    "core-js": "^3.26.1",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6",
+    "core-js": "^3.31.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.22.5",
+    "@babel/eslint-parser": "^7.22.5",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-e2e-cypress": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
@@ -41,17 +41,17 @@
     "@vue/cli-plugin-unit-jest": "~5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/test-utils": "^2.2.4",
-    "@vue/vue3-jest": "^27.0.0",
-    "babel-jest": "^27.5.1",
-    "cypress": "^8.7.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "jest": "^27.5.1",
-    "prettier": "^2.8.0",
-    "sass": "^1.56.1",
-    "sass-loader": "^12.0.0"
+    "@vue/test-utils": "^2.3.2",
+    "@vue/vue3-jest": "^29.2.4",
+    "babel-jest": "^29.5.0",
+    "cypress": "^12.14.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.14.1",
+    "jest": "^29.5.0",
+    "prettier": "^2.8.8",
+    "sass": "^1.63.3",
+    "sass-loader": "^13.3.2"
   }
 }

From fcba592f47ad266972805b1f75cad40539716a44 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 23:32:10 +0200
Subject: [PATCH 02/92] chore: update @coreui/vue-chartjs to 2.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4c933636..6db6c192 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue": "^4.9.0-beta.0",
-    "@coreui/vue-chartjs": "2.0.1",
+    "@coreui/vue-chartjs": "2.1.0",
     "core-js": "^3.31.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",

From a76226fb16e9e4210fb18ba3c45c7d7c1de3c776 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 23:33:29 +0200
Subject: [PATCH 03/92] feat: add color modes support

---
 public/index.html                       | 15 ++++--
 src/assets/icons/index.js               |  4 ++
 src/components/AppHeader.vue            | 58 +++++++++++++++++++++
 src/layouts/DefaultLayout.vue           |  2 +-
 src/styles/_example.scss                | 41 ++++++++-------
 src/styles/_variables.scss              |  2 +
 src/styles/style.scss                   | 10 ++--
 src/views/Dashboard.vue                 |  2 +-
 src/views/charts/MainChartExample.vue   | 67 +++++++++++++++++--------
 src/views/widgets/WidgetsStatsTypeA.vue | 26 +++++++++-
 10 files changed, 176 insertions(+), 51 deletions(-)

diff --git a/public/index.html b/public/index.html
index fa900d69..73a19d5b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <!--
-* CoreUI Vue.js Admin Template
+* CoreUI Free Vue.js Admin Template
 * @version v4.2.0
-* @link https://coreui.io/vue/
-* Copyright (c) 2021 creativeLabs Łukasz Holeczek
-* License (https://coreui.io/pro/license)
+* @link https://coreui.io/product/free-vue-admin-template/
+* Copyright (c) 2023 creativeLabs Łukasz Holeczek
+* Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
 -->
 <html>
   <head>
@@ -32,6 +32,13 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
+    <script>
+      const userMode = localStorage.getItem('coreui-free-vue-admin-template-theme');
+	    const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
+				document.documentElement.dataset.coreuiTheme = 'dark';
+			}
+    </script>
   </head>
   <body>
     <noscript>
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 2c292085..55c6ddf1 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -42,6 +42,7 @@ import {
   cilCheckCircle,
   cilCode,
   cilCommentSquare,
+  cilContrast,
   cilCursor,
   cilDrop,
   cilDollar,
@@ -72,6 +73,7 @@ import {
   cilSpeech,
   cilSpeedometer,
   cilStar,
+  cilSun,
   cilTask,
   cilUser,
   cilUserFemale,
@@ -98,6 +100,7 @@ export const iconsSet = Object.assign(
     cilCheckCircle,
     cilCode,
     cilCommentSquare,
+    cilContrast,
     cilCursor,
     cilDrop,
     cilDollar,
@@ -128,6 +131,7 @@ export const iconsSet = Object.assign(
     cilSpeech,
     cilSpeedometer,
     cilStar,
+    cilSun,
     cilTask,
     cilUser,
     cilUserFemale,
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index e02b6f14..887f838d 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -34,6 +34,58 @@
             <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
           </CNavLink>
         </CNavItem>
+        <li class="nav-item py-2 py-lg-1">
+          <div
+            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
+          ></div>
+          <hr class="d-lg-none my-2 text-white-50" />
+        </li>
+        <CDropdown variant="nav-item" placement="bottom-end">
+          <CDropdownToggle :caret="false">
+            <CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
+            <CIcon
+              v-else-if="getColorMode() === 'light'"
+              icon="cil-sun"
+              size="xl"
+            />
+            <CIcon v-else icon="cil-contrast" size="xl" />
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem
+              :active="getColorMode() === 'light'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('light')"
+            >
+              <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
+            </CDropdownItem>
+            <CDropdownItem
+              :active="getColorMode() === 'dark'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('dark')"
+            >
+              <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
+            </CDropdownItem>
+            <CDropdownItem
+              :active="getColorMode() === 'auto'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('auto')"
+            >
+              <CIcon class="me-2" icon="cil-contrast" size="lg" /> Auto
+            </CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <li class="nav-item py-2 py-lg-1">
+          <div
+            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
+          ></div>
+          <hr class="d-lg-none my-2 text-white-50" />
+        </li>
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
@@ -45,6 +97,7 @@
 </template>
 
 <script>
+import { useColorModes } from '@coreui/vue/'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
@@ -55,8 +108,13 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const { getColorMode, setColorMode } = useColorModes(
+      'coreui-free-vue-admin-template-theme',
+    )
     return {
       logo,
+      setColorMode,
+      getColorMode,
     }
   },
 }
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 84aa0e74..b230865d 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <AppSidebar />
-    <div class="wrapper d-flex flex-column min-vh-100 bg-light">
+    <div class="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
       <AppHeader />
       <div class="body flex-grow-1 px-3">
         <CContainer lg>
diff --git a/src/styles/_example.scss b/src/styles/_example.scss
index f8791fb2..fdf64254 100644
--- a/src/styles/_example.scss
+++ b/src/styles/_example.scss
@@ -1,33 +1,23 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
 .example {
   &:not(:first-child) {
     margin-top: 1.5rem;
   }
 
   .tab-content {
-    background-color: $light-50 !important;
-
-    @at-root .dark-theme & {
-      background-color: rgba(255, 255, 255, .1) !important;
-    }
-  }
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    font-size: .875rem !important;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
+    background-color: var(--#{$prefix}tertiary-bg) !important;
   }
 
   & + p {
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
   }
 
   // Components examples
-  .preview,
-  .preview .col {
+  .preview {
     + p {
       margin-top: 2rem;
     }
@@ -105,5 +95,20 @@
       margin-top: .5rem;
       margin-bottom: .5rem;
     }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3ee3142d..697b08ad 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1 +1,3 @@
 // Variable overrides
+//
+// If you want to customize your project please add your variables below.
diff --git a/src/styles/style.scss b/src/styles/style.scss
index ca22ec0d..02f199c4 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -4,14 +4,14 @@
 $enable-ltr: true;
 $enable-rtl: true;
 
-// Import styles
-@import "~@coreui/coreui/scss/coreui";
+// Import CoreUI for React components library
+@import "@coreui/coreui/scss/coreui";
 
-// Import Chart.js Tooltips
-@import "~@coreui/chartjs/scss/tooltips";
+// Import Chart.js custom tooltips styles
+@import "@coreui/chartjs/scss/coreui-chartjs";
 
 @import "layout";
 @import "example";
 
-// If you want to add something do it here
+// If you want to add custom CSS you can put it here.
 @import "custom";
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 508b2956..3959c270 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -194,7 +194,7 @@
             </CRow>
             <br />
             <CTable align="middle" class="mb-0 border" hover responsive>
-              <CTableHead color="light">
+              <CTableHead class="bg-body-secondary">
                 <CTableRow>
                   <CTableHeaderCell class="text-center">
                     <CIcon name="cil-people" />
diff --git a/src/views/charts/MainChartExample.vue b/src/views/charts/MainChartExample.vue
index 1105749f..de7c83d2 100644
--- a/src/views/charts/MainChartExample.vue
+++ b/src/views/charts/MainChartExample.vue
@@ -1,21 +1,13 @@
 <template>
-  <CChart
-    type="line"
-    :data="data"
-    :options="options"
-    @get-dataset-at-event="aa"
-    @get-element-at-event="aa"
-    @get-elements-at-event="aa"
-  />
+  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
-import { getStyle, hexToRgba } from '@coreui/utils/src'
+import { getStyle } from '@coreui/utils'
 
-function random(min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
 export default {
   name: 'MainChartExample',
@@ -23,12 +15,13 @@ export default {
     CChart,
   },
   setup() {
+    const mainChartRef = ref()
     const data = {
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
       datasets: [
         {
           label: 'My First dataset',
-          backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
+          backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
           borderColor: getStyle('--cui-info'),
           pointHoverBackgroundColor: getStyle('--cui-info'),
           borderWidth: 2,
@@ -81,15 +74,26 @@ export default {
       scales: {
         x: {
           grid: {
+            color: getStyle('--cui-border-color-translucent'),
             drawOnChartArea: false,
           },
+          ticks: {
+            color: getStyle('--cui-body-color'),
+          },
         },
         y: {
+          border: {
+            color: getStyle('--cui-border-color-translucent'),
+          },
+          grid: {
+            color: getStyle('--cui-border-color-translucent'),
+          },
           ticks: {
             beginAtZero: true,
+            color: getStyle('--cui-body-color'),
+            max: 250,
             maxTicksLimit: 5,
             stepSize: Math.ceil(250 / 5),
-            max: 250,
           },
         },
       },
@@ -106,16 +110,39 @@ export default {
       },
     }
 
+    onMounted(() => {
+      document.documentElement.addEventListener('ColorSchemeChange', () => {
+        if (mainChartRef.value) {
+          mainChartRef.value.chart,
+            (options.scales.x.grid.borderColor = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.x.grid.color = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.x.ticks.color = getStyle('--cui-body-color'))
+          mainChartRef.value.chart,
+            (options.scales.y.grid.borderColor = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.y.grid.color = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.y.ticks.color = getStyle('--cui-body-color'))
+          mainChartRef.value.chart.update()
+        }
+      })
+    })
+
     return {
       data,
+      mainChartRef,
       options,
     }
   },
-  methods: {
-    aa(value, value2) {
-      console.log(value)
-      console.log(value2)
-    },
-  },
 }
 </script>
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 45e9755d..180a9743 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -30,6 +30,7 @@
             type="line"
             class="mt-3 mx-3"
             style="height: 70px"
+            ref="widgetChartRef1"
             :data="{
               labels: [
                 'January',
@@ -45,7 +46,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'transparent',
                   borderColor: 'rgba(255,255,255,.55)',
-                  pointBackgroundColor: '#321fdb',
+                  pointBackgroundColor: getStyle('--cui-primary'),
                   data: [68, 59, 84, 84, 51, 55, 40],
                 },
               ],
@@ -125,6 +126,7 @@
             type="line"
             class="mt-3 mx-3"
             style="height: 70px"
+            ref="widgetChartRef2"
             :data="{
               labels: [
                 'January',
@@ -140,7 +142,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'transparent',
                   borderColor: 'rgba(255,255,255,.55)',
-                  pointBackgroundColor: '#39f',
+                  pointBackgroundColor: getStyle('--cui-info'),
                   data: [1, 18, 9, 17, 34, 22, 11],
                 },
               ],
@@ -369,11 +371,31 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
+import { getStyle } from '@coreui/utils'
+
 export default {
   name: 'WidgetsStatsA',
   components: {
     CChart,
   },
+  setup() {
+    const widgetChartRef1 = ref()
+    const widgetChartRef2 = ref()
+
+    onMounted(() => {
+      document.documentElement.addEventListener('ColorSchemeChange', () => {
+        widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
+          getStyle('--cui-primary')
+        widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
+          getStyle('--cui-info')
+        widgetChartRef1.value.chart.update()
+        widgetChartRef2.value.chart.update()
+      })
+    })
+
+    return { getStyle, widgetChartRef1, widgetChartRef2 }
+  },
 }
 </script>

From f1322d42a073dcbb4093a09ab5cb525b07126213 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 23:34:09 +0200
Subject: [PATCH 04/92] fix: resolve eslint warning

---
 src/views/base/Progress.vue | 1 +
 src/views/forms/Select.vue  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index 257cbbe1..200b2231 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -206,6 +206,7 @@
 
 <script>
 export default {
+  // eslint-disable-next-line
   name: 'Progress',
 }
 </script>
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index d256949a..765cddfd 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -108,6 +108,7 @@
 
 <script>
 export default {
+  // eslint-disable-next-line
   name: 'Select',
 }
 </script>

From b1b828def3b83260142461f0d3b8a31d600b412c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 23:41:08 +0200
Subject: [PATCH 05/92] refactor: update views

---
 src/router/index.js                                    |  4 +++-
 src/views/{ => dashboard}/Dashboard.vue                | 10 +++++-----
 .../MainChartExample.vue => dashboard/MainChart.vue}   |  0
 3 files changed, 8 insertions(+), 6 deletions(-)
 rename src/views/{ => dashboard}/Dashboard.vue (98%)
 rename src/views/{charts/MainChartExample.vue => dashboard/MainChart.vue} (100%)

diff --git a/src/router/index.js b/src/router/index.js
index 0a195eac..ff424c75 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,7 +17,9 @@ const routes = [
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () =>
-          import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue'),
+          import(
+            /* webpackChunkName: "dashboard" */ '@/views/dashboard/Dashboard.vue'
+          ),
       },
       {
         path: '/theme',
diff --git a/src/views/Dashboard.vue b/src/views/dashboard/Dashboard.vue
similarity index 98%
rename from src/views/Dashboard.vue
rename to src/views/dashboard/Dashboard.vue
index 3959c270..91421320 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -28,7 +28,7 @@
               </CCol>
             </CRow>
             <CRow>
-              <MainChartExample
+              <MainChart
                 style="height: 300px; max-height: 300px; margin-top: 40px"
               />
             </CRow>
@@ -275,14 +275,14 @@ import avatar3 from '@/assets/images/avatars/3.jpg'
 import avatar4 from '@/assets/images/avatars/4.jpg'
 import avatar5 from '@/assets/images/avatars/5.jpg'
 import avatar6 from '@/assets/images/avatars/6.jpg'
-import MainChartExample from './charts/MainChartExample'
-import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
+import MainChart from './MainChart'
+import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
 
 export default {
   name: 'Dashboard',
   components: {
-    MainChartExample,
+    MainChart,
     WidgetsStatsA,
     WidgetsStatsD,
   },
diff --git a/src/views/charts/MainChartExample.vue b/src/views/dashboard/MainChart.vue
similarity index 100%
rename from src/views/charts/MainChartExample.vue
rename to src/views/dashboard/MainChart.vue

From bf6a0f745a70b7ffc70dece332622c653fbd02aa Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 15:08:19 +0200
Subject: [PATCH 06/92] chore: update @coreui/vue to v4.9.0-beta.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6db6c192..0fcfa430 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^4.9.0-beta.0",
+    "@coreui/vue": "^4.9.0-beta.1",
     "@coreui/vue-chartjs": "2.1.0",
     "core-js": "^3.31.0",
     "vue": "^3.3.4",

From 3b88337579ada11a98616406472d0327e76bf5c4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 15:08:59 +0200
Subject: [PATCH 07/92] refactor: update color modes handling

---
 src/App.vue                             | 28 +++++++++++++++++++++++++
 src/components/AppHeader.vue            |  2 +-
 src/store/index.js                      |  1 +
 src/views/widgets/WidgetsStatsTypeA.vue | 17 +++++++++------
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7502212d..84b32347 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,34 @@
 <template>
   <router-view />
 </template>
+<script>
+import { onBeforeMount } from 'vue'
+import { useStore } from 'vuex'
+import { useColorModes } from '@coreui/vue'
+
+export default {
+  setup() {
+    const { isColorModeSet, setColorMode } = useColorModes(
+      'coreui-free-vue-admin-template-theme',
+    )
+    const store = useStore()
+
+    onBeforeMount(() => {
+      const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+      if (urlParams.get('theme')) {
+        setColorMode(urlParams.get('theme'))
+        return
+      }
+
+      if (isColorModeSet()) {
+        return
+      }
+
+      setColorMode(store.state.theme)
+    })
+  },
+}
+</script>
 
 <style lang="scss">
 // Import Main styles for this application
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 887f838d..7b3d9fb8 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -97,7 +97,7 @@
 </template>
 
 <script>
-import { useColorModes } from '@coreui/vue/'
+import { useColorModes } from '@coreui/vue'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
diff --git a/src/store/index.js b/src/store/index.js
index 57dcaeda..1ca85549 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ export default createStore({
   state: {
     sidebarVisible: '',
     sidebarUnfoldable: false,
+    theme: 'light',
   },
   mutations: {
     toggleSidebar(state) {
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 180a9743..4f663f50 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -386,12 +386,17 @@ export default {
 
     onMounted(() => {
       document.documentElement.addEventListener('ColorSchemeChange', () => {
-        widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
-          getStyle('--cui-primary')
-        widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
-          getStyle('--cui-info')
-        widgetChartRef1.value.chart.update()
-        widgetChartRef2.value.chart.update()
+        if (widgetChartRef1.value) {
+          widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
+            getStyle('--cui-primary')
+          widgetChartRef1.value.chart.update()
+        }
+
+        if (widgetChartRef2.value) {
+          widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
+            getStyle('--cui-info')
+          widgetChartRef2.value.chart.update()
+        }
       })
     })
 

From 3e3b94986c2882b0576c1ab6d47e3557ec0be3f2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 15:16:51 +0200
Subject: [PATCH 08/92] refactor: update colors

---
 src/views/pages/Login.vue    | 2 +-
 src/views/pages/Page404.vue  | 2 +-
 src/views/pages/Page500.vue  | 2 +-
 src/views/pages/Register.vue | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 52e9bc4a..aabc4710 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="8">
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index c259e079..11b4900e 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index e6802af7..9c80396e 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index 0ab42cf3..51708129 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
+  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="9" :lg="7" :xl="6">

From 8a7baa6670a5dc28115858f95b85864b3fccfb6d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 20:35:08 +0200
Subject: [PATCH 09/92] refactor: improve responsive behavior

---
 src/views/dashboard/Dashboard.vue       | 15 ++---
 src/views/widgets/Widgets.vue           | 76 ++++++++++++-------------
 src/views/widgets/WidgetsStatsTypeA.vue |  8 +--
 src/views/widgets/WidgetsStatsTypeD.vue |  8 +--
 4 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 91421320..a9cfe60a 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -178,7 +178,7 @@
                 >
                   <div class="progress-group-header">
                     <CIcon :icon="item.icon" class="me-2" size="lg" />
-                    <span class="title">Organic Search</span>
+                    <span class="title">{{ item.title }}</span>
                     <span class="ms-auto fw-semibold">
                       {{ item.value }}
                       <span class="text-medium-emphasis small"
@@ -221,7 +221,7 @@
                   </CTableDataCell>
                   <CTableDataCell>
                     <div>{{ item.user.name }}</div>
-                    <div class="small text-medium-emphasis">
+                    <div class="small text-medium-emphasis text-nowrap">
                       <span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
                       {{ item.user.registered }}
                     </div>
@@ -234,11 +234,11 @@
                     />
                   </CTableDataCell>
                   <CTableDataCell>
-                    <div class="clearfix">
-                      <div class="float-start">
+                    <div class="d-flex justify-content-between text-nowrap">
+                      <div>
                         <strong>{{ item.usage.value }}%</strong>
                       </div>
-                      <div class="float-end">
+                      <div class="ms-1">
                         <small class="text-medium-emphasis">
                           {{ item.usage.period }}
                         </small>
@@ -255,10 +255,11 @@
                   </CTableDataCell>
                   <CTableDataCell>
                     <div class="small text-medium-emphasis">Last login</div>
-                    <strong>{{ item.activity }}</strong>
+                    <div class="fw-semibold text-nowrap">
+                      {{ item.activity }}
+                    </div>
                   </CTableDataCell>
                 </CTableRow>
-                <CTableRow> </CTableRow>
               </CTableBody>
             </CTable>
           </CCardBody>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 6bcf26f5..c58759dc 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -11,7 +11,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'success', value: 75 }"
@@ -21,7 +21,7 @@
                   <template #value>89.9%</template>
                 </CWidgetStatsB>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'info', value: 75 }"
@@ -30,7 +30,7 @@
                   value="12.124"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'warning', value: 75 }"
@@ -39,7 +39,7 @@
                   value="$98.111,00"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'primary', value: 75 }"
@@ -52,7 +52,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="success"
@@ -64,7 +64,7 @@
                   <template #value>89.9%</template>
                 </CWidgetStatsB>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="info"
@@ -75,7 +75,7 @@
                   value="12.124"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="warning"
@@ -86,7 +86,7 @@
                   value="$98.111,00"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="primary"
@@ -102,7 +102,7 @@
 
           <DocsExample href="">
             <CRow>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -126,7 +126,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -150,7 +150,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -174,7 +174,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -198,7 +198,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -222,7 +222,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -250,28 +250,28 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-settings" size="xl" />
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="info" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-user" size="xl" />
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-moon" size="xl" />
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-bell" size="xl" />
@@ -282,7 +282,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-settings" size="xl" />
@@ -304,7 +304,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="info" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-user" size="xl" />
@@ -326,7 +326,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-moon" size="xl" />
@@ -348,7 +348,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-bell" size="xl" />
@@ -374,7 +374,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="primary"
                   :padding="false"
@@ -386,7 +386,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="info"
                   :padding="false"
@@ -398,7 +398,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="warning"
                   :padding="false"
@@ -410,7 +410,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="danger"
                   :padding="false"
@@ -483,7 +483,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'info', value: 75 }"
@@ -495,7 +495,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'success', value: 75 }"
@@ -507,7 +507,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'warning', value: 75 }"
@@ -519,7 +519,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'primary', value: 75 }"
@@ -531,7 +531,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'danger', value: 75 }"
@@ -543,7 +543,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'info', value: 75 }"
@@ -559,7 +559,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="info"
@@ -573,7 +573,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="success"
@@ -587,7 +587,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="warning"
@@ -601,7 +601,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="primary"
@@ -615,7 +615,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="danger"
@@ -629,7 +629,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="info"
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 4f663f50..9dd5fbe7 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="primary">
         <template #value
           >26K
@@ -96,7 +96,7 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="info">
         <template #value
           >$6.200
@@ -191,7 +191,7 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="warning">
         <template #value
           >2.49%
@@ -272,7 +272,7 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="danger">
         <template #value
           >44K
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index b4bbd57f..d4f36973 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         style="--cui-card-cap-bg: #3b5998"
@@ -42,7 +42,7 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         style="--cui-card-cap-bg: #00aced"
@@ -84,7 +84,7 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         style="--cui-card-cap-bg: #4875b4"
@@ -126,7 +126,7 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         color="warning"

From afadc178f2bc64e189f1dac9c165dbd7205f57e3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 30 Jun 2023 13:10:03 +0200
Subject: [PATCH 10/92] refactor: update color modes handling

---
 src/App.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 84b32347..facb9cf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,8 +15,9 @@ export default {
 
     onBeforeMount(() => {
       const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      if (urlParams.get('theme')) {
-        setColorMode(urlParams.get('theme'))
+      const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+      if (theme) {
+        setColorMode(theme)
         return
       }
 

From 5def136d9a6c17ba98586d075ee06fcb68e90fb0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 17:25:35 +0200
Subject: [PATCH 11/92] build: move from Vue CLI to Vite

---
 .prettierrc.js                  |  1 -
 babel.config.js                 |  3 --
 cypress.json                    |  3 --
 public/index.html => index.html |  3 +-
 jest.config.js                  |  3 --
 jsconfig.json                   | 19 -------------
 package.json                    | 33 ++++------------------
 src/App.vue                     |  2 +-
 tests/e2e/.eslintrc.js          | 10 -------
 tests/e2e/plugins/index.js      | 25 -----------------
 tests/e2e/specs/test.js         |  8 ------
 tests/e2e/support/commands.js   | 25 -----------------
 tests/e2e/support/index.js      | 20 -------------
 tests/unit/example.spec.js      | 12 --------
 vite.config.js                  | 50 +++++++++++++++++++++++++++++++++
 vue.config.js                   |  4 ---
 16 files changed, 59 insertions(+), 162 deletions(-)
 delete mode 100644 babel.config.js
 delete mode 100644 cypress.json
 rename public/index.html => index.html (96%)
 delete mode 100644 jest.config.js
 delete mode 100644 jsconfig.json
 delete mode 100644 tests/e2e/.eslintrc.js
 delete mode 100644 tests/e2e/plugins/index.js
 delete mode 100644 tests/e2e/specs/test.js
 delete mode 100644 tests/e2e/support/commands.js
 delete mode 100644 tests/e2e/support/index.js
 delete mode 100644 tests/unit/example.spec.js
 create mode 100644 vite.config.js
 delete mode 100644 vue.config.js

diff --git a/.prettierrc.js b/.prettierrc.js
index 6ac17b64..4012c3be 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,5 +1,4 @@
 module.exports = {
-  // jsxBracketSameLine: true,
   semi: false,
   trailingComma: "all",
   singleQuote: true,
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index c1b783ea..00000000
--- a/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-}
diff --git a/cypress.json b/cypress.json
deleted file mode 100644
index 470c7201..00000000
--- a/cypress.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "pluginsFile": "tests/e2e/plugins/index.js"
-}
diff --git a/public/index.html b/index.html
similarity index 96%
rename from public/index.html
rename to index.html
index 73a19d5b..2cf5a46c 100644
--- a/public/index.html
+++ b/index.html
@@ -44,7 +44,8 @@
     <noscript>
       <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-      <div id="app"></div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index 2dac575d..00000000
--- a/jest.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
-}
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index 4aafc5f6..00000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}
diff --git a/package.json b/package.json
index 0fcfa430..4b1b5503 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,9 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "serve": "vue-cli-service serve",
-    "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.2",
@@ -26,32 +24,13 @@
     "@coreui/utils": "^2.0.2",
     "@coreui/vue": "^4.9.0-beta.1",
     "@coreui/vue-chartjs": "2.1.0",
-    "core-js": "^3.31.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/eslint-parser": "^7.22.5",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-unit-jest": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.4",
-    "babel-jest": "^29.5.0",
-    "cypress": "^12.14.0",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.1",
-    "jest": "^29.5.0",
-    "prettier": "^2.8.8",
-    "sass": "^1.63.3",
-    "sass-loader": "^13.3.2"
+    "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.68.0",
+    "vite": "^4.4.5"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index facb9cf4..3bf695b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@ export default {
 
     onBeforeMount(() => {
       const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+      const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
       if (theme) {
         setColorMode(theme)
         return
diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js
deleted file mode 100644
index a3e436bc..00000000
--- a/tests/e2e/.eslintrc.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
-  plugins: ['cypress'],
-  env: {
-    mocha: true,
-    'cypress/globals': true,
-  },
-  rules: {
-    strict: 'off',
-  },
-}
diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js
deleted file mode 100644
index 3cd3f22c..00000000
--- a/tests/e2e/plugins/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable arrow-body-style */
-// https://docs.cypress.io/guides/guides/plugins-guide.html
-
-// if you need a custom webpack configuration you can uncomment the following import
-// and then use the `file:preprocessor` event
-// as explained in the cypress docs
-// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
-
-// /* eslint-disable import/no-extraneous-dependencies, global-require */
-// const webpack = require('@cypress/webpack-preprocessor')
-
-module.exports = (on, config) => {
-  // on('file:preprocessor', webpack({
-  //  webpackOptions: require('@vue/cli-service/webpack.config'),
-  //  watchOptions: {}
-  // }))
-
-  return Object.assign({}, config, {
-    fixturesFolder: 'tests/e2e/fixtures',
-    integrationFolder: 'tests/e2e/specs',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    videosFolder: 'tests/e2e/videos',
-    supportFile: 'tests/e2e/support/index.js',
-  })
-}
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
deleted file mode 100644
index 41ad94a0..00000000
--- a/tests/e2e/specs/test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Welcome to Your Vue.js App')
-  })
-})
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
deleted file mode 100644
index c1f5a772..00000000
--- a/tests/e2e/support/commands.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js
deleted file mode 100644
index d68db96d..00000000
--- a/tests/e2e/support/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
deleted file mode 100644
index 6eac19b1..00000000
--- a/tests/unit/example.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      props: { msg },
-    })
-    expect(wrapper.text()).toMatch(msg)
-  })
-})
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..9bfa1e73
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,50 @@
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'node:path'
+
+export default defineConfig(({ mode }) => {
+  // Load .env
+  const env = loadEnv(mode, process.cwd(), '')
+  process.env = { ...process.env, ...env }
+
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: [
+        // webpack path resolve to vitejs
+        {
+          find: /^~(.*)$/,
+          replacement: '$1',
+        },
+        {
+          find: '@/',
+          replacement: `${path.resolve(__dirname, 'src')}/`,
+        },
+        {
+          find: '@',
+          replacement: path.resolve(__dirname, '/src'),
+        },
+      ],
+      extensions: [
+        '.mjs',
+        '.js',
+        '.ts',
+        '.jsx',
+        '.tsx',
+        '.json',
+        '.vue',
+        '.scss',
+      ],
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+    define: {
+      // vitejs does not support process.env so we have to redefine it
+      'process.env': process.env,
+    },
+  }
+})
diff --git a/vue.config.js b/vue.config.js
deleted file mode 100644
index 523a634b..00000000
--- a/vue.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true,
-})

From d9ec6a488f9a88adeb8268c82bc9b33b68f96321 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 17:57:51 +0200
Subject: [PATCH 12/92] build: update eslint and prettier config

---
 .eslintrc.js   | 31 ++++---------------------------
 .prettierrc.js |  3 ++-
 package.json   |  3 +++
 3 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f19d1539..30cc92be 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,30 +1,7 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    'plugin:prettier/recommended',
-  ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-  },
+  extends: ["plugin:vue/vue3-recommended", "eslint:recommended"],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/multi-word-component-names': 'off',
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)',
-      ],
-      env: {
-        jest: true,
-      },
-    },
-  ],
-}
+};
diff --git a/.prettierrc.js b/.prettierrc.js
index 4012c3be..61281d24 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -2,5 +2,6 @@ module.exports = {
   semi: false,
   trailingComma: "all",
   singleQuote: true,
-  tabWidth: 2
+  printWidth: 100,
+  tabWidth: 2,
 };
diff --git a/package.json b/package.json
index 4b1b5503..c77bc748 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "lint": "eslint \"src/**/*.{js,vue}\"",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -30,6 +31,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "eslint": "^8.50.0",
+    "eslint-plugin-vue": "^9.17.0",
     "sass": "^1.68.0",
     "vite": "^4.4.5"
   }

From 3a6356e5b4f130096089ef61ea2382968e13d19f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 17:58:17 +0200
Subject: [PATCH 13/92] chore: improve syntax

---
 src/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 3bf695b5..ce9a7185 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,9 @@ export default {
 
     onBeforeMount(() => {
       const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+      const theme =
+        urlParams.get('theme') &&
+        urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
       if (theme) {
         setColorMode(theme)
         return

From d7b5c37874742e0109666517623b021c35589572 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 18:00:14 +0200
Subject: [PATCH 14/92] chore: exclude vite.config.js

---
 .eslintignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintignore b/.eslintignore
index baca311b..fc6857ad 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules/*
 /dist/**
 .eslintrc.js
+vite.config.js

From c60551ed2eeaac7d2ee1eacb200c56b0bf5b9053 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 20:11:34 +0200
Subject: [PATCH 15/92] build: add autoprefixer

---
 package.json   | 2 ++
 vite.config.js | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/package.json b/package.json
index c77bc748..ea90671f 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.50.0",
     "eslint-plugin-vue": "^9.17.0",
+    "postcss": "^8.4.30",
     "sass": "^1.68.0",
     "vite": "^4.4.5"
   }
diff --git a/vite.config.js b/vite.config.js
index 9bfa1e73..1eb7400e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,7 @@
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'node:path'
+import autoprefixer from 'autoprefixer'
 
 export default defineConfig(({ mode }) => {
   // Load .env
@@ -9,6 +10,13 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [vue()],
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer({}) // add options if needed
+        ],
+      }
+    },
     resolve: {
       alias: [
         // webpack path resolve to vitejs

From 50645fce23bdf250e3c8d4d8ba652d1a71ffe2dc Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 20:12:34 +0200
Subject: [PATCH 16/92] chore: update `@coreui/coreui` and `@coreui/vue` to the
 latest versions

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ea90671f..bd3952e0 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.2",
-    "@coreui/coreui": "^4.3.0-beta.0",
+    "@coreui/coreui": "^5.0.0-alpha.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^4.9.0-beta.1",
+    "@coreui/vue": "^5.0.0-alpha.0",
     "@coreui/vue-chartjs": "2.1.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",

From 9fcca654fb1f705c92180168234d1ed35a75d525 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 23:35:16 +0200
Subject: [PATCH 17/92] refactor: update layout

---
 src/components/AppHeader.vue  | 17 ++++++++--------
 src/components/AppSidebar.vue | 37 ++++++++++++++++++++---------------
 src/layouts/DefaultLayout.vue |  2 +-
 src/styles/_custom.scss       | 34 +++++++++++++++++++++++++++++++-
 src/styles/_layout.scss       | 16 +++++++++++++++
 5 files changed, 79 insertions(+), 27 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 7b3d9fb8..d32a9ed3 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <CHeader position="sticky" class="mb-4">
-    <CContainer fluid>
+    <CContainer class="border-bottom" fluid>
       <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
@@ -42,9 +42,9 @@
         </li>
         <CDropdown variant="nav-item" placement="bottom-end">
           <CDropdownToggle :caret="false">
-            <CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
+            <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
             <CIcon
-              v-else-if="getColorMode() === 'light'"
+              v-else-if="colorMode === 'light'"
               icon="cil-sun"
               size="xl"
             />
@@ -52,7 +52,7 @@
           </CDropdownToggle>
           <CDropdownMenu>
             <CDropdownItem
-              :active="getColorMode() === 'light'"
+              :active="colorMode === 'light'"
               class="d-flex align-items-center"
               component="button"
               type="button"
@@ -61,7 +61,7 @@
               <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
             </CDropdownItem>
             <CDropdownItem
-              :active="getColorMode() === 'dark'"
+              :active="colorMode === 'dark'"
               class="d-flex align-items-center"
               component="button"
               type="button"
@@ -70,7 +70,7 @@
               <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
             </CDropdownItem>
             <CDropdownItem
-              :active="getColorMode() === 'auto'"
+              :active="colorMode === 'auto'"
               class="d-flex align-items-center"
               component="button"
               type="button"
@@ -89,7 +89,6 @@
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
-    <CHeaderDivider />
     <CContainer fluid>
       <AppBreadcrumb />
     </CContainer>
@@ -108,13 +107,13 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
-    const { getColorMode, setColorMode } = useColorModes(
+    const { colorMode, setColorMode } = useColorModes(
       'coreui-free-vue-admin-template-theme',
     )
     return {
       logo,
+      colorMode,
       setColorMode,
-      getColorMode,
     }
   },
 }
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 2cb1703a..e6acb988 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,5 +1,6 @@
 <template>
   <CSidebar
+    class="border-end"
     position="fixed"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
@@ -11,23 +12,27 @@
         })
     "
   >
-    <CSidebarBrand>
-      <CIcon
-        custom-class-name="sidebar-brand-full"
-        :icon="logoNegative"
-        :height="35"
-      />
-      <CIcon
-        custom-class-name="sidebar-brand-narrow"
-        :icon="sygnet"
-        :height="35"
-      />
-    </CSidebarBrand>
+    <CSidebarHeader class="border-bottom">
+      <CSidebarBrand>
+        <CIcon
+          custom-class-name="sidebar-brand-full"
+          :icon="logoNegative"
+          :height="32"
+        />
+        <CIcon
+          custom-class-name="sidebar-brand-narrow"
+          :icon="sygnet"
+          :height="32"
+        />
+      </CSidebarBrand>
+    </CSidebarHeader>
     <AppSidebarNav />
-    <CSidebarToggler
-      class="d-none d-lg-flex"
-      @click="$store.commit('toggleUnfoldable')"
-    />
+    <CSidebarFooter class="border-top">
+      <CSidebarToggler
+        class="d-none d-lg-flex"
+        @click="$store.commit('toggleUnfoldable')"
+      />
+    </CSidebarFooter>
   </CSidebar>
 </template>
 
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index b230865d..b1031348 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <AppSidebar />
-    <div class="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
+    <div class="wrapper d-flex flex-column min-vh-100">
       <AppHeader />
       <div class="body flex-grow-1 px-3">
         <CContainer lg>
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
index 15d367af..d9602b36 100644
--- a/src/styles/_custom.scss
+++ b/src/styles/_custom.scss
@@ -1 +1,33 @@
-// Here you can add other styles
+// Here you can add other styles// Here you can add other styles
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-toggler {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.header {
+  padding: 0;
+
+  .container-fluid {
+    padding-right: $spacer;
+    padding-left: $spacer;
+  }
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 38bfe8c4..7e2ee4f8 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,6 +1,22 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
 .wrapper {
   width: 100%;
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
+  }
+}

From 7381ae2837dabfd3160f7a31f4e442d9ab605de1 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 23:37:18 +0200
Subject: [PATCH 18/92] refactor: change `.text-high-emphasis-inverse` to
 `.text-white`

---
 src/views/widgets/WidgetsStatsTypeA.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 9dd5fbe7..d4b78ebf 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -16,7 +16,7 @@
               class="p-0 text-white"
               :caret="false"
             >
-              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+              <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
               <CDropdownItem href="#">Action</CDropdownItem>
@@ -112,7 +112,7 @@
               class="p-0 text-white"
               :caret="false"
             >
-              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+              <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
               <CDropdownItem href="#">Action</CDropdownItem>
@@ -207,7 +207,7 @@
               class="p-0 text-white"
               :caret="false"
             >
-              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+              <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
               <CDropdownItem href="#">Action</CDropdownItem>
@@ -288,7 +288,7 @@
               class="p-0 text-white"
               :caret="false"
             >
-              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
+              <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
               <CDropdownItem href="#">Action</CDropdownItem>

From 7048a791ccb1d297d0a7109fac947c7792fd1c05 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 23:38:41 +0200
Subject: [PATCH 19/92] refactor: change `.text-medium-emphasis` to
 `.text-body-secondary`

---
 src/views/base/Accordion.vue       |  6 +--
 src/views/base/Breadcrumbs.vue     |  2 +-
 src/views/base/Cards.vue           | 86 +++++++++++++++---------------
 src/views/base/Carousels.vue       | 12 ++---
 src/views/base/Collapses.vue       |  6 +--
 src/views/base/ListGroups.vue      | 30 +++++------
 src/views/base/Navs.vue            | 22 ++++----
 src/views/base/Paginations.vue     | 14 ++---
 src/views/base/Placeholders.vue    |  2 +-
 src/views/base/Popovers.vue        |  2 +-
 src/views/base/Progress.vue        | 14 ++---
 src/views/base/Spinners.vue        | 12 ++---
 src/views/base/Tables.vue          | 28 +++++-----
 src/views/base/Tooltips.vue        |  6 +--
 src/views/buttons/ButtonGroups.vue |  4 +-
 src/views/buttons/Buttons.vue      | 28 +++++-----
 src/views/buttons/Dropdowns.vue    | 20 +++----
 src/views/dashboard/Dashboard.vue  | 30 +++++------
 src/views/forms/ChecksRadios.vue   | 16 +++---
 src/views/forms/FloatingLabels.vue | 12 ++---
 src/views/forms/FormControl.vue    |  8 +--
 src/views/forms/InputGroup.vue     | 16 +++---
 src/views/forms/Layout.vue         | 20 +++----
 src/views/forms/Range.vue          |  8 +--
 src/views/forms/Select.vue         |  8 +--
 src/views/forms/Validation.vue     | 16 +++---
 src/views/notifications/Alerts.vue |  8 +--
 src/views/notifications/Badges.vue | 12 ++---
 src/views/notifications/Modals.vue | 20 +++----
 src/views/pages/Login.vue          |  2 +-
 src/views/pages/Page404.vue        |  2 +-
 src/views/pages/Page500.vue        |  2 +-
 src/views/pages/Register.vue       |  2 +-
 src/views/widgets/Widgets.vue      |  8 +--
 34 files changed, 242 insertions(+), 242 deletions(-)

diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue
index e9e5a9fd..addf3053 100644
--- a/src/views/base/Accordion.vue
+++ b/src/views/base/Accordion.vue
@@ -6,7 +6,7 @@
           <strong>Vue Accordion</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Click the accordions below to expand/collapse the accordion content.
           </p>
           <DocsExample href="components/accordion.html">
@@ -62,7 +62,7 @@
           <strong>Vue Accordion</strong> <small>Flush</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>flush</code> to remove the default
             <code>background-color</code>, some borders, and some rounded
             corners to render accordions edge-to-edge with their parent
@@ -121,7 +121,7 @@
           <strong>Vue Accordion</strong> <small>Always open</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>always-open</code> property to make accordion items stay
             open when another item is opened.
           </p>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index f2840008..1052fca3 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -6,7 +6,7 @@
           <strong>Vue Breadcrumb</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The breadcrumb navigation provides links back to each previous page
             the user navigated through and shows the current location in a
             website or an application. You don’t have to add separators, because
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index f838ac75..cb071768 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -6,7 +6,7 @@
           <strong>Card</strong> <small>Example</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Cards are built with as little markup and styles as possible but
             still manage to deliver a bunch of control and customization. Built
             with flexbox, they offer easy alignment and mix well with other
@@ -18,7 +18,7 @@
             as needed. They have no fixed width to start, so they&#39;ll fill
             the full width of its parent.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Below is an example of a basic card with mixed content and a fixed
             width. Cards have no fixed width to start, so they&#39;ll naturally
             fill the full width of its parent element.
@@ -43,7 +43,7 @@
       <CCard class="mb-4">
         <CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use
             it whenever you need a padded section within a card.
           </p>
@@ -61,14 +61,14 @@
           <strong>Card</strong> <small>Titles, text, and links</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Card titles are managed by
             <code>&lt;CCardTitle&gt;</code> component. Identically, links are
             attached and collected next to each other by
             <code>&lt;CCardLink&gt;</code>
             component.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Subtitles are managed by
             <code>&lt;CCardSubtitle&gt;</code> component. If the
             <code>&lt;CCardTitle&gt;</code> also, the
@@ -80,7 +80,7 @@
             <CCard style="width: 18rem">
               <CCardBody>
                 <CCardTitle>Card title</CCardTitle>
-                <CCardSubtitle class="mb-2 text-medium-emphasis"
+                <CCardSubtitle class="mb-2 text-body-secondary"
                   >Card subtitle</CCardSubtitle
                 >
                 <CCardText>
@@ -99,7 +99,7 @@
       <CCard class="mb-4">
         <CCardHeader> <strong>Card</strong> <small>Images</small> </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             <code>.card-img-top</code> places a picture to the top of the card.
             With <code>.card-text</code>, text can be added to the card. Text
             within <code>.card-text</code> can additionally be styled with the
@@ -125,7 +125,7 @@
           <strong>Card</strong> <small>List groups</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Create lists of content in a card with a flush list group.
           </p>
           <DocsExample href="components/card.html/#list-groups">
@@ -170,7 +170,7 @@
           <strong>Card</strong> <small>Kitchen sink</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Combine and match many content types to build the card you need, or
             throw everything in there. Shown below are image styles, blocks,
             text styles, and a list group—all wrapped in a fixed-width card.
@@ -205,7 +205,7 @@
           <strong>Card</strong> <small>Header and footer</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add an optional header and/or footer within a card.
           </p>
           <DocsExample href="components/card.html/#header-and-footer">
@@ -221,7 +221,7 @@
               </CCardBody>
             </CCard>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Card headers can be styled by adding ex.
             <code>component=&#34;h5&#34;</code>.
           </p>
@@ -266,7 +266,7 @@
                 </CCardText>
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
-              <CCardFooter class="text-medium-emphasis">2 days ago</CCardFooter>
+              <CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
             </CCard>
           </DocsExample>
         </CCardBody>
@@ -276,14 +276,14 @@
       <CCard class="mb-4">
         <CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Cards assume no specific <code>width</code> to start, so they&#39;ll
             be 100% wide unless otherwise stated. You can adjust this as
             required with custom CSS, grid classes, grid Sass mixins, or
             services.
           </p>
           <h3>Using grid markup</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Using the grid, wrap cards in columns and rows as needed.
           </p>
           <DocsExample href="components/card.html/#sizing">
@@ -315,7 +315,7 @@
             </CRow>
           </DocsExample>
           <h3>Using utilities</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use some of
             <a href="https://coreui.io/docs/utilities/sizing/"
               >available sizing utilities</a
@@ -345,7 +345,7 @@
             </CCard>
           </DocsExample>
           <strong>Using custom CSS</strong>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use custom CSS in your stylesheets or as inline styles to set a
             width.
           </p>
@@ -370,7 +370,7 @@
           <strong>Card</strong> <small>Text alignment</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can instantly change the text arrangement of any card—in its
             whole or specific parts—with
             <a href="https://coreui.io/docs/utilities/text/#text-alignment"
@@ -419,7 +419,7 @@
           <strong>Card</strong> <small>Navigation</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our
             <code>&lt;CNav&gt;</code> component.
           </p>
@@ -482,7 +482,7 @@
           <strong>Card</strong> <small>Image caps</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Similar to headers and footers, cards can include top and bottom
             &#34;image caps&#34;—images at the top or bottom of a card.
           </p>
@@ -499,7 +499,7 @@
                       little bit longer.
                     </CCardText>
                     <CCardText>
-                      <small class="text-medium-emphasis"
+                      <small class="text-body-secondary"
                         >Last updated 3 mins ago</small
                       >
                     </CCardText>
@@ -516,7 +516,7 @@
                       little bit longer.
                     </CCardText>
                     <CCardText>
-                      <small class="text-medium-emphasis"
+                      <small class="text-body-secondary"
                         >Last updated 3 mins ago</small
                       >
                     </CCardText>
@@ -535,12 +535,12 @@
           <strong>Card</strong> <small>Card styles</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Cards include various options for customizing their backgrounds,
             borders, and color.
           </p>
           <h3>Background and color</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use <code>color</code> property to change the appearance of a card.
           </p>
           <DocsExample href="components/card.html/#background-and-color">
@@ -584,7 +584,7 @@
             </CRow>
           </DocsExample>
           <h3>Border</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use
             <a href="https://coreui.io/docs/utilities/borders/"
               >border utilities</a
@@ -626,7 +626,7 @@
             </template>
           </DocsExample>
           <h3>Top border</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use
             <a href="https://coreui.io/docs/utilities/borders/"
               >border utilities</a
@@ -676,7 +676,7 @@
           <strong>Card</strong> <small>Card groups</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use card groups to render cards as a single, attached element with
             equal width and height columns. Card groups start off stacked and
             use <code>display: flex;</code> to become attached with uniform
@@ -694,7 +694,7 @@
                     longer.
                   </CCardText>
                   <CCardText>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardText>
@@ -709,7 +709,7 @@
                     additional content.
                   </CCardText>
                   <CCardText>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardText>
@@ -725,7 +725,7 @@
                     content than the first to show that equal height action.
                   </CCardText>
                   <CCardText>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardText>
@@ -733,7 +733,7 @@
               </CCard>
             </CCardGroup>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             When using card groups with footers, their content will
             automatically line up.
           </p>
@@ -750,7 +750,7 @@
                   </CCardText>
                 </CCardBody>
                 <CCardFooter>
-                  <small class="text-medium-emphasis"
+                  <small class="text-body-secondary"
                     >Last updated 3 mins ago</small
                   >
                 </CCardFooter>
@@ -765,7 +765,7 @@
                   </CCardText>
                 </CCardBody>
                 <CCardFooter>
-                  <small class="text-medium-emphasis"
+                  <small class="text-body-secondary"
                     >Last updated 3 mins ago</small
                   >
                 </CCardFooter>
@@ -781,7 +781,7 @@
                   </CCardText>
                 </CCardBody>
                 <CCardFooter>
-                  <small class="text-medium-emphasis"
+                  <small class="text-body-secondary"
                     >Last updated 3 mins ago</small
                   >
                 </CCardFooter>
@@ -797,7 +797,7 @@
           <strong>Card</strong> <small>Grid cards</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use the <code>CRow</code> component and set
             <code>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: * &#125;"</code>
             property to control how many grid columns (wrapped around your
@@ -821,7 +821,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -839,7 +839,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -857,7 +857,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -875,7 +875,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -883,7 +883,7 @@
               </CCol>
             </CRow>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Change it to <code>md="&#123; cols: 3&#125;"</code> and you&#39;ll
             see the fourth card wrap.
           </p>
@@ -901,7 +901,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -919,7 +919,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -937,7 +937,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
@@ -955,7 +955,7 @@
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                       >Last updated 3 mins ago</small
                     >
                   </CCardFooter>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index a8e50be6..3433ec1c 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -6,7 +6,7 @@
           <strong>Vue Carousels</strong> <small>Slide only</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Here’s a carousel with slides
           </p>
           <DocsExample href="components/carousel.html#slides-only">
@@ -29,7 +29,7 @@
           <strong>Vue Carousels</strong> <small>With controls</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Adding in the previous and next controls by
             <code>controls</code> property.
           </p>
@@ -53,7 +53,7 @@
           <strong>Vue Carousels</strong> <small>With indicators</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can attach the indicators to the carousel, lengthwise the
             controls, too.
           </p>
@@ -77,7 +77,7 @@
           <strong>Vue Carousels</strong> <small>With captions</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can add captions to slides with the
             <code>&lt;CCarouselCaption&gt;</code> element within any
             <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
@@ -125,7 +125,7 @@
           <strong>Vue Carousels</strong> <small>Crossfade</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
             animate slides with a fade transition instead of a slide.
           </p>
@@ -149,7 +149,7 @@
           <strong>Vue Carousels</strong> <small>Dark variant</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>dark</code> property to the <code>CCarousel</code> for
             darker controls, indicators, and captions. Controls have been
             inverted from their default white fill with the
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 1e62460d..34d00f96 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -6,7 +6,7 @@
           <strong>Vue Collapse</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can use a link or a button component.
           </p>
           <DocsExample href="components/collapse.html#example">
@@ -34,7 +34,7 @@
           <strong>Vue Collapse</strong> <small> Horizontal</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The collapse plugin also supports horizontal collapsing. Add the
             <code>horizontal</code> property to transition the
             <code>width</code> instead of <code>height</code> and set a
@@ -67,7 +67,7 @@
           <strong>Vue Collapse</strong> <small> multi target</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
           </p>
           <h4 class="mt-4">Toggle multiple targets</h4>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 13933e3f..1cf4cfbb 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -6,7 +6,7 @@
           <strong>Vue List Group</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The default list group is an unordered list with items and the
             proper CSS classes. Build upon it with the options that follow, or
             with your CSS as required.
@@ -29,7 +29,7 @@
           <strong>Vue List Group</strong> <small>Active items</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>active</code> boolean property to a
             <code>&lt;CListGroupItem&gt;</code> to show the current active
             selection.
@@ -52,7 +52,7 @@
           <strong>Vue List Group</strong> <small>Disabled items</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>disabled</code> boolean property to a
             <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
           </p>
@@ -74,7 +74,7 @@
           <strong>Vue List Group</strong> <small>Links and buttons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
             create <em>actionable</em> list group items with hover, disabled,
             and active states by adding
@@ -112,7 +112,7 @@
           <strong>Vue List Group</strong> <small>Flush</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>flush</code> boolean property to remove some borders and
             rounded corners to render list group items edge-to-edge in a parent
             container (e.g., cards).
@@ -135,7 +135,7 @@
           <strong>Vue List Group</strong> <small>Horizontal</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
             list group items from vertical to horizontal across all breakpoints.
             Alternatively, choose a responsive variant
@@ -171,7 +171,7 @@
           <strong>Vue List Group</strong> <small>Contextual classes</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use contextual classes to style list items with a stateful
             background and color.
           </p>
@@ -195,7 +195,7 @@
               >
             </CListGroup>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Contextual classes also work with <code>&lt;a&gt;</code>s or
             <code>&lt;button&gt;</code>s. Note the addition of the hover styles
             here not present in the previous example. Also supported is the
@@ -235,7 +235,7 @@
           <strong>Vue List Group</strong> <small>With badges</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add badges to any list group item to show unread counts, activity,
             and more.
           </p>
@@ -270,7 +270,7 @@
           <strong>Vue List Group</strong> <small>Custom content</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add nearly any HTML within, even for linked list groups like the one
             below, with the help of
             <a href="https://coreui.io/docs/utilities/flex/"
@@ -293,26 +293,26 @@
               <CListGroupItem component="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-medium-emphasis">3 days ago</small>
+                  <small class="text-body-secondary">3 days ago</small>
                 </div>
                 <p class="mb-1">
                   Donec id elit non mi porta gravida at eget metus. Maecenas sed
                   diam eget risus varius blandit.
                 </p>
-                <small class="text-medium-emphasis"
+                <small class="text-body-secondary"
                   >Donec id elit non mi porta.</small
                 >
               </CListGroupItem>
               <CListGroupItem component="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-medium-emphasis">3 days ago</small>
+                  <small class="text-body-secondary">3 days ago</small>
                 </div>
                 <p class="mb-1">
                   Donec id elit non mi porta gravida at eget metus. Maecenas sed
                   diam eget risus varius blandit.
                 </p>
-                <small class="text-medium-emphasis"
+                <small class="text-body-secondary"
                   >Donec id elit non mi porta.</small
                 >
               </CListGroupItem>
@@ -327,7 +327,7 @@
           <strong>Vue List Group</strong> <small>Checkboxes and radios</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Place CoreUI&#39;s checkboxes and radios within list group items and
             customize as needed.
           </p>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 8440b764..652afd87 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -6,7 +6,7 @@
           <strong>Vue Navs</strong> <small>Base navs</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The base <code>.nav</code> component is built with flexbox and
             provide a strong foundation for building all types of navigation
             components. It includes some style overrides (for working with
@@ -29,7 +29,7 @@
               </CNavItem>
             </CNav>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary 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
@@ -54,7 +54,7 @@
           <strong>Vue Navs</strong> <small>Horizontal alignment</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Change the horizontal alignment of your nav with
             <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
               flexbox utilities
@@ -62,7 +62,7 @@
             . By default, navs are left-aligned, but you can easily change them
             to center or right aligned.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Centered with <code>.justify-content-center</code>:
           </p>
           <DocsExample href="components/nav.html#horizontal-alignment">
@@ -81,7 +81,7 @@
               </CNavItem>
             </CNav>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Right-aligned with <code>.justify-content-end</code>:
           </p>
           <DocsExample href="components/nav.html#base-nav">
@@ -109,7 +109,7 @@
           <strong>Vue Navs</strong> <small>Vertical</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Stack your navigation by changing the flex item direction with the{'
             '}
             <code>.flex-column</code> utility. Need to stack them on some
@@ -141,7 +141,7 @@
           <strong>Vue Navs</strong> <small>Tabs</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Takes the basic nav from above and adds the
             <code>variant=&#34;tabs&#34;</code> class to generate a tabbed
             interface
@@ -171,7 +171,7 @@
           <strong>Vue Navs</strong> <small>Pills</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Take that same HTML, but use
             <code>variant=&#34;pills&#34;</code> instead:
           </p>
@@ -200,7 +200,7 @@
           <strong>Vue Navs</strong> <small>Fill and justify</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary 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
@@ -223,7 +223,7 @@
               </CNavItem>
             </CNav>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             For equal-width elements, use
             <code>layout=&#34;justified&#34;</code>. All horizontal space will
             be occupied by nav links, but unlike the .nav-fill above, every nav
@@ -254,7 +254,7 @@
           <strong>Vue Navs</strong> <small>Working with flex utilities</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you need responsive nav variations, consider using a series of{'
             '}
             <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 4117743d..14c4ecbc 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -6,7 +6,7 @@
           <strong>Vue Pagination</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             We use a large block of connected links for our pagination, making
             links hard to miss and easily scalable—all while providing large hit
             areas. Pagination is built with list HTML elements so screen readers
@@ -14,7 +14,7 @@
             <code>&lt;nav&gt;</code> element to identify it as a navigation
             section to screen readers and other assistive technologies.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             In addition, as pages likely have more than one such navigation
             section, it&#39;s advisable to provide a descriptive
             <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect
@@ -40,7 +40,7 @@
           <strong>Vue Pagination</strong> <small>Working with icons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Looking to use an icon or symbol in place of text for some
             pagination links? Be sure to provide proper screen reader support
             with <code>aria</code> attributes.
@@ -68,12 +68,12 @@
           <small>Disabled and active states</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Pagination links are customizable for different circumstances. Use
             <code>disabled</code> for links that appear un-clickable and
             <code>.active</code> to indicate the current page.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             While the <code>disabled</code> prop uses
             <code>pointer-events: none</code> to <em>try</em> to disable the
             link functionality of <code>&lt;a&gt;</code>s, that CSS property is
@@ -106,7 +106,7 @@
           <strong>Vue Pagination</strong> <small>Sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Fancy larger or smaller pagination? Add
             <code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
             additional sizes.
@@ -138,7 +138,7 @@
           <strong>Vue Pagination</strong> <small>Alignment</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Change the alignment of pagination components with
             <a href="https://coreui.io/docs/utilities/flex/"
               >flexbox utilities</a
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
index f8a8f5bd..723b68be 100644
--- a/src/views/base/Placeholders.vue
+++ b/src/views/base/Placeholders.vue
@@ -6,7 +6,7 @@
           <strong>Vue Placeholder</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             In the example below, we take a typical card component and recreate
             it with placeholders applied to create a "loading card". Size and
             proportions are the same between the two.
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index f10d0a3c..1127cf3c 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -29,7 +29,7 @@
           <strong>Vue Popover</strong> <small>Four directions</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Four options are available: top, right, bottom, and left aligned.
             Directions are mirrored when using CoreUI for Vue in RTL.
           </p>
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index 200b2231..ff300e5a 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -6,7 +6,7 @@
           <strong>Vue Progress</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Progress components are built with two HTML elements, some CSS to
             set the width, and a few attributes. We don&#39;tuse
             <a
@@ -43,7 +43,7 @@
           <strong>Vue Progress</strong> <small>Labels</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add labels to your progress bars by placing text within the
             <code>&lt;CProgressBar&gt;</code>.
           </p>
@@ -61,7 +61,7 @@
           <strong>Vue Progress</strong> <small>Height</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             We only set a <code>height</code> value on the
             <code>&lt;CProgress&gt;</code>, so if you change that value the
             inner <code>&lt;CProgressBar&gt;</code> will automatically resize
@@ -84,7 +84,7 @@
           <strong>Vue Progress</strong> <small>Backgrounds</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use <code>color</code> prop to change the appearance of individual
             progress bars.
           </p>
@@ -111,7 +111,7 @@
           <strong>Vue Progress</strong> <small>Multiple bars</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Include multiple progress bars in a progress component if you need.
           </p>
           <DocsExample href="components/progress.html#multiple-bars">
@@ -130,7 +130,7 @@
           <strong>Vue Progress</strong> <small>Striped</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>variant=&#34;striped&#34;</code> to any
             <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
             over the progress bar&#39;s background color.
@@ -158,7 +158,7 @@
           <strong>Vue Progress</strong> <small>Animated stripes</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The striped gradient can also be animated. Add
             <code>animated</code> property to
             <code>&lt;CProgressBar&gt;</code> to animate the stripes right to
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 93658024..8c366349 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -6,13 +6,13 @@
           <strong>Vue Spinner</strong> <small>Border</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use the border spinners for a lightweight loading indicator.
           </p>
           <DocsExample href="components/spinner.html">
             <CSpinner />
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The border spinner uses <code>currentColor</code> for its
             <code>border-color</code>. You can use any of our text color
             utilities on the standard spinner.
@@ -36,14 +36,14 @@
           <strong>Vue Spinner</strong> <small>Growing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you don&#39;tfancy a border spinner, switch to the grow spinner.
             While it doesn&#39;t technically spin, it does repeatedly grow!
           </p>
           <DocsExample href="components/spinner.html#growing-spinner">
             <CSpinner variant="grow" />
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Once again, this spinner is built with <code>currentColor</code>, so
             you can easily change its appearance. Here it is in blue, along with
             the supported variants.
@@ -67,7 +67,7 @@
           <strong>Vue Spinner</strong> <small>Size</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>size=&#34;sm&#34;</code> property to make a smaller
             spinner that can quickly be used within other components.
           </p>
@@ -84,7 +84,7 @@
           <strong>Vue Spinner</strong> <small>Buttons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use spinners within buttons to indicate an action is currently
             processing or taking place. You may also swap the text out of the
             spinner element and utilize button text as needed.
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index b0c8acef..7247135b 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -6,7 +6,7 @@
           <strong>Vue Table</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Using the most basic table CoreUI, here&#39;s how
             <code>&lt;CTable&gt;</code>-based tables look in CoreUI.
           </p>
@@ -50,7 +50,7 @@
           <strong>Vue Table</strong> <small>Variants</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use contextual classes to color tables, table rows or individual
             cells.
           </p>
@@ -121,7 +121,7 @@
           <strong>Vue Table</strong> <small>Striped rows</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use <code>striped</code> property to add zebra-striping to any table
             row within the <code>&lt;CTableBody&gt;</code>.
           </p>
@@ -156,7 +156,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             These classes can also be added to table variants:
           </p>
           <DocsExample href="components/table.html#striped-rows">
@@ -230,7 +230,7 @@
           <strong>Vue Table</strong> <small>Hoverable rows</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use <code>hover</code> property to enable a hover state on table
             rows within a <code>&lt;CTableBody&gt;</code>.
           </p>
@@ -411,7 +411,7 @@
           <strong>Vue Table</strong> <small>Bordered tables</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>bordered</code> property for borders on all sides of the
             table and cells.
           </p>
@@ -446,7 +446,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
               Border color utilities
             </a>
@@ -492,7 +492,7 @@
           <strong>Vue Table</strong> <small>Tables without borders</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>borderless</code> property for a table without borders.
           </p>
           <DocsExample href="components/table.html#tables-without-borders">
@@ -566,7 +566,7 @@
           <strong>Vue Table</strong> <small>Small tables</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>small</code> property to make any
             <code>&lt;CTable&gt;</code> more compact by cutting all cell
             <code>padding</code> in half.
@@ -611,7 +611,7 @@
           <strong>Vue Table</strong> <small>Vertical alignment</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Table cells of <code>&lt;CTableHead&gt;</code> are always vertical
             aligned to the bottom. Table cells in
             <code>&lt;CTableBody&gt;</code> inherit their alignment from
@@ -705,7 +705,7 @@
           <strong>Vue Table</strong> <small>Nesting</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Border styles, active styles, and table variants are not inherited
             by nested tables.
           </p>
@@ -779,7 +779,7 @@
           <strong>Vue Table</strong> <small>Table head</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Similar to tables and dark tables, use the modifier prop
             <code>color=&#34;light&#34;</code> or
             <code>color=&#34;dark&#34;</code> to make
@@ -905,7 +905,7 @@
           <strong>Vue Table</strong> <small>Captions</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             A <code>&lt;CTableCaption&gt;</code> functions like a heading for a
             table. It helps users with screen readers to find a table and
             understand what it&#39;s about and decide if they want to read it.
@@ -943,7 +943,7 @@
               </CTableBody>
             </CTable>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can also put the <code>&lt;CTableCaption&gt;</code> on the top
             of the table with <code>caption=&#34;top&#34;</code>.
           </p>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index f7195edf..31bc9841 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -6,11 +6,11 @@
           <strong>Vue Tooltips</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Hover over the links below to see tooltips:
           </p>
           <DocsExample href="components/tooltip.html">
-            <p class="text-medium-emphasis">
+            <p class="text-body-secondary">
               Tight pants next level keffiyeh
               <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
               haven't heard of them. Photo booth beard raw denim letterpress
@@ -26,7 +26,7 @@
               freegan cred raw denim single-origin coffee viral.
             </p>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Hover over the links below to see tooltips:
           </p>
           <DocsExample href="components/tooltip.html">
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index ecd83ae0..d1b97bf5 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -269,7 +269,7 @@
           <strong>Vue Button Group</strong> <span>Nesting</span>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Put a <code>&lt;CButtonGroup&gt;</code> inside another
             <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
             combined with a series of buttons.
@@ -302,7 +302,7 @@
           <strong>Vue Button Group</strong> <span>Vertical variation</span>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Create a set of buttons that appear vertically stacked rather than
             horizontally.
             <strong>Split button dropdowns are not supported here.</strong>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 4dbd6bc7..b99174e9 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -6,7 +6,7 @@
           <strong>Vue Button</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             CoreUI includes a bunch of predefined buttons components, each
             serving its own semantic purpose. Buttons show what action will
             happen when the user clicks or touches it. CoreUI buttons are used
@@ -57,7 +57,7 @@
           <strong>Vue Button</strong> <small>with icons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can combine button with our
             <a href="https://icons.coreui.io/">CoreUI Icons</a>.
           </p>
@@ -107,14 +107,14 @@
           <strong>Vue Button</strong> <small>Button components</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The <code>&lt;CButton&gt;</code> component are designed for
             <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or
             <code>&lt;input&gt;</code>
             elements (though some browsers may apply a slightly different
             rendering).
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you&#39;re using <code>&lt;CButton&gt;</code> component as
             <code>&lt;a&gt;</code> elements that are used to trigger
             functionality ex. collapsing content, these links should be given a
@@ -154,7 +154,7 @@
           <strong>Vue Button</strong> <small>outline</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you need a button, but without the strong background colors. Set
             <code>variant=&#34;outline&#34;</code> prop to remove all background
             colors.
@@ -205,7 +205,7 @@
           <strong>Vue Button</strong> <small>ghost</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you need a ghost variant of button, set
             <code>variant=&#34;ghost&#34;</code> prop to remove all background
             colors.
@@ -256,7 +256,7 @@
           <strong>Vue Button</strong> <small>Sizes</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
             <code>size=&#34;sm&#34;</code> for additional sizes.
           </p>
@@ -333,7 +333,7 @@
           <strong>Vue Button</strong> <small>Disabled state</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the <code>disabled</code> boolean prop to any
             <code>&lt;CButton&gt;</code>
             component to make buttons look inactive. Disabled button has
@@ -346,11 +346,11 @@
             </CButton>
             <CButton color="secondary" size="lg" disabled> Button </CButton>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Disabled buttons using the <code>&lt;a&gt;</code> component act a
             little different:
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             <code>&lt;a&gt;</code>s don&#39;tsupport the
             <code>disabled</code> attribute, so CoreUI has to add
             <code>.disabled</code> class to make buttons look inactive. CoreUI
@@ -381,7 +381,7 @@
           <strong>Vue Button</strong> <small>Block buttons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Create buttons that span the full width of a parent—by using
             utilities.
           </p>
@@ -391,7 +391,7 @@
               <CButton color="primary">Button</CButton>
             </div>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Here we create a responsive variation, starting with vertically
             stacked buttons until the <code>md</code> breakpoint, where
             <code>.d-md-block</code> replaces the <code>.d-grid</code> class,
@@ -404,7 +404,7 @@
               <CButton color="primary">Button</CButton>
             </div>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can adjust the width of your block buttons with grid column
             width classes. For example, for a half-width &#34;block button&#34;,
             use <code>.col-6</code>. Center it horizontally with
@@ -416,7 +416,7 @@
               <CButton color="primary">Button</CButton>
             </div>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Additional utilities can be used to adjust the alignment of buttons
             when horizontal. Here we&#39;ve taken our previous responsive
             example and added some flex utilities and a margin utility on the
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index fb248b6d..8b0b93b6 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -6,7 +6,7 @@
           <strong>Vue Dropdown</strong> <small>Single button</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Here&#39;s how you can put them to work with either
             <code>&lt;button&gt;</code>
             elements:
@@ -23,7 +23,7 @@
               </CDropdownMenu>
             </CDropdown>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The best part is you can do this with any button variant, too:
           </p>
           <DocsExample href="components/dropdown.html#single-button">
@@ -61,13 +61,13 @@
           <strong>Vue Dropdown</strong> <small>Split button</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Similarly, create split button dropdowns with virtually the same
             markup as single button dropdowns, but with the addition of boolean
             prop <code>split</code> for proper spacing around the dropdown
             caret.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             We use this extra class to reduce the horizontal
             <code>padding</code> on either side of the caret by 25% and remove
             the <code>margin-left</code> that&#39;s attached for normal button
@@ -113,7 +113,7 @@
           <strong>Vue Dropdown</strong> <small>Sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Button dropdowns work with buttons of all sizes, including default
             and split dropdown buttons.
           </p>
@@ -180,7 +180,7 @@
           <strong>Vue Dropdown</strong> <small>Single button</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Opt into darker dropdowns to match a dark navbar or custom style by
             set
             <code>dark</code> property. No changes are required to the dropdown
@@ -200,7 +200,7 @@
               </CDropdownMenu>
             </CDropdown>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             And putting it to use in a navbar:
           </p>
           <DocsExample href="components/dropdown.html#dark-dropdowns">
@@ -251,7 +251,7 @@
           <strong>Vue Dropdown</strong> <small>Dropup</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Trigger dropdown menus above elements by adding
             <code>direction=&#34;dropup&#34;</code> to the
             <code>&lt;CDropdown&gt;</code>
@@ -289,7 +289,7 @@
           <strong>Vue Dropdown</strong> <small>Dropright</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Trigger dropdown menus at the right of the elements by adding
             <code>direction=&#34;dropend&#34;</code> to the
             <code>&lt;CDropdown&gt;</code>
@@ -327,7 +327,7 @@
           <strong>Vue Dropdown</strong> <small>Dropleft</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Trigger dropdown menus at the left of the elements by adding
             <code>direction=&#34;dropstart&#34;</code> to the
             <code>&lt;CDropdown&gt;</code>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index a9cfe60a..e654f717 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -8,7 +8,7 @@
             <CRow>
               <CCol :sm="5">
                 <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-                <div class="small text-medium-emphasis">January 2021</div>
+                <div class="small text-body-secondary">January 2021</div>
               </CCol>
               <CCol :sm="7" class="d-none d-md-block">
                 <CButton color="primary" class="float-end">
@@ -36,7 +36,7 @@
           <CCardFooter>
             <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
               <CCol class="mb-sm-2 mb-0">
-                <div class="text-medium-emphasis">Visits</div>
+                <div class="text-body-secondary">Visits</div>
                 <strong>29.703 Users (40%)</strong>
                 <CProgress
                   class="mt-2"
@@ -47,7 +47,7 @@
                 />
               </CCol>
               <CCol class="mb-sm-2 mb-0 d-md-down-none">
-                <div class="text-medium-emphasis">Unique</div>
+                <div class="text-body-secondary">Unique</div>
                 <strong>24.093 Users (20%)</strong>
                 <CProgress
                   class="mt-2"
@@ -58,7 +58,7 @@
                 />
               </CCol>
               <CCol class="mb-sm-2 mb-0">
-                <div class="text-medium-emphasis">Pageviews</div>
+                <div class="text-body-secondary">Pageviews</div>
                 <strong>78.706 Views (60%)</strong>
                 <CProgress
                   class="mt-2"
@@ -69,7 +69,7 @@
                 />
               </CCol>
               <CCol class="mb-sm-2 mb-0">
-                <div class="text-medium-emphasis">New Users</div>
+                <div class="text-body-secondary">New Users</div>
                 <strong>22.123 Users (80%)</strong>
                 <CProgress
                   class="mt-2"
@@ -80,7 +80,7 @@
                 />
               </CCol>
               <CCol class="mb-sm-2 mb-0 d-md-down-none">
-                <div class="text-medium-emphasis">Bounce Rate</div>
+                <div class="text-body-secondary">Bounce Rate</div>
                 <strong>Average Rate (40.15%)</strong>
                 <CProgress class="mt-2" :value="40" thin :precision="1" />
               </CCol>
@@ -102,7 +102,7 @@
                     <div
                       class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
                     >
-                      <div class="text-medium-emphasis small">New Clients</div>
+                      <div class="text-body-secondary small">New Clients</div>
                       <div class="fs-5 fw-semibold">9,123</div>
                     </div>
                   </CCol>
@@ -110,7 +110,7 @@
                     <div
                       class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
                     >
-                      <div class="text-medium-emphasis small">
+                      <div class="text-body-secondary small">
                         Recurring Clients
                       </div>
                       <div class="fs-5 fw-semibold">22,643</div>
@@ -124,7 +124,7 @@
                   class="progress-group mb-4"
                 >
                   <div class="progress-group-prepend">
-                    <span class="text-medium-emphasis small">{{
+                    <span class="text-body-secondary small">{{
                       item.title
                     }}</span>
                   </div>
@@ -140,7 +140,7 @@
                     <div
                       class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
                     >
-                      <div class="text-medium-emphasis small">Pageviews</div>
+                      <div class="text-body-secondary small">Pageviews</div>
                       <div class="fs-5 fw-semibold">78,623</div>
                     </div>
                   </CCol>
@@ -148,7 +148,7 @@
                     <div
                       class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
                     >
-                      <div class="text-medium-emphasis small">Organic</div>
+                      <div class="text-body-secondary small">Organic</div>
                       <div class="fs-5 fw-semibold">49,123</div>
                     </div>
                   </CCol>
@@ -181,7 +181,7 @@
                     <span class="title">{{ item.title }}</span>
                     <span class="ms-auto fw-semibold">
                       {{ item.value }}
-                      <span class="text-medium-emphasis small"
+                      <span class="text-body-secondary small"
                         >({{ item.percent }}%)</span
                       >
                     </span>
@@ -221,7 +221,7 @@
                   </CTableDataCell>
                   <CTableDataCell>
                     <div>{{ item.user.name }}</div>
-                    <div class="small text-medium-emphasis text-nowrap">
+                    <div class="small text-body-secondary text-nowrap">
                       <span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
                       {{ item.user.registered }}
                     </div>
@@ -239,7 +239,7 @@
                         <strong>{{ item.usage.value }}%</strong>
                       </div>
                       <div class="ms-1">
-                        <small class="text-medium-emphasis">
+                        <small class="text-body-secondary">
                           {{ item.usage.period }}
                         </small>
                       </div>
@@ -254,7 +254,7 @@
                     <CIcon size="xl" :name="item.payment.icon" />
                   </CTableDataCell>
                   <CTableDataCell>
-                    <div class="small text-medium-emphasis">Last login</div>
+                    <div class="small text-body-secondary">Last login</div>
                     <div class="fw-semibold text-nowrap">
                       {{ item.activity }}
                     </div>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index b4e86fa9..b41d44ca 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -23,7 +23,7 @@
           <strong>Vue Checkbox</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the <code>disabled</code> attribute and the associated
             <code>&lt;label&gt;</code>s are automatically styled to match with a
             lighter color to help indicate the input&#39;s state.
@@ -41,7 +41,7 @@
           <strong>Vue Radio</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the <code>disabled</code> attribute and the associated
             <code>&lt;label&gt;</code>s are automatically styled to match with a
             lighter color to help indicate the input&#39;s state.
@@ -96,7 +96,7 @@
           <strong>Vue Switches</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             A switch has the markup of a custom checkbox but uses the
             <code>switch</code> boolean properly to render a toggle switch.
             Switches also support the <code>disabled</code> attribute.
@@ -158,7 +158,7 @@
           <small>Default layout (stacked)</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             By default, any number of checkboxes and radios that are immediate
             sibling will be vertically stacked and appropriately spaced.
           </p>
@@ -200,7 +200,7 @@
           <strong>Vue Checks and Radios</strong> <small>Inline</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Group checkboxes or radios on the same horizontal row by adding
             <code>inline</code> boolean property to any
             <code>&lt;CFormCheck&gt;</code>.
@@ -252,7 +252,7 @@
           <strong>Vue Checks and Radios</strong> <small>Without labels</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Remember to still provide some form of accessible name for assistive
             technologies (for instance, using <code>aria-label</code>).
           </p>
@@ -279,7 +279,7 @@
           <strong>Toggle buttons</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Create button-like checkboxes and radio buttons by using
             <code>button</code> boolean property on the
             <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
@@ -349,7 +349,7 @@
             />
           </DocsExample>
           <h3>Outlined styles</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Different variants of button, such at the various outlined styles,
             are supported.
           </p>
diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue
index 7d2c452e..0ecc2ae9 100644
--- a/src/views/forms/FloatingLabels.vue
+++ b/src/views/forms/FloatingLabels.vue
@@ -6,7 +6,7 @@
           <strong>Vue Floating labels</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Wrap a pair of <code>&lt;CFormInput&gt;</code> and
             <code>&lt;CFormLabel&gt;</code> elements in
             <code>CFormFloating</code> to enable floating labels with textual
@@ -34,7 +34,7 @@
               <CFormLabel for="floatingPassword">Password</CFormLabel>
             </CFormFloating>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             When there&#39;s a <code>value</code> already defined,
             <code>&lt;CFormLabel&gt;</code>
             s will automatically adjust to their floated position.
@@ -59,7 +59,7 @@
           <strong>Vue Floating labels</strong> <small>Textareas</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
             height as <code>&lt;CFormInput&gt;</code>s.
           </p>
@@ -72,7 +72,7 @@
               <CFormLabel for="floatingTextarea">Comments</CFormLabel>
             </CFormFloating>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
             do not use the <code>rows</code> attribute. Instead, set an explicit
             <code>height</code> (either inline or via custom CSS).
@@ -96,7 +96,7 @@
           <strong>Vue Floating labels</strong> <small>Selects</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
             available on <code>&lt;CFormSelect&gt;</code>s. They work in the
             same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
@@ -130,7 +130,7 @@
           <strong>Vue Floating labels</strong> <small>Layout</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             When working with the CoreUI for Bootstrap grid system, be sure to
             place form elements within column classes.
           </p>
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index 560a6adc..c36e6d00 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -38,7 +38,7 @@
           <strong>Vue Form Control</strong> <small>Sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Set heights using <code>size</code> property like
             <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
           </p>
@@ -72,7 +72,7 @@
           <strong>Vue Form Control</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
@@ -102,7 +102,7 @@
           <strong>Vue Form Control</strong> <small>Readonly</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             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
@@ -125,7 +125,7 @@
           <strong>Vue Form Control</strong> <small>Readonly plain text</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you want to have <code>&lt;input readonly&gt;</code> elements in
             your form styled as plain text, use the
             <code>plain-text</code> boolean property to remove the default form
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 7014beff..7322fc69 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -6,7 +6,7 @@
           <strong>Vue Input group</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Place one add-on or button on either side of an input. You may also
             place one on both sides of an input. Remember to place
             <code>&lt;CFormLabel&gt;</code>s outside the input group.
@@ -59,7 +59,7 @@
           <strong>Vue Input group</strong> <small>Wrapping</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Input groups wrap by default via <code>flex-wrap: wrap</code> in
             order to accommodate custom form field validation within an input
             group. You may disable this with <code>.flex-nowrap</code>.
@@ -83,13 +83,13 @@
           <strong>Vue Input group</strong> <small>Sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the relative form sizing classes to the
             <code>&lt;CInputGroup&gt;</code> itself and contents within will
             automatically resize—no need for repeating the form control size
             classes on each element.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             <strong
               >Sizing on the individual input group elements
               isn&#39;tsupported.</strong
@@ -129,7 +129,7 @@
           <strong>Vue Input group</strong> <small>Checkboxes and radios</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Place any checkbox or radio option within an input group&#39;s addon
             instead of text.
           </p>
@@ -164,7 +164,7 @@
           <strong>Vue Input group</strong> <small>Multiple inputs</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             While multiple <code>&lt;CFormInput&gt;</code>s are supported
             visually, validation styles are only available for input groups with
             a single <code>&lt;CFormInput&gt;</code>.
@@ -185,7 +185,7 @@
           <strong>Vue Input group</strong> <small>Multiple addons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Multiple add-ons are supported and can be mixed with checkbox and
             radio input versions..
           </p>
@@ -214,7 +214,7 @@
           <strong>Vue Input group</strong> <small>Button addons</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Multiple add-ons are supported and can be mixed with checkbox and
             radio input versions..
           </p>
diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue
index 4e508ab8..aae8cc4f 100644
--- a/src/views/forms/Layout.vue
+++ b/src/views/forms/Layout.vue
@@ -6,7 +6,7 @@
           <strong>Layout</strong> <small>Form grid</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             More complex forms can be built using our grid classes. Use these
             for form layouts that require multiple columns, varied widths, and
             additional alignment options.
@@ -30,7 +30,7 @@
           <strong>Layout</strong> <small>Gutters</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             By adding
             <a href="https://coreui.io/docs/layout/gutters/"
               >gutter modifier classes</a
@@ -48,7 +48,7 @@
               </CCol>
             </CRow>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             More complex layouts can also be created with the grid system.
           </p>
           <DocsExample href="forms/layout.html#gutters">
@@ -108,7 +108,7 @@
           <strong>Layout</strong> <small>Horizontal form</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Create horizontal forms with the grid by adding the
             <code>.row</code> class to form groups and using the
             <code>.col-*-*</code> classes to specify the width of your labels
@@ -116,7 +116,7 @@
             <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically
             centered with their associated form controls.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             At times, you maybe need to use margin or padding utilities to
             create that perfect alignment you need. For example, we&#39;ve
             removed the <code>padding-top</code> on our stacked radio inputs
@@ -192,7 +192,7 @@
           <strong>Layout</strong> <small>Horizontal form label sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Be sure to use <code>.col-form-label-sm</code> or
             <code>.col-form-label-lg</code> to your
             <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to
@@ -254,7 +254,7 @@
           <strong>Layout</strong> <small>Column sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             As shown in the previous examples, our grid system allows you to
             place any number of
             <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>.
@@ -286,7 +286,7 @@
           <strong>Layout</strong> <small>Auto-sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The example below uses a flexbox utility to vertically center the
             contents and changes
             <code>&lt;CCol&gt;</code> to
@@ -337,7 +337,7 @@
               </CCol>
             </CForm>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can then remix that once again with size-specific column
             classes.
           </p>
@@ -396,7 +396,7 @@
           <strong>Layout</strong> <small>Inline forms</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create
             horizontal layouts. By adding
             <a href="https://coreui.io/docs/layout/gutters/"
diff --git a/src/views/forms/Range.vue b/src/views/forms/Range.vue
index cdabaf71..58d6b90b 100644
--- a/src/views/forms/Range.vue
+++ b/src/views/forms/Range.vue
@@ -4,7 +4,7 @@
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Create custom
             <code>&lt;input type=&#34;range&#34;&gt;</code> controls with
             <code>&lt;CFormRange&gt;</code>.
@@ -22,7 +22,7 @@
           <strong>Vue Range</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
@@ -39,7 +39,7 @@
           <strong>Vue Range</strong> <small>Min and max</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Range inputs have implicit values for <code>min</code> and
             <code>max</code>— <code>0</code> and <code>100</code>, respectively.
             You may specify new values for those using the <code>min</code> and
@@ -58,7 +58,7 @@
           <strong>Vue Range</strong> <small>Steps</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             By default, range inputs &#34;snap&#34; to integer values. To change
             this, you can specify a <code>step</code> value. In the example
             below, we double the number of steps by using
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index 765cddfd..96a75f78 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -23,7 +23,7 @@
           <strong>Vue Select</strong> <small>Sizing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You may also choose from small and large custom selects to match our
             similarly sized text inputs.
           </p>
@@ -49,7 +49,7 @@
               <option value="3">Three</option>
             </CFormSelect>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             The <code>multiple</code> attribute is also supported:
           </p>
           <DocsExample href="forms/select.html#sizing">
@@ -64,7 +64,7 @@
               <option value="3">Three</option>
             </CFormSelect>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             As is the <code>html-size</code> property:
           </p>
           <DocsExample href="forms/select.html#sizing">
@@ -88,7 +88,7 @@
           <strong>Vue Select</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add the <code>disabled</code> boolean attribute on a select to give
             it a grayed out appearance and remove pointer events.
           </p>
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index 94bc5f67..905325ed 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -6,7 +6,7 @@
           <strong>Validation</strong> <small>Custom styles</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             For custom CoreUI form validation messages, you&#39;ll need to add
             the
             <code>novalidate</code> boolean property to your
@@ -17,7 +17,7 @@
             attempting to submit, you&#39;ll see the <code>:invalid</code> and
             <code>:valid</code> styles applied to your form controls.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Custom feedback styles apply custom colors, borders, focus styles,
             and background icons to better communicate feedback.
           </p>
@@ -102,14 +102,14 @@
           <strong>Validation</strong> <small>Browser defaults</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Not interested in custom validation feedback messages or writing
             JavaScript to change form behaviors? All good, you can use the
             browser defaults. Try submitting the form below. Depending on your
             browser and OS, you&#39;ll see a slightly different style of
             feedback.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             While these feedback styles cannot be styled with CSS, you can still
             customize the feedback text through JavaScript.
           </p>
@@ -195,13 +195,13 @@
           <strong>Validation</strong> <small>Server side</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             We recommend using client-side validation, but in case you require
             server-side validation, you can indicate invalid and valid form
             fields with <code>invalid</code> and <code>valid</code> boolean
             properties.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             For invalid fields, ensure that the invalid feedback/error message
             is associated with the relevant form field using
             <code>aria-describedby</code> (noting that this attribute allows
@@ -309,7 +309,7 @@
           <strong>Validation</strong> <small>Supported elements</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Validation styles are available for the following form controls and
             components:
           </p>
@@ -399,7 +399,7 @@
           <strong>Validation</strong> <small>Tooltips</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If your form layout allows it, you can swap the text for the tooltip
             to display validation feedback in a styled tooltip. Be sure to have
             a parent with
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index be809b85..1c9ebcc7 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -6,7 +6,7 @@
           <strong>Vue Alert</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Vue Alert is prepared for any length of text, as well as an optional
             close button. For a styling, use one of the
             <strong>required</strong> contextual <code>color</code> props (e.g.,
@@ -45,7 +45,7 @@
           <strong>Vue Alert</strong> <small>Link color</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Use the <code>&lt;CAlertLink&gt;</code> component to immediately
             give matching colored links inside any alert.
           </p>
@@ -100,7 +100,7 @@
           <strong>Vue Alert</strong> <small>Additional content</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Alert can also incorporate supplementary components &amp; elements
             like heading, paragraph, and divider.
           </p>
@@ -128,7 +128,7 @@
           <strong>Vue Alert</strong> <small>Dismissing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Alerts can also be easily dismissed. Just add the
             <code>dismissible</code> prop.
           </p>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index a07988b0..d50b4e65 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -6,7 +6,7 @@
           <strong>Vue Badges</strong> <small>Dismissing</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Bootstrap badge scale to suit the size of the parent element by
             using relative font sizing and <code>em</code> units.
           </p>
@@ -18,7 +18,7 @@
             <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
             <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Badges can be used as part of links or buttons to provide a counter.
           </p>
           <DocsExample href="components/badge.html">
@@ -26,11 +26,11 @@
               Notifications <CBadge color="secondary">4</CBadge>
             </CButton>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Remark that depending on how you use them, badges may be complicated
             for users of screen readers and related assistive technologies.
           </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Unless the context is clear, consider including additional context
             with a visually hidden piece of additional text.
           </p>
@@ -49,7 +49,7 @@
           <strong>Vue Badges</strong> <small>Contextual variations</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add any of the below-mentioned <code>color</code> props to modify
             the presentation of a badge.
           </p>
@@ -69,7 +69,7 @@
           <strong>Vue Badges</strong> <small>Pill badges</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
             badges rounded.
           </p>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index cffc5a92..acc0e57f 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -6,7 +6,7 @@
           <strong>Vue Modals</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Below is a static modal example (meaning its
             <code>position</code> and <code>display</code> have been
             overridden). Included are the modal header, modal body (required for
@@ -40,7 +40,7 @@
           <strong>Vue Modal</strong> <small>Live demo</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Toggle a working modal demo by clicking the button below. It will
             slide down and fade in from the top of the page.
           </p>
@@ -99,7 +99,7 @@
           <strong>Vue Modal</strong> <small>Static backdrop</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             If you set <code>backdrop</code> property to <code>static</code>,
             your modal will behave as though the backdrop is static, meaning it
             will not close when clicking outside it. Click the button below to
@@ -161,7 +161,7 @@
           <strong>Vue Modal</strong> <small>Scrolling long content</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             When modals become too long for the user's viewport or device, they
             scroll independent of the page itself. Try the demo below to see
             what we mean.
@@ -294,7 +294,7 @@
               </CModalBody>
             </CModal>
           </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             You can also create a scrollable modal that allows scroll the modal
             body by adding
             <code>scrollable</code> prop.
@@ -437,7 +437,7 @@
           <strong>Vue Modal</strong> <small>Vertically centered</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Add <code>alignment=&#34;center&#34;</code> to
             <code>&lt;CModal&gt;</code> to vertically center the modal.
           </p>
@@ -550,7 +550,7 @@
           <strong>Vue Modal</strong> <small>Tooltips and popovers</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             <code>&lt;CTooltips&gt;</code> and
             <code>&lt;CPopovers&gt;</code> can be placed within modals as
             needed. When modals are closed, any tooltips and popovers within are
@@ -629,7 +629,7 @@
           <strong>Vue Modal</strong> <small>Optional sizes</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Modals have three optional sizes, available via modifier classes to
             be placed on a
             <code>&lt;CModal&gt;</code>. These sizes kick in at certain
@@ -655,7 +655,7 @@
               </tr>
               <tr>
                 <td>Default</td>
-                <td class="text-medium-emphasis">None</td>
+                <td class="text-body-secondary">None</td>
                 <td>
                   <code>500px</code>
                 </td>
@@ -781,7 +781,7 @@
           <strong>Vue Modal</strong> <small>Fullscreen Modal</small>
         </CCardHeader>
         <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
             Another override is the option to pop up a modal that covers the
             user viewport, available via property <code>fullscrean</code>.
           </p>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index aabc4710..11075f06 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -8,7 +8,7 @@
               <CCardBody>
                 <CForm>
                   <h1>Login</h1>
-                  <p class="text-medium-emphasis">Sign In to your account</p>
+                  <p class="text-body-secondary">Sign In to your account</p>
                   <CInputGroup class="mb-3">
                     <CInputGroupText>
                       <CIcon icon="cil-user" />
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index 11b4900e..d07771a1 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -6,7 +6,7 @@
           <div class="clearfix">
             <h1 class="float-start display-3 me-4">404</h1>
             <h4 class="pt-3">Oops! You're lost.</h4>
-            <p class="text-medium-emphasis float-start">
+            <p class="text-body-secondary float-start">
               The page you are looking for was not found.
             </p>
           </div>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index 9c80396e..63dd18c6 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -6,7 +6,7 @@
           <span class="clearfix">
             <h1 class="float-start display-3 me-4">500</h1>
             <h4 class="pt-3">Houston, we have a problem!</h4>
-            <p class="text-medium-emphasis float-start">
+            <p class="text-body-secondary float-start">
               The page you are looking for is temporarily unavailable.
             </p>
           </span>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index 51708129..d76232f1 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -7,7 +7,7 @@
             <CCardBody class="p-4">
               <CForm>
                 <h1>Register</h1>
-                <p class="text-medium-emphasis">Create your account</p>
+                <p class="text-body-secondary">Create your account</p>
                 <CInputGroup class="mb-3">
                   <CInputGroupText>
                     <CIcon icon="cil-user" />
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index c58759dc..0ca0dee6 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -289,7 +289,7 @@
                   </template>
                   <template #footer>
                     <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                       href="https://coreui.io/"
                       rel="noopener norefferer"
                       target="_blank"
@@ -311,7 +311,7 @@
                   </template>
                   <template #footer>
                     <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                       href="https://coreui.io/"
                       rel="noopener norefferer"
                       target="_blank"
@@ -333,7 +333,7 @@
                   </template>
                   <template #footer>
                     <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                       href="https://coreui.io/"
                       rel="noopener norefferer"
                       target="_blank"
@@ -355,7 +355,7 @@
                   </template>
                   <template #footer>
                     <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                       href="https://coreui.io/"
                       rel="noopener norefferer"
                       target="_blank"

From 9f2955bfab89eebe33a55287de07a45a65599e8c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 23:49:53 +0200
Subject: [PATCH 20/92] refactor: update views

---
 src/views/dashboard/Dashboard.vue | 40 ++++++++++++++++---------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index e654f717..ca8554bc 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -194,20 +194,26 @@
             </CRow>
             <br />
             <CTable align="middle" class="mb-0 border" hover responsive>
-              <CTableHead class="bg-body-secondary">
+              <CTableHead>
                 <CTableRow>
-                  <CTableHeaderCell class="text-center">
+                  <CTableHeaderCell class="bg-body-secondary text-center">
                     <CIcon name="cil-people" />
                   </CTableHeaderCell>
-                  <CTableHeaderCell>User</CTableHeaderCell>
-                  <CTableHeaderCell class="text-center"
-                    >Country</CTableHeaderCell
-                  >
-                  <CTableHeaderCell>Usage</CTableHeaderCell>
-                  <CTableHeaderCell class="text-center"
-                    >Payment Method</CTableHeaderCell
-                  >
-                  <CTableHeaderCell>Activity</CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary">
+                    User
+                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary text-center">
+                    Country
+                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary">
+                    Usage
+                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary text-center">
+                    Payment Method
+                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary">
+                    Activity
+                  </CTableHeaderCell>
                 </CTableRow>
               </CTableHead>
               <CTableBody>
@@ -234,14 +240,10 @@
                     />
                   </CTableDataCell>
                   <CTableDataCell>
-                    <div class="d-flex justify-content-between text-nowrap">
-                      <div>
-                        <strong>{{ item.usage.value }}%</strong>
-                      </div>
-                      <div class="ms-1">
-                        <small class="text-body-secondary">
-                          {{ item.usage.period }}
-                        </small>
+                    <div class="d-flex justify-content-between align-items-baseline">
+                      <div class="fw-semibold">{{ item.usage.value }}%</div>
+                      <div class="ms-1 text-nowrap small text-body-secondary">
+                        {{ item.usage.period }}
                       </div>
                     </div>
                     <CProgress

From 004d9346c23437efbdca9bcdd865426b679c5095 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 23:50:05 +0200
Subject: [PATCH 21/92] refactor: update layout

---
 src/components/AppHeaderDropdownAccnt.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index 857bcefa..5ad827bd 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -4,7 +4,10 @@
       <CAvatar :src="avatar" size="md" />
     </CDropdownToggle>
     <CDropdownMenu class="pt-0">
-      <CDropdownHeader component="h6" class="bg-light fw-semibold py-2">
+      <CDropdownHeader
+        component="h6"
+        class="bg-body-secondary text-body-secondary fw-semibold py-2 rounded-top"
+      >
         Account
       </CDropdownHeader>
       <CDropdownItem>
@@ -23,11 +26,18 @@
         <CIcon icon="cil-comment-square" /> Comments
         <CBadge color="warning" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
-      <CDropdownHeader component="h6" class="bg-light fw-semibold py-2">
+      <CDropdownHeader
+        component="h6"
+        class="bg-body-secondary text-body-secondary fw-semibold py-2"
+      >
         Settings
       </CDropdownHeader>
-      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
-      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-user" /> Profile
+      </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-settings" /> Settings
+      </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
         <CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -40,7 +50,9 @@
       <CDropdownItem>
         <CIcon icon="cil-shield-alt" /> Lock Account
       </CDropdownItem>
-      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-lock-locked" /> Logout
+      </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>

From 96682c080866a664073a82ff4ac68e5c1260299a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 27 Sep 2023 12:15:35 +0200
Subject: [PATCH 22/92] chore: update eslint configuration

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 30cc92be..fc9e572a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["plugin:vue/vue3-recommended", "eslint:recommended"],
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

From f8def494b1fde2012906562950d16a4149908943 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 27 Sep 2023 12:16:58 +0200
Subject: [PATCH 23/92] refactor: update layout

---
 src/components/AppBreadcrumb.vue |  2 +-
 src/components/AppHeader.vue     | 25 ++++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 53b29cdc..b935c4cc 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <CBreadcrumb class="d-md-down-none me-auto mb-0">
+  <CBreadcrumb class="my-0 ms-2">
     <CBreadcrumbItem
       v-for="item in breadcrumbs"
       :key="item"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d32a9ed3..f02de7c1 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,12 +1,9 @@
 <template>
-  <CHeader position="sticky" class="mb-4">
+  <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom" fluid>
       <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
-      <CHeaderBrand class="mx-auto d-lg-none" to="/">
-        <CIcon :icon="logo" height="48" alt="Logo" />
-      </CHeaderBrand>
       <CHeaderNav class="d-none d-md-flex me-auto">
         <CNavItem>
           <CNavLink href="/dashboard"> Dashboard </CNavLink>
@@ -43,11 +40,7 @@
         <CDropdown variant="nav-item" placement="bottom-end">
           <CDropdownToggle :caret="false">
             <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
-            <CIcon
-              v-else-if="colorMode === 'light'"
-              icon="cil-sun"
-              size="xl"
-            />
+            <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="xl" />
             <CIcon v-else icon="cil-contrast" size="xl" />
           </CDropdownToggle>
           <CDropdownMenu>
@@ -96,6 +89,7 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import { useColorModes } from '@coreui/vue'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
@@ -107,10 +101,23 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const headerClassNames = ref('mb-4')
     const { colorMode, setColorMode } = useColorModes(
       'coreui-free-vue-admin-template-theme',
     )
+
+    onMounted(() => {
+      document.addEventListener('scroll', () => {
+        if (document.documentElement.scrollTop > 0) {
+          headerClassNames.value = 'mb-4 shadow-sm'
+        } else {
+          headerClassNames.value = 'mb-4'
+        }
+      })
+    })
+
     return {
+      headerClassNames,
       logo,
       colorMode,
       setColorMode,

From af4cae6e00324218fc69bcb5e7cddaabecdcb2a8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 27 Sep 2023 12:17:12 +0200
Subject: [PATCH 24/92] refactor: update views

---
 src/views/dashboard/Dashboard.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index ca8554bc..46c59b30 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -37,7 +37,7 @@
             <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
               <CCol class="mb-sm-2 mb-0">
                 <div class="text-body-secondary">Visits</div>
-                <strong>29.703 Users (40%)</strong>
+                <div class="fw-semibold">29.703 Users (40%)</div>
                 <CProgress
                   class="mt-2"
                   color="success"
@@ -48,7 +48,7 @@
               </CCol>
               <CCol class="mb-sm-2 mb-0 d-md-down-none">
                 <div class="text-body-secondary">Unique</div>
-                <strong>24.093 Users (20%)</strong>
+                <div class="fw-semibold">24.093 Users (20%)</div>
                 <CProgress
                   class="mt-2"
                   color="info"
@@ -59,7 +59,7 @@
               </CCol>
               <CCol class="mb-sm-2 mb-0">
                 <div class="text-body-secondary">Pageviews</div>
-                <strong>78.706 Views (60%)</strong>
+                <div class="fw-semibold">78.706 Views (60%)</div>
                 <CProgress
                   class="mt-2"
                   color="warning"
@@ -70,7 +70,7 @@
               </CCol>
               <CCol class="mb-sm-2 mb-0">
                 <div class="text-body-secondary">New Users</div>
-                <strong>22.123 Users (80%)</strong>
+                <div class="fw-semibold">22.123 Users (80%)</div>
                 <CProgress
                   class="mt-2"
                   color="danger"
@@ -81,7 +81,7 @@
               </CCol>
               <CCol class="mb-sm-2 mb-0 d-md-down-none">
                 <div class="text-body-secondary">Bounce Rate</div>
-                <strong>Average Rate (40.15%)</strong>
+                <div class="fw-semibold">Average Rate (40.15%)</div>
                 <CProgress class="mt-2" :value="40" thin :precision="1" />
               </CCol>
             </CRow>

From 96a2503207e783dcdd4be80909b4e312d36ad628 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 27 Sep 2023 15:23:12 +0200
Subject: [PATCH 25/92] refactor: update logos

---
 src/assets/brand/logo-negative.js | 35 ++++++++++---------------------
 src/assets/brand/sygnet.js        | 17 ++++++---------
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/src/assets/brand/logo-negative.js b/src/assets/brand/logo-negative.js
index 1c99aa91..bc0effb9 100644
--- a/src/assets/brand/logo-negative.js
+++ b/src/assets/brand/logo-negative.js
@@ -1,31 +1,18 @@
 export const logoNegative = [
-  '556 134',
-  `
-  <title>coreui vue logo</title>
+  '532 116',
+  `<title>coreui vue logo</title>
   <g>
     <g style="fill:#1bbd93">
-      <path class="cls-1" d="M347.9818,90.0869l-11.84-43.52-.0644-.1924q0-.5112.6406-.5117h1.2793a.66.66,0,0,1,.7051.5762l10.623,39.68c.042.0859.0859.1279.1289.1279.041,0,.084-.042.127-.1279l10.625-39.68a.657.657,0,0,1,.7031-.5762h1.2168a.54.54,0,0,1,.5762.7041l-11.9043,43.52a.6584.6584,0,0,1-.7041.5761h-1.4082A.6577.6577,0,0,1,347.9818,90.0869Z"/>
-      <path class="cls-1" d="M382.2786,89.5751a10.9023,10.9023,0,0,1-4.3515-4.5439,14.4586,14.4586,0,0,1-1.5362-6.7842V46.5029a.5656.5656,0,0,1,.64-.64h1.2168a.5659.5659,0,0,1,.64.64v32a10.5488,10.5488,0,0,0,2.72,7.5527,10.36,10.36,0,0,0,14.3359,0,10.5493,10.5493,0,0,0,2.7207-7.5527v-32a.5655.5655,0,0,1,.64-.64h1.2159a.5666.5666,0,0,1,.6406.64V78.247a13.01,13.01,0,0,1-3.3926,9.376,11.8974,11.8974,0,0,1-9.0234,3.5527A12.8481,12.8481,0,0,1,382.2786,89.5751Z"/>
-      <path class="cls-1" d="M439.5843,48.1035H419.5521a.2263.2263,0,0,0-.2559.2558V66.8554a.2259.2259,0,0,0,.2559.2559h13.8242a.5665.5665,0,0,1,.6406.64v.96a.5665.5665,0,0,1-.6406.6406H419.5521a.2263.2263,0,0,0-.2559.2559v18.56a.2259.2259,0,0,0,.2559.2559h20.0322a.5665.5665,0,0,1,.64.6406v.96a.5655.5655,0,0,1-.64.64H417.4407a.5654.5654,0,0,1-.6406-.64v-43.52a.5658.5658,0,0,1,.6406-.64h22.1436a.5659.5659,0,0,1,.64.64v.96A.5658.5658,0,0,1,439.5843,48.1035Z"/>
-      <path class="cls-1" d="M454.5921,89.5117a2.8385,2.8385,0,0,1-.8-2.0489,2.9193,2.9193,0,0,1,.8-2.1113,2.7518,2.7518,0,0,1,2.0791-.832,2.8465,2.8465,0,0,1,2.9443,2.9433,2.7561,2.7561,0,0,1-.832,2.08,2.9208,2.9208,0,0,1-2.1123.8008A2.7521,2.7521,0,0,1,454.5921,89.5117Z"/>
-      <path class="cls-1" d="M474.931,88.0078a11.3087,11.3087,0,0,1-3.2-8.4161v-5.44a.5655.5655,0,0,1,.64-.64h1.2158a.5662.5662,0,0,1,.6407.64v5.5039a9.1421,9.1421,0,0,0,2.5283,6.72,8.9734,8.9734,0,0,0,6.6875,2.5606,8.7916,8.7916,0,0,0,9.28-9.28V46.5029a.5655.5655,0,0,1,.64-.64h1.2158a.5656.5656,0,0,1,.64.64V79.5917a11.2541,11.2541,0,0,1-3.2315,8.4161,13.0621,13.0621,0,0,1-17.0556,0Z"/>
-      <path class="cls-1" d="M512.8753,88.1035a10.4847,10.4847,0,0,1-3.36-8.128v-1.792a.5665.5665,0,0,1,.6406-.6406h1.0879a.5666.5666,0,0,1,.64.6406v1.6a8.5461,8.5461,0,0,0,2.752,6.6563,10.5361,10.5361,0,0,0,7.36,2.4961,9.8741,9.8741,0,0,0,6.9766-2.3682,8.2188,8.2188,0,0,0,2.56-6.3359,8.3952,8.3952,0,0,0-1.12-4.416,11.3752,11.3752,0,0,0-3.3281-3.3926,71.6866,71.6866,0,0,0-6.1758-3.7119,71.0151,71.0151,0,0,1-6.24-3.84,12.1824,12.1824,0,0,1-3.4238-3.68,10.2659,10.2659,0,0,1-1.28-5.3437,9.86,9.86,0,0,1,3.0723-7.7441,12.0126,12.0126,0,0,1,8.3193-2.752q5.6969,0,8.9609,3.1035a10.8247,10.8247,0,0,1,3.2637,8.2246v1.6a.5658.5658,0,0,1-.6406.64h-1.1514a.5651.5651,0,0,1-.64-.64V56.8076a8.8643,8.8643,0,0,0-2.6241-6.6885,9.9936,9.9936,0,0,0-7.2324-2.5274,9.37,9.37,0,0,0-6.5283,2.1436,7.8253,7.8253,0,0,0-2.3672,6.1123,7.8088,7.8088,0,0,0,1.0235,4.16,10.3978,10.3978,0,0,0,3.0078,3.039,63.0249,63.0249,0,0,0,5.9521,3.4883,70.7955,70.7955,0,0,1,6.72,4.2559,13.4613,13.4613,0,0,1,3.6485,3.9365,10.044,10.044,0,0,1,1.28,5.1836,10.7185,10.7185,0,0,1-3.2647,8.1924q-3.2637,3.0717-8.832,3.0722Q516.2342,91.1757,512.8753,88.1035Z"/>
+      <path d="m344.982 79.087-11.84-43.52-.065-.193c0-.34.214-.51.641-.511h1.28a.66.66 0 0 1 .704.576l10.623 39.68c.042.086.086.128.13.128.04 0 .083-.042.126-.128l10.625-39.68a.657.657 0 0 1 .703-.576h1.217a.54.54 0 0 1 .576.704l-11.904 43.52a.658.658 0 0 1-.704.576h-1.408a.658.658 0 0 1-.704-.576ZM379.279 78.575a10.902 10.902 0 0 1-4.352-4.544 14.459 14.459 0 0 1-1.536-6.784V35.503a.566.566 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64v32a10.549 10.549 0 0 0 2.72 7.553 10.36 10.36 0 0 0 14.336 0 10.55 10.55 0 0 0 2.72-7.553v-32a.566.566 0 0 1 .64-.64h1.216a.567.567 0 0 1 .64.64v31.744a13.01 13.01 0 0 1-3.392 9.376 11.897 11.897 0 0 1-9.023 3.553 12.848 12.848 0 0 1-6.466-1.6ZM436.584 37.103h-20.032a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.256h13.824a.567.567 0 0 1 .64.64v.96a.567.567 0 0 1-.64.64h-13.824a.226.226 0 0 0-.256.257v18.56a.226.226 0 0 0 .256.256h20.032a.566.566 0 0 1 .64.64v.96a.565.565 0 0 1-.64.64h-22.143a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.143a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM451.592 78.512a2.839 2.839 0 0 1-.8-2.05 2.92 2.92 0 0 1 .8-2.11c.544-.56 1.3-.862 2.08-.833a2.847 2.847 0 0 1 2.943 2.944c.03.78-.272 1.536-.832 2.08a2.92 2.92 0 0 1-2.112.8 2.752 2.752 0 0 1-2.079-.831ZM471.931 77.008a11.309 11.309 0 0 1-3.2-8.416v-5.44a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v5.504a9.142 9.142 0 0 0 2.529 6.72 8.973 8.973 0 0 0 6.687 2.56 8.792 8.792 0 0 0 9.28-9.28V35.503a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v33.089a11.254 11.254 0 0 1-3.231 8.416 13.062 13.062 0 0 1-17.056 0h-.001ZM509.875 77.103a10.485 10.485 0 0 1-3.36-8.127v-1.792a.567.567 0 0 1 .64-.641h1.089a.567.567 0 0 1 .64.64v1.6a8.546 8.546 0 0 0 2.752 6.657 10.536 10.536 0 0 0 7.36 2.496 9.874 9.874 0 0 0 6.976-2.368 8.219 8.219 0 0 0 2.56-6.336 8.395 8.395 0 0 0-1.12-4.416 11.375 11.375 0 0 0-3.328-3.393 71.687 71.687 0 0 0-6.175-3.712 71.015 71.015 0 0 1-6.24-3.84 12.182 12.182 0 0 1-3.424-3.68 10.266 10.266 0 0 1-1.28-5.343 9.86 9.86 0 0 1 3.072-7.745 12.013 12.013 0 0 1 8.32-2.752c3.797 0 6.784 1.035 8.96 3.104a10.825 10.825 0 0 1 3.264 8.225v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.472a8.864 8.864 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.233-2.527 9.37 9.37 0 0 0-6.528 2.143 7.825 7.825 0 0 0-2.367 6.113 7.809 7.809 0 0 0 1.023 4.16 10.398 10.398 0 0 0 3.008 3.039 63.025 63.025 0 0 0 5.952 3.488 70.796 70.796 0 0 1 6.72 4.256 13.461 13.461 0 0 1 3.649 3.936 10.044 10.044 0 0 1 1.28 5.184 10.719 10.719 0 0 1-3.265 8.192c-2.176 2.048-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z" />
     </g>
-  </g>
-  <g style="fill: currentColor">
-    <g>
-      <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-      <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
-    </g>
-    <g>
-      <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-      <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
-      <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-      <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
-      <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
-      <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+    <g style="fill: currentColor">
+      <path d="m96.367 25.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V35.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V35.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464v45.033Z" />
+      <path d="M74.389 71.005h-2.866a4 4 0 0 0-1.925.493l-17.28 9.485-19.951-11.518V46.487l19.95-11.518 17.289 9.455a4 4 0 0 0 1.92.49h2.862a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L56.16 27.952a8.039 8.039 0 0 0-7.843.09L28.367 39.56a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z" />
+      <g transform="translate(118 34)">
+        <path d="M51.112.362c-8.28.009-14.99 6.719-15 15v17.277c0 8.284 6.715 15 15 15 8.284 0 15-6.716 15-15V15.36c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.36a7 7 0 0 1 14 0V32.64ZM14.446 8.421a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 .999-1.097C29.72 6.14 22.748-.02 14.61.381 6.528.932.28 7.696.367 15.796v16.407C.28 40.305 6.528 47.067 14.611 47.62c8.138.401 15.111-5.76 15.716-13.884a1.01 1.01 0 0 0-.998-1.097h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.079-7.184v-16.79a7.164 7.164 0 0 1 6.079-7.184ZM97.29 27.928a12.158 12.158 0 0 0 7.183-11.077v-3.702C104.473 6.44 99.033 1 92.324 1H75.367a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V29h6.621l7.916 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414L97.29 27.928Zm-.817-11.077A4.154 4.154 0 0 1 92.325 21h-9.852V9h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139.367 1h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V27h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V9h19a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM177.367 1h-6a1 1 0 0 0-1 1v22.648a7.007 7.007 0 1 1-14 0V2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.648a15.003 15.003 0 1 0 30 0V2a1 1 0 0 0-1-1Z" />
+        <rect width="8" height="38" x="186.367" y="1" rx="1" />
+      </g>
     </g>
   </g>
-</g>
 `,
-]
+]
\ No newline at end of file
diff --git a/src/assets/brand/sygnet.js b/src/assets/brand/sygnet.js
index 3a57fbdd..dbda6351 100644
--- a/src/assets/brand/sygnet.js
+++ b/src/assets/brand/sygnet.js
@@ -1,12 +1,7 @@
 export const sygnet = [
-  '160 160',
-  `
-  <title>coreui logo</title>
-  <g>
-    <g style="fill:#fff;">
-      <path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
-      <path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
-    </g>
-  </g>
-`,
-]
+  '102 115',
+  `<g style="fill: currentColor">
+    <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"/>
+    <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"/>
+  </g>`,
+]
\ No newline at end of file

From ee8af34a1bf74f273bf66a68ba25073c88d61050 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 27 Sep 2023 15:23:26 +0200
Subject: [PATCH 26/92] refactor: update layout

---
 src/components/AppHeaderDropdownAccnt.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index 5ad827bd..633e2005 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,6 +1,6 @@
 <template>
-  <CDropdown variant="nav-item">
-    <CDropdownToggle placement="bottom-end" class="py-0" :caret="false">
+  <CDropdown placement="bottom-end" variant="nav-item">
+    <CDropdownToggle class="py-0" :caret="false">
       <CAvatar :src="avatar" size="md" />
     </CDropdownToggle>
     <CDropdownMenu class="pt-0">

From 8700663d247f5efcefed2504b0ec21dd72a63631 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 1 Oct 2023 13:15:47 +0200
Subject: [PATCH 27/92] refactor: update layout

---
 src/components/AppSidebar.vue   |  2 +-
 src/components/AppSidebarNav.js | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index e6acb988..7aaec75b 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <CSidebar
-    class="border-end"
+    class="sidebar-dark border-end"
     position="fixed"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 25dfb803..8e05a489 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -62,6 +62,7 @@ const AppSidebarNav = defineComponent({
         return h(
           CNavGroup,
           {
+            compact: true,
             ...(firstRender.value && {
               visible: item.items.some((child) => isActiveItem(route, child)),
             }),
@@ -97,11 +98,16 @@ const AppSidebarNav = defineComponent({
                   },
                   {
                     default: () => [
-                      item.icon &&
-                        h(resolveComponent('CIcon'), {
-                          customClassName: 'nav-icon',
-                          name: item.icon,
-                        }),
+                      item.icon
+                        ? h(resolveComponent('CIcon'), {
+                            customClassName: 'nav-icon',
+                            name: item.icon,
+                          })
+                        : h(
+                            'span',
+                            { class: 'nav-icon' },
+                            h('span', { class: 'nav-icon-bullet' }),
+                          ),
                       item.name,
                       item.badge &&
                         h(

From cdd722cc459ad4c9a666c60676e2f6cc9bddc3ae Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 1 Oct 2023 17:26:02 +0200
Subject: [PATCH 28/92] build: update vite config

---
 vite.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.js b/vite.config.js
index 1eb7400e..f5cdf664 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,6 +10,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [vue()],
+    base: './',
     css: {
       postcss: {
         plugins: [

From 42c31d88d5d14bc23f4c1311f210e295c3510c68 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 1 Oct 2023 17:28:10 +0200
Subject: [PATCH 29/92] refactor: update logo

---
 src/assets/brand/logo-negative.js | 18 -----------------
 src/assets/brand/logo.js          | 32 ++++++++++---------------------
 src/components/AppHeader.vue      |  2 --
 src/components/AppSidebar.vue     |  6 +++---
 4 files changed, 13 insertions(+), 45 deletions(-)
 delete mode 100644 src/assets/brand/logo-negative.js

diff --git a/src/assets/brand/logo-negative.js b/src/assets/brand/logo-negative.js
deleted file mode 100644
index bc0effb9..00000000
--- a/src/assets/brand/logo-negative.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const logoNegative = [
-  '532 116',
-  `<title>coreui vue logo</title>
-  <g>
-    <g style="fill:#1bbd93">
-      <path d="m344.982 79.087-11.84-43.52-.065-.193c0-.34.214-.51.641-.511h1.28a.66.66 0 0 1 .704.576l10.623 39.68c.042.086.086.128.13.128.04 0 .083-.042.126-.128l10.625-39.68a.657.657 0 0 1 .703-.576h1.217a.54.54 0 0 1 .576.704l-11.904 43.52a.658.658 0 0 1-.704.576h-1.408a.658.658 0 0 1-.704-.576ZM379.279 78.575a10.902 10.902 0 0 1-4.352-4.544 14.459 14.459 0 0 1-1.536-6.784V35.503a.566.566 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64v32a10.549 10.549 0 0 0 2.72 7.553 10.36 10.36 0 0 0 14.336 0 10.55 10.55 0 0 0 2.72-7.553v-32a.566.566 0 0 1 .64-.64h1.216a.567.567 0 0 1 .64.64v31.744a13.01 13.01 0 0 1-3.392 9.376 11.897 11.897 0 0 1-9.023 3.553 12.848 12.848 0 0 1-6.466-1.6ZM436.584 37.103h-20.032a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.256h13.824a.567.567 0 0 1 .64.64v.96a.567.567 0 0 1-.64.64h-13.824a.226.226 0 0 0-.256.257v18.56a.226.226 0 0 0 .256.256h20.032a.566.566 0 0 1 .64.64v.96a.565.565 0 0 1-.64.64h-22.143a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.143a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM451.592 78.512a2.839 2.839 0 0 1-.8-2.05 2.92 2.92 0 0 1 .8-2.11c.544-.56 1.3-.862 2.08-.833a2.847 2.847 0 0 1 2.943 2.944c.03.78-.272 1.536-.832 2.08a2.92 2.92 0 0 1-2.112.8 2.752 2.752 0 0 1-2.079-.831ZM471.931 77.008a11.309 11.309 0 0 1-3.2-8.416v-5.44a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v5.504a9.142 9.142 0 0 0 2.529 6.72 8.973 8.973 0 0 0 6.687 2.56 8.792 8.792 0 0 0 9.28-9.28V35.503a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v33.089a11.254 11.254 0 0 1-3.231 8.416 13.062 13.062 0 0 1-17.056 0h-.001ZM509.875 77.103a10.485 10.485 0 0 1-3.36-8.127v-1.792a.567.567 0 0 1 .64-.641h1.089a.567.567 0 0 1 .64.64v1.6a8.546 8.546 0 0 0 2.752 6.657 10.536 10.536 0 0 0 7.36 2.496 9.874 9.874 0 0 0 6.976-2.368 8.219 8.219 0 0 0 2.56-6.336 8.395 8.395 0 0 0-1.12-4.416 11.375 11.375 0 0 0-3.328-3.393 71.687 71.687 0 0 0-6.175-3.712 71.015 71.015 0 0 1-6.24-3.84 12.182 12.182 0 0 1-3.424-3.68 10.266 10.266 0 0 1-1.28-5.343 9.86 9.86 0 0 1 3.072-7.745 12.013 12.013 0 0 1 8.32-2.752c3.797 0 6.784 1.035 8.96 3.104a10.825 10.825 0 0 1 3.264 8.225v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.472a8.864 8.864 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.233-2.527 9.37 9.37 0 0 0-6.528 2.143 7.825 7.825 0 0 0-2.367 6.113 7.809 7.809 0 0 0 1.023 4.16 10.398 10.398 0 0 0 3.008 3.039 63.025 63.025 0 0 0 5.952 3.488 70.796 70.796 0 0 1 6.72 4.256 13.461 13.461 0 0 1 3.649 3.936 10.044 10.044 0 0 1 1.28 5.184 10.719 10.719 0 0 1-3.265 8.192c-2.176 2.048-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z" />
-    </g>
-    <g style="fill: currentColor">
-      <path d="m96.367 25.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V35.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V35.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464v45.033Z" />
-      <path d="M74.389 71.005h-2.866a4 4 0 0 0-1.925.493l-17.28 9.485-19.951-11.518V46.487l19.95-11.518 17.289 9.455a4 4 0 0 0 1.92.49h2.862a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L56.16 27.952a8.039 8.039 0 0 0-7.843.09L28.367 39.56a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z" />
-      <g transform="translate(118 34)">
-        <path d="M51.112.362c-8.28.009-14.99 6.719-15 15v17.277c0 8.284 6.715 15 15 15 8.284 0 15-6.716 15-15V15.36c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.36a7 7 0 0 1 14 0V32.64ZM14.446 8.421a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 .999-1.097C29.72 6.14 22.748-.02 14.61.381 6.528.932.28 7.696.367 15.796v16.407C.28 40.305 6.528 47.067 14.611 47.62c8.138.401 15.111-5.76 15.716-13.884a1.01 1.01 0 0 0-.998-1.097h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.079-7.184v-16.79a7.164 7.164 0 0 1 6.079-7.184ZM97.29 27.928a12.158 12.158 0 0 0 7.183-11.077v-3.702C104.473 6.44 99.033 1 92.324 1H75.367a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V29h6.621l7.916 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414L97.29 27.928Zm-.817-11.077A4.154 4.154 0 0 1 92.325 21h-9.852V9h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139.367 1h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V27h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V9h19a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM177.367 1h-6a1 1 0 0 0-1 1v22.648a7.007 7.007 0 1 1-14 0V2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.648a15.003 15.003 0 1 0 30 0V2a1 1 0 0 0-1-1Z" />
-        <rect width="8" height="38" x="186.367" y="1" rx="1" />
-      </g>
-    </g>
-  </g>
-`,
-]
\ No newline at end of file
diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js
index b5e89f3a..ebda6749 100644
--- a/src/assets/brand/logo.js
+++ b/src/assets/brand/logo.js
@@ -1,30 +1,18 @@
 export const logo = [
-  '556 134',
-  `
-  <title>coreui vue</title>
+  '532 116',
+  `<title>coreui vue logo</title>
   <g>
     <g style="fill:#1bbd93">
-      <path class="cls-1" d="M347.9818,90.0869l-11.84-43.52-.0644-.1924q0-.5112.6406-.5117h1.2793a.66.66,0,0,1,.7051.5762l10.623,39.68c.042.0859.0859.1279.1289.1279.041,0,.084-.042.127-.1279l10.625-39.68a.657.657,0,0,1,.7031-.5762h1.2168a.54.54,0,0,1,.5762.7041l-11.9043,43.52a.6584.6584,0,0,1-.7041.5761h-1.4082A.6577.6577,0,0,1,347.9818,90.0869Z"/>
-      <path class="cls-1" d="M382.2786,89.5751a10.9023,10.9023,0,0,1-4.3515-4.5439,14.4586,14.4586,0,0,1-1.5362-6.7842V46.5029a.5656.5656,0,0,1,.64-.64h1.2168a.5659.5659,0,0,1,.64.64v32a10.5488,10.5488,0,0,0,2.72,7.5527,10.36,10.36,0,0,0,14.3359,0,10.5493,10.5493,0,0,0,2.7207-7.5527v-32a.5655.5655,0,0,1,.64-.64h1.2159a.5666.5666,0,0,1,.6406.64V78.247a13.01,13.01,0,0,1-3.3926,9.376,11.8974,11.8974,0,0,1-9.0234,3.5527A12.8481,12.8481,0,0,1,382.2786,89.5751Z"/>
-      <path class="cls-1" d="M439.5843,48.1035H419.5521a.2263.2263,0,0,0-.2559.2558V66.8554a.2259.2259,0,0,0,.2559.2559h13.8242a.5665.5665,0,0,1,.6406.64v.96a.5665.5665,0,0,1-.6406.6406H419.5521a.2263.2263,0,0,0-.2559.2559v18.56a.2259.2259,0,0,0,.2559.2559h20.0322a.5665.5665,0,0,1,.64.6406v.96a.5655.5655,0,0,1-.64.64H417.4407a.5654.5654,0,0,1-.6406-.64v-43.52a.5658.5658,0,0,1,.6406-.64h22.1436a.5659.5659,0,0,1,.64.64v.96A.5658.5658,0,0,1,439.5843,48.1035Z"/>
-      <path class="cls-1" d="M454.5921,89.5117a2.8385,2.8385,0,0,1-.8-2.0489,2.9193,2.9193,0,0,1,.8-2.1113,2.7518,2.7518,0,0,1,2.0791-.832,2.8465,2.8465,0,0,1,2.9443,2.9433,2.7561,2.7561,0,0,1-.832,2.08,2.9208,2.9208,0,0,1-2.1123.8008A2.7521,2.7521,0,0,1,454.5921,89.5117Z"/>
-      <path class="cls-1" d="M474.931,88.0078a11.3087,11.3087,0,0,1-3.2-8.4161v-5.44a.5655.5655,0,0,1,.64-.64h1.2158a.5662.5662,0,0,1,.6407.64v5.5039a9.1421,9.1421,0,0,0,2.5283,6.72,8.9734,8.9734,0,0,0,6.6875,2.5606,8.7916,8.7916,0,0,0,9.28-9.28V46.5029a.5655.5655,0,0,1,.64-.64h1.2158a.5656.5656,0,0,1,.64.64V79.5917a11.2541,11.2541,0,0,1-3.2315,8.4161,13.0621,13.0621,0,0,1-17.0556,0Z"/>
-      <path class="cls-1" d="M512.8753,88.1035a10.4847,10.4847,0,0,1-3.36-8.128v-1.792a.5665.5665,0,0,1,.6406-.6406h1.0879a.5666.5666,0,0,1,.64.6406v1.6a8.5461,8.5461,0,0,0,2.752,6.6563,10.5361,10.5361,0,0,0,7.36,2.4961,9.8741,9.8741,0,0,0,6.9766-2.3682,8.2188,8.2188,0,0,0,2.56-6.3359,8.3952,8.3952,0,0,0-1.12-4.416,11.3752,11.3752,0,0,0-3.3281-3.3926,71.6866,71.6866,0,0,0-6.1758-3.7119,71.0151,71.0151,0,0,1-6.24-3.84,12.1824,12.1824,0,0,1-3.4238-3.68,10.2659,10.2659,0,0,1-1.28-5.3437,9.86,9.86,0,0,1,3.0723-7.7441,12.0126,12.0126,0,0,1,8.3193-2.752q5.6969,0,8.9609,3.1035a10.8247,10.8247,0,0,1,3.2637,8.2246v1.6a.5658.5658,0,0,1-.6406.64h-1.1514a.5651.5651,0,0,1-.64-.64V56.8076a8.8643,8.8643,0,0,0-2.6241-6.6885,9.9936,9.9936,0,0,0-7.2324-2.5274,9.37,9.37,0,0,0-6.5283,2.1436,7.8253,7.8253,0,0,0-2.3672,6.1123,7.8088,7.8088,0,0,0,1.0235,4.16,10.3978,10.3978,0,0,0,3.0078,3.039,63.0249,63.0249,0,0,0,5.9521,3.4883,70.7955,70.7955,0,0,1,6.72,4.2559,13.4613,13.4613,0,0,1,3.6485,3.9365,10.044,10.044,0,0,1,1.28,5.1836,10.7185,10.7185,0,0,1-3.2647,8.1924q-3.2637,3.0717-8.832,3.0722Q516.2342,91.1757,512.8753,88.1035Z"/>
+      <path d="m344.982 79.087-11.84-43.52-.065-.193c0-.34.214-.51.641-.511h1.28a.66.66 0 0 1 .704.576l10.623 39.68c.042.086.086.128.13.128.04 0 .083-.042.126-.128l10.625-39.68a.657.657 0 0 1 .703-.576h1.217a.54.54 0 0 1 .576.704l-11.904 43.52a.658.658 0 0 1-.704.576h-1.408a.658.658 0 0 1-.704-.576ZM379.279 78.575a10.902 10.902 0 0 1-4.352-4.544 14.459 14.459 0 0 1-1.536-6.784V35.503a.566.566 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64v32a10.549 10.549 0 0 0 2.72 7.553 10.36 10.36 0 0 0 14.336 0 10.55 10.55 0 0 0 2.72-7.553v-32a.566.566 0 0 1 .64-.64h1.216a.567.567 0 0 1 .64.64v31.744a13.01 13.01 0 0 1-3.392 9.376 11.897 11.897 0 0 1-9.023 3.553 12.848 12.848 0 0 1-6.466-1.6ZM436.584 37.103h-20.032a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.256h13.824a.567.567 0 0 1 .64.64v.96a.567.567 0 0 1-.64.64h-13.824a.226.226 0 0 0-.256.257v18.56a.226.226 0 0 0 .256.256h20.032a.566.566 0 0 1 .64.64v.96a.565.565 0 0 1-.64.64h-22.143a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.143a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM451.592 78.512a2.839 2.839 0 0 1-.8-2.05 2.92 2.92 0 0 1 .8-2.11c.544-.56 1.3-.862 2.08-.833a2.847 2.847 0 0 1 2.943 2.944c.03.78-.272 1.536-.832 2.08a2.92 2.92 0 0 1-2.112.8 2.752 2.752 0 0 1-2.079-.831ZM471.931 77.008a11.309 11.309 0 0 1-3.2-8.416v-5.44a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v5.504a9.142 9.142 0 0 0 2.529 6.72 8.973 8.973 0 0 0 6.687 2.56 8.792 8.792 0 0 0 9.28-9.28V35.503a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v33.089a11.254 11.254 0 0 1-3.231 8.416 13.062 13.062 0 0 1-17.056 0h-.001ZM509.875 77.103a10.485 10.485 0 0 1-3.36-8.127v-1.792a.567.567 0 0 1 .64-.641h1.089a.567.567 0 0 1 .64.64v1.6a8.546 8.546 0 0 0 2.752 6.657 10.536 10.536 0 0 0 7.36 2.496 9.874 9.874 0 0 0 6.976-2.368 8.219 8.219 0 0 0 2.56-6.336 8.395 8.395 0 0 0-1.12-4.416 11.375 11.375 0 0 0-3.328-3.393 71.687 71.687 0 0 0-6.175-3.712 71.015 71.015 0 0 1-6.24-3.84 12.182 12.182 0 0 1-3.424-3.68 10.266 10.266 0 0 1-1.28-5.343 9.86 9.86 0 0 1 3.072-7.745 12.013 12.013 0 0 1 8.32-2.752c3.797 0 6.784 1.035 8.96 3.104a10.825 10.825 0 0 1 3.264 8.225v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.472a8.864 8.864 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.233-2.527 9.37 9.37 0 0 0-6.528 2.143 7.825 7.825 0 0 0-2.367 6.113 7.809 7.809 0 0 0 1.023 4.16 10.398 10.398 0 0 0 3.008 3.039 63.025 63.025 0 0 0 5.952 3.488 70.796 70.796 0 0 1 6.72 4.256 13.461 13.461 0 0 1 3.649 3.936 10.044 10.044 0 0 1 1.28 5.184 10.719 10.719 0 0 1-3.265 8.192c-2.176 2.048-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z" />
     </g>
-    <g style="fill:#3c4b64">
-      <g>
-        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
-      </g>
-      <g>
-        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
-        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
-        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
-        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+    <g style="fill: currentColor">
+      <path d="m96.367 25.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V35.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V35.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464v45.033Z" />
+      <path d="M74.389 71.005h-2.866a4 4 0 0 0-1.925.493l-17.28 9.485-19.951-11.518V46.487l19.95-11.518 17.289 9.455a4 4 0 0 0 1.92.49h2.862a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L56.16 27.952a8.039 8.039 0 0 0-7.843.09L28.367 39.56a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z" />
+      <g transform="translate(118 34)">
+        <path d="M51.112.362c-8.28.009-14.99 6.719-15 15v17.277c0 8.284 6.715 15 15 15 8.284 0 15-6.716 15-15V15.36c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.36a7 7 0 0 1 14 0V32.64ZM14.446 8.421a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 .999-1.097C29.72 6.14 22.748-.02 14.61.381 6.528.932.28 7.696.367 15.796v16.407C.28 40.305 6.528 47.067 14.611 47.62c8.138.401 15.111-5.76 15.716-13.884a1.01 1.01 0 0 0-.998-1.097h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.079-7.184v-16.79a7.164 7.164 0 0 1 6.079-7.184ZM97.29 27.928a12.158 12.158 0 0 0 7.183-11.077v-3.702C104.473 6.44 99.033 1 92.324 1H75.367a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V29h6.621l7.916 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414L97.29 27.928Zm-.817-11.077A4.154 4.154 0 0 1 92.325 21h-9.852V9h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139.367 1h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V27h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V9h19a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM177.367 1h-6a1 1 0 0 0-1 1v22.648a7.007 7.007 0 1 1-14 0V2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.648a15.003 15.003 0 1 0 30 0V2a1 1 0 0 0-1-1Z" />
+        <rect width="8" height="38" x="186.367" y="1" rx="1" />
       </g>
     </g>
   </g>
 `,
-]
+]
\ No newline at end of file
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index f02de7c1..17ab8ae6 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -93,7 +93,6 @@ import { onMounted, ref } from 'vue'
 import { useColorModes } from '@coreui/vue'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-import { logo } from '@/assets/brand/logo'
 export default {
   name: 'AppHeader',
   components: {
@@ -118,7 +117,6 @@ export default {
 
     return {
       headerClassNames,
-      logo,
       colorMode,
       setColorMode,
     }
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 7aaec75b..04f93cec 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -16,7 +16,7 @@
       <CSidebarBrand>
         <CIcon
           custom-class-name="sidebar-brand-full"
-          :icon="logoNegative"
+          :icon="logo"
           :height="32"
         />
         <CIcon
@@ -40,7 +40,7 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { AppSidebarNav } from './AppSidebarNav'
-import { logoNegative } from '@/assets/brand/logo-negative'
+import { logo } from '@/assets/brand/logo'
 import { sygnet } from '@/assets/brand/sygnet'
 export default {
   name: 'AppSidebar',
@@ -50,7 +50,7 @@ export default {
   setup() {
     const store = useStore()
     return {
-      logoNegative,
+      logo,
       sygnet,
       sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
       sidebarVisible: computed(() => store.state.sidebarVisible),

From 53c8549c9cb8d28c515c86c73e67ef203c78a0cf Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 1 Oct 2023 17:29:36 +0200
Subject: [PATCH 30/92] refactor: update logo

---
 src/assets/brand/logo.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js
index ebda6749..a5901345 100644
--- a/src/assets/brand/logo.js
+++ b/src/assets/brand/logo.js
@@ -1,7 +1,6 @@
 export const logo = [
   '532 116',
-  `<title>coreui vue logo</title>
-  <g>
+  `<g>
     <g style="fill:#1bbd93">
       <path d="m344.982 79.087-11.84-43.52-.065-.193c0-.34.214-.51.641-.511h1.28a.66.66 0 0 1 .704.576l10.623 39.68c.042.086.086.128.13.128.04 0 .083-.042.126-.128l10.625-39.68a.657.657 0 0 1 .703-.576h1.217a.54.54 0 0 1 .576.704l-11.904 43.52a.658.658 0 0 1-.704.576h-1.408a.658.658 0 0 1-.704-.576ZM379.279 78.575a10.902 10.902 0 0 1-4.352-4.544 14.459 14.459 0 0 1-1.536-6.784V35.503a.566.566 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64v32a10.549 10.549 0 0 0 2.72 7.553 10.36 10.36 0 0 0 14.336 0 10.55 10.55 0 0 0 2.72-7.553v-32a.566.566 0 0 1 .64-.64h1.216a.567.567 0 0 1 .64.64v31.744a13.01 13.01 0 0 1-3.392 9.376 11.897 11.897 0 0 1-9.023 3.553 12.848 12.848 0 0 1-6.466-1.6ZM436.584 37.103h-20.032a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.256h13.824a.567.567 0 0 1 .64.64v.96a.567.567 0 0 1-.64.64h-13.824a.226.226 0 0 0-.256.257v18.56a.226.226 0 0 0 .256.256h20.032a.566.566 0 0 1 .64.64v.96a.565.565 0 0 1-.64.64h-22.143a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.143a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM451.592 78.512a2.839 2.839 0 0 1-.8-2.05 2.92 2.92 0 0 1 .8-2.11c.544-.56 1.3-.862 2.08-.833a2.847 2.847 0 0 1 2.943 2.944c.03.78-.272 1.536-.832 2.08a2.92 2.92 0 0 1-2.112.8 2.752 2.752 0 0 1-2.079-.831ZM471.931 77.008a11.309 11.309 0 0 1-3.2-8.416v-5.44a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v5.504a9.142 9.142 0 0 0 2.529 6.72 8.973 8.973 0 0 0 6.687 2.56 8.792 8.792 0 0 0 9.28-9.28V35.503a.565.565 0 0 1 .64-.64h1.216a.566.566 0 0 1 .64.64v33.089a11.254 11.254 0 0 1-3.231 8.416 13.062 13.062 0 0 1-17.056 0h-.001ZM509.875 77.103a10.485 10.485 0 0 1-3.36-8.127v-1.792a.567.567 0 0 1 .64-.641h1.089a.567.567 0 0 1 .64.64v1.6a8.546 8.546 0 0 0 2.752 6.657 10.536 10.536 0 0 0 7.36 2.496 9.874 9.874 0 0 0 6.976-2.368 8.219 8.219 0 0 0 2.56-6.336 8.395 8.395 0 0 0-1.12-4.416 11.375 11.375 0 0 0-3.328-3.393 71.687 71.687 0 0 0-6.175-3.712 71.015 71.015 0 0 1-6.24-3.84 12.182 12.182 0 0 1-3.424-3.68 10.266 10.266 0 0 1-1.28-5.343 9.86 9.86 0 0 1 3.072-7.745 12.013 12.013 0 0 1 8.32-2.752c3.797 0 6.784 1.035 8.96 3.104a10.825 10.825 0 0 1 3.264 8.225v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.472a8.864 8.864 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.233-2.527 9.37 9.37 0 0 0-6.528 2.143 7.825 7.825 0 0 0-2.367 6.113 7.809 7.809 0 0 0 1.023 4.16 10.398 10.398 0 0 0 3.008 3.039 63.025 63.025 0 0 0 5.952 3.488 70.796 70.796 0 0 1 6.72 4.256 13.461 13.461 0 0 1 3.649 3.936 10.044 10.044 0 0 1 1.28 5.184 10.719 10.719 0 0 1-3.265 8.192c-2.176 2.048-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z" />
     </g>

From 52d3098baf1573963b6c369e4da3452f4fa74068 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 14:12:49 +0100
Subject: [PATCH 31/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs              ^3.1.2  →  ^4.0.0-beta.0
@coreui/coreui       ^5.0.0-alpha.2  →  ^5.0.0-beta.1
@coreui/vue          ^5.0.0-alpha.0  →  ^5.0.0-beta.1
@coreui/vue-chartjs           2.1.0  →  ^3.0.0-beta.0
@vitejs/plugin-vue           ^4.2.3  →         ^4.4.0
eslint                      ^8.50.0  →        ^8.53.0
eslint-plugin-vue           ^9.17.0  →        ^9.18.1
postcss                     ^8.4.30  →        ^8.4.31
sass                        ^1.68.0  →        ^1.69.5
vite                         ^4.4.5  →         ^4.5.0
vue                          ^3.3.4  →         ^3.3.8
vue-router                   ^4.2.2  →         ^4.2.5
---
 package.json | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index bd3952e0..9cde1553 100644
--- a/package.json
+++ b/package.json
@@ -12,30 +12,32 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "vite build",
     "lint": "eslint \"src/**/*.{js,vue}\"",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@coreui/chartjs": "^3.1.2",
-    "@coreui/coreui": "^5.0.0-alpha.2",
+    "@coreui/chartjs": "^4.0.0-beta.0",
+    "@coreui/coreui": "^5.0.0-beta.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0-alpha.0",
-    "@coreui/vue-chartjs": "2.1.0",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
+    "@coreui/vue": "^5.0.0-beta.1",
+    "@coreui/vue-chartjs": "^3.0.0-beta.0",
+    "@popperjs/core": "^2.11.8",
+    "chart.js": "^4.4.0",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.4.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.50.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "postcss": "^8.4.30",
-    "sass": "^1.68.0",
-    "vite": "^4.4.5"
+    "eslint": "^8.53.0",
+    "eslint-plugin-vue": "^9.18.1",
+    "postcss": "^8.4.31",
+    "sass": "^1.69.5",
+    "vite": "^4.5.0"
   }
 }

From db7633af5567c18c5202577d700069ab681eb718 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 15:10:22 +0100
Subject: [PATCH 32/92] refactor: improve layout

---
 src/components/AppBreadcrumb.vue             |  2 +-
 src/components/AppFooter.vue                 |  2 +-
 src/components/AppHeader.vue                 | 48 +++++++++-----------
 src/components/AppHeaderDropdownAccnt.vue    |  2 +-
 src/layouts/DefaultLayout.vue                |  4 +-
 src/styles/_custom.scss                      | 24 ++++------
 src/styles/{_example.scss => _examples.scss} |  0
 src/styles/_variables.scss                   |  3 ++
 src/styles/style.scss                        |  7 ++-
 9 files changed, 42 insertions(+), 50 deletions(-)
 rename src/styles/{_example.scss => _examples.scss} (100%)

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index b935c4cc..49ddfc73 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <CBreadcrumb class="my-0 ms-2">
+  <CBreadcrumb class="my-0">
     <CBreadcrumbItem
       v-for="item in breadcrumbs"
       :key="item"
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index c96c9218..391618c4 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <CFooter>
+  <CFooter class="px-4">
     <div>
       <a href="https://coreui.io" target="_blank">CoreUI</a>
       <span class="ms-1"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 17ab8ae6..043a1ca7 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,10 +1,10 @@
 <template>
   <CHeader position="sticky" :class="headerClassNames">
-    <CContainer class="border-bottom" fluid>
-      <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
+    <CContainer class="border-bottom px-4" fluid>
+      <CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
-      <CHeaderNav class="d-none d-md-flex me-auto">
+      <CHeaderNav class="d-none d-md-flex">
         <CNavItem>
           <CNavLink href="/dashboard"> Dashboard </CNavLink>
         </CNavItem>
@@ -15,33 +15,32 @@
           <CNavLink href="#">Settings</CNavLink>
         </CNavItem>
       </CHeaderNav>
-      <CHeaderNav>
+      <CHeaderNav class="ms-auto">
         <CNavItem>
           <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-bell" size="lg" />
+            <CIcon icon="cil-bell" size="lg" />
           </CNavLink>
         </CNavItem>
         <CNavItem>
           <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-list" size="lg" />
+            <CIcon icon="cil-list" size="lg" />
           </CNavLink>
         </CNavItem>
         <CNavItem>
           <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
+            <CIcon icon="cil-envelope-open" size="lg" />
           </CNavLink>
         </CNavItem>
-        <li class="nav-item py-2 py-lg-1">
-          <div
-            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
-          ></div>
-          <hr class="d-lg-none my-2 text-white-50" />
+      </CHeaderNav>
+      <CHeaderNav>
+        <li class="nav-item py-1">
+          <div class="vr h-100 mx-2 text-body text-opacity-75"></div>
         </li>
         <CDropdown variant="nav-item" placement="bottom-end">
           <CDropdownToggle :caret="false">
-            <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
-            <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="xl" />
-            <CIcon v-else icon="cil-contrast" size="xl" />
+            <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="lg" />
+            <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="lg" />
+            <CIcon v-else icon="cil-contrast" size="lg" />
           </CDropdownToggle>
           <CDropdownMenu>
             <CDropdownItem
@@ -73,16 +72,13 @@
             </CDropdownItem>
           </CDropdownMenu>
         </CDropdown>
-        <li class="nav-item py-2 py-lg-1">
-          <div
-            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
-          ></div>
-          <hr class="d-lg-none my-2 text-white-50" />
+        <li class="nav-item py-1">
+          <div class="vr h-100 mx-2 text-body text-opacity-75"></div>
         </li>
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
-    <CContainer fluid>
+    <CContainer class="px-4" fluid>
       <AppBreadcrumb />
     </CContainer>
   </CHeader>
@@ -100,17 +96,15 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
-    const headerClassNames = ref('mb-4')
-    const { colorMode, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
+    const headerClassNames = ref('mb-4 p-0')
+    const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
 
     onMounted(() => {
       document.addEventListener('scroll', () => {
         if (document.documentElement.scrollTop > 0) {
-          headerClassNames.value = 'mb-4 shadow-sm'
+          headerClassNames.value = 'mb-4 p-0 shadow-sm'
         } else {
-          headerClassNames.value = 'mb-4'
+          headerClassNames.value = 'mb-4 p-0'
         }
       })
     })
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index 633e2005..ac31d96e 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,6 +1,6 @@
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
-    <CDropdownToggle class="py-0" :caret="false">
+    <CDropdownToggle class="py-0 pe-0" :caret="false">
       <CAvatar :src="avatar" size="md" />
     </CDropdownToggle>
     <CDropdownMenu class="pt-0">
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index b1031348..83d249ac 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -3,8 +3,8 @@
     <AppSidebar />
     <div class="wrapper d-flex flex-column min-vh-100">
       <AppHeader />
-      <div class="body flex-grow-1 px-3">
-        <CContainer lg>
+      <div class="body flex-grow-1">
+        <CContainer class="px-4" lg>
           <router-view />
         </CContainer>
       </div>
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
index d9602b36..4301405f 100644
--- a/src/styles/_custom.scss
+++ b/src/styles/_custom.scss
@@ -1,9 +1,18 @@
-// Here you can add other styles// Here you can add other styles
+// Custom styles for this theme
+
 .header > .container-fluid,
 .sidebar-header {
   min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
 }
 
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
 .sidebar-toggler {
   @include ltr-rtl("margin-left", auto);
 }
@@ -15,19 +24,6 @@
   }
 }
 
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.header {
-  padding: 0;
-
-  .container-fluid {
-    padding-right: $spacer;
-    padding-left: $spacer;
-  }
-}
-
 .footer {
   min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
 }
diff --git a/src/styles/_example.scss b/src/styles/_examples.scss
similarity index 100%
rename from src/styles/_example.scss
rename to src/styles/_examples.scss
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 697b08ad..5ac5b726 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,3 +1,6 @@
 // Variable overrides
 //
 // If you want to customize your project please add your variables below.
+
+$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 02f199c4..de0c64a0 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,9 +1,6 @@
 // If you want to override variables do it here
 @import "variables";
 
-$enable-ltr: true;
-$enable-rtl: true;
-
 // Import CoreUI for React components library
 @import "@coreui/coreui/scss/coreui";
 
@@ -11,7 +8,9 @@ $enable-rtl: true;
 @import "@coreui/chartjs/scss/coreui-chartjs";
 
 @import "layout";
-@import "example";
+
+// Preview
+@import "examples";
 
 // If you want to add custom CSS you can put it here.
 @import "custom";

From 28dd26a8e2dbe7f62f366835330eb11ccd64e3e3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 15:13:55 +0100
Subject: [PATCH 33/92] docs: update link to license

---
 LICENSE   | 21 +++++++++++++++++++++
 README.md |  6 ++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 LICENSE

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..b4870dd9
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 creativeLabs Łukasz Holeczek.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
index 1f772b7c..b2d1930f 100644
--- a/README.md
+++ b/README.md
@@ -188,8 +188,6 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 
 ## Copyright and License
 
-copyright 2022 creativeLabs Łukasz Holeczek.   
+copyright 2023 creativeLabs Łukasz Holeczek.   
 
- 
-Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE).
-There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
+Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).

From 1101d8f2a15e91f740494807d45be98e0abb4418 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 15:17:21 +0100
Subject: [PATCH 34/92] refactor: update charts configuration

---
 src/views/widgets/WidgetsStatsTypeA.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index d4b78ebf..4410eb59 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -60,6 +60,9 @@
               maintainAspectRatio: false,
               scales: {
                 x: {
+                  border: {
+                    display: false,
+                  },
                   grid: {
                     display: false,
                     drawBorder: false,
@@ -156,6 +159,9 @@
               maintainAspectRatio: false,
               scales: {
                 x: {
+                  border: {
+                    display: false,
+                  },
                   grid: {
                     display: false,
                     drawBorder: false,
@@ -250,6 +256,9 @@
               maintainAspectRatio: false,
               scales: {
                 x: {
+                  border: {
+                    display: false,
+                  },
                   display: false,
                 },
                 y: {
@@ -352,6 +361,9 @@
                   },
                 },
                 y: {
+                  border: {
+                    display: false,
+                  },
                   grid: {
                     display: false,
                     drawBorder: false,

From 3e9b26da00aed3108c5126fe0da570da0fbe1948 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 15:58:56 +0100
Subject: [PATCH 35/92] refactor: add new examples

---
 src/_nav.js                        |   5 +
 src/router/index.js                |   5 +
 src/views/notifications/Toasts.vue | 219 +++++++++++++++++++++++++++++
 3 files changed, 229 insertions(+)
 create mode 100644 src/views/notifications/Toasts.vue

diff --git a/src/_nav.js b/src/_nav.js
index f13cfa50..6e7d0eb5 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -232,6 +232,11 @@ export default [
         name: 'Modals',
         to: '/notifications/modals',
       },
+      {
+        component: 'CNavItem',
+        name: 'Toasts',
+        to: '/notifications/toasts',
+      },
     ],
   },
   {
diff --git a/src/router/index.js b/src/router/index.js
index ff424c75..f70246f6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -254,6 +254,11 @@ const routes = [
             name: 'Modals',
             component: () => import('@/views/notifications/Modals.vue'),
           },
+          {
+            path: '/notifications/toasts',
+            name: 'Toasts',
+            component: () => import('@/views/notifications/Toasts.vue'),
+          },
         ],
       },
       {
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
new file mode 100644
index 00000000..4ad75b3b
--- /dev/null
+++ b/src/views/notifications/Toasts.vue
@@ -0,0 +1,219 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Toast</strong> <small>Basic</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Toasts are as flexible as you need and have very little required markup. At a minimum,
+            we require a single element to contain your “toasted” content and strongly encourage a
+            dismiss button.
+          </p>
+          <DocsExample href="components/toast.html">
+            <CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
+              <CToastHeader closeButton>
+                <svg
+                  class="rounded me-2"
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                  role="img"
+                >
+                  <rect width="100%" height="100%" fill="#007aff"></rect>
+                </svg>
+                <strong class="me-auto">CoreUI for Vue.js</strong>
+                <small>7 min ago</small>
+              </CToastHeader>
+              <CToastBody>Hello, world! This is a toast message.</CToastBody>
+            </CToast>
+          </DocsExample>
+          <DocsExample href="components/toast.html">
+            <CButton color="primary" @click="createToast">Send a toast</CButton>
+            <CToaster placement="top-end">
+              <CToast v-for="(toast, index) in toasts" visible :key="index">
+                <CToastHeader closeButton>
+                  <span class="me-auto fw-bold">{{ toast.title }}</span>
+                  <small>7 min ago</small>
+                </CToastHeader>
+                <CToastBody>
+                  {{ toast.content }}
+                </CToastBody>
+              </CToast>
+            </CToaster>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Toast</strong> <small>Translucent</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Toasts are slightly translucent to blend in with what&#39;s below them.
+          </p>
+          <DocsExample href="components/toast.html#translucent" tabContentClass="bg-dark">
+            <CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
+              <CToastHeader closeButton>
+                <svg
+                  class="rounded me-2"
+                  width="20"
+                  height="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                  role="img"
+                >
+                  <rect width="100%" height="100%" fill="#007aff"></rect>
+                </svg>
+                <strong class="me-auto">CoreUI for Vue.js</strong>
+                <small>7 min ago</small>
+              </CToastHeader>
+              <CToastBody>Hello, world! This is a toast message.</CToastBody>
+            </CToast>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Toast</strong> <small>Stacking</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            You can stack toasts by wrapping them in a toast container, which will vertically add
+            some spacing.
+          </p>
+          <DocsExample href="components/toast.html#stacking">
+            <CToaster class="position-static">
+              <CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
+                <CToastHeader closeButton>
+                  <svg
+                    class="rounded me-2"
+                    width="20"
+                    height="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="xMidYMid slice"
+                    focusable="false"
+                    role="img"
+                  >
+                    <rect width="100%" height="100%" fill="#007aff"></rect>
+                  </svg>
+                  <strong class="me-auto">CoreUI for Vue.js</strong>
+                  <small>7 min ago</small>
+                </CToastHeader>
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+              </CToast>
+              <CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
+                <CToastHeader closeButton>
+                  <svg
+                    class="rounded me-2"
+                    width="20"
+                    height="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="xMidYMid slice"
+                    focusable="false"
+                    role="img"
+                  >
+                    <rect width="100%" height="100%" fill="#007aff"></rect>
+                  </svg>
+                  <strong class="me-auto">CoreUI for Vue.js</strong>
+                  <small>7 min ago</small>
+                </CToastHeader>
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+              </CToast>
+            </CToaster>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Toast</strong> <small>Custom content</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Customize your toasts by removing sub-components, tweaking them with
+            <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your own
+            markup. Here we&#39;ve created a simpler toast by removing the default
+            <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from
+            <a href="https://icons.coreui.io">CoreUI Icons</a>, and using some
+            <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust the
+            layout.
+          </p>
+          <DocsExample href="components/toast.html#custom-content">
+            <CToast :autohide="false" class="align-items-center" :visible="true">
+              <div class="d-flex">
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+                <CToastClose class="me-2 m-auto" />
+              </div>
+            </CToast>
+          </DocsExample>
+          <p class="text-body-secondary small">
+            Alternatively, you can also add additional controls and components to toasts.
+          </p>
+          <DocsExample href="components/toast.html#custom-content">
+            <CToast :autohide="false" class="align-items-center" visible>
+              <CToastBody>
+                Hello, world! This is a toast message.
+                <div class="mt-2 pt-2 border-top">
+                  <CButton type="button" color="primary" size="sm"> Take action </CButton>
+                  <CToastClose component="CButton" color="secondary" size="sm" class="ms-1"
+                    >Close</CToastClose
+                  >
+                </div>
+              </CToastBody>
+            </CToast>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Toast</strong> <small>Custom content</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Building on the above example, you can create different toast color schemes with our
+            <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and
+            <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
+            Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
+            <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
+            <code>white</code> property to our close button. For a crisp edge, we remove the default
+            border with <code>.border-0</code>.
+          </p>
+          <DocsExample href="components/toast.html#color-schemes">
+            <CToast
+              :autohide="false"
+              color="primary"
+              class="text-white align-items-center"
+              :visible="true"
+            >
+              <div class="d-flex">
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+                <CToastClose class="me-2 m-auto" white />
+              </div>
+            </CToast>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toasts: [],
+    }
+  },
+
+  methods: {
+    createToast() {
+      this.toasts.push({
+        title: 'new toast',
+        content: 'Lorem ipsum dolor cet emit',
+      })
+    },
+  },
+}
+</script>

From 0eb3fcda89712a71e29453492a69a403cff04ea8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 16:04:34 +0100
Subject: [PATCH 36/92] refactor: update examples

---
 src/components/DocsExample.vue     | 16 ++++++++--------
 src/styles/_examples.scss          |  5 ++++-
 src/views/base/Tables.vue          |  2 +-
 src/views/buttons/Buttons.vue      |  2 +-
 src/views/notifications/Alerts.vue |  2 +-
 src/views/notifications/Toasts.vue | 10 +++++-----
 6 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue
index 6fa8aa46..5ec26d21 100644
--- a/src/components/DocsExample.vue
+++ b/src/components/DocsExample.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="example">
-    <CNav variant="tabs">
+    <CNav variant="underline-border">
       <CNavItem>
         <CNavLink href="#" active>
           <CIcon icon="cil-media-play" class="me-2" />
+          Preview
         </CNavLink>
       </CNavItem>
       <CNavItem>
@@ -13,7 +14,7 @@
         </CNavLink>
       </CNavItem>
     </CNav>
-    <CTabContent class="rounded-bottom">
+    <CTabContent :class="['rounded-bottom', addClass]">
       <CTabPane class="p-3 preview" visible>
         <slot></slot>
       </CTabPane>
@@ -25,16 +26,15 @@
 export default {
   name: 'DocsExample',
   props: {
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    href: String,
+    tabContentClass: String,
   },
   setup(props) {
     const url = `https://coreui.io/vue/docs/${props.href}`
-
+    const addClass = props.tabContentClass
+ 
     return {
+      addClass,
       url,
     }
   },
diff --git a/src/styles/_examples.scss b/src/styles/_examples.scss
index fdf64254..df228af2 100644
--- a/src/styles/_examples.scss
+++ b/src/styles/_examples.scss
@@ -9,7 +9,7 @@
   }
 
   .tab-content {
-    background-color: var(--#{$prefix}tertiary-bg) !important;
+    background-color: var(--#{$prefix}tertiary-bg);
   }
 
   & + p {
@@ -51,6 +51,9 @@
     }
 
     // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 7247135b..30dde23b 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -447,7 +447,7 @@
             </CTable>
           </DocsExample>
           <p class="text-body-secondary small">
-            <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+            <a href="https://coreui.io/docs/utilities/borders#border-color">
               Border color utilities
             </a>
             can be added to change colors:
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index b99174e9..9d18dcb3 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -59,7 +59,7 @@
         <CCardBody>
           <p class="text-body-secondary small">
             You can combine button with our
-            <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+            <a href="https://coreui.io/icons/">CoreUI Icons</a>.
           </p>
           <DocsExample href="components/button.html">
             <template
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 1c9ebcc7..e6d12929 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -12,7 +12,7 @@
             <strong>required</strong> contextual <code>color</code> props (e.g.,
             <code>primary</code>). For inline dismissal, use the
             <a
-              href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
+              href="https://coreui.io/vue/docs/components/alert.html#dismissing"
             >
               dismissing prop
             </a>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 4ad75b3b..959b5951 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -133,11 +133,11 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Customize your toasts by removing sub-components, tweaking them with
-            <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your own
+            <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
             markup. Here we&#39;ve created a simpler toast by removing the default
             <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from
-            <a href="https://icons.coreui.io">CoreUI Icons</a>, and using some
-            <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust the
+            <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some
+            <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
             layout.
           </p>
           <DocsExample href="components/toast.html#custom-content">
@@ -173,8 +173,8 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
-            <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
+            <a href="https://coreui.io/docs/utilities/colors">color</a> and
+            <a href="https://coreui.io/docs//utilities/background">background</a> utilities.
             Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default

From 5d6d37d0a8d9ccb62cc6f8a8b8cf3fe8b871f45e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 16:10:31 +0100
Subject: [PATCH 37/92] docs: update README

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b2d1930f..3f7d8a26 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
 [npm-next]: https://img.shields.io/npm/v/@coreui/vue/next.png?style=flat-square
 [npm]: https://www.npmjs.com/package/@coreui/vue
 
-# CoreUI Free Vue Admin Template v4
+# CoreUI Free Vue Admin Template
 
 CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
 
@@ -123,7 +123,7 @@ coreui-free-vue-admin-template
 
 ## Documentation
 
-The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for Vue](https://coreui.io/vue/)
+The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for Vue](https://coreui.io/vue/docs/templates/installation.html)
 
 ## Versioning
 

From b40903e05a521c396e96a60b3eeab621826297e3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 18:09:07 +0100
Subject: [PATCH 38/92] refactor: update examples

---
 src/views/notifications/Toasts.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 959b5951..6ecfa627 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -174,7 +174,7 @@
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
             <a href="https://coreui.io/docs/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs//utilities/background">background</a> utilities.
+            <a href="https://coreui.io/docs/utilities/background">background</a> utilities.
             Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default

From 72a41a403a14ee72818e530c09f23f1e585c4171 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 21:17:16 +0100
Subject: [PATCH 39/92] docs: update README

---
 README.md | 91 +++++++++++++++++++++++--------------------------------
 1 file changed, 38 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 3f7d8a26..a802c97c 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
+# CoreUI Free Vue Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%Vue%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
 [![npm package][npm-coreui-badge]][npm-coreui]
-[![NPM downloads][npm-coreui-download]][npm-coreui]  
+[![NPM downloads][npm-coreui-download]][npm-coreui]
 [![@coreui vue](https://img.shields.io/badge/@coreui%20-vue-lightgrey.svg?style=flat-square)](https://github.com/coreui/vue)
 [![npm package][npm-coreui-vue-badge]][npm-coreui-vue]
 [![NPM downloads][npm-coreui-vue-download]][npm-coreui-vue]  
-[![npm next][npm-next]][npm]
 
 [npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
 [npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
@@ -12,17 +14,17 @@
 [npm-coreui-vue]: https://www.npmjs.com/package/@coreui/vue
 [npm-coreui-vue-badge]: https://img.shields.io/npm/v/@coreui/vue.png?style=flat-square
 [npm-coreui-vue-download]: https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square
-[npm-next]: https://img.shields.io/npm/v/@coreui/vue/next.png?style=flat-square
 [npm]: https://www.npmjs.com/package/@coreui/vue
 
-# CoreUI Free Vue Admin Template
+[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-react-admin-template/)
 
 CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
 
 ## Table of Contents
 
 * [Versions](#versions)
-* [CoreUI Pro](#coreui-pro)
+* [CoreUI PRO](#coreui-pro)
+* [CoreUI PRO Vue Admin Templates](#coreui-pro-vue-admin-templates)
 * [Quick Start](#quick-start)
 * [Installation](#installation)
 * [Basic usage](#basic-usage)
@@ -31,6 +33,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 * [Versioning](#versioning)
 * [Creators](#creators)
 * [Community](#community)
+* [Support CoreUI Development](#support-coreui-development)
 * [Copyright and License](#copyright-and-license)
 
 ## Versions
@@ -40,12 +43,22 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 * [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
 * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
 
-## CoreUI Pro
+## CoreUI PRO
+
+* 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
+* 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
+* 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
+* 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
+
+## CoreUI PRO Vue Admin Templates
+
+| Default Theme | Light Theme |
+| --- | --- |
+| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
 
-* 💪  [CoreUI Pro Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
-* 💪  [CoreUI Pro Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
-* 💪  [CoreUI Pro React Admin Template](https://coreui.io/product/react-dashboard-template/)
-* 💪  [CoreUI Pro Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
+| Default Theme v3 | Light Theme v3 |
+| --- | --- |
+| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default-v3) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
 
 ## Quick Start
 
@@ -103,22 +116,21 @@ Within the download you'll find the following directories and files, logically g
 ```
 coreui-free-vue-admin-template
 ├── public/          # static files
-│   └── index.html   # html template
-│
 ├── src/             # project root
 │   ├── assets/      # images, icons, etc.
 │   ├── components/  # common components - header, footer, sidebar, etc.
 │   ├── layouts/     # layout containers
 │   ├── scss/        # scss styles
 │   ├── router       # routes config
-│   └── store        # template state example 
+│   ├── store        # template state example 
 │   ├── views/       # application views
 │   ├── _nav.js      # sidebar navigation config
 │   ├── App.vue
 │   ├── ...
 │   └── main.js
-│
-└── package.json
+├── index.html   # html template
+├── package.json
+└── vite.config.js
 ```
 
 ## Documentation
@@ -134,12 +146,19 @@ See [the Releases section of our project](https://github.com/coreui/coreui-free-
 ## Creators
 
 **Łukasz Holeczek**
+
 * <https://twitter.com/lukaszholeczek>
 * <https://github.com/mrholek>
-* <https://github.com/coreui>
 
-**CoreUI team**
-* https://github.com/orgs/coreui/people
+**Andrzej Kopański**
+
+* <https://github.com/xidedix>
+
+**CoreUI Team**
+
+* <https://twitter.com/core_ui>
+* <https://github.com/coreui>
+* <https://github.com/orgs/coreui/people>
 
 ## Community
 
@@ -150,41 +169,7 @@ Get updates on CoreUI's development and chat with the project maintainers and co
 
 ## Support CoreUI Development
 
-CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
-
-<!--- StartOpenCollectiveBackers -->
-
-### Platinum Sponsors
-
-Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/platinum-sponsor-40959/checkout"><img src="https://opencollective.com/coreui/tiers/platinum-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Gold Sponsors
-
-Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/gold-sponsor-40960/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Silver Sponsors
-
-Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/silver-sponsor-40967/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Bronze Sponsors
-
-Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile.
-
-<a href="https://opencollective.com/coreui/contribute/bronze-sponsor-40966/checkout"><img src="https://opencollective.com/coreui/tiers/bronze-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Backers
-
-Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
-
-<a href="https://opencollective.com/coreui/contribute/backer-40965/checkout" target="_blank" rel="noopener"><img src="https://opencollective.com/coreui/backers.svg?width=890"></a>
-
-<!--- EndOpenCollectiveBackers -->
+CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=vue&src=github-coreui-free-vue-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
 
 ## Copyright and License
 

From 7472f9a6345d4cc912c45cf2bb95ecc154dc4459 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Nov 2023 13:18:48 +0100
Subject: [PATCH 40/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs  ^4.0.0-beta.0  →  ^4.0.0-beta.1
@coreui/coreui   ^5.0.0-beta.1  →  ^5.0.0-beta.2
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9cde1553..87f2fffb 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0-beta.0",
-    "@coreui/coreui": "^5.0.0-beta.1",
+    "@coreui/chartjs": "^4.0.0-beta.1",
+    "@coreui/coreui": "^5.0.0-beta.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",

From 7142f3498b67a9fbcd4cf5b472a382c367581811 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 13 Nov 2023 20:17:13 +0100
Subject: [PATCH 41/92] fix: make the sidebar close button visible under the
 `lg` breakpoint

---
 src/components/AppSidebar.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 04f93cec..7f30fde9 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,6 +1,7 @@
 <template>
   <CSidebar
-    class="sidebar-dark border-end"
+    class="border-end"
+    colorScheme="dark"
     position="fixed"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
@@ -25,6 +26,7 @@
           :height="32"
         />
       </CSidebarBrand>
+      <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top">

From a4f1cf2826df933f307c6c6f6cbe0cd4134ef28b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 17:03:59 +0100
Subject: [PATCH 42/92] chore: dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs      ^4.0.0-beta.1  →  ^4.0.0-rc.0
@coreui/coreui       ^5.0.0-beta.2  →  ^5.0.0-rc.0
@coreui/vue          ^5.0.0-beta.1  →  ^5.0.0-rc.0
@coreui/vue-chartjs  ^3.0.0-beta.0  →  ^3.0.0-rc.0
@vitejs/plugin-vue          ^4.4.0  →       ^4.4.1
---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 87f2fffb..2f368107 100644
--- a/package.json
+++ b/package.json
@@ -18,13 +18,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0-beta.1",
-    "@coreui/coreui": "^5.0.0-beta.2",
+    "@coreui/chartjs": "^4.0.0-rc.0",
+    "@coreui/coreui": "^5.0.0-rc.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0-beta.1",
-    "@coreui/vue-chartjs": "^3.0.0-beta.0",
+    "@coreui/vue": "^5.0.0-rc.0",
+    "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
     "vue": "^3.3.8",
@@ -32,7 +32,7 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^4.4.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.53.0",
     "eslint-plugin-vue": "^9.18.1",

From a1e6cf1b3d91051616d58c80fadccddb0d2ea860 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 20:03:23 +0100
Subject: [PATCH 43/92] refactor: improve responsive behavior

---
 src/views/dashboard/Dashboard.vue       |  154 +--
 src/views/widgets/Widgets.vue           | 1174 ++++++++++-------------
 src/views/widgets/WidgetsStatsTypeA.vue |   18 +-
 src/views/widgets/WidgetsStatsTypeD.vue |   70 +-
 4 files changed, 579 insertions(+), 837 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 46c59b30..03b56757 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <WidgetsStatsA />
+    <WidgetsStatsA class="mb-4" />
     <CRow>
       <CCol :md="12">
         <CCard class="mb-4">
@@ -20,68 +20,46 @@
                   aria-label="Basic outlined example"
                 >
                   <CButton color="secondary" variant="outline">Day</CButton>
-                  <CButton color="secondary" variant="outline" active
-                    >Month</CButton
-                  >
+                  <CButton color="secondary" variant="outline" active>Month</CButton>
                   <CButton color="secondary" variant="outline">Year</CButton>
                 </CButtonGroup>
               </CCol>
             </CRow>
             <CRow>
-              <MainChart
-                style="height: 300px; max-height: 300px; margin-top: 40px"
-              />
+              <MainChart style="height: 300px; max-height: 300px; margin-top: 40px" />
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
-              <CCol class="mb-sm-2 mb-0">
+            <CRow
+              :xs="{ cols: 1, gutter: 4 }"
+              :sm="{ cols: 2 }"
+              :lg="{ cols: 4 }"
+              :xl="{ cols: 5 }"
+              class="mb-2 text-center"
+            >
+              <CCol>
                 <div class="text-body-secondary">Visits</div>
-                <div class="fw-semibold">29.703 Users (40%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="success"
-                  thin
-                  :precision="1"
-                  :value="40"
-                />
+                <div class="fw-semibold text-truncate">29.703 Users (40%)</div>
+                <CProgress class="mt-2" color="success" thin :precision="1" :value="40" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0 d-md-down-none">
+              <CCol>
                 <div class="text-body-secondary">Unique</div>
-                <div class="fw-semibold">24.093 Users (20%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="info"
-                  thin
-                  :precision="1"
-                  :value="20"
-                />
+                <div class="fw-semibold text-truncate">24.093 Users (20%)</div>
+                <CProgress class="mt-2" color="info" thin :precision="1" :value="20" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0">
+              <CCol>
                 <div class="text-body-secondary">Pageviews</div>
-                <div class="fw-semibold">78.706 Views (60%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="warning"
-                  thin
-                  :precision="1"
-                  :value="60"
-                />
+                <div class="fw-semibold text-truncate">78.706 Views (60%)</div>
+                <CProgress class="mt-2" color="warning" thin :precision="1" :value="60" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0">
+              <CCol>
                 <div class="text-body-secondary">New Users</div>
-                <div class="fw-semibold">22.123 Users (80%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="danger"
-                  thin
-                  :precision="1"
-                  :value="80"
-                />
+                <div class="fw-semibold text-truncate">22.123 Users (80%)</div>
+                <CProgress class="mt-2" color="danger" thin :precision="1" :value="80" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0 d-md-down-none">
+              <CCol class="d-none d-xl-block">
                 <div class="text-body-secondary">Bounce Rate</div>
-                <div class="fw-semibold">Average Rate (40.15%)</div>
+                <div class="fw-semibold text-truncate">Average Rate (40.15%)</div>
                 <CProgress class="mt-2" :value="40" thin :precision="1" />
               </CCol>
             </CRow>
@@ -89,7 +67,7 @@
         </CCard>
       </CCol>
     </CRow>
-    <WidgetsStatsD />
+    <WidgetsStatsD class="mb-4" />
     <CRow>
       <CCol :md="12">
         <CCard class="mb-4">
@@ -98,21 +76,15 @@
             <CRow>
               <CCol :sm="12" :lg="6">
                 <CRow>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
-                    >
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-info py-1 px-3 mb-3">
                       <div class="text-body-secondary small">New Clients</div>
                       <div class="fs-5 fw-semibold">9,123</div>
                     </div>
                   </CCol>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
-                    >
-                      <div class="text-body-secondary small">
-                        Recurring Clients
-                      </div>
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
+                      <div class="text-body-secondary small">Recurring Clients</div>
                       <div class="fs-5 fw-semibold">22,643</div>
                     </div>
                   </CCol>
@@ -124,9 +96,7 @@
                   class="progress-group mb-4"
                 >
                   <div class="progress-group-prepend">
-                    <span class="text-body-secondary small">{{
-                      item.title
-                    }}</span>
+                    <span class="text-body-secondary small">{{ item.title }}</span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress thin color="info" :value="item.value1" />
@@ -136,29 +106,21 @@
               </CCol>
               <CCol :sm="12" :lg="6">
                 <CRow>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
-                    >
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
                       <div class="text-body-secondary small">Pageviews</div>
                       <div class="fs-5 fw-semibold">78,623</div>
                     </div>
                   </CCol>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
-                    >
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-success py-1 px-3 mb-3">
                       <div class="text-body-secondary small">Organic</div>
                       <div class="fs-5 fw-semibold">49,123</div>
                     </div>
                   </CCol>
                 </CRow>
                 <hr class="mt-0" />
-                <div
-                  v-for="item in progressGroupExample2"
-                  :key="item.title"
-                  class="progress-group"
-                >
+                <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>
@@ -171,19 +133,13 @@
 
                 <div class="mb-5"></div>
 
-                <div
-                  v-for="item in progressGroupExample3"
-                  :key="item.title"
-                  class="progress-group"
-                >
+                <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">{{ item.title }}</span>
                     <span class="ms-auto fw-semibold">
                       {{ item.value }}
-                      <span class="text-body-secondary small"
-                        >({{ item.percent }}%)</span
-                      >
+                      <span class="text-body-secondary small">({{ item.percent }}%)</span>
                     </span>
                   </div>
                   <div class="progress-group-bars">
@@ -194,36 +150,26 @@
             </CRow>
             <br />
             <CTable align="middle" class="mb-0 border" hover responsive>
-              <CTableHead>
+              <CTableHead class="text-nowrap">
                 <CTableRow>
                   <CTableHeaderCell class="bg-body-secondary text-center">
                     <CIcon name="cil-people" />
                   </CTableHeaderCell>
-                  <CTableHeaderCell class="bg-body-secondary">
-                    User
-                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary"> User </CTableHeaderCell>
                   <CTableHeaderCell class="bg-body-secondary text-center">
                     Country
                   </CTableHeaderCell>
-                  <CTableHeaderCell class="bg-body-secondary">
-                    Usage
-                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary"> Usage </CTableHeaderCell>
                   <CTableHeaderCell class="bg-body-secondary text-center">
                     Payment Method
                   </CTableHeaderCell>
-                  <CTableHeaderCell class="bg-body-secondary">
-                    Activity
-                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary"> Activity </CTableHeaderCell>
                 </CTableRow>
               </CTableHead>
               <CTableBody>
                 <CTableRow v-for="item in tableExample" :key="item.name">
                   <CTableDataCell class="text-center">
-                    <CAvatar
-                      size="md"
-                      :src="item.avatar.src"
-                      :status="item.avatar.status"
-                    />
+                    <CAvatar size="md" :src="item.avatar.src" :status="item.avatar.status" />
                   </CTableDataCell>
                   <CTableDataCell>
                     <div>{{ item.user.name }}</div>
@@ -233,24 +179,16 @@
                     </div>
                   </CTableDataCell>
                   <CTableDataCell class="text-center">
-                    <CIcon
-                      size="xl"
-                      :name="item.country.flag"
-                      :title="item.country.name"
-                    />
+                    <CIcon size="xl" :name="item.country.flag" :title="item.country.name" />
                   </CTableDataCell>
                   <CTableDataCell>
                     <div class="d-flex justify-content-between align-items-baseline">
                       <div class="fw-semibold">{{ item.usage.value }}%</div>
-                      <div class="ms-1 text-nowrap small text-body-secondary">
+                      <div class="text-nowrap text-body-secondary small ms-3">
                         {{ item.usage.period }}
                       </div>
                     </div>
-                    <CProgress
-                      thin
-                      :color="item.usage.color"
-                      :value="item.usage.value"
-                    />
+                    <CProgress thin :color="item.usage.color" :value="item.usage.value" />
                   </CTableDataCell>
                   <CTableDataCell class="text-center">
                     <CIcon size="xl" :name="item.payment.icon" />
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 0ca0dee6..b8d40c4e 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,654 +1,518 @@
 <template>
-  <CRow>
-    <CCol>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Widgets</strong>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="">
-            <WidgetsStatsA />
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'success', value: 75 }"
+  <CCard class="mb-4">
+    <CCardHeader>
+      <strong>Vue Widgets</strong>
+    </CCardHeader>
+    <CCardBody>
+      <DocsExample href="components/widgets.html#widgetstatsa">
+        <WidgetsStatsA />
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsb">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB :progress="{ color: 'success', value: 75 }">
+              <template #text>Widget helper text</template>
+              <template #title>Widget title</template>
+              <template #value>89.9%</template>
+            </CWidgetStatsB>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              :progress="{ color: 'info', value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="12.124"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              :progress="{ color: 'warning', value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="$98.111,00"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              :progress="{ color: 'primary', value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="2TB"
+            />
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsb">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB color="success" inverse :progress="{ value: 75 }">
+              <template #text>Widget helper text</template>
+              <template #title>Widget title</template>
+              <template #value>89.9%</template>
+            </CWidgetStatsB>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              color="info"
+              inverse
+              :progress="{ value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="12.124"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              color="warning"
+              inverse
+              :progress="{ value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="$98.111,00"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              color="primary"
+              inverse
+              :progress="{ value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="2TB"
+            />
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatse">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="bar"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-danger'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsBar"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="bar"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-primary'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsBar"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="bar"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-warning'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsBar"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="line"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-success'),
+                      borderWidth: 2,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsLine"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="line"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-warning'),
+                      borderWidth: 2,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsLine"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="line"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-info'),
+                      borderWidth: 2,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsLine"
+              />
+            </CWidgetStatsE>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsf">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-settings" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="info" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-user" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-moon" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-bell" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsf">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-settings" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #text>Widget helper text</template>
-                  <template #title>Widget title</template>
-                  <template #value>89.9%</template>
-                </CWidgetStatsB>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'info', value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="12.124"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'warning', value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="$98.111,00"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'primary', value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="2TB"
-                />
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="success"
-                  inverse
-                  :progress="{ value: 75 }"
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="info" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-user" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #text>Widget helper text</template>
-                  <template #title>Widget title</template>
-                  <template #value>89.9%</template>
-                </CWidgetStatsB>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="info"
-                  inverse
-                  :progress="{ value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="12.124"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="warning"
-                  inverse
-                  :progress="{ value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="$98.111,00"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="primary"
-                  inverse
-                  :progress="{ value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="2TB"
-                />
-              </CCol>
-            </CRow>
-          </DocsExample>
-
-          <DocsExample href="">
-            <CRow>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="bar"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: getStyle('--cui-danger'),
-                          borderColor: 'transparent',
-                          borderWidth: 1,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsBar"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="bar"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: getStyle('--cui-primary'),
-                          borderColor: 'transparent',
-                          borderWidth: 1,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsBar"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="bar"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: getStyle('--cui-warning'),
-                          borderColor: 'transparent',
-                          borderWidth: 1,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsBar"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="line"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: 'transparent',
-                          borderColor: getStyle('--cui-success'),
-                          borderWidth: 2,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsLine"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="line"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: 'transparent',
-                          borderColor: getStyle('--cui-warning'),
-                          borderWidth: 2,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsLine"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="line"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: 'transparent',
-                          borderColor: getStyle('--cui-info'),
-                          borderWidth: 2,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsLine"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-settings" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="info" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-user" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-moon" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-bell" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-settings" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="info" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-user" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-moon" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-bell" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="primary"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
-                >
-                  <template #icon>
-                    <CIcon icon="cil-settings" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="info"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
-                >
-                  <template #icon>
-                    <CIcon icon="cil-user" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="warning"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
-                >
-                  <template #icon>
-                    <CIcon icon="cil-moon" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="danger"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
-                >
-                  <template #icon>
-                    <CIcon icon="cil-bell" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <WidgetsStatsD />
-          </DocsExample>
-          <DocsExample href="">
-            <CCardGroup>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'info', value: 75 }"
-                title="Visitors"
-                value="87.500"
-              >
-                <template #icon
-                  ><CIcon icon="cil-people" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'success', value: 75 }"
-                title="New Clients"
-                value="385"
-              >
-                <template #icon
-                  ><CIcon icon="cil-user-follow" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'warning', value: 75 }"
-                title="Products sold"
-                value="1238"
-              >
-                <template #icon
-                  ><CIcon icon="cil-basket" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'primary', value: 75 }"
-                title="Returning Visitors"
-                value="28%"
-              >
-                <template #icon
-                  ><CIcon icon="cil-chart-pie" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'danger', value: 75 }"
-                title="Avg. Time"
-                value="5:34:11"
-              >
-                <template #icon
-                  ><CIcon icon="cil-speedometer" height="36"
-                /></template>
-              </CWidgetStatsC>
-            </CCardGroup>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'info', value: 75 }"
-                  title="Visitors"
-                  value="87.500"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-people" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'success', value: 75 }"
-                  title="New Clients"
-                  value="385"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-user-follow" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'warning', value: 75 }"
-                  title="Products sold"
-                  value="1238"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-basket" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'primary', value: 75 }"
-                  title="Returning Visitors"
-                  value="28%"
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-moon" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #icon
-                    ><CIcon icon="cil-chart-pie" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'danger', value: 75 }"
-                  title="Avg. Time"
-                  value="5:34:11"
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-bell" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #icon
-                    ><CIcon icon="cil-speedometer" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'info', value: 75 }"
-                  title="Comments"
-                  value="972"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speech" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="info"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Visitors"
-                  value="87.500"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-people" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="success"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="New Clients"
-                  value="385"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-user-follow" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="warning"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Products sold"
-                  value="1238"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-basket" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="primary"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Returning Visitors"
-                  value="28%"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-chart-pie" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="danger"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Avg. Time"
-                  value="5:34:11"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speedometer" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="info"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Comments"
-                  value="972"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speech" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsf">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="primary" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-settings" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="info" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-user" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="warning" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-moon" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="danger" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-bell" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsd">
+        <WidgetsStatsD />
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsc">
+        <CCardGroup>
+          <CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Visitors" value="87.500">
+            <template #icon><CIcon icon="cil-people" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'success', value: 75 }"
+            title="New Clients"
+            value="385"
+          >
+            <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'warning', value: 75 }"
+            title="Products sold"
+            value="1238"
+          >
+            <template #icon><CIcon icon="cil-basket" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'primary', value: 75 }"
+            title="Returning Visitors"
+            value="28%"
+          >
+            <template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'danger', value: 75 }"
+            title="Avg. Time"
+            value="5:34:11"
+          >
+            <template #icon><CIcon icon="cil-speedometer" height="36" /></template>
+          </CWidgetStatsC>
+        </CCardGroup>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsc">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Visitors" value="87.500">
+              <template #icon><CIcon icon="cil-people" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'success', value: 75 }"
+              title="New Clients"
+              value="385"
+            >
+              <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'warning', value: 75 }"
+              title="Products sold"
+              value="1238"
+            >
+              <template #icon><CIcon icon="cil-basket" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'primary', value: 75 }"
+              title="Returning Visitors"
+              value="28%"
+            >
+              <template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'danger', value: 75 }"
+              title="Avg. Time"
+              value="5:34:11"
+            >
+              <template #icon><CIcon icon="cil-speedometer" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Comments" value="972">
+              <template #icon><CIcon icon="cil-speech" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsc">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="info"
+              inverse
+              :progress="{ value: 75 }"
+              title="Visitors"
+              value="87.500"
+            >
+              <template #icon><CIcon icon="cil-people" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="success"
+              inverse
+              :progress="{ value: 75 }"
+              title="New Clients"
+              value="385"
+            >
+              <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="warning"
+              inverse
+              :progress="{ value: 75 }"
+              title="Products sold"
+              value="1238"
+            >
+              <template #icon><CIcon icon="cil-basket" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="primary"
+              inverse
+              :progress="{ value: 75 }"
+              title="Returning Visitors"
+              value="28%"
+            >
+              <template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="danger"
+              inverse
+              :progress="{ value: 75 }"
+              title="Avg. Time"
+              value="5:34:11"
+            >
+              <template #icon><CIcon icon="cil-speedometer" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="info"
+              inverse
+              :progress="{ value: 75 }"
+              title="Comments"
+              value="972"
+            >
+              <template #icon><CIcon icon="cil-speech" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+        </CRow>
+      </DocsExample>
+    </CCardBody>
+  </CCard>
 </template>
 
 <script>
@@ -665,23 +529,7 @@ export default {
   },
   setup() {
     const widgetStatsE = {
-      labels: [
-        'M',
-        'T',
-        'W',
-        'T',
-        'F',
-        'S',
-        'S',
-        'M',
-        'T',
-        'W',
-        'T',
-        'F',
-        'S',
-        'S',
-        'M',
-      ],
+      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
       optionsBar: {
         maintainAspectRatio: false,
         plugins: {
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 4410eb59..2d04467a 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,7 +1,7 @@
 <template>
-  <CRow>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="primary">
+  <CRow :xs="{ gutter: 4 }">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="primary">
         <template #value
           >26K
           <span class="fs-6 fw-normal">
@@ -99,8 +99,8 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="info">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="info">
         <template #value
           >$6.200
           <span class="fs-6 fw-normal">
@@ -197,8 +197,8 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="warning">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="warning">
         <template #value
           >2.49%
           <span class="fs-6 fw-normal">
@@ -281,8 +281,8 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="danger">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="danger">
         <template #value
           >44K
           <span class="fs-6 fw-normal">
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index d4f36973..7b0cbaac 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,31 +1,20 @@
 <template>
-  <CRow>
-    <CCol :xs="12" :sm="6" :lg="3">
+  <CRow :xs="{ gutter: 4 }">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         style="--cui-card-cap-bg: #3b5998"
         :values="[
           { title: 'friends', value: '89K' },
           { title: 'feeds', value: '459' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cib-facebook" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cib-facebook" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
@@ -42,32 +31,21 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         style="--cui-card-cap-bg: #00aced"
         :values="[
           { title: 'followers', value: '973k' },
           { title: 'tweets', value: '1.792' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cib-twitter" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cib-twitter" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
@@ -84,32 +62,21 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         style="--cui-card-cap-bg: #4875b4"
         :values="[
           { title: 'contacts', value: '500' },
           { title: 'feeds', value: '1.292' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cib-linkedin" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cib-linkedin" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
@@ -126,32 +93,21 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         color="warning"
         :values="[
           { title: 'events', value: '12+' },
           { title: 'meetings', value: '4' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cil-calendar" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cil-calendar" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',

From 7c15e3ba044bf48748b0c7d03a14a9e1552202c0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 20:03:37 +0100
Subject: [PATCH 44/92] build: update scripts

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f368107..af2621ef 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "dev": "vite --force",
+    "dev": "vite",
     "build": "vite build",
     "lint": "eslint \"src/**/*.{js,vue}\"",
     "preview": "vite preview"

From 06f6e817d0571284767858d9150970dd15961b60 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 20:04:19 +0100
Subject: [PATCH 45/92] release: v5.0.0-rc.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 2cf5a46c..a4fa3cd7 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v4.2.0
+* @version v5.0.0-rc.0
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2023 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index af2621ef..1e055b9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "4.2.0",
+  "version": "5.0.0-rc.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"

From 5f3df898b1fde45519515796c06948f132a204f0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:52:31 +0100
Subject: [PATCH 46/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui      ^5.0.0-rc.0  →  ^5.0.0-rc.1
@vitejs/plugin-vue       ^4.4.1  →       ^4.5.0
eslint                  ^8.53.0  →      ^8.54.0
vue                      ^3.3.8  →       ^3.3.9
---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 1e055b9f..4557c928 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.0",
+    "@coreui/coreui": "^5.0.0-rc.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
@@ -27,14 +27,14 @@
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
-    "vue": "^3.3.8",
+    "vue": "^3.3.9",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue": "^4.5.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-plugin-vue": "^9.18.1",
     "postcss": "^8.4.31",
     "sass": "^1.69.5",

From a2f759e7ee967bbb025bd721b2bf8c17534743e4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:55:06 +0100
Subject: [PATCH 47/92] refactor: improve styles

---
 src/styles/_custom.scss                      | 30 +--------
 src/styles/_layout.scss                      | 22 -------
 src/styles/_theme.scss                       | 64 ++++++++++++++++++++
 src/styles/_variables.scss                   |  3 +-
 src/styles/{_examples.scss => examples.scss} |  7 +--
 src/styles/style.scss                        | 14 ++---
 src/styles/vendors/simplebar.scss            |  5 ++
 7 files changed, 80 insertions(+), 65 deletions(-)
 delete mode 100644 src/styles/_layout.scss
 create mode 100644 src/styles/_theme.scss
 rename src/styles/{_examples.scss => examples.scss} (95%)
 create mode 100644 src/styles/vendors/simplebar.scss

diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
index 4301405f..15d367af 100644
--- a/src/styles/_custom.scss
+++ b/src/styles/_custom.scss
@@ -1,29 +1 @@
-// Custom styles for this theme
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
-  }
-}
-
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
+// Here you can add other styles
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
deleted file mode 100644
index 7e2ee4f8..00000000
--- a/src/styles/_layout.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
-
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
-  }
-}
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
new file mode 100644
index 00000000..49e1c79e
--- /dev/null
+++ b/src/styles/_theme.scss
@@ -0,0 +1,64 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
+  will-change: auto;
+  @include transition(padding .15s);
+}
+
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
+  }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 5ac5b726..b0f8a52a 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -2,5 +2,4 @@
 //
 // If you want to customize your project please add your variables below.
 
-$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
-$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+$enable-deprecation-messages: false !default;
diff --git a/src/styles/_examples.scss b/src/styles/examples.scss
similarity index 95%
rename from src/styles/_examples.scss
rename to src/styles/examples.scss
index df228af2..2390ba19 100644
--- a/src/styles/_examples.scss
+++ b/src/styles/examples.scss
@@ -1,4 +1,6 @@
 /* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+
 @import "@coreui/coreui/scss/functions";
 @import "@coreui/coreui/scss/variables";
 @import "@coreui/coreui/scss/mixins";
@@ -51,9 +53,6 @@
     }
 
     // Buttons
-    .col > .btn,
-    .col-auto > .btn,
-    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;
@@ -114,4 +113,4 @@
       background-color: var(--#{$prefix}secondary-bg) !important;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index de0c64a0..6fbabff0 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,16 +1,14 @@
 // If you want to override variables do it here
 @import "variables";
 
-// Import CoreUI for React components library
+// Import styles
 @import "@coreui/coreui/scss/coreui";
 
-// Import Chart.js custom tooltips styles
-@import "@coreui/chartjs/scss/coreui-chartjs";
+// Vendors
+@import "vendors/simplebar";
 
-@import "layout";
+// Custom styles for this theme
+@import "theme";
 
-// Preview
-@import "examples";
-
-// If you want to add custom CSS you can put it here.
+// If you want to add custom CSS you can put it here
 @import "custom";
diff --git a/src/styles/vendors/simplebar.scss b/src/styles/vendors/simplebar.scss
new file mode 100644
index 00000000..59c81b8a
--- /dev/null
+++ b/src/styles/vendors/simplebar.scss
@@ -0,0 +1,5 @@
+.simplebar-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}

From c27789b2824288fa14b2c1a8e8189f501dac3c15 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:56:17 +0100
Subject: [PATCH 48/92] refactor: improve the layout

---
 src/components/AppHeaderDropdownAccnt.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index ac31d96e..f6166fc7 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -6,7 +6,7 @@
     <CDropdownMenu class="pt-0">
       <CDropdownHeader
         component="h6"
-        class="bg-body-secondary text-body-secondary fw-semibold py-2 rounded-top"
+        class="bg-body-secondary text-body-secondary fw-semibold mb-2 rounded-top"
       >
         Account
       </CDropdownHeader>
@@ -28,7 +28,7 @@
       </CDropdownItem>
       <CDropdownHeader
         component="h6"
-        class="bg-body-secondary text-body-secondary fw-semibold py-2"
+        class="bg-body-secondary text-body-secondary fw-semibold my-2"
       >
         Settings
       </CDropdownHeader>

From 6aa4b2dad4ff84d75e94744acb3d56a4064052b9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 Nov 2023 12:35:32 +0100
Subject: [PATCH 49/92] docs: update README

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a802c97c..85c93be9 100644
--- a/README.md
+++ b/README.md
@@ -81,14 +81,14 @@ $ yarn install
 
 ``` bash
 # dev server with hot reload at http://localhost:3000
-$ npm run serve
+$ npm run dev
 ```
 
 or 
 
 ``` bash
 # dev server with hot reload at http://localhost:3000
-$ yarn serve
+$ yarn dev
 ```
 
 Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.

From ddf278020c5b978535c0065f719e71f5f5959a0d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 18:50:40 +0100
Subject: [PATCH 50/92] refactor: improve the scrollbar behavior

---
 package.json                    |  3 ++-
 src/components/AppSidebarNav.js | 27 +++++++++++++--------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 4557c928..377afa2e 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "vite build",
     "lint": "eslint \"src/**/*.{js,vue}\"",
     "preview": "vite preview"
@@ -27,6 +27,7 @@
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
+    "simplebar-vue": "^2.3.3",
     "vue": "^3.3.9",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 8e05a489..11092c7d 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,15 +1,12 @@
 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'
 
+import simplebar from 'simplebar-vue'
+import 'simplebar-vue/dist/simplebar.min.css'
+
 const normalizePath = (path) =>
   decodeURI(path)
     .replace(/#.*$/, '')
@@ -62,6 +59,7 @@ const AppSidebarNav = defineComponent({
         return h(
           CNavGroup,
           {
+            as: 'div',
             compact: true,
             ...(firstRender.value && {
               visible: item.items.some((child) => isActiveItem(route, child)),
@@ -93,6 +91,7 @@ const AppSidebarNav = defineComponent({
                   resolveComponent(item.component),
                   {
                     active: props.isActive,
+                    as: 'div',
                     href: props.href,
                     onClick: () => props.navigate(),
                   },
@@ -103,11 +102,7 @@ const AppSidebarNav = defineComponent({
                             customClassName: 'nav-icon',
                             name: item.icon,
                           })
-                        : h(
-                            'span',
-                            { class: 'nav-icon' },
-                            h('span', { class: 'nav-icon-bullet' }),
-                          ),
+                        : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
                       item.name,
                       item.badge &&
                         h(
@@ -127,7 +122,9 @@ const AppSidebarNav = defineComponent({
           )
         : h(
             resolveComponent(item.component),
-            {},
+            {
+              as: 'div',
+            },
             {
               default: () => item.name,
             },
@@ -137,7 +134,9 @@ const AppSidebarNav = defineComponent({
     return () =>
       h(
         CSidebarNav,
-        {},
+        {
+          as: simplebar,
+        },
         {
           default: () => nav.map((item) => renderItem(item)),
         },

From 04870396c64c9d532517c72dde437e21722962af Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 18:51:31 +0100
Subject: [PATCH 51/92] refactor: update examples

---
 src/App.vue              | 2 ++
 src/styles/examples.scss | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ce9a7185..177546e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,4 +36,6 @@ export default {
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';
+// We use those styles to show code examples, you should remove them in your application.
+@import 'styles/examples';
 </style>
diff --git a/src/styles/examples.scss b/src/styles/examples.scss
index 2390ba19..375fa9a5 100644
--- a/src/styles/examples.scss
+++ b/src/styles/examples.scss
@@ -1,5 +1,6 @@
 /* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
-$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+
+$enable-deprecation-messages: false !default;
 
 @import "@coreui/coreui/scss/functions";
 @import "@coreui/coreui/scss/variables";
@@ -53,6 +54,8 @@ $enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-varia
     }
 
     // Buttons
+    .col > .btn,
+    .col-auto > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;
@@ -113,4 +116,4 @@ $enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-varia
       background-color: var(--#{$prefix}secondary-bg) !important;
     }
   }
-}
+}
\ No newline at end of file

From 129352d91de5ddf4c5c8b04171b42b0bf2eabbb9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 18:55:22 +0100
Subject: [PATCH 52/92] refactor: update charts

---
 src/views/dashboard/MainChart.vue       | 4 ++--
 src/views/widgets/WidgetsStatsTypeA.vue | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboard/MainChart.vue b/src/views/dashboard/MainChart.vue
index de7c83d2..6df1c977 100644
--- a/src/views/dashboard/MainChart.vue
+++ b/src/views/dashboard/MainChart.vue
@@ -82,16 +82,16 @@ export default {
           },
         },
         y: {
+          beginAtZero: true,
           border: {
             color: getStyle('--cui-border-color-translucent'),
           },
           grid: {
             color: getStyle('--cui-border-color-translucent'),
           },
+          max: 250,
           ticks: {
-            beginAtZero: true,
             color: getStyle('--cui-body-color'),
-            max: 250,
             maxTicksLimit: 5,
             stepSize: Math.ceil(250 / 5),
           },
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 2d04467a..30677ff7 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -65,7 +65,6 @@
                   },
                   grid: {
                     display: false,
-                    drawBorder: false,
                   },
                   ticks: {
                     display: false,
@@ -164,7 +163,6 @@
                   },
                   grid: {
                     display: false,
-                    drawBorder: false,
                   },
                   ticks: {
                     display: false,
@@ -366,7 +364,6 @@
                   },
                   grid: {
                     display: false,
-                    drawBorder: false,
                     drawTicks: false,
                   },
                   ticks: {

From 8a1dbee0b09696483fb6b16ea5f3559bbff87a20 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 18:57:05 +0100
Subject: [PATCH 53/92] refactor: update examples

---
 src/views/dashboard/Dashboard.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 03b56757..fc95f213 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -8,7 +8,7 @@
             <CRow>
               <CCol :sm="5">
                 <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-                <div class="small text-body-secondary">January 2021</div>
+                <div class="small text-body-secondary">January - July 2023</div>
               </CCol>
               <CCol :sm="7" class="d-none d-md-block">
                 <CButton color="primary" class="float-end">
@@ -258,12 +258,12 @@ export default {
         user: {
           name: 'Yiorgos Avraamu',
           new: true,
-          registered: 'Jan 1, 2021',
+          registered: 'Jan 1, 2023',
         },
         country: { name: 'USA', flag: 'cif-us' },
         usage: {
           value: 50,
-          period: 'Jun 11, 2021 - Jul 10, 2021',
+          period: 'Jun 11, 2023 - Jul 10, 2023',
           color: 'success',
         },
         payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
@@ -274,12 +274,12 @@ export default {
         user: {
           name: 'Avram Tarasios',
           new: false,
-          registered: 'Jan 1, 2021',
+          registered: 'Jan 1, 2023',
         },
         country: { name: 'Brazil', flag: 'cif-br' },
         usage: {
           value: 22,
-          period: 'Jun 11, 2021 - Jul 10, 2021',
+          period: 'Jun 11, 2023 - Jul 10, 2023',
           color: 'info',
         },
         payment: { name: 'Visa', icon: 'cib-cc-visa' },
@@ -287,11 +287,11 @@ export default {
       },
       {
         avatar: { src: avatar3, status: 'warning' },
-        user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
+        user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
         country: { name: 'India', flag: 'cif-in' },
         usage: {
           value: 74,
-          period: 'Jun 11, 2021 - Jul 10, 2021',
+          period: 'Jun 11, 2023 - Jul 10, 2023',
           color: 'warning',
         },
         payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
@@ -299,11 +299,11 @@ export default {
       },
       {
         avatar: { src: avatar4, status: 'secondary' },
-        user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
+        user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
         country: { name: 'France', flag: 'cif-fr' },
         usage: {
           value: 98,
-          period: 'Jun 11, 2021 - Jul 10, 2021',
+          period: 'Jun 11, 2023 - Jul 10, 2023',
           color: 'danger',
         },
         payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
@@ -314,12 +314,12 @@ export default {
         user: {
           name: 'Agapetus Tadeáš',
           new: true,
-          registered: 'Jan 1, 2021',
+          registered: 'Jan 1, 2023',
         },
         country: { name: 'Spain', flag: 'cif-es' },
         usage: {
           value: 22,
-          period: 'Jun 11, 2021 - Jul 10, 2021',
+          period: 'Jun 11, 2023 - Jul 10, 2023',
           color: 'primary',
         },
         payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
@@ -330,12 +330,12 @@ export default {
         user: {
           name: 'Friderik Dávid',
           new: true,
-          registered: 'Jan 1, 2021',
+          registered: 'Jan 1, 2023',
         },
         country: { name: 'Poland', flag: 'cif-pl' },
         usage: {
           value: 43,
-          period: 'Jun 11, 2021 - Jul 10, 2021',
+          period: 'Jun 11, 2023 - Jul 10, 2023',
           color: 'success',
         },
         payment: { name: 'Amex', icon: 'cib-cc-amex' },

From f0606c35f27d6b4576d1f2ba8431d16dcda972bb Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 18:58:16 +0100
Subject: [PATCH 54/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@vitejs/plugin-vue   ^4.5.0  →   ^4.6.2
chart.js             ^4.4.0  →   ^4.4.1
eslint              ^8.54.0  →  ^8.56.0
eslint-plugin-vue   ^9.18.1  →  ^9.19.2
postcss             ^8.4.31  →  ^8.4.32
sass                ^1.69.5  →  ^1.69.6
vite                 ^4.5.0  →   ^4.5.1
vue                  ^3.3.9  →   ^3.4.3
---
 package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 377afa2e..64c5d666 100644
--- a/package.json
+++ b/package.json
@@ -26,19 +26,19 @@
     "@coreui/vue": "^5.0.0-rc.0",
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.0",
+    "chart.js": "^4.4.1",
     "simplebar-vue": "^2.3.3",
-    "vue": "^3.3.9",
+    "vue": "^3.4.3",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue": "^4.6.2",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.54.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "postcss": "^8.4.31",
-    "sass": "^1.69.5",
-    "vite": "^4.5.0"
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "postcss": "^8.4.32",
+    "sass": "^1.69.6",
+    "vite": "^4.5.1"
   }
 }

From 2da1dc45ca5c55f959e77dd75e36788221e465ab Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 18:59:33 +0100
Subject: [PATCH 55/92] docs: update the year

---
 LICENSE    | 2 +-
 README.md  | 2 +-
 index.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/LICENSE b/LICENSE
index b4870dd9..eee6fcc1 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 creativeLabs Łukasz Holeczek.
+Copyright (c) 2024 creativeLabs Łukasz Holeczek.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 85c93be9..0307d814 100644
--- a/README.md
+++ b/README.md
@@ -173,6 +173,6 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and License
 
-copyright 2023 creativeLabs Łukasz Holeczek.   
+copyright 2024 creativeLabs Łukasz Holeczek.   
 
 Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
diff --git a/index.html b/index.html
index a4fa3cd7..ba17034b 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 * CoreUI Free Vue.js Admin Template
 * @version v5.0.0-rc.0
 * @link https://coreui.io/product/free-vue-admin-template/
-* Copyright (c) 2023 creativeLabs Łukasz Holeczek
+* Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
 -->
 <html>

From 241c16846a5e268aed2f1aa6cc73d0eb2798229f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 19:49:54 +0100
Subject: [PATCH 56/92] build: upgrade Vite to 5.x

---
 .eslintignore                     | 2 +-
 package.json                      | 4 ++--
 vite.config.js => vite.config.mjs | 0
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename vite.config.js => vite.config.mjs (100%)

diff --git a/.eslintignore b/.eslintignore
index fc6857ad..dc70b364 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
 node_modules/*
 /dist/**
 .eslintrc.js
-vite.config.js
+vite.config.mjs
diff --git a/package.json b/package.json
index 64c5d666..3e1e85bf 100644
--- a/package.json
+++ b/package.json
@@ -33,12 +33,12 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@vitejs/plugin-vue": "^5.0.2",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
     "postcss": "^8.4.32",
     "sass": "^1.69.6",
-    "vite": "^4.5.1"
+    "vite": "^5.0.10"
   }
 }
diff --git a/vite.config.js b/vite.config.mjs
similarity index 100%
rename from vite.config.js
rename to vite.config.mjs

From da5a96342804ae8d9122e2a1c396870cc720e529 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 19:56:54 +0100
Subject: [PATCH 57/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/vue  ^5.0.0-rc.0  →  ^5.0.0-rc.1
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3e1e85bf..9832620f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0-rc.0",
+    "@coreui/vue": "^5.0.0-rc.1",
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.1",

From e5aeb255597df334d2ce4b6f859aa4f31cf26e4e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 20:08:19 +0100
Subject: [PATCH 58/92] refactor: make the sidebar logo clickable

---
 src/components/AppSidebar.vue | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 7f30fde9..681f896b 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -14,32 +14,24 @@
     "
   >
     <CSidebarHeader class="border-bottom">
-      <CSidebarBrand>
-        <CIcon
-          custom-class-name="sidebar-brand-full"
-          :icon="logo"
-          :height="32"
-        />
-        <CIcon
-          custom-class-name="sidebar-brand-narrow"
-          :icon="sygnet"
-          :height="32"
-        />
-      </CSidebarBrand>
+      <RouterLink custom to="/" v-slot="{ href, navigate }">
+        <CSidebarBrand v-bind="$attrs" as="a" :href="href" @click="navigate">
+          <CIcon custom-class-name="sidebar-brand-full" :icon="logo" :height="32" />
+          <CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
+        </CSidebarBrand>
+      </RouterLink>
       <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top">
-      <CSidebarToggler
-        class="d-none d-lg-flex"
-        @click="$store.commit('toggleUnfoldable')"
-      />
+      <CSidebarToggler class="d-none d-lg-flex" @click="$store.commit('toggleUnfoldable')" />
     </CSidebarFooter>
   </CSidebar>
 </template>
 
 <script>
 import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
 import { useStore } from 'vuex'
 import { AppSidebarNav } from './AppSidebarNav'
 import { logo } from '@/assets/brand/logo'
@@ -48,6 +40,7 @@ export default {
   name: 'AppSidebar',
   components: {
     AppSidebarNav,
+    RouterLink,
   },
   setup() {
     const store = useStore()

From 288559e0cc43a615596bf212a399f104b3b34fe1 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 20:08:42 +0100
Subject: [PATCH 59/92] chore: clean-up

---
 src/views/charts/Charts.vue     | 7 -------
 src/views/icons/Brands.vue      | 5 -----
 src/views/icons/CoreUIIcons.vue | 5 -----
 src/views/icons/Flags.vue       | 5 -----
 4 files changed, 22 deletions(-)

diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
index a7fb838f..eff0304f 100644
--- a/src/views/charts/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -1,12 +1,5 @@
 <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>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index 39e243e2..df35ed2a 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,11 +1,6 @@
 <template>
   <CRow>
     <CCol>
-      <DocsCallout
-        name="CoreUI Brand Icons"
-        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>
         <CCardBody>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index daa30f3e..db217630 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,11 +1,6 @@
 <template>
   <CRow>
     <CCol>
-      <DocsCallout
-        name="CoreUI Icons"
-        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>
         <CCardBody>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index 0d08d66d..eff0320f 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,11 +1,6 @@
 <template>
   <CRow>
     <CCol>
-      <DocsCallout
-        name="CoreUI Flag Icons"
-        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>
         <CCardBody>

From 94fa7f97e13404f268a0ff3c562e0c335acc1571 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 2 Jan 2024 20:39:49 +0100
Subject: [PATCH 60/92] refactor: improve responsive behavior

---
 src/components/AppSidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 681f896b..e4d53528 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -23,8 +23,8 @@
       <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
     </CSidebarHeader>
     <AppSidebarNav />
-    <CSidebarFooter class="border-top">
-      <CSidebarToggler class="d-none d-lg-flex" @click="$store.commit('toggleUnfoldable')" />
+    <CSidebarFooter class="border-top d-none d-lg-flex">
+      <CSidebarToggler @click="$store.commit('toggleUnfoldable')" />
     </CSidebarFooter>
   </CSidebar>
 </template>

From a4ec377f8f7f0e91cc4524b9672668ceda6993d4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 23 Mar 2024 12:10:42 +0100
Subject: [PATCH 61/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui      ^5.0.0-rc.1  →  ^5.0.0-rc.3
@coreui/vue         ^5.0.0-rc.1  →  ^5.0.0-rc.3
@vitejs/plugin-vue       ^5.0.2  →       ^5.0.4
autoprefixer           ^10.4.16  →     ^10.4.19
chart.js                 ^4.4.1  →       ^4.4.2
eslint                  ^8.56.0  →      ^8.57.0
eslint-plugin-vue       ^9.19.2  →      ^9.23.0
postcss                 ^8.4.32  →      ^8.4.38
sass                    ^1.69.6  →      ^1.72.0
vite                    ^5.0.10  →       ^5.2.4
vue                      ^3.4.3  →      ^3.4.21
vue-router               ^4.2.5  →       ^4.3.0
---
 package.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 9832620f..93d7c40b 100644
--- a/package.json
+++ b/package.json
@@ -19,26 +19,26 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.1",
+    "@coreui/coreui": "^5.0.0-rc.3",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0-rc.1",
+    "@coreui/vue": "^5.0.0-rc.3",
     "@coreui/vue-chartjs": "^3.0.0-rc.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.1",
+    "chart.js": "^4.4.2",
     "simplebar-vue": "^2.3.3",
-    "vue": "^3.4.3",
-    "vue-router": "^4.2.5",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.2",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "postcss": "^8.4.32",
-    "sass": "^1.69.6",
-    "vite": "^5.0.10"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.72.0",
+    "vite": "^5.2.4"
   }
 }

From f9d3cb2e38129666f1d132e3c26ab23663a1b6ae Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 23 Mar 2024 12:12:41 +0100
Subject: [PATCH 62/92] release: v5.0.0-rc.1

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ba17034b..dbb5f2dc 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.0.0-rc.0
+* @version v5.0.0-rc.1
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index 93d7c40b..8dd55672 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.0.0-rc.0",
+  "version": "5.0.0-rc.1",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"

From 46e9f9564c871de21e6b3fee1904163ae6bf9221 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 28 Mar 2024 17:06:32 +0100
Subject: [PATCH 63/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs      ^4.0.0-rc.0  →   ^4.0.0
@coreui/coreui       ^5.0.0-rc.3  →   ^5.0.0
@coreui/vue          ^5.0.0-rc.3  →   ^5.0.0
@coreui/vue-chartjs  ^3.0.0-rc.0  →   ^3.0.0
eslint-plugin-vue        ^9.23.0  →  ^9.24.0
vite                      ^5.2.4  →   ^5.2.6
---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 8dd55672..545b84a4 100644
--- a/package.json
+++ b/package.json
@@ -18,13 +18,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.3",
+    "@coreui/chartjs": "^4.0.0",
+    "@coreui/coreui": "^5.0.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0-rc.3",
-    "@coreui/vue-chartjs": "^3.0.0-rc.0",
+    "@coreui/vue": "^5.0.0",
+    "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.2",
     "simplebar-vue": "^2.3.3",
@@ -36,9 +36,9 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
+    "eslint-plugin-vue": "^9.24.0",
     "postcss": "^8.4.38",
     "sass": "^1.72.0",
-    "vite": "^5.2.4"
+    "vite": "^5.2.6"
   }
 }

From 86a084aa4f1ccef910aa4aac2cd796fba198d34f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 28 Mar 2024 17:08:07 +0100
Subject: [PATCH 64/92] release: v5.0.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index dbb5f2dc..1c4aae12 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.0.0-rc.1
+* @version v5.0.0
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index 545b84a4..2fe17aea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"

From 43745d958ad07ad86ca09166b337cd627b00183d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 29 Apr 2024 13:51:42 +0200
Subject: [PATCH 65/92] refactor: migrate to `<script setup>`

---
 .eslintrc.js => .eslintrc.cjs               |   2 +
 src/App.vue                                 |  56 ++-
 src/_nav.js                                 |  17 -
 src/components/AppBreadcrumb.vue            |  61 ++--
 src/components/AppFooter.vue                |   6 -
 src/components/AppHeader.vue                |  54 ++-
 src/components/AppHeaderDropdownAccnt.vue   |  35 +-
 src/components/AppSidebar.vue               |  39 +-
 src/components/AppSidebarNav.js             |   3 +-
 src/components/DocsExample.vue              |  29 +-
 src/layouts/DefaultLayout.vue               |  23 +-
 src/styles/style.scss                       |   1 +
 src/views/base/Accordion.vue                |  17 +-
 src/views/base/Breadcrumbs.vue              |   6 -
 src/views/base/Cards.vue                    |  21 +-
 src/views/base/Carousels.vue                |  24 +-
 src/views/base/Collapses.vue                |  86 ++---
 src/views/base/ListGroups.vue               |  26 +-
 src/views/base/Navs.vue                     |  10 +-
 src/views/base/Paginations.vue              |   6 -
 src/views/base/Placeholders.vue             |  22 +-
 src/views/base/Popovers.vue                 |   6 -
 src/views/base/Progress.vue                 |  31 +-
 src/views/base/Spinners.vue                 |  14 +-
 src/views/base/Tables.vue                   |   6 -
 src/views/base/Tooltips.vue                 |   6 -
 src/views/buttons/ButtonGroups.vue          |   6 -
 src/views/buttons/Buttons.vue               |  18 +-
 src/views/buttons/Dropdowns.vue             |   8 +-
 src/views/charts/CChartBarExample.vue       |  61 ++--
 src/views/charts/CChartDoughnutExample.vue  |  33 +-
 src/views/charts/CChartLineExample.vue      |  45 +--
 src/views/charts/CChartPieExample.vue       |  33 +-
 src/views/charts/CChartPolarAreaExample.vue |  73 ++--
 src/views/charts/CChartRadarExample.vue     |  75 ++--
 src/views/charts/Charts.vue                 |  21 +-
 src/views/dashboard/Dashboard.vue           | 271 +++++++-------
 src/views/dashboard/MainChart.vue           | 248 ++++++-------
 src/views/forms/ChecksRadios.vue            |   6 -
 src/views/forms/FloatingLabels.vue          |   6 -
 src/views/forms/FormControl.vue             |   6 -
 src/views/forms/InputGroup.vue              |  14 +-
 src/views/forms/Layout.vue                  |   6 -
 src/views/forms/Range.vue                   |  10 +-
 src/views/forms/Select.vue                  |   7 -
 src/views/forms/Validation.vue              | 305 ++++++----------
 src/views/icons/Brands.vue                  |  24 +-
 src/views/icons/CoreUIIcons.vue             |  24 +-
 src/views/icons/Flags.vue                   |  24 +-
 src/views/notifications/Alerts.vue          |  19 +-
 src/views/notifications/Badges.vue          |  34 +-
 src/views/notifications/Modals.vue          | 376 ++++++++------------
 src/views/notifications/Toasts.vue          |  38 +-
 src/views/pages/Login.vue                   |   8 +-
 src/views/pages/Page404.vue                 |   8 +-
 src/views/pages/Page500.vue                 |   8 +-
 src/views/pages/Register.vue                |   8 +-
 src/views/theme/ColorTheme.vue              |  20 +-
 src/views/theme/Colors.vue                  |  28 +-
 src/views/theme/Typography.vue              |   6 -
 src/views/widgets/Widgets.vue               | 124 +++----
 src/views/widgets/WidgetsStatsTypeA.vue     | 133 ++-----
 src/views/widgets/WidgetsStatsTypeD.vue     |  75 ++--
 63 files changed, 1059 insertions(+), 1757 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (78%)

diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 78%
rename from .eslintrc.js
rename to .eslintrc.cjs
index fc9e572a..7d0be3d2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.cjs
@@ -1,7 +1,9 @@
+/* eslint-env node */
 module.exports = {
   extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'vue/multi-word-component-names': 'off',
   },
 };
diff --git a/src/App.vue b/src/App.vue
index 177546e0..9a8eaeca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,36 @@
-<template>
-  <router-view />
-</template>
-<script>
+<script setup>
 import { onBeforeMount } from 'vue'
 import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-export default {
-  setup() {
-    const { isColorModeSet, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
-    const store = useStore()
-
-    onBeforeMount(() => {
-      const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme =
-        urlParams.get('theme') &&
-        urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-      if (theme) {
-        setColorMode(theme)
-        return
-      }
-
-      if (isColorModeSet()) {
-        return
-      }
-
-      setColorMode(store.state.theme)
-    })
-  },
-}
+const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const store = useStore()
+
+onBeforeMount(() => {
+  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+  let theme = urlParams.get('theme')
+
+  if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
+    theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
+  }
+
+  if (theme) {
+    setColorMode(theme)
+    return
+  }
+
+  if (isColorModeSet()) {
+    return
+  }
+
+  setColorMode(store.state.theme)
+})
 </script>
 
+<template>
+  <router-view />
+</template>
+
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';
diff --git a/src/_nav.js b/src/_nav.js
index 6e7d0eb5..3433bdaf 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -282,21 +282,4 @@ export default [
       },
     ],
   },
-
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Download CoreUI',
-  //   href: 'http://coreui.io/vue/',
-  //   icon: { name: 'cil-cloud-download', class: 'text-white' },
-  //   _class: 'bg-success text-white',
-  //   target: '_blank'
-  // },
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Try CoreUI PRO',
-  //   href: 'http://coreui.io/pro/vue/',
-  //   icon: { name: 'cil-layers', class: 'text-white' },
-  //   _class: 'bg-danger text-white',
-  //   target: '_blank'
-  // }
 ]
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 49ddfc73..be83cad9 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,3 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+const breadcrumbs = ref()
+
+const getBreadcrumbs = () => {
+  return router.currentRoute.value.matched.map((route) => {
+    return {
+      active: route.path === router.currentRoute.value.fullPath,
+      name: route.name,
+      path: `${router.options.history.base}${route.path}`,
+    }
+  })
+}
+
+router.afterEach(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+
+onMounted(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+</script>
+
 <template>
   <CBreadcrumb class="my-0">
     <CBreadcrumbItem
@@ -9,38 +34,4 @@
       {{ item.name }}
     </CBreadcrumbItem>
   </CBreadcrumb>
-</template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import router from '@/router'
-
-export default {
-  name: 'AppBreadcrumb',
-  setup() {
-    const breadcrumbs = ref()
-
-    const getBreadcrumbs = () => {
-      return router.currentRoute.value.matched.map((route) => {
-        return {
-          active: route.path === router.currentRoute.value.fullPath,
-          name: route.name,
-          path: `${router.options.history.base}${route.path}`,
-        }
-      })
-    }
-
-    router.afterEach(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    onMounted(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    return {
-      breadcrumbs,
-    }
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 391618c4..b62df395 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -12,9 +12,3 @@
     </div>
   </CFooter>
 </template>
-
-<script>
-export default {
-  name: 'AppFooter',
-}
-</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 043a1ca7..46e2b842 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,3 +1,23 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useColorModes } from '@coreui/vue'
+import AppBreadcrumb from './AppBreadcrumb'
+import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+const headerClassNames = ref('mb-4 p-0')
+const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+
+onMounted(() => {
+  document.addEventListener('scroll', () => {
+    if (document.documentElement.scrollTop > 0) {
+      headerClassNames.value = 'mb-4 p-0 shadow-sm'
+    } else {
+      headerClassNames.value = 'mb-4 p-0'
+    }
+  })
+})
+</script>
+
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
@@ -83,37 +103,3 @@
     </CContainer>
   </CHeader>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-export default {
-  name: 'AppHeader',
-  components: {
-    AppBreadcrumb,
-    AppHeaderDropdownAccnt,
-  },
-  setup() {
-    const headerClassNames = ref('mb-4 p-0')
-    const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-
-    onMounted(() => {
-      document.addEventListener('scroll', () => {
-        if (document.documentElement.scrollTop > 0) {
-          headerClassNames.value = 'mb-4 p-0 shadow-sm'
-        } else {
-          headerClassNames.value = 'mb-4 p-0'
-        }
-      })
-    })
-
-    return {
-      headerClassNames,
-      colorMode,
-      setColorMode,
-    }
-  },
-}
-</script>
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index f6166fc7..d51d1fe0 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,3 +1,9 @@
+<script setup>
+import avatar from '@/assets/images/avatars/8.jpg'
+
+const itemsCount = 42
+</script>
+
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
     <CDropdownToggle class="py-0 pe-0" :caret="false">
@@ -32,12 +38,8 @@
       >
         Settings
       </CDropdownHeader>
-      <CDropdownItem>
-        <CIcon icon="cil-user" /> Profile
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-settings" /> Settings
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
         <CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -47,25 +49,8 @@
         <CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
       <CDropdownDivider />
-      <CDropdownItem>
-        <CIcon icon="cil-shield-alt" /> Lock Account
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-lock-locked" /> Logout
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>
-
-<script>
-import avatar from '@/assets/images/avatars/8.jpg'
-export default {
-  name: 'AppHeaderDropdownAccnt',
-  setup() {
-    return {
-      avatar: avatar,
-      itemsCount: 42,
-    }
-  },
-}
-</script>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index e4d53528..bfc3b075 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,3 +1,17 @@
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useStore } from 'vuex'
+import { AppSidebarNav } from './AppSidebarNav'
+import { logo } from '@/assets/brand/logo'
+import { sygnet } from '@/assets/brand/sygnet'
+
+const store = useStore()
+const sidebarUnfoldable =  computed(() => store.state.sidebarUnfoldable)
+const sidebarVisible = computed(() => store.state.sidebarVisible)
+</script>
+
 <template>
   <CSidebar
     class="border-end"
@@ -28,28 +42,3 @@
     </CSidebarFooter>
   </CSidebar>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useStore } from 'vuex'
-import { AppSidebarNav } from './AppSidebarNav'
-import { logo } from '@/assets/brand/logo'
-import { sygnet } from '@/assets/brand/sygnet'
-export default {
-  name: 'AppSidebar',
-  components: {
-    AppSidebarNav,
-    RouterLink,
-  },
-  setup() {
-    const store = useStore()
-    return {
-      logo,
-      sygnet,
-      sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
-      sidebarVisible: computed(() => store.state.sidebarVisible),
-    }
-  },
-}
-</script>
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 11092c7d..68c30537 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
       )
   },
 })
-export { AppSidebarNav }
+
+export { AppSidebarNav }
\ No newline at end of file
diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue
index 5ec26d21..31d46bf0 100644
--- a/src/components/DocsExample.vue
+++ b/src/components/DocsExample.vue
@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  tabContentClass: String,
+})
+
+const url = `https://coreui.io/vue/docs/${props.href}`
+const addClass = props.tabContentClass
+</script>
+
 <template>
   <div class="example">
     <CNav variant="underline-border">
@@ -21,22 +31,3 @@
     </CTabContent>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'DocsExample',
-  props: {
-    href: String,
-    tabContentClass: String,
-  },
-  setup(props) {
-    const url = `https://coreui.io/vue/docs/${props.href}`
-    const addClass = props.tabContentClass
- 
-    return {
-      addClass,
-      url,
-    }
-  },
-}
-</script>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 83d249ac..4779d05a 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { CContainer } from '@coreui/vue'
+import AppFooter from '@/components/AppFooter.vue'
+import AppHeader from '@/components/AppHeader.vue'
+import AppSidebar from '@/components/AppSidebar.vue'
+</script>
+
 <template>
   <div>
     <AppSidebar />
@@ -12,19 +19,3 @@
     </div>
   </div>
 </template>
-<script>
-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',
-  components: {
-    AppFooter,
-    AppHeader,
-    AppSidebar,
-    CContainer,
-  },
-}
-</script>
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 6fbabff0..4fbc8235 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -3,6 +3,7 @@
 
 // Import styles
 @import "@coreui/coreui/scss/coreui";
+@import "@coreui/chartjs/scss/coreui-chartjs";
 
 // Vendors
 @import "vendors/simplebar";
diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue
index addf3053..83edaaf1 100644
--- a/src/views/base/Accordion.vue
+++ b/src/views/base/Accordion.vue
@@ -1,3 +1,4 @@
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -176,19 +177,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Accordion',
-  setup() {
-    const activeKey = ref(1)
-    const flushActiveKey = ref(1)
-
-    return {
-      activeKey,
-      flushActiveKey,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 1052fca3..c23bb469 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -54,9 +54,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Breadcrumbs',
-}
-</script>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index cb071768..43cf10b9 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -1,3 +1,8 @@
+
+<script setup>
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -227,7 +232,7 @@
           </p>
           <DocsExample href="components/card.html/#header-and-footer">
             <CCard>
-              <CCardHeader component="h5">Header</CCardHeader>
+              <CCardHeader as="h5">Header</CCardHeader>
               <CCardBody>
                 <CCardTitle>Special title treatment</CCardTitle>
                 <CCardText>
@@ -967,16 +972,4 @@
       </CCard>
     </CCol>
   </CRow>
-</template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Cards',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 3433ec1c..0003404b 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -1,3 +1,9 @@
+<script setup>
+import AngularImg from '@/assets/images/angular.jpg'
+import ReactImg from '@/assets/images/react.jpg'
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -82,7 +88,7 @@
             <code>&lt;CCarouselCaption&gt;</code> element within any
             <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
             on smaller viewports, as shown below, with optional
-            <a href="https://coreui.io/4.0/utilities/display"
+            <a href="https://coreui.io/docs/utilities/display"
               >display utilities</a
             >. We hide them with <code>.d-none</code> and draw them back on
             medium-sized devices with <code>.d-md-block</code>.
@@ -175,19 +181,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import AngularImg from '@/assets/images/angular.jpg'
-import ReactImg from '@/assets/images/react.jpg'
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Carousels',
-  setup() {
-    return {
-      AngularImg,
-      ReactImg,
-      VueImg,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 34d00f96..296dd9f3 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -1,3 +1,12 @@
+<script setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+const visibleA = ref(false)
+const visibleB = ref(false)
+const visibleHorizontal = ref(false)
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -6,23 +15,16 @@
           <strong>Vue Collapse</strong>
         </CCardHeader>
         <CCardBody>
-          <p class="text-body-secondary small">
-            You can use a link or a button component.
-          </p>
+          <p class="text-body-secondary small">You can use a link or a button component.</p>
           <DocsExample href="components/collapse.html#example">
-            <CButton color="primary" href="#" @click="visible = !visible"
-              >Link</CButton
-            >
-            <CButton color="primary" @click="visible = !visible"
-              >Button</CButton
-            >
+            <CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
+            <CButton color="primary" @click="visible = !visible">Button</CButton>
             <CCollapse :visible="visible">
               <CCard class="mt-3">
                 <CCardBody>
-                  Anim pariatur cliche reprehenderit, enim eiusmod high life
-                  accusamus terry richardson ad squid. Nihil anim keffiyeh
-                  helvetica, craft beer labore wes anderson cred nesciunt
-                  sapiente ea proident.
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                  richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                  cred nesciunt sapiente ea proident.
                 </CCardBody>
               </CCard>
             </CCollapse>
@@ -30,15 +32,12 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> Horizontal</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> Horizontal</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
             The collapse plugin also supports horizontal collapsing. Add the
-            <code>horizontal</code> property to transition the
-            <code>width</code> instead of <code>height</code> and set a
-            <code>width</code> on the immediate child element.
+            <code>horizontal</code> property to transition the <code>width</code> instead of
+            <code>height</code> and set a <code>width</code> on the immediate child element.
           </p>
           <DocsExample href="components/collapse.html#horizontal">
             <CButton
@@ -53,8 +52,8 @@
               <CCollapse horizontal :visible="visibleHorizontal">
                 <CCard style="width: 300px">
                   <CCardBody>
-                    This is some placeholder content for a horizontal collapse.
-                    It's hidden by default and shown when triggered.
+                    This is some placeholder content for a horizontal collapse. It's hidden by
+                    default and shown when triggered.
                   </CCardBody>
                 </CCard>
               </CCollapse>
@@ -63,21 +62,15 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> multi target</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> multi target</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
             A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
           </p>
           <h4 class="mt-4">Toggle multiple targets</h4>
           <DocsExample href="components/collapse.html#multiple-targets">
-            <CButton color="primary" @click="visibleA = !visibleA"
-              >Toggle first element</CButton
-            >
-            <CButton color="primary" @click="visibleB = !visibleB"
-              >Toggle second element</CButton
-            >
+            <CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
+            <CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
             <CButton
               color="primary"
               @click="
@@ -94,10 +87,9 @@
                 <CCollapse :visible="visibleA">
                   <CCard class="mt-3">
                     <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -106,10 +98,9 @@
                 <CCollapse :visible="visibleB">
                   <CCard class="mt-3">
                     <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -121,22 +112,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Collapse',
-  setup() {
-    const visible = ref(false)
-    const visibleA = ref(false)
-    const visibleB = ref(false)
-    const visibleHorizontal = ref(false)
-    return {
-      visible,
-      visibleA,
-      visibleB,
-      visibleHorizontal,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 1cf4cfbb..23093fc7 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -86,19 +86,19 @@
           </p>
           <DocsExample href="components/list-group.html#links-and-buttons">
             <CListGroup>
-              <CListGroupItem component="a" href="#" active>
+              <CListGroupItem as="a" href="#" active>
                 Cras justo odio
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Dapibus ac facilisis in
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Morbi leo risus
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 Porta ac consectetur ac
               </CListGroupItem>
-              <CListGroupItem component="a" href="#" disabled>
+              <CListGroupItem as="a" href="#" disabled>
                 Vestibulum at eros
               </CListGroupItem>
             </CListGroup>
@@ -204,7 +204,7 @@
           </p>
           <DocsExample href="components/list-group.html#contextual-classes">
             <CListGroup>
-              <CListGroupItem component="a" href="#"
+              <CListGroupItem as="a" href="#"
                 >Dapibus ac facilisis in</CListGroupItem
               >
               <CListGroupItem
@@ -219,7 +219,7 @@
                   'dark',
                 ]"
                 :key="item"
-                component="a"
+                as="a"
                 href="#"
                 :color="item"
                 >A simple {{ item }} list group item</CListGroupItem
@@ -279,7 +279,7 @@
           </p>
           <DocsExample href="components/list-group.html#custom-content">
             <CListGroup>
-              <CListGroupItem component="a" href="#" active>
+              <CListGroupItem as="a" href="#" active>
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small>3 days ago</small>
@@ -290,7 +290,7 @@
                 </p>
                 <small>Donec id elit non mi porta.</small>
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small class="text-body-secondary">3 days ago</small>
@@ -303,7 +303,7 @@
                   >Donec id elit non mi porta.</small
                 >
               </CListGroupItem>
-              <CListGroupItem component="a" href="#">
+              <CListGroupItem as="a" href="#">
                 <div class="d-flex w-100 justify-content-between">
                   <h5 class="mb-1">List group item heading</h5>
                   <small class="text-body-secondary">3 days ago</small>
@@ -355,9 +355,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ListGroups',
-}
-</script>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 652afd87..ec73f2a8 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -38,7 +38,7 @@
             the extra markup.
           </p>
           <DocsExample href="components/nav.html#base-nav">
-            <CNav component="nav">
+            <CNav as="nav">
               <CNavLink href="#" active> Active </CNavLink>
               <CNavLink href="#">Link</CNavLink>
               <CNavLink href="#">Link</CNavLink>
@@ -265,7 +265,7 @@
           </p>
           <DocsExample href="components/nav.html#working-with-flex-utilities">
             <CNav
-              component="nav"
+              as="nav"
               variant="pills"
               class="flex-column flex-sm-row"
             >
@@ -344,9 +344,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Navs',
-}
-</script>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 14c4ecbc..060cdd02 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -173,9 +173,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Paginations',
-}
-</script>
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
index 723b68be..631375cd 100644
--- a/src/views/base/Placeholders.vue
+++ b/src/views/base/Placeholders.vue
@@ -1,3 +1,7 @@
+<script setup>
+import VueImg from '@/assets/images/vue.jpg'
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -26,7 +30,7 @@
               </CCard>
               <CCard style="width: 18rem">
                 <CCardImage
-                  component="svg"
+                  as="svg"
                   orientation="top"
                   width="100%"
                   height="162"
@@ -160,11 +164,11 @@
             something being <em>actively</em> loaded.
           </p>
           <DocsExample href="components/placeholder.html#animation">
-            <CPlaceholder component="p" animation="glow">
+            <CPlaceholder as="p" animation="glow">
               <CPlaceholder :xs="12" />
             </CPlaceholder>
 
-            <CPlaceholder component="p" animation="wave">
+            <CPlaceholder as="p" animation="wave">
               <CPlaceholder :xs="12" />
             </CPlaceholder>
           </DocsExample>
@@ -173,15 +177,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Placeholders',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 1127cf3c..33d6d8a0 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -76,9 +76,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Popovers',
-}
-</script>
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index ff300e5a..8d7f810d 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -137,16 +137,32 @@
           </p>
           <DocsExample href="components/progress.html#striped">
             <CProgress class="mb-3">
-              <CProgressBar color="success" variant="striped" :value="25" />
+              <CProgressBar
+                color="success"
+                variant="striped"
+                :value="25"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="info" variant="striped" :value="50" />
+              <CProgressBar
+                color="info"
+                variant="striped"
+                :value="50"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="warning" variant="striped" :value="75" />
+              <CProgressBar
+                color="warning"
+                variant="striped"
+                :value="75"
+              />
             </CProgress>
             <CProgress class="mb-3">
-              <CProgressBar color="danger" variant="striped" :value="100" />
+              <CProgressBar
+                color="danger"
+                variant="striped"
+                :value="100"
+              />
             </CProgress>
           </DocsExample>
         </CCardBody>
@@ -203,10 +219,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Progress',
-}
-</script>
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 8c366349..54d5d44c 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -91,17 +91,17 @@
           </p>
           <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
+              <CSpinner as="span" size="sm" aria-hidden="true" />
             </CButton>
             <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
+              <CSpinner as="span" size="sm" aria-hidden="true" />
               Loading...
             </CButton>
           </DocsExample>
           <DocsExample href="components/spinner.html#buttons">
             <CButton disabled>
               <CSpinner
-                component="span"
+                as="span"
                 size="sm"
                 variant="grow"
                 aria-hidden="true"
@@ -109,7 +109,7 @@
             </CButton>
             <CButton disabled>
               <CSpinner
-                component="span"
+                as="span"
                 size="sm"
                 variant="grow"
                 aria-hidden="true"
@@ -122,9 +122,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Spinners',
-}
-</script>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 30dde23b..6dcc2a94 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -985,9 +985,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tables',
-}
-</script>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 31bc9841..cbf68c99 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -72,9 +72,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tooltips',
-}
-</script>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index d1b97bf5..479874a5 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -415,9 +415,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ButtonGroups',
-}
-</script>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 9d18dcb3..fc09f196 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -122,24 +122,24 @@
             meaning to assistive technologies such as screen readers.
           </p>
           <DocsExample href="components/button.html#button-components">
-            <CButton component="a" color="primary" href="#" role="button">
+            <CButton as="a" color="primary" href="#" role="button">
               Link
             </CButton>
             <CButton type="submit" color="primary"> Button </CButton>
             <CButton
-              component="input"
+              as="input"
               type="button"
               color="primary"
               value="Input"
             />
             <CButton
-              component="input"
+              as="input"
               type="submit"
               color="primary"
               value="Submit"
             />
             <CButton
-              component="input"
+              as="input"
               type="reset"
               color="primary"
               value="Reset"
@@ -359,11 +359,11 @@
             state of the component to assistive technologies.
           </p>
           <DocsExample href="components/button.html#disabled-state">
-            <CButton component="a" href="#" color="primary" size="lg" disabled>
+            <CButton as="a" href="#" color="primary" size="lg" disabled>
               Primary link
             </CButton>
             <CButton
-              component="a"
+              as="a"
               href="#"
               color="secondary"
               size="lg"
@@ -434,9 +434,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Buttons',
-}
-</script>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 8b0b93b6..4fbd90e3 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -225,7 +225,7 @@
                   class="collapse navbar-collapse"
                 >
                   <ul class="navbar-nav">
-                    <CDropdown dark component="li" variant="nav-item">
+                    <CDropdown dark as="li" variant="nav-item">
                       <CDropdownToggle>Dropdown</CDropdownToggle>
                       <CDropdownMenu>
                         <CDropdownItem href="#">Action</CDropdownItem>
@@ -353,9 +353,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Dropdowns',
-}
-</script>
diff --git a/src/views/charts/CChartBarExample.vue b/src/views/charts/CChartBarExample.vue
index 33e927f5..6f735afe 100644
--- a/src/views/charts/CChartBarExample.vue
+++ b/src/views/charts/CChartBarExample.vue
@@ -1,38 +1,31 @@
-<template>
-  <CChartBar :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartBar } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartBarExample',
-  components: { CChartBar },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'January',
-          'February',
-          'March',
-          'April',
-          'May',
-          'June',
-          'July',
-          'August',
-          'September',
-          'October',
-          'November',
-          'December',
-        ],
-        datasets: [
-          {
-            label: 'GitHub Commits',
-            backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
-          },
-        ],
-      }
+
+const data = {
+  labels: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartBar :data="data" />
+</template>
\ No newline at end of file
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
index 653c8c89..2a6e75b9 100644
--- a/src/views/charts/CChartDoughnutExample.vue
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -1,24 +1,17 @@
-<template>
-  <CChartDoughnut :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartDoughnut } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartDoughnutExample',
-  components: { CChartDoughnut },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
+  datasets: [
+    {
+      backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+      data: [40, 20, 80, 10],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartDoughnut :data="data" />
+</template>
diff --git a/src/views/charts/CChartLineExample.vue b/src/views/charts/CChartLineExample.vue
index f1a0cc6a..e1682d0b 100644
--- a/src/views/charts/CChartLineExample.vue
+++ b/src/views/charts/CChartLineExample.vue
@@ -1,30 +1,23 @@
-<template>
-  <CChartLine :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartLine } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartLineExample',
-  components: { CChartLine },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['months', 'a', 'b', 'c', 'd'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: 'rgb(228,102,81,0.9)',
-            data: [30, 39, 10, 50, 30, 70, 35],
-          },
-          {
-            label: 'Data Two',
-            backgroundColor: 'rgb(0,216,255,0.9)',
-            data: [39, 80, 40, 35, 40, 20, 45],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['months', 'a', 'b', 'c', 'd'],
+  datasets: [
+    {
+      label: 'Data One',
+      backgroundColor: 'rgb(228,102,81,0.9)',
+      data: [30, 39, 10, 50, 30, 70, 35],
     },
-  },
+    {
+      label: 'Data Two',
+      backgroundColor: 'rgb(0,216,255,0.9)',
+      data: [39, 80, 40, 35, 40, 20, 45],
+    },
+  ],
 }
 </script>
+
+<template>
+  <CChartLine :data="data" />
+</template>
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
index b4857377..8819dd43 100644
--- a/src/views/charts/CChartPieExample.vue
+++ b/src/views/charts/CChartPieExample.vue
@@ -1,24 +1,17 @@
-<template>
-  <CChartPie :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPie } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPieExample',
-  components: { CChartPie },
-  computed: {
-    defaultData() {
-      return {
-        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }
+
+const data = {
+  labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
+  datasets: [
+    {
+      backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+      data: [40, 20, 80, 10],
     },
-  },
+  ],
 }
 </script>
+
+<template>
+  <CChartPie :data="data" />
+</template>
diff --git a/src/views/charts/CChartPolarAreaExample.vue b/src/views/charts/CChartPolarAreaExample.vue
index 192b2e24..7311fae6 100644
--- a/src/views/charts/CChartPolarAreaExample.vue
+++ b/src/views/charts/CChartPolarAreaExample.vue
@@ -1,49 +1,34 @@
-<template>
-  <CChartPolarArea :data="defaultData" />
-</template>
-
-<script>
+<script setup>
 import { CChartPolarArea } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartPolarAreaExample',
-  components: { CChartPolarArea },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: 'My First dataset',
-            backgroundColor: 'rgba(179,181,198,0.5)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(179,181,198,1)',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: 'My Second dataset',
-            backgroundColor: 'rgba(255,99,132,0.5)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: 'rgba(255,99,132,1)',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: 'rgba(179,181,198,0.5)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
     },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'rgba(255,99,132,0.5)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
+    },
+  ],
+  options: {
+    aspectRatio: 1.5,
   },
 }
 </script>
+
+<template>
+  <CChartPolarArea :data="data" />
+</template>
diff --git a/src/views/charts/CChartRadarExample.vue b/src/views/charts/CChartRadarExample.vue
index c4513702..79e2e214 100644
--- a/src/views/charts/CChartRadarExample.vue
+++ b/src/views/charts/CChartRadarExample.vue
@@ -1,53 +1,38 @@
 <template>
-  <CChartRadar :data="defaultData" />
+  <CChartRadar :data="data" />
 </template>
 
-<script>
+<script setup>
 import { CChartRadar } from '@coreui/vue-chartjs'
-export default {
-  name: 'CChartRadarExample',
-  components: { CChartRadar },
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: '2020',
-            backgroundColor: 'rgba(179,181,198,0.2)',
-            borderColor: 'rgba(179,181,198,1)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            tooltipLabelColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: '2021',
-            backgroundColor: 'rgba(255,99,132,0.2)',
-            borderColor: 'rgba(255,99,132,1)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            tooltipLabelColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-        options: {
-          aspectRatio: 1.5,
-        },
-      }
+
+const data = {
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+  datasets: [
+    {
+      label: '2020',
+      backgroundColor: 'rgba(179,181,198,0.2)',
+      borderColor: 'rgba(179,181,198,1)',
+      pointBackgroundColor: 'rgba(179,181,198,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(179,181,198,1)',
+      tooltipLabelColor: 'rgba(179,181,198,1)',
+      data: [65, 59, 90, 81, 56, 55, 40],
+    },
+    {
+      label: '2021',
+      backgroundColor: 'rgba(255,99,132,0.2)',
+      borderColor: 'rgba(255,99,132,1)',
+      pointBackgroundColor: 'rgba(255,99,132,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(255,99,132,1)',
+      tooltipLabelColor: 'rgba(255,99,132,1)',
+      data: [28, 48, 40, 19, 96, 27, 100],
     },
+  ],
+  options: {
+    aspectRatio: 1.5,
   },
 }
 </script>
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
index eff0304f..9457ec80 100644
--- a/src/views/charts/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -1,3 +1,14 @@
+<script setup>
+import {
+  CChartLineExample,
+  CChartBarExample,
+  CChartDoughnutExample,
+  CChartRadarExample,
+  CChartPieExample,
+  CChartPolarAreaExample,
+} from './index.js'
+</script>
+
 <template>
   <CRow>
     <CCol :md="6" class="mb-4">
@@ -40,13 +51,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import * as Charts from './index.js'
-export default {
-  name: 'Charts',
-  components: {
-    ...Charts,
-  },
-}
-</script>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index fc95f213..644979b9 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,3 +1,130 @@
+<script setup>
+import avatar1 from '@/assets/images/avatars/1.jpg'
+import avatar2 from '@/assets/images/avatars/2.jpg'
+import avatar3 from '@/assets/images/avatars/3.jpg'
+import avatar4 from '@/assets/images/avatars/4.jpg'
+import avatar5 from '@/assets/images/avatars/5.jpg'
+import avatar6 from '@/assets/images/avatars/6.jpg'
+import MainChart from './MainChart.vue'
+import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
+
+const progressGroupExample1 = [
+  { title: 'Monday', value1: 34, value2: 78 },
+  { title: 'Tuesday', value1: 56, value2: 94 },
+  { title: 'Wednesday', value1: 12, value2: 67 },
+  { title: 'Thursday', value1: 43, value2: 91 },
+  { title: 'Friday', value1: 22, value2: 73 },
+  { title: 'Saturday', value1: 53, value2: 82 },
+  { title: 'Sunday', value1: 9, value2: 69 },
+]
+const progressGroupExample2 = [
+  { title: 'Male', icon: 'cil-user', value: 53 },
+  { title: 'Female', icon: 'cil-user-female', value: 43 },
+]
+const progressGroupExample3 = [
+  {
+    title: 'Organic Search',
+    icon: 'cib-google',
+    percent: 56,
+    value: '191,235',
+  },
+  { title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
+  { title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
+  { title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
+]
+const tableExample = [
+  {
+    avatar: { src: avatar1, status: 'success' },
+    user: {
+      name: 'Yiorgos Avraamu',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'USA', flag: 'cif-us' },
+    usage: {
+      value: 50,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'success',
+    },
+    payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
+    activity: '10 sec ago',
+  },
+  {
+    avatar: { src: avatar2, status: 'danger' },
+    user: {
+      name: 'Avram Tarasios',
+      new: false,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Brazil', flag: 'cif-br' },
+    usage: {
+      value: 22,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'info',
+    },
+    payment: { name: 'Visa', icon: 'cib-cc-visa' },
+    activity: '5 minutes ago',
+  },
+  {
+    avatar: { src: avatar3, status: 'warning' },
+    user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
+    country: { name: 'India', flag: 'cif-in' },
+    usage: {
+      value: 74,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'warning',
+    },
+    payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
+    activity: '1 hour ago',
+  },
+  {
+    avatar: { src: avatar4, status: 'secondary' },
+    user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
+    country: { name: 'France', flag: 'cif-fr' },
+    usage: {
+      value: 98,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'danger',
+    },
+    payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
+    activity: 'Last month',
+  },
+  {
+    avatar: { src: avatar5, status: 'success' },
+    user: {
+      name: 'Agapetus Tadeáš',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Spain', flag: 'cif-es' },
+    usage: {
+      value: 22,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'primary',
+    },
+    payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
+    activity: 'Last week',
+  },
+  {
+    avatar: { src: avatar6, status: 'danger' },
+    user: {
+      name: 'Friderik Dávid',
+      new: true,
+      registered: 'Jan 1, 2023',
+    },
+    country: { name: 'Poland', flag: 'cif-pl' },
+    usage: {
+      value: 43,
+      period: 'Jun 11, 2023 - Jul 10, 2023',
+      color: 'success',
+    },
+    payment: { name: 'Amex', icon: 'cib-cc-amex' },
+    activity: 'Last week',
+  },
+]
+</script>
+
 <template>
   <div>
     <WidgetsStatsA class="mb-4" />
@@ -208,147 +335,3 @@
     </CRow>
   </div>
 </template>
-
-<script>
-import avatar1 from '@/assets/images/avatars/1.jpg'
-import avatar2 from '@/assets/images/avatars/2.jpg'
-import avatar3 from '@/assets/images/avatars/3.jpg'
-import avatar4 from '@/assets/images/avatars/4.jpg'
-import avatar5 from '@/assets/images/avatars/5.jpg'
-import avatar6 from '@/assets/images/avatars/6.jpg'
-import MainChart from './MainChart'
-import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
-
-export default {
-  name: 'Dashboard',
-  components: {
-    MainChart,
-    WidgetsStatsA,
-    WidgetsStatsD,
-  },
-  setup() {
-    const progressGroupExample1 = [
-      { title: 'Monday', value1: 34, value2: 78 },
-      { title: 'Tuesday', value1: 56, value2: 94 },
-      { title: 'Wednesday', value1: 12, value2: 67 },
-      { title: 'Thursday', value1: 43, value2: 91 },
-      { title: 'Friday', value1: 22, value2: 73 },
-      { title: 'Saturday', value1: 53, value2: 82 },
-      { title: 'Sunday', value1: 9, value2: 69 },
-    ]
-    const progressGroupExample2 = [
-      { title: 'Male', icon: 'cil-user', value: 53 },
-      { title: 'Female', icon: 'cil-user-female', value: 43 },
-    ]
-    const progressGroupExample3 = [
-      {
-        title: 'Organic Search',
-        icon: 'cib-google',
-        percent: 56,
-        value: '191,235',
-      },
-      { title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
-      { title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
-      { title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
-    ]
-    const tableExample = [
-      {
-        avatar: { src: avatar1, status: 'success' },
-        user: {
-          name: 'Yiorgos Avraamu',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'USA', flag: 'cif-us' },
-        usage: {
-          value: 50,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'success',
-        },
-        payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
-        activity: '10 sec ago',
-      },
-      {
-        avatar: { src: avatar2, status: 'danger' },
-        user: {
-          name: 'Avram Tarasios',
-          new: false,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Brazil', flag: 'cif-br' },
-        usage: {
-          value: 22,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'info',
-        },
-        payment: { name: 'Visa', icon: 'cib-cc-visa' },
-        activity: '5 minutes ago',
-      },
-      {
-        avatar: { src: avatar3, status: 'warning' },
-        user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
-        country: { name: 'India', flag: 'cif-in' },
-        usage: {
-          value: 74,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'warning',
-        },
-        payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
-        activity: '1 hour ago',
-      },
-      {
-        avatar: { src: avatar4, status: 'secondary' },
-        user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
-        country: { name: 'France', flag: 'cif-fr' },
-        usage: {
-          value: 98,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'danger',
-        },
-        payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
-        activity: 'Last month',
-      },
-      {
-        avatar: { src: avatar5, status: 'success' },
-        user: {
-          name: 'Agapetus Tadeáš',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Spain', flag: 'cif-es' },
-        usage: {
-          value: 22,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'primary',
-        },
-        payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
-        activity: 'Last week',
-      },
-      {
-        avatar: { src: avatar6, status: 'danger' },
-        user: {
-          name: 'Friderik Dávid',
-          new: true,
-          registered: 'Jan 1, 2023',
-        },
-        country: { name: 'Poland', flag: 'cif-pl' },
-        usage: {
-          value: 43,
-          period: 'Jun 11, 2023 - Jul 10, 2023',
-          color: 'success',
-        },
-        payment: { name: 'Amex', icon: 'cib-cc-amex' },
-        activity: 'Last week',
-      },
-    ]
-
-    return {
-      tableExample,
-      progressGroupExample1,
-      progressGroupExample2,
-      progressGroupExample3,
-    }
-  },
-}
-</script>
diff --git a/src/views/dashboard/MainChart.vue b/src/views/dashboard/MainChart.vue
index 6df1c977..acadd733 100644
--- a/src/views/dashboard/MainChart.vue
+++ b/src/views/dashboard/MainChart.vue
@@ -1,148 +1,128 @@
-<template>
-  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
-</template>
-
-<script>
+<script setup>
 import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
 import { getStyle } from '@coreui/utils'
 
 const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
-export default {
-  name: 'MainChartExample',
-  components: {
-    CChart,
-  },
-  setup() {
-    const mainChartRef = ref()
-    const data = {
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
-          borderColor: getStyle('--cui-info'),
-          pointHoverBackgroundColor: getStyle('--cui-info'),
-          borderWidth: 2,
-          data: [
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-          ],
-          fill: true,
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'transparent',
-          borderColor: getStyle('--cui-success'),
-          pointHoverBackgroundColor: getStyle('--cui-success'),
-          borderWidth: 2,
-          data: [
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-            random(50, 200),
-          ],
-        },
-        {
-          label: 'My Third dataset',
-          backgroundColor: 'transparent',
-          borderColor: getStyle('--cui-danger'),
-          pointHoverBackgroundColor: getStyle('--cui-danger'),
-          borderWidth: 1,
-          borderDash: [8, 5],
-          data: [65, 65, 65, 65, 65, 65, 65],
-        },
+const mainChartRef = ref()
+const data = {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [
+    {
+      label: 'My First dataset',
+      backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+      borderColor: getStyle('--cui-info'),
+      pointHoverBackgroundColor: getStyle('--cui-info'),
+      borderWidth: 2,
+      data: [
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
       ],
-    }
+      fill: true,
+    },
+    {
+      label: 'My Second dataset',
+      backgroundColor: 'transparent',
+      borderColor: getStyle('--cui-success'),
+      pointHoverBackgroundColor: getStyle('--cui-success'),
+      borderWidth: 2,
+      data: [
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+        random(50, 200),
+      ],
+    },
+    {
+      label: 'My Third dataset',
+      backgroundColor: 'transparent',
+      borderColor: getStyle('--cui-danger'),
+      pointHoverBackgroundColor: getStyle('--cui-danger'),
+      borderWidth: 1,
+      borderDash: [8, 5],
+      data: [65, 65, 65, 65, 65, 65, 65],
+    },
+  ],
+}
 
-    const options = {
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
+const options = {
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      grid: {
+        color: getStyle('--cui-border-color-translucent'),
+        drawOnChartArea: false,
       },
-      scales: {
-        x: {
-          grid: {
-            color: getStyle('--cui-border-color-translucent'),
-            drawOnChartArea: false,
-          },
-          ticks: {
-            color: getStyle('--cui-body-color'),
-          },
-        },
-        y: {
-          beginAtZero: true,
-          border: {
-            color: getStyle('--cui-border-color-translucent'),
-          },
-          grid: {
-            color: getStyle('--cui-border-color-translucent'),
-          },
-          max: 250,
-          ticks: {
-            color: getStyle('--cui-body-color'),
-            maxTicksLimit: 5,
-            stepSize: Math.ceil(250 / 5),
-          },
-        },
+      ticks: {
+        color: getStyle('--cui-body-color'),
       },
-      elements: {
-        line: {
-          tension: 0.4,
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3,
-        },
+    },
+    y: {
+      beginAtZero: true,
+      border: {
+        color: getStyle('--cui-border-color-translucent'),
       },
-    }
-
-    onMounted(() => {
-      document.documentElement.addEventListener('ColorSchemeChange', () => {
-        if (mainChartRef.value) {
-          mainChartRef.value.chart,
-            (options.scales.x.grid.borderColor = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.x.grid.color = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.x.ticks.color = getStyle('--cui-body-color'))
-          mainChartRef.value.chart,
-            (options.scales.y.grid.borderColor = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.y.grid.color = getStyle(
-              '--cui-border-color-translucent',
-            ))
-          mainChartRef.value.chart,
-            (options.scales.y.ticks.color = getStyle('--cui-body-color'))
-          mainChartRef.value.chart.update()
-        }
-      })
-    })
-
-    return {
-      data,
-      mainChartRef,
-      options,
-    }
+      grid: {
+        color: getStyle('--cui-border-color-translucent'),
+      },
+      max: 250,
+      ticks: {
+        color: getStyle('--cui-body-color'),
+        maxTicksLimit: 5,
+        stepSize: Math.ceil(250 / 5),
+      },
+    },
+  },
+  elements: {
+    line: {
+      tension: 0.4,
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 4,
+      hoverBorderWidth: 3,
+    },
   },
 }
+
+onMounted(() => {
+  document.documentElement.addEventListener('ColorSchemeChange', () => {
+    if (mainChartRef.value) {
+      mainChartRef.value.chart.options.scales.x.grid.borderColor = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.x.grid.color = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.x.ticks.color = getStyle('--cui-body-color')
+      mainChartRef.value.chart.options.scales.y.grid.borderColor = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.y.grid.color = getStyle(
+        '--cui-border-color-translucent',
+      )
+      mainChartRef.value.chart.options.scales.y.ticks.color = getStyle('--cui-body-color')
+      mainChartRef.value.chart.update()
+    }
+  })
+})
 </script>
+
+<template>
+  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
+</template>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index b41d44ca..932013b9 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -396,9 +396,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ChecksRadios',
-}
-</script>
diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue
index 0ecc2ae9..e171d190 100644
--- a/src/views/forms/FloatingLabels.vue
+++ b/src/views/forms/FloatingLabels.vue
@@ -170,9 +170,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FloatingLabels',
-}
-</script>
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index c36e6d00..fc307643 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -242,9 +242,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FormControl',
-}
-</script>
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 7322fc69..9c1fa052 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -400,7 +400,7 @@
         <CCardBody>
           <DocsExample href="forms/input-group.html#custom-select">
             <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupSelect01">
+              <CInputGroupText as="label" for="inputGroupSelect01">
                 Options
               </CInputGroupText>
               <CFormSelect id="inputGroupSelect01">
@@ -417,7 +417,7 @@
                 <option value="2">Two</option>
                 <option value="3">Three</option>
               </CFormSelect>
-              <CInputGroupText component="label" for="inputGroupSelect02">
+              <CInputGroupText as="label" for="inputGroupSelect02">
                 Options
               </CInputGroupText>
             </CInputGroup>
@@ -461,14 +461,14 @@
         <CCardBody>
           <DocsExample href="forms/input-group.html#custom-file-input">
             <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupFile01">
+              <CInputGroupText as="label" for="inputGroupFile01">
                 Upload
               </CInputGroupText>
               <CFormInput id="inputGroupFile01" type="file" />
             </CInputGroup>
             <CInputGroup class="mb-3">
               <CFormInput id="inputGroupFile02" type="file" />
-              <CInputGroupText component="label" for="inputGroupFile02">
+              <CInputGroupText as="label" for="inputGroupFile02">
                 Upload
               </CInputGroupText>
             </CInputGroup>
@@ -510,9 +510,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'InputGroup',
-}
-</script>
diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue
index aae8cc4f..711043f1 100644
--- a/src/views/forms/Layout.vue
+++ b/src/views/forms/Layout.vue
@@ -450,9 +450,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Layout',
-}
-</script>
diff --git a/src/views/forms/Range.vue b/src/views/forms/Range.vue
index 58d6b90b..3a92d645 100644
--- a/src/views/forms/Range.vue
+++ b/src/views/forms/Range.vue
@@ -47,7 +47,7 @@
           </p>
           <DocsExample href="forms/range.html#min-and-max">
             <CFormLabel for="customRange2">Example range</CFormLabel>
-            <CFormRange id="customRange2" :min="0" :max="5" value="3" />
+            <CFormRange id="customRange2" :min="0" :max="5" :value="3" />
           </DocsExample>
         </CCardBody>
       </CCard>
@@ -71,7 +71,7 @@
               :min="0"
               :max="5"
               :step="0.5"
-              value="3"
+              :value="3"
             />
           </DocsExample>
         </CCardBody>
@@ -79,9 +79,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Range',
-}
-</script>
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index 96a75f78..61649e8f 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -105,10 +105,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Select',
-}
-</script>
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index 905325ed..edacace9 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -1,25 +1,58 @@
+<script setup>
+import { ref } from 'vue'
+const validatedCustom01 = ref(false)
+const validatedDefault01 = ref(false)
+const validatedTooltip01 = ref(false)
+
+const handleSubmitCustom01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  validatedCustom01.value = true
+}
+
+const handleSubmitDefault01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  validatedDefault01.value = true
+}
+
+const handleSubmitTooltip01 = (event) => {
+  const form = event.currentTarget
+  if (form.checkValidity() === false) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+  
+  validatedTooltip01.value = true
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Custom styles</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            For custom CoreUI form validation messages, you&#39;ll need to add
-            the
-            <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
-            will intercept the submit button and relay feedback to you. When
-            attempting to submit, you&#39;ll see the <code>:invalid</code> and
-            <code>:valid</code> styles applied to your form controls.
+            For custom CoreUI form validation messages, you&#39;ll need to add the
+            <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 will
+            intercept the submit button and relay feedback to you. When attempting to submit,
+            you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
+            form controls.
           </p>
           <p class="text-body-secondary small">
-            Custom feedback styles apply custom colors, borders, focus styles,
-            and background icons to better communicate feedback.
+            Custom feedback styles apply custom colors, borders, focus styles, and background icons
+            to better communicate feedback.
           </p>
           <DocsExample href="forms/validation.html">
             <CForm
@@ -48,17 +81,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationCustom03">City</CFormLabel>
                 <CFormInput id="validationCustom03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom04">City</CFormLabel>
@@ -66,16 +95,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom05">City</CFormLabel>
                 <CFormInput id="validationCustom05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -84,9 +109,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -98,20 +121,17 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Browser defaults</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Browser defaults</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Not interested in custom validation feedback messages or writing
-            JavaScript to change form behaviors? All good, you can use the
-            browser defaults. Try submitting the form below. Depending on your
-            browser and OS, you&#39;ll see a slightly different style of
+            Not interested in custom validation feedback messages or writing JavaScript to change
+            form behaviors? All good, you can use the browser defaults. Try submitting the form
+            below. Depending on your browser and OS, you&#39;ll see a slightly different style of
             feedback.
           </p>
           <p class="text-body-secondary small">
-            While these feedback styles cannot be styled with CSS, you can still
-            customize the feedback text through JavaScript.
+            While these feedback styles cannot be styled with CSS, you can still customize the
+            feedback text through JavaScript.
           </p>
           <DocsExample href="forms/validation.html#browser-defaults">
             <CForm
@@ -130,9 +150,7 @@
                 <CFormFeedback valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4">
-                <CFormLabel for="validationDefaultUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationDefaultUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
                   <CFormInput
@@ -141,17 +159,13 @@
                     aria-describedby="inputGroupPrepend02"
                     required
                   />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationDefault03">City</CFormLabel>
                 <CFormInput id="validationDefault03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault04">City</CFormLabel>
@@ -159,16 +173,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault05">City</CFormLabel>
                 <CFormInput id="validationDefault05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -177,9 +187,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -191,48 +199,33 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Server side</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Server side</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            We recommend using client-side validation, but in case you require
-            server-side validation, you can indicate invalid and valid form
-            fields with <code>invalid</code> and <code>valid</code> boolean
-            properties.
+            We recommend using client-side validation, but in case you require server-side
+            validation, you can indicate invalid and valid form fields with <code>invalid</code> and
+            <code>valid</code> boolean properties.
           </p>
           <p class="text-body-secondary small">
-            For invalid fields, ensure that the invalid feedback/error message
-            is associated with the relevant form field using
-            <code>aria-describedby</code> (noting that this attribute allows
-            more than one <code>id</code> to be referenced, in case the field
-            already points to additional form text).
+            For invalid fields, ensure that the invalid feedback/error message is associated with
+            the relevant form field using
+            <code>aria-describedby</code> (noting that this attribute allows more than one
+            <code>id</code> to be referenced, in case the field already points to additional form
+            text).
           </p>
           <DocsExample href="forms/validation.html#server-side">
             <CForm class="row g-3 needs-validation">
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServer01">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer01"
-                  type="text"
-                  value="Mark"
-                  valid
-                  required
-                />
+                <CFormInput id="validationServer01" type="text" value="Mark" valid required />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServer02">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer02"
-                  type="text"
-                  value="Otto"
-                  valid
-                  required
-                />
+                <CFormInput id="validationServer02" type="text" value="Otto" valid required />
                 <CFormFeedback valid>Looks good!</CFormFeedback>
               </CCol>
-              <CCol ::md="4">
+              <CCol :md="4">
                 <CFormLabel for="validationServerUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
@@ -244,22 +237,13 @@
                     invalid
                     required
                   />
-                  <CFormFeedback invalid
-                    >Please choose a username.</CFormFeedback
-                  >
+                  <CFormFeedback invalid>Please choose a username.</CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationServer03">City</CFormLabel>
-                <CFormInput
-                  id="validationServer03"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
+                <CFormInput id="validationServer03" type="text" invalid required />
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer04">City</CFormLabel>
@@ -267,21 +251,12 @@
                   <option disabled>Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer05">City</CFormLabel>
-                <CFormInput
-                  id="validationServer05"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid zip.</CFormFeedback
-                >
+                <CFormInput id="validationServer05" type="text" invalid required />
+                <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -291,9 +266,7 @@
                   invalid
                   required
                 />
-                <CFormFeedback invalid
-                  >You must agree before submitting.</CFormFeedback
-                >
+                <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CButton color="primary" type="submit"> Submit form </CButton>
@@ -305,13 +278,10 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Supported elements</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Supported elements</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Validation styles are available for the following form controls and
-            components:
+            Validation styles are available for the following form controls and components:
           </p>
           <ul>
             <li><code>&lt;CFormInput&gt;</code>s</li>
@@ -321,18 +291,14 @@
           <DocsExample href="forms/validation.html#supported-elements">
             <CForm :validated="true">
               <div class="mb-3">
-                <CFormLabel for="validationTextarea" class="form-label"
-                  >Textarea</CFormLabel
-                >
+                <CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
                 <CFormTextarea
                   id="validationTextarea"
                   placeholder="Required example textarea"
                   invalid
                   required
                 ></CFormTextarea>
-                <CFormFeedback invalid>
-                  Please enter a message in the textarea.
-                </CFormFeedback>
+                <CFormFeedback invalid> Please enter a message in the textarea. </CFormFeedback>
               </div>
               <CFormCheck
                 id="validationFormCheck1"
@@ -340,9 +306,7 @@
                 label="Check this checkbox"
                 required
               />
-              <CFormFeedback invalid
-                >Example invalid feedback text</CFormFeedback
-              >
+              <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
               <CFormCheck
                 id="validationFormCheck2"
                 type="radio"
@@ -358,9 +322,7 @@
                 label="Or toggle this other radio"
                 required
               />
-              <CFormFeedback invalid
-                >More example invalid feedback text</CFormFeedback
-              >
+              <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
               <div class="mb-3">
                 <CFormSelect required aria-label="select example">
                   <option>Open this select menu</option>
@@ -368,9 +330,7 @@
                   <option value="2">Two</option>
                   <option value="3">Three</option>
                 </CFormSelect>
-                <CFormFeedback invalid
-                  >Example invalid select feedback</CFormFeedback
-                >
+                <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
               </div>
               <div class="mb-3">
                 <CFormInput
@@ -379,14 +339,10 @@
                   aria-label="file example"
                   required
                 />
-                <CFormFeedback invalid
-                  >Example invalid form file feedback</CFormFeedback
-                >
+                <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
               </div>
               <div class="mb-3">
-                <CButton type="submit" color="primary" disabled
-                  >Submit form</CButton
-                >
+                <CButton type="submit" color="primary" disabled>Submit form</CButton>
               </div>
             </CForm>
           </DocsExample>
@@ -395,17 +351,13 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Tooltips</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Tooltips</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            If your form layout allows it, you can swap the text for the tooltip
-            to display validation feedback in a styled tooltip. Be sure to have
-            a parent with
-            <code>position: relative</code> on it for tooltip positioning. In
-            the example below, our column classes have this already, but your
-            project may require an alternative setup.
+            If your form layout allows it, you can swap the text for the tooltip to display
+            validation feedback in a styled tooltip. Be sure to have a parent with
+            <code>position: relative</code> on it for tooltip positioning. In the example below, our
+            column classes have this already, but your project may require an alternative setup.
           </p>
           <DocsExample href="forms/validation.html#tooltips">
             <CForm
@@ -425,9 +377,7 @@
                 <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
               </CCol>
               <CCol :md="4" class="position-relative">
-                <CFormLabel for="validationTooltipUsername"
-                  >Username</CFormLabel
-                >
+                <CFormLabel for="validationTooltipUsername">Username</CFormLabel>
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
                   <CFormInput
@@ -436,17 +386,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback tooltip invalid>
-                    Please choose a username.
-                  </CFormFeedback>
+                  <CFormFeedback tooltip invalid> Please choose a username. </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6" class="position-relative">
                 <CFormLabel for="validationTooltip03">City</CFormLabel>
                 <CFormInput id="validationTooltip03" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3" class="position-relative">
                 <CFormLabel for="validationTooltip04">City</CFormLabel>
@@ -454,16 +400,12 @@
                   <option disabled value="">Choose...</option>
                   <option>...</option>
                 </CFormSelect>
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
               </CCol>
               <CCol :md="3" class="position-relative">
                 <CFormLabel for="validationTooltip05">City</CFormLabel>
                 <CFormInput id="validationTooltip05" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
+                <CFormFeedback tooltip invalid> Please provide a valid zip. </CFormFeedback>
               </CCol>
               <CCol :xs="12" class="position-relative">
                 <CButton color="primary" type="submit">Submit form</CButton>
@@ -475,42 +417,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Validation',
-  data: () => {
-    return {
-      validatedCustom01: null,
-      validatedDefault01: null,
-      validatedTooltip01: null,
-    }
-  },
-  methods: {
-    handleSubmitCustom01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedCustom01 = true
-    },
-    handleSubmitDefault01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedDefault01 = true
-    },
-    handleSubmitTooltip01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedTooltip01 = true
-    },
-  },
-}
-</script>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index df35ed2a..6e1d1f12 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { brandSet } from '@coreui/icons'
+
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = brandSet
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -17,20 +24,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-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 icons = brandSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index db217630..290a052e 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { freeSet } from '@coreui/icons'
+
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = freeSet
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -17,20 +24,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-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 icons = freeSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index eff0320f..cd23c088 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { flagSet } from '@coreui/icons'
+
+const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+const icons = flagSet
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -17,20 +24,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-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 icons = flagSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index e6d12929..a85699b0 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -1,3 +1,9 @@
+<script setup>
+const alert = () => {
+  console.log('👋 Well, hi there! Thanks for dismissing me.')
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -133,7 +139,7 @@
             <code>dismissible</code> prop.
           </p>
           <DocsExample href="components/alert.html#dismissing">
-            <CAlert color="warning" dismissible @dismiss="alert">
+            <CAlert color="warning" dismissible @close="alert()">
               <strong>Go right ahead</strong> and click that dimiss over there
               on the right.
             </CAlert>
@@ -143,14 +149,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Alerts',
-  methods: {
-    alert: function () {
-      alert('👋 Well, hi there! Thanks for dismissing me.')
-    },
-  },
-}
-</script>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index d50b4e65..0ec745bc 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -54,11 +54,11 @@
             the presentation of a badge.
           </p>
           <DocsExample href="components/badge.html#contextual-variations">
-            <CBadge color="primary">primary</CBadge>
-            <CBadge color="success">success</CBadge>
-            <CBadge color="danger">danger</CBadge>
-            <CBadge color="warning">warning</CBadge>
-            <CBadge color="info">info</CBadge>
+            <CBadge color="primary-gradient">primary</CBadge>
+            <CBadge color="success-gradient">success</CBadge>
+            <CBadge color="danger-gradient">danger</CBadge>
+            <CBadge color="warning-gradient">warning</CBadge>
+            <CBadge color="info-gradient">info</CBadge>
             <CBadge color="light">light</CBadge>
             <CBadge color="dark">dark</CBadge>
           </DocsExample>
@@ -74,11 +74,19 @@
             badges rounded.
           </p>
           <DocsExample href="components/badge.html#pill-badges">
-            <CBadge color="primary" shape="rounded-pill"> primary </CBadge>
-            <CBadge color="success" shape="rounded-pill"> success </CBadge>
-            <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
-            <CBadge color="warning" shape="rounded-pill"> warning </CBadge>
-            <CBadge color="info" shape="rounded-pill"> info </CBadge>
+            <CBadge color="primary-gradient" shape="rounded-pill">
+              primary
+            </CBadge>
+            <CBadge color="success-gradient" shape="rounded-pill">
+              success
+            </CBadge>
+            <CBadge color="danger-gradient" shape="rounded-pill">
+              danger
+            </CBadge>
+            <CBadge color="warning-gradient" shape="rounded-pill">
+              warning
+            </CBadge>
+            <CBadge color="info-gradient" shape="rounded-pill"> info </CBadge>
             <CBadge color="light" shape="rounded-pill"> light </CBadge>
             <CBadge color="dark" shape="rounded-pill"> dark </CBadge>
           </DocsExample>
@@ -87,9 +95,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Badges',
-}
-</script>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index acc0e57f..1bd7272d 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -1,3 +1,24 @@
+<script setup>
+import { ref } from 'vue'
+
+const visibleLiveDemo = ref(false)
+const visibleStaticBackdropDemo = ref(false)
+const visibleScrollingLongContentDemo = ref(false)
+const visibleScrollableDemo = ref(false)
+const visibleVerticallyCenteredDemo = ref(false)
+const visibleVerticallyCenteredScrollableDemo = ref(false)
+const tooltipsAndPopoversDemo= ref(false)
+const xlDemo = ref(false)
+const lgDemo = ref(false)
+const smDemo = ref(false)
+const fullscreenDemo = ref(false)
+const fullscreenSmDemo = ref(false)
+const fullscreenMdDemo = ref(false)
+const fullscreenLgDemo = ref(false)
+const fullscreenXlDemo = ref(false)
+const fullscreenXxlDemo = ref(false)
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -8,11 +29,10 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Below is a static modal example (meaning its
-            <code>position</code> and <code>display</code> have been
-            overridden). Included are the modal header, modal body (required for
-            <code>padding</code>), and modal footer (optional). We ask that you
-            include modal headers with dismiss actions whenever possible, or
-            provide another explicit dismiss action.
+            <code>position</code> and <code>display</code> have been overridden). Included are the
+            modal header, modal body (required for <code>padding</code>), and modal footer
+            (optional). We ask that you include modal headers with dismiss actions whenever
+            possible, or provide another explicit dismiss action.
           </p>
           <DocsExample href="components/modal.html#modal-components">
             <CModal
@@ -36,13 +56,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Live demo</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Live demo</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Toggle a working modal demo by clicking the button below. It will
-            slide down and fade in from the top of the page.
+            Toggle a working modal demo by clicking the button below. It will slide down and fade in
+            from the top of the page.
           </p>
           <DocsExample href="components/modal.html#live-demo">
             <CButton
@@ -72,9 +90,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
-                >Woohoo, you're reading this text in a modal!</CModalBody
-              >
+              <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
               <CModalFooter>
                 <CButton
                   color="secondary"
@@ -95,15 +111,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Static backdrop</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Static backdrop</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            If you set <code>backdrop</code> property to <code>static</code>,
-            your modal will behave as though the backdrop is static, meaning it
-            will not close when clicking outside it. Click the button below to
-            try it.
+            If you set <code>backdrop</code> property to <code>static</code>, your modal will behave
+            as though the backdrop is static, meaning it will not close when clicking outside it.
+            Click the button below to try it.
           </p>
           <DocsExample href="components/modal.html#static-backdrop">
             <CButton
@@ -134,9 +147,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
-                >Woohoo, you're reading this text in a modal!</CModalBody
-              >
+              <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
               <CModalFooter>
                 <CButton
                   color="secondary"
@@ -162,9 +173,8 @@
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            When modals become too long for the user's viewport or device, they
-            scroll independent of the page itself. Try the demo below to see
-            what we mean.
+            When modals become too long for the user's viewport or device, they scroll independent
+            of the page itself. Try the demo below to see what we mean.
           </p>
           <DocsExample href="components/modal.html#scrolling-long-content">
             <CButton
@@ -196,107 +206,94 @@
               </CModalHeader>
               <CModalBody>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
               </CModalBody>
             </CModal>
           </DocsExample>
           <p class="text-body-secondary small">
-            You can also create a scrollable modal that allows scroll the modal
-            body by adding
+            You can also create a scrollable modal that allows scroll the modal body by adding
             <code>scrollable</code> prop.
           </p>
           <DocsExample href="components/modal.html#scrolling-long-content">
@@ -330,100 +327,88 @@
               </CModalHeader>
               <CModalBody>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
-                  rutrum faucibus dolor auctor.
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                  fringilla.
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
+                  metus auctor fringilla.
                 </p>
               </CModalBody>
             </CModal>
@@ -433,13 +418,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Vertically centered</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Vertically centered</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Add <code>alignment=&#34;center&#34;</code> to
-            <code>&lt;CModal&gt;</code> to vertically center the modal.
+            Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to vertically
+            center the modal.
           </p>
           <DocsExample href="components/modal.html#vertically-centered">
             <CButton
@@ -471,9 +454,9 @@
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                risus, porta ac consectetur ac, vestibulum at eros.
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -522,9 +505,9 @@
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
-                risus, porta ac consectetur ac, vestibulum at eros.
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -546,15 +529,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Tooltips and popovers</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Tooltips and popovers</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            <code>&lt;CTooltips&gt;</code> and
-            <code>&lt;CPopovers&gt;</code> can be placed within modals as
-            needed. When modals are closed, any tooltips and popovers within are
-            also automatically dismissed.
+            <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
+            modals as needed. When modals are closed, any tooltips and popovers within are also
+            automatically dismissed.
           </p>
           <DocsExample href="components/modal.html#tooltips-and-popovers">
             <CButton
@@ -601,8 +581,7 @@
                 <h5>Tooltips in a modal</h5>
                 <p>
                   <CLink v-c-tooltip="'Tooltip'">This link</CLink> and
-                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips
-                  on hover.
+                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
                 </p>
               </CModalBody>
               <CModalFooter>
@@ -625,15 +604,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Optional sizes</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Optional sizes</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Modals have three optional sizes, available via modifier classes to
-            be placed on a
-            <code>&lt;CModal&gt;</code>. These sizes kick in at certain
-            breakpoints to avoid horizontal scrollbars on narrower viewports.
+            Modals have three optional sizes, available via modifier classes to be placed on a
+            <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
+            horizontal scrollbars on narrower viewports.
           </p>
           <table class="table">
             <thead>
@@ -777,13 +753,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Modal</strong> <small>Fullscreen Modal</small>
-        </CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Fullscreen Modal</small> </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            Another override is the option to pop up a modal that covers the
-            user viewport, available via property <code>fullscrean</code>.
+            Another override is the option to pop up a modal that covers the user viewport,
+            available via property <code>fullscrean</code>.
           </p>
           <table class="table">
             <thead>
@@ -1018,45 +992,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Modals',
-  setup() {
-    const visibleLiveDemo = ref(false)
-    const visibleStaticBackdropDemo = ref(false)
-    const visibleScrollingLongContentDemo = ref(false)
-    const visibleScrollableDemo = ref(false)
-    const visibleVerticallyCenteredDemo = ref(false)
-    const visibleVerticallyCenteredScrollableDemo = ref(false)
-    const xlDemo = ref(false)
-    const lgDemo = ref(false)
-    const smDemo = ref(false)
-    const fullscreenDemo = ref(false)
-    const fullscreenSmDemo = ref(false)
-    const fullscreenMdDemo = ref(false)
-    const fullscreenLgDemo = ref(false)
-    const fullscreenXlDemo = ref(false)
-    const fullscreenXxlDemo = ref(false)
-
-    return {
-      visibleLiveDemo,
-      visibleStaticBackdropDemo,
-      visibleScrollingLongContentDemo,
-      visibleScrollableDemo,
-      visibleVerticallyCenteredDemo,
-      visibleVerticallyCenteredScrollableDemo,
-      xlDemo,
-      lgDemo,
-      smDemo,
-      fullscreenDemo,
-      fullscreenSmDemo,
-      fullscreenMdDemo,
-      fullscreenLgDemo,
-      fullscreenXlDemo,
-      fullscreenXxlDemo,
-    }
-  },
-}
-</script>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 6ecfa627..51300319 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -1,3 +1,14 @@
+<script setup>
+const toasts = []
+
+const createToast = () => {
+  toasts.push({
+    title: 'new toast',
+    content: 'Lorem ipsum dolor cet emit',
+  })
+}
+</script>
+
 <template>
   <CRow>
     <CCol :xs="12">
@@ -32,7 +43,7 @@
           <DocsExample href="components/toast.html">
             <CButton color="primary" @click="createToast">Send a toast</CButton>
             <CToaster placement="top-end">
-              <CToast v-for="(toast, index) in toasts" visible :key="index">
+              <CToast v-for="(toast, index) in toasts" :visible="true" :key="index">
                 <CToastHeader closeButton>
                   <span class="me-auto fw-bold">{{ toast.title }}</span>
                   <small>7 min ago</small>
@@ -157,7 +168,7 @@
                 Hello, world! This is a toast message.
                 <div class="mt-2 pt-2 border-top">
                   <CButton type="button" color="primary" size="sm"> Take action </CButton>
-                  <CToastClose component="CButton" color="secondary" size="sm" class="ms-1"
+                  <CToastClose as="CButton" color="secondary" size="sm" class="ms-1"
                     >Close</CToastClose
                   >
                 </div>
@@ -174,8 +185,8 @@
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
             <a href="https://coreui.io/docs/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs/utilities/background">background</a> utilities.
-            Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
+            <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
+            we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default
             border with <code>.border-0</code>.
@@ -198,22 +209,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      toasts: [],
-    }
-  },
-
-  methods: {
-    createToast() {
-      this.toasts.push({
-        title: 'new toast',
-        content: 'Lorem ipsum dolor cet emit',
-      })
-    },
-  },
-}
-</script>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 11075f06..43386210 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="8">
@@ -62,9 +62,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Login',
-}
-</script>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index d07771a1..95e550a5 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
@@ -22,9 +22,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Page404',
-}
-</script>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index 63dd18c6..2dd7881e 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="6">
@@ -22,9 +22,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Page500',
-}
-</script>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index d76232f1..284e3cc1 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+  <div class="bwrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
       <CRow class="justify-content-center">
         <CCol :md="9" :lg="7" :xl="6">
@@ -49,9 +49,3 @@
     </CContainer>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'Register',
-}
-</script>
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index 3f57d21e..ae404b81 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -1,21 +1,15 @@
+<script setup>
+const props = defineProps({
+  color: String
+})
+</script>
+
 <template>
   <CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
     <div
-      :class="['theme-color w-75 rounded mb-3', color]"
+      :class="['theme-color w-75 rounded mb-3', props.color]"
       style="padding-top: 75%"
     ></div>
     <slot></slot>
   </CCol>
 </template>
-
-<script>
-export default {
-  name: 'ColorTheme',
-  props: {
-    color: {
-      type: String,
-      default: undefined,
-    },
-  },
-}
-</script>
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index 87291bbd..acb34ce7 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -1,3 +1,7 @@
+<script setup>
+import ColorTheme from './ColorTheme.vue'
+</script>
+
 <template>
   <CRow>
     <CCol>
@@ -8,18 +12,10 @@
             <ColorTheme color="bg-primary">
               <h6>Brand Primary Color</h6>
             </ColorTheme>
-            <ColorTheme color="bg-secondary"
-              ><h6>Brand Secondary Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-success"
-              ><h6>Brand Success Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-danger"
-              ><h6>Brand Danger Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-warning"
-              ><h6>Brand Warning Color</h6></ColorTheme
-            >
+            <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+            <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+            <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+            <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
             <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
             <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
             <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
@@ -29,11 +25,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import ColorTheme from './ColorTheme'
-export default {
-  name: 'Colors',
-  components: { ColorTheme },
-}
-</script>
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
index c4cd5d96..306e403b 100644
--- a/src/views/theme/Typography.vue
+++ b/src/views/theme/Typography.vue
@@ -243,9 +243,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Typography',
-}
-</script>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index b8d40c4e..906c0712 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,3 +1,55 @@
+<script setup>
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/vue-chartjs'
+
+import WidgetsStatsA from './WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './WidgetsStatsTypeD.vue'
+
+const widgetStatsE = {
+  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
+  optionsBar: {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  },
+  optionsLine: {
+    maintainAspectRatio: false,
+    elements: {
+      line: {
+        tension: 0.4,
+      },
+      point: {
+        radius: 0,
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+      },
+      y: {
+        display: false,
+      },
+    },
+  },
+}
+</script>
+
 <template>
   <CCard class="mb-4">
     <CCardHeader>
@@ -514,75 +566,3 @@
     </CCardBody>
   </CCard>
 </template>
-
-<script>
-import { getStyle } from '@coreui/utils'
-import { CChart } from '@coreui/vue-chartjs'
-import WidgetsStatsA from './WidgetsStatsTypeA.vue'
-import WidgetsStatsD from './WidgetsStatsTypeD.vue'
-export default {
-  name: 'Widgets',
-  components: {
-    CChart,
-    WidgetsStatsA,
-    WidgetsStatsD,
-  },
-  setup() {
-    const widgetStatsE = {
-      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-      optionsBar: {
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-          },
-          y: {
-            display: false,
-          },
-        },
-      },
-      optionsLine: {
-        maintainAspectRatio: false,
-        elements: {
-          line: {
-            tension: 0.4,
-          },
-          point: {
-            radius: 0,
-          },
-        },
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-          },
-          y: {
-            display: false,
-          },
-        },
-      },
-    }
-
-    return {
-      getStyle,
-      widgetStatsE,
-      widgetProgressIconItems: [
-        { color: 'primary', icon: 'cil-puzzle' },
-        { color: 'success', icon: 'cil-speedometer' },
-        { color: 'danger', icon: 'cil-cursor' },
-        { color: 'info', icon: 'cil-drop' },
-        { color: 'secondary', icon: 'cil-pencil' },
-      ],
-    }
-  },
-}
-</script>
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 30677ff7..e914b7f2 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,21 +1,38 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { CChart } from '@coreui/vue-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const widgetChartRef1 = ref()
+const widgetChartRef2 = ref()
+
+onMounted(() => {
+  document.documentElement.addEventListener('ColorSchemeChange', () => {
+    if (widgetChartRef1.value) {
+      widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
+      widgetChartRef1.value.chart.update()
+    }
+
+    if (widgetChartRef2.value) {
+      widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
+      widgetChartRef2.value.chart.update()
+    }
+  })
+})
+</script>
+
 <template>
   <CRow :xs="{ gutter: 4 }">
     <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsA color="primary">
         <template #value
           >26K
-          <span class="fs-6 fw-normal">
-            (-12.4% <CIcon icon="cil-arrow-bottom" />)
-          </span>
+          <span class="fs-6 fw-normal"> (-12.4% <CIcon icon="cil-arrow-bottom" />) </span>
         </template>
         <template #title>Users</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -32,15 +49,7 @@
             style="height: 70px"
             ref="widgetChartRef1"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -102,18 +111,12 @@
       <CWidgetStatsA color="info">
         <template #value
           >$6.200
-          <span class="fs-6 fw-normal">
-            (40.9% <CIcon icon="cil-arrow-top" />)
-          </span>
+          <span class="fs-6 fw-normal"> (40.9% <CIcon icon="cil-arrow-top" />) </span>
         </template>
         <template #title>Income</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -130,15 +133,7 @@
             style="height: 70px"
             ref="widgetChartRef2"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -199,18 +194,12 @@
       <CWidgetStatsA color="warning">
         <template #value
           >2.49%
-          <span class="fs-6 fw-normal">
-            (84.7% <CIcon icon="cil-arrow-top" />)
-          </span>
+          <span class="fs-6 fw-normal"> (84.7% <CIcon icon="cil-arrow-top" />) </span>
         </template>
         <template #title>Conversion Rate</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -226,15 +215,7 @@
             class="mt-3"
             style="height: 70px"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   label: 'My First dataset',
@@ -283,18 +264,12 @@
       <CWidgetStatsA color="danger">
         <template #value
           >44K
-          <span class="fs-6 fw-normal">
-            (-23.6% <CIcon icon="cil-arrow-bottom" />)
-          </span>
+          <span class="fs-6 fw-normal"> (-23.6% <CIcon icon="cil-arrow-bottom" />) </span>
         </template>
         <template #title>Sessions</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
-              color="transparent"
-              class="p-0 text-white"
-              :caret="false"
-            >
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
               <CIcon icon="cil-options" class="text-white" />
             </CDropdownToggle>
             <CDropdownMenu>
@@ -333,10 +308,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'rgba(255,255,255,.2)',
                   borderColor: 'rgba(255,255,255,.55)',
-                  data: [
-                    78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,
-                    82,
-                  ],
+                  data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
                   barPercentage: 0.6,
                 },
               ],
@@ -378,38 +350,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { CChart } from '@coreui/vue-chartjs'
-import { getStyle } from '@coreui/utils'
-
-export default {
-  name: 'WidgetsStatsA',
-  components: {
-    CChart,
-  },
-  setup() {
-    const widgetChartRef1 = ref()
-    const widgetChartRef2 = ref()
-
-    onMounted(() => {
-      document.documentElement.addEventListener('ColorSchemeChange', () => {
-        if (widgetChartRef1.value) {
-          widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
-            getStyle('--cui-primary')
-          widgetChartRef1.value.chart.update()
-        }
-
-        if (widgetChartRef2.value) {
-          widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
-            getStyle('--cui-info')
-          widgetChartRef2.value.chart.update()
-        }
-      })
-    })
-
-    return { getStyle, widgetChartRef1, widgetChartRef2 }
-  },
-}
-</script>
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index 7b0cbaac..d6c756d1 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,3 +1,35 @@
+<script setup>
+import { CChart } from '@coreui/vue-chartjs'
+
+const options = {
+  elements: {
+    line: {
+      tension: 0.4,
+    },
+    point: {
+      radius: 0,
+      hitRadius: 10,
+      hoverRadius: 4,
+      hoverBorderWidth: 3,
+    },
+  },
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      display: false,
+    },
+    y: {
+      display: false,
+    },
+  },
+}
+</script>
+
 <template>
   <CRow :xs="{ gutter: 4 }">
     <CCol :sm="6" :xl="4" :xxl="3">
@@ -126,46 +158,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-import { CChart } from '@coreui/vue-chartjs'
-export default {
-  name: 'WidgetsStatsD',
-  components: {
-    CChart,
-  },
-  setup() {
-    const options = {
-      elements: {
-        line: {
-          tension: 0.4,
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3,
-        },
-      },
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          display: false,
-        },
-        y: {
-          display: false,
-        },
-      },
-    }
-
-    return {
-      options,
-    }
-  },
-}
-</script>

From 7c5d59c402d24b3ff41abf19815fa092479fe3c5 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 1 May 2024 15:01:19 +0200
Subject: [PATCH 66/92] refactor: migrate from Vuex to Pinia

---
 package.json                  |  4 ++--
 src/App.vue                   | 11 +++++++----
 src/components/AppHeader.vue  |  9 ++++++---
 src/components/AppSidebar.vue | 27 +++++++++------------------
 src/main.js                   |  5 +++--
 src/store/index.js            | 22 ----------------------
 src/stores/sidebar.js         | 17 +++++++++++++++++
 src/stores/theme.js           | 12 ++++++++++++
 8 files changed, 56 insertions(+), 51 deletions(-)
 delete mode 100644 src/store/index.js
 create mode 100644 src/stores/sidebar.js
 create mode 100644 src/stores/theme.js

diff --git a/package.json b/package.json
index 2fe17aea..3b5b531a 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,10 @@
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.2",
+    "pinia": "^2.1.7",
     "simplebar-vue": "^2.3.3",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/src/App.vue b/src/App.vue
index 9a8eaeca..b06f287b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { onBeforeMount } from 'vue'
-import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-const store = useStore()
+import { useThemeStore } from '@/stores/theme.js'
+
+const { isColorModeSet, setColorMode } = useColorModes(
+  'coreui-free-vue-admin-template-theme',
+)
+const currentTheme = useThemeStore()
 
 onBeforeMount(() => {
   const urlParams = new URLSearchParams(window.location.href.split('?')[1])
@@ -23,7 +26,7 @@ onBeforeMount(() => {
     return
   }
 
-  setColorMode(store.state.theme)
+  setColorMode(currentTheme.theme)
 })
 </script>
 
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 46e2b842..fda96a89 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
+import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue'
+import { useSidebarStore } from '@/stores/sidebar.js'
 
 const headerClassNames = ref('mb-4 p-0')
 const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const sidebar = useSidebarStore()
 
 onMounted(() => {
   document.addEventListener('scroll', () => {
@@ -21,7 +24,7 @@ onMounted(() => {
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
-      <CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
+      <CHeaderToggler @click="sidebar.toggleVisible()" style="margin-inline-start: -14px">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
       <CHeaderNav class="d-none d-md-flex">
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index bfc3b075..d3ab2f33 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,15 +1,12 @@
-
 <script setup>
-import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
-import { useStore } from 'vuex'
-import { AppSidebarNav } from './AppSidebarNav'
+
 import { logo } from '@/assets/brand/logo'
 import { sygnet } from '@/assets/brand/sygnet'
+import { AppSidebarNav } from '@/components/AppSidebarNav.js'
+import { useSidebarStore } from '@/stores/sidebar.js'
 
-const store = useStore()
-const sidebarUnfoldable =  computed(() => store.state.sidebarUnfoldable)
-const sidebarVisible = computed(() => store.state.sidebarVisible)
+const sidebar = useSidebarStore()
 </script>
 
 <template>
@@ -17,15 +14,9 @@ const sidebarVisible = computed(() => store.state.sidebarVisible)
     class="border-end"
     colorScheme="dark"
     position="fixed"
-    :unfoldable="sidebarUnfoldable"
-    :visible="sidebarVisible"
-    @visible-change="
-      (event) =>
-        $store.commit({
-          type: 'updateSidebarVisible',
-          value: event,
-        })
-    "
+    :unfoldable="sidebar.unfoldable"
+    :visible="sidebar.visible"
+    @visible-change="(value) => sidebar.toggleVisible(value)"
   >
     <CSidebarHeader class="border-bottom">
       <RouterLink custom to="/" v-slot="{ href, navigate }">
@@ -34,11 +25,11 @@ const sidebarVisible = computed(() => store.state.sidebarVisible)
           <CIcon custom-class-name="sidebar-brand-narrow" :icon="sygnet" :height="32" />
         </CSidebarBrand>
       </RouterLink>
-      <CCloseButton class="d-lg-none" dark @click="$store.commit('toggleSidebar')" />
+      <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
     </CSidebarHeader>
     <AppSidebarNav />
     <CSidebarFooter class="border-top d-none d-lg-flex">
-      <CSidebarToggler @click="$store.commit('toggleUnfoldable')" />
+      <CSidebarToggler @click="sidebar.toggleUnfoldable()" />
     </CSidebarFooter>
   </CSidebar>
 </template>
diff --git a/src/main.js b/src/main.js
index 5afc2d2d..bf8b8e5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import App from './App.vue'
 import router from './router'
-import store from './store'
 
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
@@ -9,7 +10,7 @@ import { iconsSet as icons } from '@/assets/icons'
 import DocsExample from '@/components/DocsExample'
 
 const app = createApp(App)
-app.use(store)
+app.use(createPinia())
 app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 1ca85549..00000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createStore } from 'vuex'
-
-export default createStore({
-  state: {
-    sidebarVisible: '',
-    sidebarUnfoldable: false,
-    theme: 'light',
-  },
-  mutations: {
-    toggleSidebar(state) {
-      state.sidebarVisible = !state.sidebarVisible
-    },
-    toggleUnfoldable(state) {
-      state.sidebarUnfoldable = !state.sidebarUnfoldable
-    },
-    updateSidebarVisible(state, payload) {
-      state.sidebarVisible = payload.value
-    },
-  },
-  actions: {},
-  modules: {},
-})
diff --git a/src/stores/sidebar.js b/src/stores/sidebar.js
new file mode 100644
index 00000000..28c9a044
--- /dev/null
+++ b/src/stores/sidebar.js
@@ -0,0 +1,17 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSidebarStore = defineStore('sidebar', () => {
+  const visible = ref(undefined)
+  const unfoldable = ref(false)
+
+  const toggleVisible = (value) => {
+    visible.value = value !== undefined ? value : !visible.value
+  }
+
+  const toggleUnfoldable = () => {
+    unfoldable.value = !unfoldable.value
+  }
+
+  return { visible, unfoldable, toggleVisible, toggleUnfoldable }
+})
diff --git a/src/stores/theme.js b/src/stores/theme.js
new file mode 100644
index 00000000..7b1a0fbc
--- /dev/null
+++ b/src/stores/theme.js
@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', () => {
+  const theme = ref('light')
+
+  const toggleTheme = (_theme) => {
+    theme.value = _theme
+  }
+
+  return { theme, toggleTheme }
+})

From 9e4a7f80f736ae0a32a5359ad06d5670c8e84bf2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 1 May 2024 15:52:05 +0200
Subject: [PATCH 67/92] docs: update README

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 0307d814..9a4e2123 100644
--- a/README.md
+++ b/README.md
@@ -56,9 +56,9 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 | --- | --- |
 | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
 
-| Default Theme v3 | Light Theme v3 |
+| Modern Theme | Bright Theme |
 | --- | --- |
-| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default-v3) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|
+| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=modern) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=bright)|
 
 ## Quick Start
 
@@ -122,7 +122,7 @@ coreui-free-vue-admin-template
 │   ├── layouts/     # layout containers
 │   ├── scss/        # scss styles
 │   ├── router       # routes config
-│   ├── store        # template state example 
+│   ├── stores/      # template state example 
 │   ├── views/       # application views
 │   ├── _nav.js      # sidebar navigation config
 │   ├── App.vue
@@ -130,7 +130,7 @@ coreui-free-vue-admin-template
 │   └── main.js
 ├── index.html   # html template
 ├── package.json
-└── vite.config.js
+└── vite.config.mjs
 ```
 
 ## Documentation

From 2371c1c092b993004d12f7642ad5500fc234eee0 Mon Sep 17 00:00:00 2001
From: Nicolas Martinez <17040442+nicomt@users.noreply.github.com>
Date: Thu, 6 Jun 2024 16:02:16 -0400
Subject: [PATCH 68/92] Filter environmet variables to prevent unintended
 leakage of environment variables.

---
 vite.config.mjs | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index f5cdf664..573cc8fa 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -5,8 +5,15 @@ import autoprefixer from 'autoprefixer'
 
 export default defineConfig(({ mode }) => {
   // Load .env
-  const env = loadEnv(mode, process.cwd(), '')
-  process.env = { ...process.env, ...env }
+  const viteEnv = loadEnv(mode, process.cwd(), '')
+  const env = {}
+
+  // Filter env to variables starting with VITE_APP or VUE_APP
+  Object.keys({...process.env, ...viteEnv}).forEach(key => {
+    if (key.startsWith('VITE_APP') || key.startsWith('VUE_APP')) {
+      env[key] = viteEnv[key]
+    }
+  })
 
   return {
     plugins: [vue()],
@@ -53,7 +60,7 @@ export default defineConfig(({ mode }) => {
     },
     define: {
       // vitejs does not support process.env so we have to redefine it
-      'process.env': process.env,
+      'process.env': env,
     },
   }
 })

From 6b9c7c6ca8a88dda26469338988b217575c4fdcb Mon Sep 17 00:00:00 2001
From: Nicolas Martinez <17040442+nicomt@users.noreply.github.com>
Date: Thu, 6 Jun 2024 16:12:25 -0400
Subject: [PATCH 69/92] Fix for loading data from both viteEnv and process.env

---
 vite.config.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index 573cc8fa..81ec0d8e 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -9,9 +9,9 @@ export default defineConfig(({ mode }) => {
   const env = {}
 
   // Filter env to variables starting with VITE_APP or VUE_APP
-  Object.keys({...process.env, ...viteEnv}).forEach(key => {
+  Object.entries({...process.env, ...viteEnv}).forEach(([key, value]) => {
     if (key.startsWith('VITE_APP') || key.startsWith('VUE_APP')) {
-      env[key] = viteEnv[key]
+      env[key] = value
     }
   })
 

From 9bbf7509e15c02488232c3b268e0b08e0b9e740a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 7 Jun 2024 10:41:36 +0200
Subject: [PATCH 70/92] docs: update links to PRO versions

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9a4e2123..f711b518 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 
 * 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
 * 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
+* 💪  [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
 * 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
 * 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
 

From dfa4381ce13433a7b48056ecfe7b204755665581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 13:10:02 +0200
Subject: [PATCH 71/92] Update vite.config.mjs

---
 vite.config.mjs | 34 +++++-----------------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index 81ec0d8e..7195c8b7 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -1,29 +1,18 @@
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'node:path'
 import autoprefixer from 'autoprefixer'
 
-export default defineConfig(({ mode }) => {
-  // Load .env
-  const viteEnv = loadEnv(mode, process.cwd(), '')
-  const env = {}
-
-  // Filter env to variables starting with VITE_APP or VUE_APP
-  Object.entries({...process.env, ...viteEnv}).forEach(([key, value]) => {
-    if (key.startsWith('VITE_APP') || key.startsWith('VUE_APP')) {
-      env[key] = value
-    }
-  })
-
+export default defineConfig(() => {
   return {
     plugins: [vue()],
     base: './',
     css: {
       postcss: {
         plugins: [
-          autoprefixer({}) // add options if needed
+          autoprefixer({}), // add options if needed
         ],
-      }
+      },
     },
     resolve: {
       alias: [
@@ -41,16 +30,7 @@ export default defineConfig(({ mode }) => {
           replacement: path.resolve(__dirname, '/src'),
         },
       ],
-      extensions: [
-        '.mjs',
-        '.js',
-        '.ts',
-        '.jsx',
-        '.tsx',
-        '.json',
-        '.vue',
-        '.scss',
-      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
     },
     server: {
       port: 3000,
@@ -58,9 +38,5 @@ export default defineConfig(({ mode }) => {
         // https://vitejs.dev/config/server-options.html
       },
     },
-    define: {
-      // vitejs does not support process.env so we have to redefine it
-      'process.env': env,
-    },
   }
 })

From 625122693588c564b734165381b758bfab1bc0d4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 13:17:48 +0200
Subject: [PATCH 72/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui       ^5.0.0  →   ^5.0.2
@coreui/vue          ^5.0.0  →   ^5.1.0
@vitejs/plugin-vue   ^5.0.4  →   ^5.0.5
chart.js             ^4.4.2  →   ^4.4.3
eslint-plugin-vue   ^9.24.0  →  ^9.26.0
sass                ^1.72.0  →  ^1.77.5
simplebar-vue        ^2.3.3  →   ^2.3.5
vite                 ^5.2.6  →   ^5.3.1
vue                 ^3.4.21  →  ^3.4.28
vue-router           ^4.3.0  →   ^4.3.3
---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 3b5b531a..cc0d6867 100644
--- a/package.json
+++ b/package.json
@@ -19,26 +19,26 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.0.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.0.0",
+    "@coreui/vue": "^5.1.0",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.2",
+    "chart.js": "^4.4.3",
     "pinia": "^2.1.7",
-    "simplebar-vue": "^2.3.3",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "simplebar-vue": "^2.3.5",
+    "vue": "^3.4.28",
+    "vue-router": "^4.3.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.24.0",
+    "eslint-plugin-vue": "^9.26.0",
     "postcss": "^8.4.38",
-    "sass": "^1.72.0",
-    "vite": "^5.2.6"
+    "sass": "^1.77.5",
+    "vite": "^5.3.1"
   }
 }

From 85c9e1705626e79defb761f9560c8ae6d4bb9ad9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 13:18:42 +0200
Subject: [PATCH 73/92] fix: security problem with process.env

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index f70246f6..948de201 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -303,7 +303,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(process.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
   scrollBehavior() {
     // always scroll to top

From 953c231f28a1848ba192b87b5214bf8418e3dc16 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 16:09:10 +0200
Subject: [PATCH 74/92] feat: add new tabs component

---
 src/_nav.js             |   5 ++
 src/router/index.js     |   5 ++
 src/views/base/Tabs.vue | 162 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 172 insertions(+)
 create mode 100644 src/views/base/Tabs.vue

diff --git a/src/_nav.js b/src/_nav.js
index 3433bdaf..4ac304af 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -100,6 +100,11 @@ export default [
         name: 'Tables',
         to: '/base/tables',
       },
+      {
+        component: 'CNavItem',
+        name: 'Tabs',
+        to: '/base/tabs',
+      },
       {
         component: 'CNavItem',
         name: 'Tooltips',
diff --git a/src/router/index.js b/src/router/index.js
index 948de201..add55d6f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,11 @@ const routes = [
             name: 'Tables',
             component: () => import('@/views/base/Tables.vue'),
           },
+          {
+            path: '/base/tabs',
+            name: 'Tabs',
+            component: () => import('@/views/base/Tabs.vue'),
+          },
           {
             path: '/base/tooltips',
             name: 'Tooltips',
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
new file mode 100644
index 00000000..0460be0f
--- /dev/null
+++ b/src/views/base/Tabs.vue
@@ -0,0 +1,162 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Tabs</strong>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            The basic Vue tabs example uses the <code>variant=&#34;tabs&#34;</code> props to
+            generate a tabbed interface.
+          </p>
+          <DocsExample href="components/tabs.html#example">
+            <CTabs activeItemKey="profile">
+              <CTabList variant="tabs">
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Unstyled</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            If you don’t provide the <code>variant</code> prop, the component will default to a
+            basic style.
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs activeItemKey="profile">
+              <CTabList>
+                <CTab itemKey="home">Home</CTab>
+                <CTab itemKey="profile">Profile</CTab>
+                <CTab itemKey="contact">Contact</CTab>
+                <CTab disabled itemKey="disabled"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
+                <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Pills</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;pills&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="pills">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader> <strong>Vue Tabs</strong> <small>Underline border</small> </CCardHeader>
+        <CCardBody>
+          <p class="text-body-secondary small">
+            Take that same code, but use <code>variant=&#34;underline-border&#34;</code> instead:
+          </p>
+          <DocsExample href="components/tabs.html#unstyled">
+            <CTabs :activeItemKey="2">
+              <CTabList variant="underline-border">
+                <CTab aria-controls="home-tab-pane" :itemKey="1"> Home </CTab>
+                <CTab aria-controls="profile-tab-pane" :itemKey="2"> Profile </CTab>
+                <CTab aria-controls="contact-tab-pane" :itemKey="3"> Contact </CTab>
+                <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4"> Disabled </CTab>
+              </CTabList>
+              <CTabContent>
+                <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+                  Home tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+                  Profile tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+                  Contact tab content
+                </CTabPanel>
+                <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+                  Disabled tab content
+                </CTabPanel>
+              </CTabContent>
+            </CTabs>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>

From ee8cab33d9ce117d7289a9ec46eb77203bc203ac Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Jun 2024 16:15:41 +0200
Subject: [PATCH 75/92] release: v5.1.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1c4aae12..5cb553c6 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.0.0
+* @version v5.1.0
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index cc0d6867..de0bf194 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"

From bcce567bb36f7c96d4a092a78c38084df05da963 Mon Sep 17 00:00:00 2001
From: Frederico Ferreira <frederico.dida1@gmail.com>
Date: Wed, 26 Jun 2024 09:18:24 -0300
Subject: [PATCH 76/92] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f711b518..f043636a 100644
--- a/README.md
+++ b/README.md
@@ -96,7 +96,7 @@ Navigate to [http://localhost:3000](http://localhost:3000). The app will automat
 
 #### Build
 
-Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
+Run `build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ```bash
 # build for production with minification

From 6f102dc60efc8994dd70a50759bb2aa8a52d8556 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 25 Sep 2024 12:20:39 +0200
Subject: [PATCH 77/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui        ^5.0.2  →    ^5.1.2
@coreui/icons-vue      2.0.0  →     2.2.0
@coreui/vue           ^5.1.0  →    ^5.4.0
@vitejs/plugin-vue    ^5.0.5  →    ^5.1.4
autoprefixer        ^10.4.19  →  ^10.4.20
chart.js              ^4.4.3  →    ^4.4.4
eslint               ^8.57.0  →   ^9.11.1
eslint-plugin-vue    ^9.26.0  →   ^9.28.0
pinia                 ^2.1.7  →    ^2.2.2
postcss              ^8.4.38  →   ^8.4.47
sass                 ^1.77.5  →   ^1.79.3
vite                  ^5.3.1  →    ^5.4.8
vue                  ^3.4.28  →    ^3.5.8
vue-router            ^4.3.3  →    ^4.4.5
---
 package.json | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index de0bf194..0d3467ae 100644
--- a/package.json
+++ b/package.json
@@ -19,26 +19,26 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.2",
+    "@coreui/coreui": "^5.1.2",
     "@coreui/icons": "^3.0.1",
-    "@coreui/icons-vue": "2.0.0",
+    "@coreui/icons-vue": "2.2.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.1.0",
+    "@coreui/vue": "^5.4.0",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.3",
-    "pinia": "^2.1.7",
+    "chart.js": "^4.4.4",
+    "pinia": "^2.2.2",
     "simplebar-vue": "^2.3.5",
-    "vue": "^3.4.28",
-    "vue-router": "^4.3.3"
+    "vue": "^3.5.8",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
-    "autoprefixer": "^10.4.19",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "postcss": "^8.4.38",
-    "sass": "^1.77.5",
-    "vite": "^5.3.1"
+    "eslint-plugin-vue": "^9.28.0",
+    "postcss": "^8.4.47",
+    "sass": "^1.79.3",
+    "vite": "^5.4.8"
   }
 }

From 444716362d943341f06e19fd32ac35af770f4950 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 25 Sep 2024 12:21:40 +0200
Subject: [PATCH 78/92] build: silence Sass deprecation warnings

---
 vite.config.mjs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/vite.config.mjs b/vite.config.mjs
index 7195c8b7..9c289e45 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -13,6 +13,11 @@ export default defineConfig(() => {
           autoprefixer({}), // add options if needed
         ],
       },
+      preprocessorOptions: {
+        scss: {
+          quietDeps: true,
+        },
+      },
     },
     resolve: {
       alias: [

From 820059a98c0f17a642190f9023a53877b9d664bd Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 25 Sep 2024 12:25:51 +0200
Subject: [PATCH 79/92] release: v5.2.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5cb553c6..6981e6fa 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.1.0
+* @version v5.2.0
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index 0d3467ae..b0a0b2e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"

From c16251acea2bccd3f07e7ae534676bdff58e4d1c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Nov 2024 23:33:24 +0100
Subject: [PATCH 80/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui       ^5.1.2  →   ^5.2.0
@coreui/vue          ^5.4.0  →   ^5.4.1
@vitejs/plugin-vue   ^5.1.4  →   ^5.2.0
chart.js             ^4.4.4  →   ^4.4.6
eslint-plugin-vue   ^9.28.0  →  ^9.31.0
pinia                ^2.2.2  →   ^2.2.6
postcss             ^8.4.47  →  ^8.4.49
sass                ^1.79.3  →  ^1.81.0
vite                 ^5.4.8  →  ^5.4.11
vue                  ^3.5.8  →  ^3.5.13
---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index b0a0b2e2..b2566b6e 100644
--- a/package.json
+++ b/package.json
@@ -19,26 +19,26 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.1.2",
+    "@coreui/coreui": "^5.2.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.2.0",
     "@coreui/utils": "^2.0.2",
-    "@coreui/vue": "^5.4.0",
+    "@coreui/vue": "^5.4.1",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.4",
-    "pinia": "^2.2.2",
+    "chart.js": "^4.4.6",
+    "pinia": "^2.2.6",
     "simplebar-vue": "^2.3.5",
-    "vue": "^3.5.8",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.2.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.28.0",
-    "postcss": "^8.4.47",
-    "sass": "^1.79.3",
-    "vite": "^5.4.8"
+    "eslint-plugin-vue": "^9.31.0",
+    "postcss": "^8.4.49",
+    "sass": "^1.81.0",
+    "vite": "^5.4.11"
   }
 }

From 2007ccea732ace95969244f38f680d21ebbca5d9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Nov 2024 23:55:19 +0100
Subject: [PATCH 81/92] docs: update links to the documentation

---
 src/assets/images/components.webp  | Bin 0 -> 61518 bytes
 src/assets/images/icons.webp       | Bin 0 -> 58492 bytes
 src/components/DocsComponents.vue  |  43 +++++++++++++++++++++++++++++
 src/components/DocsIcons.vue       |  29 +++++++++++++++++++
 src/main.js                        |   4 +++
 src/views/base/Accordion.vue       |   2 +-
 src/views/base/Breadcrumbs.vue     |   8 +++---
 src/views/base/Cards.vue           |   1 +
 src/views/base/Carousels.vue       |   1 +
 src/views/base/Collapses.vue       |   1 +
 src/views/base/ListGroups.vue      |   1 +
 src/views/base/Navs.vue            |   1 +
 src/views/base/Paginations.vue     |   1 +
 src/views/base/Placeholders.vue    |   1 +
 src/views/base/Popovers.vue        |   1 +
 src/views/base/Progress.vue        |   1 +
 src/views/base/Spinners.vue        |   1 +
 src/views/base/Tables.vue          |   1 +
 src/views/base/Tabs.vue            |   1 +
 src/views/base/Tooltips.vue        |   1 +
 src/views/buttons/ButtonGroups.vue |   1 +
 src/views/buttons/Buttons.vue      |   1 +
 src/views/buttons/Dropdowns.vue    |   1 +
 src/views/forms/ChecksRadios.vue   |   1 +
 src/views/forms/FloatingLabels.vue |   1 +
 src/views/forms/FormControl.vue    |   1 +
 src/views/forms/InputGroup.vue     |   1 +
 src/views/forms/Layout.vue         |   1 +
 src/views/forms/Range.vue          |   1 +
 src/views/forms/Select.vue         |   1 +
 src/views/forms/Validation.vue     |   1 +
 src/views/icons/Brands.vue         |  32 ++++++++++-----------
 src/views/icons/CoreUIIcons.vue    |  31 ++++++++++-----------
 src/views/icons/Flags.vue          |  31 ++++++++++-----------
 src/views/notifications/Alerts.vue |   1 +
 src/views/notifications/Badges.vue |   3 ++
 src/views/notifications/Modals.vue |   1 +
 src/views/notifications/Toasts.vue |   1 +
 38 files changed, 154 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/images/components.webp
 create mode 100644 src/assets/images/icons.webp
 create mode 100644 src/components/DocsComponents.vue
 create mode 100644 src/components/DocsIcons.vue

diff --git a/src/assets/images/components.webp b/src/assets/images/components.webp
new file mode 100644
index 0000000000000000000000000000000000000000..dfdee46b41f399b43055118aa16af3d9f3d75153
GIT binary patch
literal 61518
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
Yzui7tm|DL2BevgM9mB91#W~E(02s@ZrvLx|

literal 0
HcmV?d00001

diff --git a/src/assets/images/icons.webp b/src/assets/images/icons.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b5ca82d0a863870de894f678c50c924149cd5543
GIT binary patch
literal 58492
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
J@?b?0{{c>2mNftX

literal 0
HcmV?d00001

diff --git a/src/components/DocsComponents.vue b/src/components/DocsComponents.vue
new file mode 100644
index 00000000..7ebc2351
--- /dev/null
+++ b/src/components/DocsComponents.vue
@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  href: String,
+})
+
+import ComponentsImg from '@/assets/images/components.webp'
+</script>
+
+<template>
+  <div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          class="img-fluid"
+          :src="ComponentsImg"
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s
+        <strong>
+          the only open-source Vue dashboard built on a professional, enterprise-grade UI Components
+          Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-primary text-nowrap text-white"
+          :href="`https://coreui.io/vue/docs/${props.href}`"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/DocsIcons.vue b/src/components/DocsIcons.vue
new file mode 100644
index 00000000..ffe0e64d
--- /dev/null
+++ b/src/components/DocsIcons.vue
@@ -0,0 +1,29 @@
+<script setup>
+import IconsImg from '@/assets/images/icons.webp'
+</script>
+
+<template>
+  <div class="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img class="img-fluid" :src="IconsImg" width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        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. For more information please
+        visit our documentation.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/vue/docs/components/icon.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/main.js b/src/main.js
index bf8b8e5f..64a416a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,9 @@ import router from './router'
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
+import DocsComponents from '@/components/DocsComponents'
 import DocsExample from '@/components/DocsExample'
+import DocsIcons from '@/components/DocsIcons'
 
 const app = createApp(App)
 app.use(createPinia())
@@ -15,6 +17,8 @@ app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
 app.component('CIcon', CIcon)
+app.component('DocsComponents', DocsComponents)
 app.component('DocsExample', DocsExample)
+app.component('DocsIcons', DocsIcons)
 
 app.mount('#app')
diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue
index 83edaaf1..98e5b31b 100644
--- a/src/views/base/Accordion.vue
+++ b/src/views/base/Accordion.vue
@@ -1,7 +1,7 @@
-
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/accordion.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Accordion</strong>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index c23bb469..c7e214a5 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,16 +1,16 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/breadcrumb.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Breadcrumb</strong>
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            The breadcrumb navigation provides links back to each previous page
-            the user navigated through and shows the current location in a
-            website or an application. You don’t have to add separators, because
-            they automatically added in CSS through
+            The breadcrumb navigation provides links back to each previous page the user navigated
+            through and shows the current location in a website or an application. You don’t have to
+            add separators, because they automatically added in CSS through
             <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
               <code>::before</code>
             </a>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 43cf10b9..524cb0f2 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -6,6 +6,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/card.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Card</strong> <small>Example</small>
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 0003404b..af00c03a 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -7,6 +7,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/carousel.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Carousels</strong> <small>Slide only</small>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 296dd9f3..194bfdfd 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -10,6 +10,7 @@ const visibleHorizontal = ref(false)
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/collapse.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Collapse</strong>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 23093fc7..4d6a4c4e 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/list-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue List Group</strong> <small>Basic example</small>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index ec73f2a8..2c544f85 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/nav.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Navs</strong> <small>Base navs</small>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 060cdd02..2141769e 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/pagination.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Pagination</strong>
diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue
index 631375cd..597748ff 100644
--- a/src/views/base/Placeholders.vue
+++ b/src/views/base/Placeholders.vue
@@ -5,6 +5,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/placeholder.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Placeholder</strong>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 33d6d8a0..81147e15 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/popover.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Popovers</strong> <small>Basic example</small>
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
index 8d7f810d..68d05fe3 100644
--- a/src/views/base/Progress.vue
+++ b/src/views/base/Progress.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/progress.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Basic example</small>
diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue
index 54d5d44c..1f9b6454 100644
--- a/src/views/base/Spinners.vue
+++ b/src/views/base/Spinners.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/spinner.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Spinner</strong> <small>Border</small>
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 6dcc2a94..8a4061ff 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/table.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Basic example</small>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 0460be0f..66b6518f 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tabs.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Tabs</strong>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index cbf68c99..e98467e4 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tooltip.html" />
       <CCard>
         <CCardHeader>
           <strong>Vue Tooltips</strong> <small>Basic example</small>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 479874a5..21bfd114 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button Group</strong> <span>Basic example</span>
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index fc09f196..fd26fe88 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button</strong>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 4fbd90e3..4aaa38a9 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/dropdown.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Dropdown</strong> <small>Single button</small>
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
index 932013b9..03dea2e6 100644
--- a/src/views/forms/ChecksRadios.vue
+++ b/src/views/forms/ChecksRadios.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/checks-radios.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Checkbox</strong>
diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue
index e171d190..8fbf36ee 100644
--- a/src/views/forms/FloatingLabels.vue
+++ b/src/views/forms/FloatingLabels.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/floating-labels.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Floating labels</strong>
diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue
index fc307643..19273921 100644
--- a/src/views/forms/FormControl.vue
+++ b/src/views/forms/FormControl.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/form-control.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong>
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
index 9c1fa052..efd3447e 100644
--- a/src/views/forms/InputGroup.vue
+++ b/src/views/forms/InputGroup.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/input-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Input group</strong> <small>Basic example</small>
diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue
index 711043f1..8d304416 100644
--- a/src/views/forms/Layout.vue
+++ b/src/views/forms/Layout.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/layout.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Layout</strong> <small>Form grid</small>
diff --git a/src/views/forms/Range.vue b/src/views/forms/Range.vue
index 3a92d645..3ac97c2a 100644
--- a/src/views/forms/Range.vue
+++ b/src/views/forms/Range.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/range.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
         <CCardBody>
diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue
index 61649e8f..f182c410 100644
--- a/src/views/forms/Select.vue
+++ b/src/views/forms/Select.vue
@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/select.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Default</small>
diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue
index edacace9..60b727cc 100644
--- a/src/views/forms/Validation.vue
+++ b/src/views/forms/Validation.vue
@@ -38,6 +38,7 @@ const handleSubmitTooltip01 = (event) => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/validation.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
         <CCardBody>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index 6e1d1f12..99702483 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,26 +1,24 @@
 <script setup>
 import { brandSet } from '@coreui/icons'
+import DocsIcons from '../../components/DocsIcons.vue';
 
 const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
 const icons = brandSet
 </script>
 
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons - Brand</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons - Brand</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
 </template>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index 290a052e..1d0de1cd 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -6,21 +6,18 @@ const icons = freeSet
 </script>
 
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons Free</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons Free</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
 </template>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index cd23c088..a6004b0b 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -6,21 +6,18 @@ const icons = flagSet
 </script>
 
 <template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>CoreUI Icons - Flag</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+  <DocsIcons />
+  <CCard>
+    <CCardHeader>CoreUI Icons - Flag</CCardHeader>
+    <CCardBody>
+      <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
+        </template>
+      </CRow>
+    </CCardBody>
+  </CCard>
 </template>
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index a85699b0..1e1a634e 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -7,6 +7,7 @@ const alert = () => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/alert.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Alert</strong>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 0ec745bc..28859ffc 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -1,5 +1,8 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="components/badge.html" />
+    </CCol>
     <CCol :lg="6">
       <CCard class="mb-4">
         <CCardHeader>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index 1bd7272d..d1fb745a 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -22,6 +22,7 @@ const fullscreenXxlDemo = ref(false)
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/modal.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Modals</strong>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 51300319..987c3823 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -12,6 +12,7 @@ const createToast = () => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/toast.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Toast</strong> <small>Basic</small> </CCardHeader>
         <CCardBody>

From 86f76592d9588e2b741f6f07c4940de5eff33d00 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Nov 2024 23:55:34 +0100
Subject: [PATCH 82/92] build: update vite configuration

---
 vite.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.mjs b/vite.config.mjs
index 9c289e45..6fc2bd88 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -16,6 +16,7 @@ export default defineConfig(() => {
       preprocessorOptions: {
         scss: {
           quietDeps: true,
+          silenceDeprecations: ['import', 'legacy-js-api'],
         },
       },
     },

From f383307ce1220e283917262828b1d6a192b013ca Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 16 Nov 2024 00:42:28 +0100
Subject: [PATCH 83/92] refactor: update links in the sidebar

---
 src/_nav.js                     | 98 +++++++++++++++++++++++++++++++++
 src/components/AppSidebarNav.js | 43 ++++++++++++++-
 2 files changed, 140 insertions(+), 1 deletion(-)

diff --git a/src/_nav.js b/src/_nav.js
index 4ac304af..35d9d081 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -50,6 +50,16 @@ export default [
         name: 'Cards',
         to: '/base/cards',
       },
+      {
+        component: 'CNavItem',
+        name: 'Calendar',
+        href: 'https://coreui.io/vue/docs/components/calendar.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Carousels',
@@ -90,6 +100,25 @@ export default [
         name: 'Progress',
         to: '/base/progress',
       },
+      {
+        component: 'CNavItem',
+        name: 'Smart Pagination',
+        href: 'https://coreui.io/vue/docs/components/smart-pagination.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Smart Table',
+        external: true,
+        href: 'https://coreui.io/vue/docs/components/smart-table.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Spinners',
@@ -110,6 +139,16 @@ export default [
         name: 'Tooltips',
         to: '/base/tooltips',
       },
+      {
+        component: 'CNavItem',
+        name: 'Virtual Scroller',
+        href: 'https://coreui.io/vue/docs/components/virtual-scroller.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      }
     ],
   },
   {
@@ -128,6 +167,16 @@ export default [
         name: 'Button Groups',
         to: '/buttons/button-groups',
       },
+      {
+        component: 'CNavItem',
+        name: 'Loading Button',
+        href: 'https://coreui.io/vue/docs/components/loading-button.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Dropdowns',
@@ -161,6 +210,16 @@ export default [
         name: 'Range',
         to: '/forms/range',
       },
+      {
+        component: 'CNavItem',
+        name: 'Range Slider',
+        href: 'https://coreui.io/vue/docs/forms/range-slider.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Input Group',
@@ -171,6 +230,45 @@ export default [
         name: 'Floating Labels',
         to: '/forms/floating-labels',
       },
+      {
+        component: 'CNavItem',
+        name: 'Date Picker',
+        href: 'https://coreui.io/vue/docs/forms/date-picker.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Date Range Picker',
+        href: 'https://coreui.io/vue/docs/forms/date-range-picker.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Rating',
+        href: 'https://coreui.io/vue/docs/forms/rating.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Time Picker',
+        href: 'https://coreui.io/vue/docs/forms/time-picker.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Layout',
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 68c30537..4c30ff78 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,6 +1,7 @@
 import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
+import { cilExternalLink } from '@coreui/icons'
 import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
 
@@ -78,6 +79,45 @@ const AppSidebarNav = defineComponent({
         )
       }
 
+      if (item.href) {
+        return h(
+          resolveComponent(item.component),
+          {
+            href: item.href,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+          {
+            default: () => [
+              item.icon
+                ? h(resolveComponent('CIcon'), {
+                    customClassName: 'nav-icon',
+                    name: item.icon,
+                  })
+                : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
+              item.name,
+              item.external && h(resolveComponent('CIcon'), {
+                class: 'ms-2',
+                name: cilExternalLink,
+                size: 'sm'
+              }),
+              item.badge &&
+                h(
+                  CBadge,
+                  {
+                    class: 'ms-auto',
+                    color: item.badge.color,
+                    size: 'sm',
+                  },
+                  {
+                    default: () => item.badge.text,
+                  },
+                ),
+            ],
+          },
+        )
+      }
+
       return item.to
         ? h(
             RouterLink,
@@ -110,6 +150,7 @@ const AppSidebarNav = defineComponent({
                           {
                             class: 'ms-auto',
                             color: item.badge.color,
+                            size: 'sm',
                           },
                           {
                             default: () => item.badge.text,
@@ -144,4 +185,4 @@ const AppSidebarNav = defineComponent({
   },
 })
 
-export { AppSidebarNav }
\ No newline at end of file
+export { AppSidebarNav }

From 35e94736c61cc3afbfeb84d8b52f393179d42605 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 12:11:42 +0100
Subject: [PATCH 84/92] refactor: migrate ESLint to 9.x

---
 .eslintignore     |  4 ----
 .eslintrc.cjs     |  9 ---------
 eslint.config.mjs | 23 +++++++++++++++++++++++
 package.json      |  7 ++++---
 4 files changed, 27 insertions(+), 16 deletions(-)
 delete mode 100644 .eslintignore
 delete mode 100644 .eslintrc.cjs
 create mode 100644 eslint.config.mjs

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index dc70b364..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules/*
-/dist/**
-.eslintrc.js
-vite.config.mjs
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 7d0be3d2..00000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,9 +0,0 @@
-/* eslint-env node */
-module.exports = {
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    'vue/multi-word-component-names': 'off',
-  },
-};
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..5bc1dd17
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,23 @@
+import eslintPluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default [
+  { ignores: ['dist/', 'eslint.config.mjs'] },
+  ...eslintPluginVue.configs['flat/essential'],
+  {
+    files: ['src/**/*.{js,vue}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+]
diff --git a/package.json b/package.json
index b2566b6e..fcbeb293 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "dev": "vite --force",
     "build": "vite build",
-    "lint": "eslint \"src/**/*.{js,vue}\"",
+    "lint": "eslint",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -35,8 +35,9 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.31.0",
+    "eslint": "^9.20.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.15.0",
     "postcss": "^8.4.49",
     "sass": "^1.81.0",
     "vite": "^5.4.11"

From 7ba266102f49e412cf1a6aaaf5030b83e0865394 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 12:18:44 +0100
Subject: [PATCH 85/92] refactor: update routes name

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index add55d6f..342b69aa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -135,7 +135,7 @@ const routes = [
         children: [
           {
             path: '/buttons/standard-buttons',
-            name: 'Buttons',
+            name: 'Button Component',
             component: () => import('@/views/buttons/Buttons.vue'),
           },
           {

From 4b153d7a0ac6113d1ed3db957fd342555960367c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 12:19:21 +0100
Subject: [PATCH 86/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@vitejs/plugin-vue   ^5.2.0  →   ^5.2.1
chart.js             ^4.4.6  →   ^4.4.7
pinia                ^2.2.6  →   ^3.0.1
postcss             ^8.4.49  →   ^8.5.2
sass                ^1.81.0  →  ^1.85.0
simplebar-vue        ^2.3.5  →   ^2.4.0
vite                ^5.4.11  →   ^6.1.0
vue-router           ^4.4.5  →   ^4.5.0
---
 package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index fcbeb293..47a20345 100644
--- a/package.json
+++ b/package.json
@@ -26,20 +26,20 @@
     "@coreui/vue": "^5.4.1",
     "@coreui/vue-chartjs": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.6",
-    "pinia": "^2.2.6",
-    "simplebar-vue": "^2.3.5",
+    "chart.js": "^4.4.7",
+    "pinia": "^3.0.1",
+    "simplebar-vue": "^2.4.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.20.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.15.0",
-    "postcss": "^8.4.49",
-    "sass": "^1.81.0",
-    "vite": "^5.4.11"
+    "postcss": "^8.5.2",
+    "sass": "^1.85.0",
+    "vite": "^6.1.0"
   }
 }

From 4fc820aac3f7fe731663329ac2b8c870ebb6c2fe Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 12:43:47 +0100
Subject: [PATCH 87/92] fix: wrong external icon type

---
 src/assets/icons/index.js       | 2 ++
 src/components/AppSidebarNav.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 55c6ddf1..cc20da72 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -49,6 +49,7 @@ import {
   cilEnvelopeClosed,
   cilEnvelopeOpen,
   cilEuro,
+  cilExternalLink,
   cilGlobeAlt,
   cilGrid,
   cilFile,
@@ -107,6 +108,7 @@ export const iconsSet = Object.assign(
     cilEnvelopeClosed,
     cilEnvelopeOpen,
     cilEuro,
+    cilExternalLink,
     cilGlobeAlt,
     cilGrid,
     cilFile,
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 4c30ff78..1006a9c3 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -98,7 +98,7 @@ const AppSidebarNav = defineComponent({
               item.name,
               item.external && h(resolveComponent('CIcon'), {
                 class: 'ms-2',
-                name: cilExternalLink,
+                name: 'cil-external-link',
                 size: 'sm'
               }),
               item.badge &&

From ba8ed701d5c07cc17d43c39cfa025e46e4d353f2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 12:45:07 +0100
Subject: [PATCH 88/92] chore: update the current year to 2025

---
 LICENSE    | 2 +-
 README.md  | 2 +-
 index.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/LICENSE b/LICENSE
index eee6fcc1..433069ca 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 creativeLabs Łukasz Holeczek.
+Copyright (c) 2025 creativeLabs Łukasz Holeczek.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index f043636a..5cc0eda5 100644
--- a/README.md
+++ b/README.md
@@ -174,6 +174,6 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and License
 
-copyright 2024 creativeLabs Łukasz Holeczek.   
+copyright 2025 creativeLabs Łukasz Holeczek.   
 
 Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
diff --git a/index.html b/index.html
index 6981e6fa..c3c244de 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 * CoreUI Free Vue.js Admin Template
 * @version v5.2.0
 * @link https://coreui.io/product/free-vue-admin-template/
-* Copyright (c) 2024 creativeLabs Łukasz Holeczek
+* Copyright (c) 2025 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
 -->
 <html>

From 10252d534a997a7298877c090484c5265046ff2e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 13:03:09 +0100
Subject: [PATCH 89/92] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs  ^4.0.0  →  ^4.1.0
@coreui/coreui   ^5.2.0  →  ^5.3.1
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 47a20345..8344ee88 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.2.0",
+    "@coreui/chartjs": "^4.1.0",
+    "@coreui/coreui": "^5.3.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "2.2.0",
     "@coreui/utils": "^2.0.2",

From ff804af0367aa655e43fe212188df67640b8beee Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 13:17:16 +0100
Subject: [PATCH 90/92] refactor: migrate to Sass modules and CSS logical
 properties and values

---
 src/App.vue                |  4 +--
 src/styles/_custom.scss    |  1 -
 src/styles/_theme.scss     | 64 ---------------------------------
 src/styles/_variables.scss |  5 ---
 src/styles/examples.scss   | 21 +++++------
 src/styles/style.scss      | 74 ++++++++++++++++++++++++++++++++------
 vite.config.mjs            |  6 ----
 7 files changed, 73 insertions(+), 102 deletions(-)
 delete mode 100644 src/styles/_custom.scss
 delete mode 100644 src/styles/_theme.scss
 delete mode 100644 src/styles/_variables.scss

diff --git a/src/App.vue b/src/App.vue
index b06f287b..a095fda4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,7 @@ onBeforeMount(() => {
 
 <style lang="scss">
 // Import Main styles for this application
-@import 'styles/style';
+@use 'styles/style';
 // We use those styles to show code examples, you should remove them in your application.
-@import 'styles/examples';
+@use 'styles/examples';
 </style>
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
deleted file mode 100644
index 15d367af..00000000
--- a/src/styles/_custom.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Here you can add other styles
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
deleted file mode 100644
index 49e1c79e..00000000
--- a/src/styles/_theme.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-header {
-  .nav-underline-border {
-    --cui-nav-underline-border-link-padding-x: 1rem;
-    --cui-nav-underline-border-gap: 0;
-  }
-
-  .nav-link {
-    display: flex;
-    align-items: center;
-    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-  }
-}
-
-.sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
-  }
-}
-
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
-
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
-  }
-}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
deleted file mode 100644
index b0f8a52a..00000000
--- a/src/styles/_variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Variable overrides
-//
-// If you want to customize your project please add your variables below.
-
-$enable-deprecation-messages: false !default;
diff --git a/src/styles/examples.scss b/src/styles/examples.scss
index 375fa9a5..7dfe7323 100644
--- a/src/styles/examples.scss
+++ b/src/styles/examples.scss
@@ -1,10 +1,7 @@
-/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
-
-$enable-deprecation-messages: false !default;
-
-@import "@coreui/coreui/scss/functions";
-@import "@coreui/coreui/scss/variables";
-@import "@coreui/coreui/scss/mixins";
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
+@use "@coreui/coreui/scss/variables" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
 
 .example {
   &:not(:first-child) {
@@ -110,10 +107,8 @@ $enable-deprecation-messages: false !default;
   }
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .example .tab-content {
-      background-color: var(--#{$prefix}secondary-bg) !important;
-    }
+@include color-mode(dark) {
+  .example .tab-content {
+    background-color: var(--#{$prefix}secondary-bg) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 4fbc8235..cf48cfdb 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,15 +1,67 @@
-// If you want to override variables do it here
-@import "variables";
+@use "@coreui/coreui/scss/coreui" as * with (
+  $enable-deprecation-messages: false
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "vendors/simplebar";
 
-// Import styles
-@import "@coreui/coreui/scss/coreui";
-@import "@coreui/chartjs/scss/coreui-chartjs";
+body {
+  background-color: var(--cui-tertiary-bg);
+}
 
-// Vendors
-@import "vendors/simplebar";
+.wrapper {
+  width: 100%;
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
 
-// Custom styles for this theme
-@import "theme";
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
 
-// If you want to add custom CSS you can put it here
-@import "custom";
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  margin-inline-start: auto;
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    margin-inline-end: auto;
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@include color-mode(dark) {
+  body {
+    background-color: var(--cui-dark-bg-subtle);
+  }
+
+  .footer {
+    --cui-footer-bg: var(--cui-body-bg);
+  }
+}
diff --git a/vite.config.mjs b/vite.config.mjs
index 6fc2bd88..7195c8b7 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -13,12 +13,6 @@ export default defineConfig(() => {
           autoprefixer({}), // add options if needed
         ],
       },
-      preprocessorOptions: {
-        scss: {
-          quietDeps: true,
-          silenceDeprecations: ['import', 'legacy-js-api'],
-        },
-      },
     },
     resolve: {
       alias: [

From 5f517fd123cb8f9c0bc560e13c8f06bea7d5dac4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 13:27:16 +0100
Subject: [PATCH 91/92] chore: clean-up

---
 src/styles/examples.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/examples.scss b/src/styles/examples.scss
index 7dfe7323..dbfe258f 100644
--- a/src/styles/examples.scss
+++ b/src/styles/examples.scss
@@ -109,6 +109,6 @@
 
 @include color-mode(dark) {
   .example .tab-content {
-    background-color: var(--#{$prefix}secondary-bg) !important;
+    background-color: var(--#{$prefix}secondary-bg);
   }
 }

From f4a09815b6e5082594472b74998cadfb9c852474 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 14 Feb 2025 13:56:35 +0100
Subject: [PATCH 92/92] release: v5.3.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index c3c244de..2d8d8ef1 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free Vue.js Admin Template
-* @version v5.2.0
+* @version v5.3.0
 * @link https://coreui.io/product/free-vue-admin-template/
 * Copyright (c) 2025 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index 8344ee88..8870c2b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "CoreUI Free Vue Admin Template",
   "bugs": {
     "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"