From 9debb3157355ba17bafadb134a57abd1f05ad154 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 May 2024 12:57:55 +0200
Subject: [PATCH 01/19] docs: improve layout

---
 .../src/client/components/Banner.vue          |  48 +++++++
 .../src/client/components/OtherFrameworks.vue |  44 ++++++
 .../src/client/components/Page.vue            | 111 ---------------
 .../src/client/components/Toc.vue             |  36 +++++
 .../client/components/other_frameworks.json   |  78 +++++------
 .../src/client/layouts/Layout.vue             | 128 +++++++-----------
 .../client/styles/_component-examples.scss    |   5 +-
 .../src/client/styles/_layout.scss            |  50 ++++++-
 .../theme-coreui/src/client/styles/_toc.scss  |  49 ++++++-
 9 files changed, 316 insertions(+), 233 deletions(-)
 create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
 create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
 delete mode 100755 packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue
 create mode 100644 packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue

diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
new file mode 100644
index 00000000..e37c867a
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="pro_component"
+    class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
+  >
+    <h3 class="mb-4">CoreUI PRO Component</h3>
+    <p>
+      To use this component you must have a CoreUI PRO license. Buy the
+      <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>
+      and get access to all PRO components, features, templates, and dedicated support.
+    </p>
+  </div>
+  <div
+    v-else
+    class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5"
+  >
+    <h3 class="mb-4">Support CoreUI Development</h3>
+    <p>
+      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.
+    </p>
+    <p>You can support our Open Source software development in the following ways:</p>
+    <ul>
+      <li>
+        Buy the
+        <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>,
+        and get access to PRO components, and dedicated support.
+      </li>
+      <li>
+        <a href="https://opencollective.com/coreui" target="_blank">Became a sponsor</a>, and get
+        your logo on BACKERS.md/README.md files or each site of this documentation
+      </li>
+      <li>
+        Give us a star ⭐️ on
+        <a href="https://github.com/coreui/coreui-vue" target="_blank">Github</a>.
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const pro_component = frontmatter.value.pro_component
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
new file mode 100644
index 00000000..755d7679
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
@@ -0,0 +1,44 @@
+<template>
+  <template v-if="frameworks">
+    <h2>Other frameworks</h2>
+    <p>
+      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
+      components. To learn more please visit the following pages.
+    </p>
+    <ul>
+      <template v-for="framework in frameworks">
+        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
+          <li v-if="el !== 'vue'" :key="index">
+            <a :href="otherFrameworks[framework][el]"
+              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
+            >
+          </li>
+        </template>
+      </template>
+    </ul>
+  </template>
+</template>
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import jsonData from '../components/other_frameworks.json'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const props = defineProps({
+  pro_component: Boolean,
+})
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+  const frameworks = frontmatter.value.other_frameworks
+  ? frontmatter.value.other_frameworks.split(', ')
+  : false
+const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
+
+const humanize = (text: string) => {
+  const string = text
+    .split('-')
+    .reduce(
+      (accumulator, currentValue) =>
+        accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
+    )
+  return string[0].toUpperCase() + string.slice(1)
+}
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue
deleted file mode 100755
index 4ae63055..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div
-    v-if="pro_component"
-    class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
-  >
-    <h3 class="mb-4">CoreUI PRO Component</h3>
-    <p>
-      To use this component you must have a CoreUI PRO license. Buy the
-      <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>
-      and get access to all PRO components, features, templates, and dedicated support.
-    </p>
-  </div>
-  <div
-    v-else
-    class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5"
-  >
-    <h3 class="mb-4">Support CoreUI Development</h3>
-    <p>
-      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.
-    </p>
-    <p>You can support our Open Source software development in the following ways:</p>
-    <ul>
-      <li>
-        Buy the
-        <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>,
-        and get access to PRO components, and dedicated support.
-      </li>
-      <li>
-        <a href="https://opencollective.com/coreui" target="_blank">Became a sponsor</a>, and get
-        your logo on BACKERS.md/README.md files or each site of this documentation
-      </li>
-      <li>
-        Give us a star ⭐️ on
-        <a href="https://github.com/coreui/coreui-vue" target="_blank">Github</a>.
-      </li>
-    </ul>
-  </div>
-  <div class="theme-default-content">
-    <div class="content">
-      <h1>{{ title }}</h1>
-      <p class="docs-lead fs-4 fw-light">{{ description }}</p>
-      <Ads />
-      <template v-if="frameworks">
-        <h2>Other frameworks</h2>
-        <p>
-          CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
-          components. To learn more please visit the following pages.
-        </p>
-        <ul>
-          <template v-for="framework in frameworks">
-            <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
-              <li v-if="el !== 'vue'" :key="index">
-                <a :href="otherFrameworks[framework][el]"
-                  >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
-                >
-              </li>
-            </template>
-          </template>
-        </ul>
-      </template>
-      <Content />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { usePageFrontmatter } from '@vuepress/client'
-import type { DefaultThemeNormalPageFrontmatter } from '../../shared'
-import jsonData from './other_frameworks.json'
-
-import Ads from './Ads.vue'
-
-export default defineComponent({
-  name: 'Page',
-  components: {
-    Ads,
-  },
-  setup() {
-    const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
-    const title = frontmatter.value.title
-    const description = frontmatter.value.description
-    const pro_component = frontmatter.value.pro_component
-    const frameworks = frontmatter.value.other_frameworks
-      ? frontmatter.value.other_frameworks.split(', ')
-      : false
-    const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
-
-    const humanize = (text: string) => {
-      const string = text
-        .split('-')
-        .reduce(
-          (accumulator, currentValue) =>
-            accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
-        )
-      return string[0].toUpperCase() + string.slice(1)
-    }
-
-    return {
-      title,
-      description,
-      frameworks,
-      pro_component,
-      otherFrameworks,
-      humanize,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue
new file mode 100644
index 00000000..bcb036d1
--- /dev/null
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
+    <button
+      class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
+      type="button"
+      :aria-expanded="visible ? true : false"
+      aria-controls="tocContents"
+      @click="toggleVisible()"
+    >
+      On this page
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon d-md-none ms-2"
+        aria-hidden="true"
+        viewBox="0 0 512 512"
+      >
+        <polygon
+          fill="var(--ci-primary-color, currentColor)"
+          points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627"
+          class="ci-primary"
+        />
+      </svg>
+    </button>
+    <strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
+    <CCollapse class="docs-toc-collapse" id="tocContents" :visible="visible">
+      <Toc />
+    </CCollapse>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const visible = ref(false)
+const toggleVisible = () => {
+  visible.value = !visible.value
+}
+</script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json b/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
index 32046bbd..df64148b 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
+++ b/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
@@ -1,138 +1,138 @@
 {
   "accordion": {
-    "angular": "https://coreui.io/angular/docs/components/accordion",
+    "angular": "https://coreui.io/angular/docs/components/accordion/",
     "bootstrap": "https://coreui.io/docs/components/accordion/",
     "react": "https://coreui.io/react/docs/components/accordion/",
     "vue": "https://coreui.io/vue/docs/components/accordion.html"
   },
   "alert": {
-    "angular": "https://coreui.io/angular/docs/components/alert",
+    "angular": "https://coreui.io/angular/docs/components/alert/",
     "bootstrap": "https://coreui.io/docs/components/alerts/",
     "react": "https://coreui.io/react/docs/components/alert/",
     "vue": "https://coreui.io/vue/docs/components/alert.html"
   },
   "avatar": {
-    "angular": "https://coreui.io/angular/docs/components/avatar",
+    "angular": "https://coreui.io/angular/docs/components/avatar/",
     "bootstrap": "https://coreui.io/docs/components/avatar/",
     "react": "https://coreui.io/react/docs/components/avatar/",
     "vue": "https://coreui.io/vue/docs/components/avatar.html"
   },
   "badge": {
-    "angular": "https://coreui.io/angular/docs/components/badge",
+    "angular": "https://coreui.io/angular/docs/components/badge/",
     "bootstrap": "https://coreui.io/docs/components/badge/",
     "react": "https://coreui.io/react/docs/components/badge/",
     "vue": "https://coreui.io/vue/docs/components/badge.html"
   },
   "breadcrumb": {
-    "angular": "https://coreui.io/angular/docs/components/breadcrumb",
+    "angular": "https://coreui.io/angular/docs/components/breadcrumb/",
     "bootstrap": "https://coreui.io/docs/components/breadcrumb/",
     "react": "https://coreui.io/react/docs/components/breadcrumb/",
     "vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
   },
   "button": {
-    "angular": "https://coreui.io/angular/docs/components/button",
+    "angular": "https://coreui.io/angular/docs/components/button/",
     "bootstrap": "https://coreui.io/docs/components/buttons/",
     "react": "https://coreui.io/react/docs/components/button/",
     "vue": "https://coreui.io/vue/docs/components/button.html"
   },
   "button-group": {
-    "angular": "https://coreui.io/angular/docs/components/button-group",
+    "angular": "https://coreui.io/angular/docs/components/button-group/",
     "bootstrap": "https://coreui.io/docs/components/button-group/",
     "react": "https://coreui.io/react/docs/components/button-group/",
     "vue": "https://coreui.io/vue/docs/components/button-group.html"
   },
   "callout": {
-    "angular": "https://coreui.io/angular/docs/components/callout",
+    "angular": "https://coreui.io/angular/docs/components/callout/",
     "bootstrap": "https://coreui.io/docs/components/callout/",
     "react": "https://coreui.io/react/docs/components/callout/",
     "vue": "https://coreui.io/vue/docs/components/callout.html"
   },
   "card": {
-    "angular": "https://coreui.io/angular/docs/components/card",
+    "angular": "https://coreui.io/angular/docs/components/card/",
     "bootstrap": "https://coreui.io/docs/components/card/",
     "react": "https://coreui.io/react/docs/components/card/",
     "vue": "https://coreui.io/vue/docs/components/card.html"
   },
   "carousel": {
-    "angular": "https://coreui.io/angular/docs/components/carousel",
+    "angular": "https://coreui.io/angular/docs/components/carousel/",
     "bootstrap": "https://coreui.io/docs/components/carousel/",
     "react": "https://coreui.io/react/docs/components/carousel/",
     "vue": "https://coreui.io/vue/docs/components/carousel.html"
   },
   "checkbox": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios",
+    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
     "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/checkbox/",
     "vue": "https://coreui.io/vue/docs/forms/checkbox.html"
   },
   "close-button": {
-    "angular": "https://coreui.io/angular/docs/components/close-button",
+    "angular": "https://coreui.io/angular/docs/components/close-button/",
     "bootstrap": "https://coreui.io/docs/components/close-button/",
     "react": "https://coreui.io/react/docs/components/close-button/",
     "vue": "https://coreui.io/vue/docs/components/close-button.html"
   },
   "collapse": {
-    "angular": "https://coreui.io/angular/docs/components/collapse",
+    "angular": "https://coreui.io/angular/docs/components/collapse/",
     "bootstrap": "https://coreui.io/docs/components/collapse/",
     "react": "https://coreui.io/react/docs/components/collapse/",
     "vue": "https://coreui.io/vue/docs/components/collapse.html"
   },
   "dropdown": {
-    "angular": "https://coreui.io/angular/docs/components/dropdown",
+    "angular": "https://coreui.io/angular/docs/components/dropdown/",
     "bootstrap": "https://coreui.io/docs/components/dropdowns/",
     "react": "https://coreui.io/react/docs/components/dropdown/",
     "vue": "https://coreui.io/vue/docs/components/dropdown.html"
   },
   "footer": {
-    "angular": "https://coreui.io/angular/docs/components/footer",
+    "angular": "https://coreui.io/angular/docs/components/footer/",
     "bootstrap": "https://coreui.io/docs/components/footer/",
     "react": "https://coreui.io/react/docs/components/footer/",
     "vue": "https://coreui.io/vue/docs/components/footer.html"
   },
   "header": {
-    "angular": "https://coreui.io/angular/docs/components/header",
+    "angular": "https://coreui.io/angular/docs/components/header/",
     "bootstrap": "https://coreui.io/docs/components/header/",
     "react": "https://coreui.io/react/docs/components/header/",
     "vue": "https://coreui.io/vue/docs/components/header.html"
   },
   "icon": {
-    "angular": "https://coreui.io/angular/docs/components/icon",
+    "angular": "https://coreui.io/angular/docs/components/icon/",
     "bootstrap": "https://coreui.io/docs/components/icon/",
     "react": "https://coreui.io/react/docs/components/icon/",
     "vue": "https://coreui.io/vue/docs/components/icon.html"
   },
   "image": {
-    "angular": "https://coreui.io/angular/docs/components/image",
+    "angular": "https://coreui.io/angular/docs/components/image/",
     "bootstrap": "https://coreui.io/docs/content/images/",
     "react": "https://coreui.io/react/docs/components/image/",
     "vue": "https://coreui.io/vue/docs/components/image.html"
   },
   "input": {
-    "angular": "https://coreui.io/angular/docs/forms/input",
+    "angular": "https://coreui.io/angular/docs/forms/input/",
     "bootstrap": "https://coreui.io/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/input/",
     "vue": "https://coreui.io/vue/docs/forms/input.html"
   },
   "input-group": {
-    "angular": "https://coreui.io/angular/docs/forms/input-group",
+    "angular": "https://coreui.io/angular/docs/forms/input-group/",
     "bootstrap": "https://coreui.io/docs/forms/input-group/",
     "react": "https://coreui.io/react/docs/forms/input-group/",
     "vue": "https://coreui.io/vue/docs/forms/input-group.html"
   },
   "floating-labels": {
-    "angular": "https://coreui.io/angular/docs/forms/floating-labels",
+    "angular": "https://coreui.io/angular/docs/forms/floating-labels/",
     "bootstrap": "https://coreui.io/docs/forms/floating-labels/",
     "react": "https://coreui.io/react/docs/forms/floating-labels/",
     "vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
   },
   "list-group": {
-    "angular": "https://coreui.io/angular/docs/components/list-group",
+    "angular": "https://coreui.io/angular/docs/components/list-group/",
     "bootstrap": "https://coreui.io/docs/components/list-group/",
     "react": "https://coreui.io/react/docs/components/list-group/",
     "vue": "https://coreui.io/vue/docs/components/list-group.html"
   },
   "modal": {
-    "angular": "https://coreui.io/angular/docs/components/modal",
+    "angular": "https://coreui.io/angular/docs/components/modal/",
     "bootstrap": "https://coreui.io/docs/components/modal/",
     "react": "https://coreui.io/react/docs/components/modal/",
     "vue": "https://coreui.io/vue/docs/components/modal.html"
@@ -143,97 +143,97 @@
     "vue": "https://coreui.io/vue/docs/components/navbar.html"
   },
   "navs-tabs": {
-    "angular": "https://coreui.io/angular/docs/components/nav",
+    "angular": "https://coreui.io/angular/docs/components/nav/",
     "bootstrap": "https://coreui.io/docs/components/navs-tabs/",
     "react": "https://coreui.io/react/docs/components/navs-tabs/",
     "vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
   },
   "offcanvas": {
-    "angular": "https://coreui.io/angular/docs/components/offcanvas",
+    "angular": "https://coreui.io/angular/docs/components/offcanvas/",
     "bootstrap": "https://coreui.io/docs/components/offcanvas/",
     "react": "https://coreui.io/react/docs/components/offcanvas/",
     "vue": "https://coreui.io/vue/docs/components/offcanvas.html"
   },
   "pagination": {
-    "angular": "https://coreui.io/angular/docs/components/pagination",
+    "angular": "https://coreui.io/angular/docs/components/pagination/",
     "bootstrap": "https://coreui.io/docs/components/pagination/",
     "react": "https://coreui.io/react/docs/components/pagination/",
     "vue": "https://coreui.io/vue/docs/components/pagination.html"
   },
   "placeholder": {
-    "angular": "https://coreui.io/angular/docs/components/placeholder",
+    "angular": "https://coreui.io/angular/docs/components/placeholder/",
     "bootstrap": "https://coreui.io/docs/components/placeholders/",
     "react": "https://coreui.io/react/docs/components/placeholder/",
     "vue": "https://coreui.io/vue/docs/components/placeholder.html"
   },
   "popover": {
-    "angular": "https://coreui.io/angular/docs/components/popover",
+    "angular": "https://coreui.io/angular/docs/components/popover/",
     "bootstrap": "https://coreui.io/docs/components/popovers/",
     "react": "https://coreui.io/react/docs/components/popover/",
     "vue": "https://coreui.io/vue/docs/components/popover.html"
   },
   "progress": {
-    "angular": "https://coreui.io/angular/docs/components/progress",
+    "angular": "https://coreui.io/angular/docs/components/progress/",
     "bootstrap": "https://coreui.io/docs/components/progress/",
     "react": "https://coreui.io/react/docs/components/progress/",
     "vue": "https://coreui.io/vue/docs/components/progress.html"
   },
   "radio": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios",
+    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
     "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/radio/",
     "vue": "https://coreui.io/vue/docs/forms/radio.html"
   },
   "range": {
-    "angular": "https://coreui.io/angular/docs/forms/range",
+    "angular": "https://coreui.io/angular/docs/forms/range/",
     "bootstrap": "https://coreui.io/docs/forms/range/",
     "react": "https://coreui.io/react/docs/forms/range/",
     "vue": "https://coreui.io/vue/docs/forms/range.html"
   },
   "select": {
-    "angular": "https://coreui.io/angular/docs/forms/select",
+    "angular": "https://coreui.io/angular/docs/forms/select/",
     "bootstrap": "https://coreui.io/docs/forms/select/",
     "react": "https://coreui.io/react/docs/forms/select/",
     "vue": "https://coreui.io/vue/docs/forms/select.html"
   },
   "sidebar": {
-    "angular": "https://coreui.io/angular/docs/components/sidebar",
+    "angular": "https://coreui.io/angular/docs/components/sidebar/",
     "bootstrap": "https://coreui.io/docs/components/sidebar/",
     "react": "https://coreui.io/react/docs/components/sidebar/",
     "vue": "https://coreui.io/vue/docs/components/sidebar.html"
   },
   "spinner": {
-    "angular": "https://coreui.io/angular/docs/components/spinner",
+    "angular": "https://coreui.io/angular/docs/components/spinner/",
     "bootstrap": "https://coreui.io/docs/components/spinners/",
     "react": "https://coreui.io/react/docs/components/spinner/",
     "vue": "https://coreui.io/vue/docs/components/spinner.html"
   },
   "switch": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios",
+    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
     "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/switch/",
     "vue": "https://coreui.io/vue/docs/forms/switch.html"
   },
   "table": {
-    "angular": "https://coreui.io/angular/docs/components/table",
+    "angular": "https://coreui.io/angular/docs/components/table/",
     "bootstrap": "https://coreui.io/docs/content/tables/",
     "react": "https://coreui.io/react/docs/components/table/",
     "vue": "https://coreui.io/vue/docs/components/table.html"
   },
   "textarea": {
-    "angular": "https://coreui.io/angular/docs/forms/form-control",
+    "angular": "https://coreui.io/angular/docs/forms/form-control/",
     "bootstrap": "https://coreui.io/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/textarea/",
     "vue": "https://coreui.io/vue/docs/forms/textarea.html"
   },
   "toast": {
-    "angular": "https://coreui.io/angular/docs/components/toast",
+    "angular": "https://coreui.io/angular/docs/components/toast/",
     "bootstrap": "https://coreui.io/docs/components/toasts/",
     "react": "https://coreui.io/react/docs/components/toast/",
     "vue": "https://coreui.io/vue/docs/components/toast.html"
   },
   "tooltip": {
-    "angular": "https://coreui.io/angular/docs/components/tooltip",
+    "angular": "https://coreui.io/angular/docs/components/tooltip/",
     "bootstrap": "https://coreui.io/docs/components/tooltips/",
     "react": "https://coreui.io/react/docs/components/tooltip/",
     "vue": "https://coreui.io/vue/docs/components/tooltip.html"
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
index 24fdb74b..936b31c4 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
@@ -1,103 +1,73 @@
 <template>
   <div>
     <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
-    <div class="wrapper d-flex flex-column min-vh-100">
-      <Header
-        @toggle-sidebar="toggleSidebar(!isSidebarOpen)"
-      />
-      <div class="body flex-grow-1 px-3">
-        <CContainer lg>
-          <main class="docs-main">
-            <Transition
-              name="fade-slide-y"
-              mode="out-in"
-              @before-enter="onBeforeEnter"
-              @before-leave="onBeforeLeave"
-            >
-              <CRow>
-                <CCol :lg="9">
-                  <Page :key="page.path">
-                    <template #top>
-                      <slot name="page-top" />
-                    </template>
-                    <template #bottom>
-                      <slot name="page-bottom" />
-                    </template>
-                  </Page>
-                </CCol>
-                <CCol :lg="3">
-                  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
-                    <strong class="d-block h6 mb-2 pb-2 border-bottom">On this page</strong>
-                    <Toc />
-                  </div>
-                </CCol>
-              </CRow>
-            </Transition>
+    <div class="wrapper flex-grow-1">
+      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
+      <Transition
+        name="fade-slide-y"
+        mode="out-in"
+        @before-enter="onBeforeEnter"
+        @before-leave="onBeforeLeave"
+      >
+        <CContainer class="my-md-4 flex-grow-1" lg>
+          <main class="docs-main order-1">
+            <div class="docs-intro ps-lg-4">
+              <Banner />
+              <h1 className="docs-title" id="content">{{ title }}</h1>
+              <p class="docs-lead">{{ description }}</p>
+              <Ads />
+              <OtherFrameworks />
+            </div>
+            <Toc />
+            <div className="docs-content ps-lg-4"><Content /></div>
           </main>
         </CContainer>
-      </div>
+      </Transition>
       <Footer />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue'
-import { usePageData, usePageFrontmatter } from '@vuepress/client'
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { usePageFrontmatter } from '@vuepress/client'
 import docsearch from '@docsearch/js'
 import type { DefaultThemePageFrontmatter } from '../../shared'
+import Ads from '../components/Ads.vue'
+import Banner from '../components/Banner.vue'
 import Footer from '../components/Footer.vue'
 import Header from '../components/Header.vue'
-import Page from '../components/Page.vue'
+import OtherFrameworks from '../components/OtherFrameworks.vue'
 import Sidebar from '../components/Sidebar.vue'
+import Toc from '../components/Toc.vue'
 import { useScrollPromise } from '../composables'
 
-export default defineComponent({
-  name: 'Layout',
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
 
-  components: {
-    Footer,
-    Header,
-    Page,
-    Sidebar,
-  },
+// sidebar
+const isSidebarOpen = ref(true)
 
-  setup() {
-    const page = usePageData()
-    const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const toggleSidebar = (to?: boolean): void => {
+  isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
+}
 
-    // sidebar
-    const isSidebarOpen = ref(true)
+// handle scrollBehavior with transition
+const scrollPromise = useScrollPromise()
+const onBeforeEnter = scrollPromise.resolve
+const onBeforeLeave = scrollPromise.pending
 
-    const toggleSidebar = (to?: boolean): void => {
-      isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
-    }
+const title = frontmatter.value.title
+const description = frontmatter.value.description
 
-    // handle scrollBehavior with transition
-    const scrollPromise = useScrollPromise()
-    const onBeforeEnter = scrollPromise.resolve
-    const onBeforeLeave = scrollPromise.pending
-
-    onMounted(() => {
-      const searchElement = document.getElementById('docsearch') as HTMLElement
-      docsearch({
-        appId: 'RG8RW9GEH3',
-        apiKey: '4926b633296d71c6d727f7766170f82b',
-        indexName: 'coreuivue',
-        container: searchElement,
-        // @ts-ignore
-        debug: false,
-      })
-    })
-
-    return {
-      isSidebarOpen,
-      frontmatter,
-      page,
-      toggleSidebar,
-      onBeforeEnter,
-      onBeforeLeave,
-    }
-  },
+onMounted(() => {
+  const searchElement = document.getElementById('docsearch') as HTMLElement
+  docsearch({
+    appId: 'RG8RW9GEH3',
+    apiKey: '4926b633296d71c6d727f7766170f82b',
+    indexName: 'coreuivue',
+    container: searchElement,
+    // @ts-ignore
+    debug: false,
+  })
 })
 </script>
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
index 6561eaee..c0909660 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
@@ -374,19 +374,20 @@ div[class^="language-"],
 .highlight {
   position: relative;
   padding: .75rem ($cd-gutter-x * .5);
-  margin-bottom: 1rem;
+  margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5) ;
   border: 1px solid var(--cui-border-color);
   background-color: var(--cd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
+    margin-right: 0;
+    margin-left: 0;
     @include border-radius(var(--cui-border-radius));
   }
 
   pre {
     padding: .25rem 0 .875rem;
     margin-top: .8125rem;
-    margin-right: 1.875rem;
     margin-bottom: 0;
     overflow: overlay;
     white-space: pre;
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
index 284eae98..2ee63995 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
@@ -3,4 +3,52 @@
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
-}
\ No newline at end of file
+
+  > .container-lg {
+    --cui-gutter-x: 3rem;
+  }
+}
+
+.docs-sidebar {
+  grid-area: sidebar;
+}
+
+.docs-main {
+  grid-area: main;
+
+  @include media-breakpoint-down(lg) {
+    max-width: 760px;
+    margin-inline: auto;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: grid;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+    gap: $grid-gutter-width;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 4fr 1fr;
+  }
+}
+
+.docs-intro {
+  grid-area: intro;
+}
+
+.docs-toc {
+  grid-area: toc;
+}
+
+.docs-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
index fc1f0fee..8f6dc04d 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
+++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-type
+
 .docs-toc {
   @include media-breakpoint-up(lg) {
     position: sticky;
@@ -37,4 +39,49 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.docs-toc-toggle {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(sm) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: var(--cui-body-color);
+    border: 1px solid var(--cui-border-color);
+    @include border-radius(var(--cui-border-radius));
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[aria-expanded="true"] {
+      color: var(--cui-primary);
+      background-color: var(--cui-body-bg);
+      border-color: var(--cui-primary);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--cui-primary-rgb), .25);
+    }
+  }
+}
+
+.docs-toc-collapse {
+  @include media-breakpoint-down(md) {
+    nav {
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      background-color: var(--cui-tertiary-bg);
+      border: 1px solid var(--cui-border-color);
+      @include border-radius(var(--cui-border-radius));
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}

From fc881ad0474ca57e209b5859f90c46b00feb64f3 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 May 2024 14:23:05 +0200
Subject: [PATCH 02/19] 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.1
@vuepress/plugin-active-header-links  2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-back-to-top          2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-container            2.0.0-rc.0  →  2.0.0-rc.28
@vuepress/plugin-prismjs              2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-register-components  2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-theme-data           2.0.0-rc.0  →  2.0.0-rc.30
@vuepress/plugin-toc                  2.0.0-rc.0  →  2.0.0-rc.30
vuepress                              2.0.0-rc.0  →  2.0.0-rc.11
---
 packages/docs/package.json | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/docs/package.json b/packages/docs/package.json
index 95f61218..1795fdbe 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,17 +9,25 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
-    "@vuepress/plugin-register-components": "2.0.0-rc.0",
-    "@vuepress/plugin-toc": "2.0.0-rc.0",
+    "@vuepress/bundler-vite": "2.0.0-rc.11",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.30",
+    "@vuepress/plugin-back-to-top": "2.0.0-rc.30",
+    "@vuepress/plugin-container": "2.0.0-rc.28",
+    "@vuepress/plugin-git": "2.0.0-rc.30",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.30",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.30",
+    "@vuepress/plugin-register-components": "2.0.0-rc.30",
+    "@vuepress/plugin-toc": "2.0.0-rc.30",
     "markdown-it-include": "^2.0.0",
+    "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.0"
+    "vuepress": "2.0.0-rc.11"
   }
 }

From 1912045de18ba79118f0ebed75345ca0b935804d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 26 May 2024 14:33:04 +0200
Subject: [PATCH 03/19] docs: improve theme

---
 packages/docs/.vuepress/config.ts             | 11 ++--
 .../src/assets/brand/coreui-vue.svg           |  0
 .../src/client/components/Ads.vue             |  0
 .../src/client/components/Banner.vue          |  0
 .../src/client/components/Callout.vue         |  0
 .../src/client/components/Footer.vue          |  3 +-
 .../src/client/components/Header.vue          |  0
 .../src/client/components/OtherFrameworks.vue |  1 +
 .../src/client/components/ScssDocs.vue        |  0
 .../src/client/components/Sidebar.vue         |  0
 .../src/client/components/SidebarNav.ts       |  0
 .../src/client/components/Toc.vue             |  0
 .../client/components/other_frameworks.json   |  0
 .../src/client/composables/index.ts           |  0
 .../src/client/composables/useNavLink.ts      |  0
 .../useResolveRouteWithRedirect.ts            |  0
 .../client/composables/useScrollPromise.ts    |  0
 .../src/client/composables/useSidebarItems.ts |  3 +-
 .../src/client/composables/useThemeData.ts    |  0
 .../{theme-coreui => }/src/client/config.ts   |  0
 .../{theme-coreui => }/src/client/index.ts    |  0
 .../src/client/layouts/404.vue                |  0
 .../src/client/layouts/Layout.vue             |  0
 .../src/client/layouts/Redirect.vue           |  0
 .../{theme-coreui => }/src/client/shim.d.ts   |  0
 .../src/client/styles/_ads.scss               |  0
 .../src/client/styles/_anchor.scss            |  0
 .../src/client/styles/_callouts.scss          |  0
 .../client/styles/_component-examples.scss    |  0
 .../src/client/styles/_footer.scss            |  0
 .../src/client/styles/_layout.scss            |  0
 .../src/client/styles/_prism.scss             |  0
 .../src/client/styles/_scrolling.scss         |  0
 .../src/client/styles/_search.scss            |  0
 .../src/client/styles/_sidebar.scss           |  0
 .../src/client/styles/_table-api.scss         |  0
 .../src/client/styles/_toc.scss               |  0
 .../src/client/styles/_variables.scss         |  0
 .../src/client/styles/custom-container.scss   |  0
 .../src/client/styles/index.scss              |  0
 .../src/node/defaultTheme.ts                  |  0
 .../{theme-coreui => }/src/node/index.ts      |  0
 .../node/utils/assignDefaultLocaleOptions.ts  |  0
 .../src/node/utils/index.ts                   |  0
 .../{theme-coreui => }/src/shared/index.ts    |  0
 .../{theme-coreui => }/src/shared/nav.ts      |  0
 .../{theme-coreui => }/src/shared/options.ts  |  0
 .../{theme-coreui => }/src/shared/page.ts     |  0
 .../{theme-coreui => }/templates/build.html   |  0
 .../docs/.vuepress/theme-coreui/package.json  | 52 -------------------
 50 files changed, 12 insertions(+), 58 deletions(-)
 rename packages/docs/.vuepress/{theme-coreui => }/src/assets/brand/coreui-vue.svg (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Ads.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Banner.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Callout.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Footer.vue (95%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Header.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/OtherFrameworks.vue (98%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/ScssDocs.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Sidebar.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/SidebarNav.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/Toc.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/components/other_frameworks.json (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useNavLink.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useResolveRouteWithRedirect.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useScrollPromise.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useSidebarItems.ts (99%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/composables/useThemeData.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/config.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/layouts/404.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/layouts/Layout.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/layouts/Redirect.vue (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/shim.d.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_ads.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_anchor.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_callouts.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_component-examples.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_footer.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_layout.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_prism.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_scrolling.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_search.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_sidebar.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_table-api.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_toc.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/_variables.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/custom-container.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/client/styles/index.scss (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/defaultTheme.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/utils/assignDefaultLocaleOptions.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/node/utils/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/index.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/nav.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/options.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/src/shared/page.ts (100%)
 rename packages/docs/.vuepress/{theme-coreui => }/templates/build.html (100%)
 delete mode 100755 packages/docs/.vuepress/theme-coreui/package.json

diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 4c55aee9..34678fec 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,7 +1,8 @@
 import { defineUserConfig } from 'vuepress'
+import { viteBundler } from '@vuepress/bundler-vite'
 import anchor from 'markdown-it-anchor'
 import include_plugin from 'markdown-it-include'
-import { defaultTheme } from './theme-coreui'
+import { defaultTheme } from './src/node/defaultTheme'
 
 import { containerPlugin } from '@vuepress/plugin-container'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -18,6 +19,10 @@ export default defineUserConfig({
   head: [
     ['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }],
   ],
+  bundler: viteBundler({
+    viteOptions: {},
+    vuePluginOptions: {},
+  }),
   markdown: {
     anchor: {
       permalink: anchor.permalink.ariaHidden({
@@ -79,8 +84,8 @@ export default defineUserConfig({
     tocPlugin({}),
     registerComponentsPlugin({
       components: {
-        Callout: path.resolve(__dirname, './theme-coreui/src/client/components/Callout.vue'),
-        ScssDocs: path.resolve(__dirname, './theme-coreui/src/client/components/ScssDocs.vue'),
+        Callout: path.resolve(__dirname, './src/client/components/Callout.vue'),
+        ScssDocs: path.resolve(__dirname, './src/client/components/ScssDocs.vue'),
       },
     }),
   ],
diff --git a/packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg b/packages/docs/.vuepress/src/assets/brand/coreui-vue.svg
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/assets/brand/coreui-vue.svg
rename to packages/docs/.vuepress/src/assets/brand/coreui-vue.svg
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Ads.vue b/packages/docs/.vuepress/src/client/components/Ads.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Ads.vue
rename to packages/docs/.vuepress/src/client/components/Ads.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue b/packages/docs/.vuepress/src/client/components/Banner.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue
rename to packages/docs/.vuepress/src/client/components/Banner.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue b/packages/docs/.vuepress/src/client/components/Callout.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue
rename to packages/docs/.vuepress/src/client/components/Callout.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue b/packages/docs/.vuepress/src/client/components/Footer.vue
similarity index 95%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue
rename to packages/docs/.vuepress/src/client/components/Footer.vue
index ca00885f..848a8785 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue
+++ b/packages/docs/.vuepress/src/client/components/Footer.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import pkg from './../../../../../package.json'
+import pkg from './../../../../package.json'
 export default defineComponent({
   name: 'Footer',
   setup () {
@@ -50,3 +50,4 @@ export default defineComponent({
   }
 })
 </script>
+../../../../package.json
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
rename to packages/docs/.vuepress/src/client/components/Header.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
similarity index 98%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
rename to packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
index 755d7679..f06b9959 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue
+++ b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
@@ -42,3 +42,4 @@ const humanize = (text: string) => {
   return string[0].toUpperCase() + string.slice(1)
 }
 </script>
+./other_frameworks.json
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue
rename to packages/docs/.vuepress/src/client/components/ScssDocs.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
rename to packages/docs/.vuepress/src/client/components/Sidebar.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts b/packages/docs/.vuepress/src/client/components/SidebarNav.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts
rename to packages/docs/.vuepress/src/client/components/SidebarNav.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue b/packages/docs/.vuepress/src/client/components/Toc.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue
rename to packages/docs/.vuepress/src/client/components/Toc.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json b/packages/docs/.vuepress/src/client/components/other_frameworks.json
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
rename to packages/docs/.vuepress/src/client/components/other_frameworks.json
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts b/packages/docs/.vuepress/src/client/composables/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/index.ts
rename to packages/docs/.vuepress/src/client/composables/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useNavLink.ts b/packages/docs/.vuepress/src/client/composables/useNavLink.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useNavLink.ts
rename to packages/docs/.vuepress/src/client/composables/useNavLink.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useResolveRouteWithRedirect.ts b/packages/docs/.vuepress/src/client/composables/useResolveRouteWithRedirect.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useResolveRouteWithRedirect.ts
rename to packages/docs/.vuepress/src/client/composables/useResolveRouteWithRedirect.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useScrollPromise.ts b/packages/docs/.vuepress/src/client/composables/useScrollPromise.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useScrollPromise.ts
rename to packages/docs/.vuepress/src/client/composables/useScrollPromise.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
similarity index 99%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts
rename to packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
index 0cf89962..d68d9dad 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts
+++ b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
@@ -1,7 +1,6 @@
 import { usePageData, usePageFrontmatter } from '@vuepress/client'
 import type { PageHeader } from '@vuepress/client'
 import {
-  isArray,
   isPlainObject,
   isString,
   resolveLocalePath,
@@ -70,7 +69,7 @@ export const resolveSidebarItems = (
     return resolveAutoSidebarItems(sidebarDepth)
   }
 
-  if (isArray(sidebarConfig)) {
+  if (Array.isArray(sidebarConfig)) {
     return resolveArraySidebarItems(sidebarConfig, sidebarDepth)
   }
 
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useThemeData.ts b/packages/docs/.vuepress/src/client/composables/useThemeData.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useThemeData.ts
rename to packages/docs/.vuepress/src/client/composables/useThemeData.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/config.ts b/packages/docs/.vuepress/src/client/config.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/config.ts
rename to packages/docs/.vuepress/src/client/config.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/index.ts b/packages/docs/.vuepress/src/client/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/index.ts
rename to packages/docs/.vuepress/src/client/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue b/packages/docs/.vuepress/src/client/layouts/404.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue
rename to packages/docs/.vuepress/src/client/layouts/404.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
rename to packages/docs/.vuepress/src/client/layouts/Layout.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue b/packages/docs/.vuepress/src/client/layouts/Redirect.vue
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue
rename to packages/docs/.vuepress/src/client/layouts/Redirect.vue
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/shim.d.ts b/packages/docs/.vuepress/src/client/shim.d.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/shim.d.ts
rename to packages/docs/.vuepress/src/client/shim.d.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss b/packages/docs/.vuepress/src/client/styles/_ads.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss
rename to packages/docs/.vuepress/src/client/styles/_ads.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss b/packages/docs/.vuepress/src/client/styles/_anchor.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss
rename to packages/docs/.vuepress/src/client/styles/_anchor.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss b/packages/docs/.vuepress/src/client/styles/_callouts.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss
rename to packages/docs/.vuepress/src/client/styles/_callouts.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
rename to packages/docs/.vuepress/src/client/styles/_component-examples.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss b/packages/docs/.vuepress/src/client/styles/_footer.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss
rename to packages/docs/.vuepress/src/client/styles/_footer.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss b/packages/docs/.vuepress/src/client/styles/_layout.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
rename to packages/docs/.vuepress/src/client/styles/_layout.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss b/packages/docs/.vuepress/src/client/styles/_prism.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss
rename to packages/docs/.vuepress/src/client/styles/_prism.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss b/packages/docs/.vuepress/src/client/styles/_scrolling.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss
rename to packages/docs/.vuepress/src/client/styles/_scrolling.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss b/packages/docs/.vuepress/src/client/styles/_search.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss
rename to packages/docs/.vuepress/src/client/styles/_search.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
rename to packages/docs/.vuepress/src/client/styles/_sidebar.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_table-api.scss b/packages/docs/.vuepress/src/client/styles/_table-api.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_table-api.scss
rename to packages/docs/.vuepress/src/client/styles/_table-api.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss b/packages/docs/.vuepress/src/client/styles/_toc.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
rename to packages/docs/.vuepress/src/client/styles/_toc.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss b/packages/docs/.vuepress/src/client/styles/_variables.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
rename to packages/docs/.vuepress/src/client/styles/_variables.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/custom-container.scss b/packages/docs/.vuepress/src/client/styles/custom-container.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/custom-container.scss
rename to packages/docs/.vuepress/src/client/styles/custom-container.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss b/packages/docs/.vuepress/src/client/styles/index.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
rename to packages/docs/.vuepress/src/client/styles/index.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts b/packages/docs/.vuepress/src/node/defaultTheme.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts
rename to packages/docs/.vuepress/src/node/defaultTheme.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/index.ts b/packages/docs/.vuepress/src/node/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/index.ts
rename to packages/docs/.vuepress/src/node/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/utils/assignDefaultLocaleOptions.ts b/packages/docs/.vuepress/src/node/utils/assignDefaultLocaleOptions.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/utils/assignDefaultLocaleOptions.ts
rename to packages/docs/.vuepress/src/node/utils/assignDefaultLocaleOptions.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/utils/index.ts b/packages/docs/.vuepress/src/node/utils/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/node/utils/index.ts
rename to packages/docs/.vuepress/src/node/utils/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/index.ts b/packages/docs/.vuepress/src/shared/index.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/index.ts
rename to packages/docs/.vuepress/src/shared/index.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/nav.ts b/packages/docs/.vuepress/src/shared/nav.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/nav.ts
rename to packages/docs/.vuepress/src/shared/nav.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/options.ts b/packages/docs/.vuepress/src/shared/options.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/options.ts
rename to packages/docs/.vuepress/src/shared/options.ts
diff --git a/packages/docs/.vuepress/theme-coreui/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/shared/page.ts
rename to packages/docs/.vuepress/src/shared/page.ts
diff --git a/packages/docs/.vuepress/theme-coreui/templates/build.html b/packages/docs/.vuepress/templates/build.html
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/templates/build.html
rename to packages/docs/.vuepress/templates/build.html
diff --git a/packages/docs/.vuepress/theme-coreui/package.json b/packages/docs/.vuepress/theme-coreui/package.json
deleted file mode 100755
index 39655fd9..00000000
--- a/packages/docs/.vuepress/theme-coreui/package.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "@vuepress/theme-coreui",
-  "version": "1.0.0",
-  "description": "CoreUI for Vue.js docs theme",
-  "keywords": [
-    "vuepress-theme",
-    "vuepress",
-    "theme",
-    "default"
-  ],
-  "homepage": "https://github.com/coreui",
-  "bugs": {
-    "url": "https://github.com/coreui/coreui-vue/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/coreui/coreui-vue.git"
-  },
-  "license": "MIT",
-  "author": "Lukasz Holeczek",
-  "main": "src/node/index.ts",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "build": "tsc -b tsconfig.build.json",
-    "clean": "rimraf lib *.tsbuildinfo",
-    "copy": "cpx \"src/**/*.{d.ts,vue,scss}\" lib"
-  },
-  "dependencies": {
-    "@vuepress/client": "2.0.0-beta.21",
-    "@vuepress/core": "2.0.0-beta.22",
-    "@vuepress/plugin-active-header-links": "2.0.0-beta.22",
-    "@vuepress/plugin-back-to-top": "2.0.0-beta.22",
-    "@vuepress/plugin-container": "2.0.0-beta.22",
-    "@vuepress/plugin-git": "2.0.0-beta.22",
-    "@vuepress/plugin-medium-zoom": "2.0.0-beta.22",
-    "@vuepress/plugin-nprogress": "2.0.0-beta.22",
-    "@vuepress/plugin-palette": "2.0.0-beta.22",
-    "@vuepress/plugin-prismjs": "2.0.0-beta.22",
-    "@vuepress/plugin-theme-data": "2.0.0-beta.22",
-    "@vuepress/shared": "2.0.0-beta.21",
-    "@vuepress/utils": "2.0.0-beta.21",
-    "sass": "^1.35.1",
-    "sass-loader": "^12.1.0",
-    "vue": "^3.1.4",
-    "vue-router": "^4.0.10"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

From d787ed5c571245982c38810aaecd70423353cd27 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:41:50 +0200
Subject: [PATCH 04/19] feat(CTabs): the initial release of the new react tabs
 component

---
 .../coreui-vue/src/components/tabs/CTab.ts    |  45 ++
 .../src/components/tabs/CTabList.ts           |  89 +++
 .../src/components/tabs/CTabPanel.ts          | 129 ++++
 .../coreui-vue/src/components/tabs/CTabs.ts   |  44 ++
 .../coreui-vue/src/components/tabs/index.ts   |  10 +-
 packages/docs/.vuepress/config.ts             |   4 +
 packages/docs/api/tabs/CTab.api.md            |  13 +
 packages/docs/api/tabs/CTabList.api.md        |  14 +
 packages/docs/api/tabs/CTabPanel.api.md       |  22 +
 packages/docs/api/tabs/CTabs.api.md           |  19 +
 packages/docs/components/tabs.md              | 579 +++++++++++++++---
 11 files changed, 866 insertions(+), 102 deletions(-)
 create mode 100644 packages/coreui-vue/src/components/tabs/CTab.ts
 create mode 100644 packages/coreui-vue/src/components/tabs/CTabList.ts
 create mode 100644 packages/coreui-vue/src/components/tabs/CTabPanel.ts
 create mode 100644 packages/coreui-vue/src/components/tabs/CTabs.ts
 create mode 100644 packages/docs/api/tabs/CTab.api.md
 create mode 100644 packages/docs/api/tabs/CTabList.api.md
 create mode 100644 packages/docs/api/tabs/CTabPanel.api.md
 create mode 100644 packages/docs/api/tabs/CTabs.api.md

diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
new file mode 100644
index 00000000..c7c54250
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -0,0 +1,45 @@
+import { defineComponent, h, inject, Ref } from 'vue'
+
+const CTab = defineComponent({
+  name: 'CTab',
+  props: {
+    /**
+     * Item key.
+     */
+    itemKey: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const activeItemKey = inject('activeItemKey') as Ref<number | string>
+    const id = inject('id') as Ref<number | string>
+    const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
+
+    const isActive = () => props.itemKey === activeItemKey.value
+
+    return () =>
+      h(
+        'button',
+        {
+          class: [
+            'nav-link',
+            {
+              active: isActive(),
+            },
+          ],
+          id: `${id.value}${props.itemKey}-tab`,
+          role: 'tab',
+          tabindex: isActive() ? 0 : -1,
+          type: 'button',
+          'aria-controls': `${id.value}${props.itemKey}-tab-pane`,
+          'aria-selected': isActive(),
+          onClick: () => setActiveItemKey(props.itemKey),
+          onFocus: () => setActiveItemKey(props.itemKey),
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CTab }
diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts
new file mode 100644
index 00000000..60028cd8
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTabList.ts
@@ -0,0 +1,89 @@
+import { defineComponent, h, ref } from 'vue'
+import { getNextActiveElement } from '../dropdown/utils'
+
+const CTabList = defineComponent({
+  name: 'CTabList',
+  props: {
+    /**
+     * Specify a layout type for component.
+     *
+     * @values 'fill', 'justified'
+     */
+    layout: {
+      type: String,
+      validator: (value: string) => {
+        return ['fill', 'justified'].includes(value)
+      },
+    },
+    /**
+     * Set the nav variant to tabs or pills.
+     *
+     * @values 'pills', 'tabs', 'underline', 'underline-border'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return ['pills', 'tabs', 'underline', 'underline-border'].includes(value)
+      },
+    },
+  },
+  setup(props, { slots }) {
+    const tabListRef = ref<HTMLDivElement>()
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        tabListRef.value &&
+        (event.key === 'ArrowDown' ||
+          event.key === 'ArrowUp' ||
+          event.key === 'ArrowLeft' ||
+          event.key === 'ArrowRight' ||
+          event.key === 'Home' ||
+          event.key === 'End')
+      ) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        // eslint-disable-next-line unicorn/prefer-spread
+        const items: HTMLElement[] = Array.from(
+          tabListRef.value.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+        )
+
+        let nextActiveElement
+
+        if (event.key === 'Home' || event.key === 'End') {
+          nextActiveElement = event.key === 'End' ? items.at(-1) : items[0]
+        } else {
+          nextActiveElement = getNextActiveElement(
+            items,
+            target,
+            event.key === 'ArrowDown' || event.key === 'ArrowRight',
+            true,
+          )
+        }
+
+        if (nextActiveElement) {
+          nextActiveElement.focus({ preventScroll: true })
+        }
+      }
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          class: [
+            'nav',
+            {
+              [`nav-${props.layout}`]: props.layout,
+              [`nav-${props.variant}`]: props.variant,
+            },
+          ],
+          role: 'tablist',
+          onKeydown: (event) => handleKeydown(event),
+          ref: tabListRef,
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CTabList }
diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
new file mode 100644
index 00000000..5e2609bf
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
@@ -0,0 +1,129 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  ref,
+  Ref,
+  RendererElement,
+  Transition,
+  vShow,
+  watch,
+  withDirectives,
+} from 'vue'
+
+import { executeAfterTransition } from '../../utils/transition'
+
+const CTabPanel = defineComponent({
+  name: 'CTabPanel',
+  props: {
+    /**
+     * Item key.
+     */
+    itemKey: {
+      type: [Number, String],
+      required: true,
+    },
+    /**
+     * Enable fade in and fade out transition.
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Toggle the visibility of component.
+     */
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { slots, emit }) {
+    const activeItemKey = inject('activeItemKey') as Ref<number | string>
+    const id = inject('id') as Ref<number | string>
+
+    const tabPaneRef = ref()
+    const firstRender = ref(true)
+    const visible = ref()
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    watch(
+      activeItemKey,
+      () => {
+        visible.value = Boolean(activeItemKey.value === props.itemKey)
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    const handleEnter = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('show')
+      setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
+        el.classList.add('show')
+      }, 1)
+    }
+
+    const handleLeave = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('hide')
+      el.classList.remove('show')
+      executeAfterTransition(() => done(), el as HTMLElement)
+    }
+
+    return () =>
+      h(
+        Transition,
+        {
+          onEnter: (el, done) => handleEnter(el, done),
+          onLeave: (el, done) => handleLeave(el, done),
+        },
+        () =>
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'tab-pane',
+                  {
+                    active: visible.value,
+                    fade: props.transition,
+                    show: firstRender.value && visible.value,
+                  },
+                ],
+                id: `${id.value}${props.itemKey}-tab-pane`,
+                role: 'tabpanel',
+                'aria-labelledby': `${id.value}${props.itemKey}-tab`,
+                tabindex: 0,
+                ref: tabPaneRef,
+              },
+              slots.default && slots.default(),
+            ),
+            [[vShow, visible.value]],
+          ),
+      )
+  },
+})
+
+export { CTabPanel }
diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts
new file mode 100644
index 00000000..e031153d
--- /dev/null
+++ b/packages/coreui-vue/src/components/tabs/CTabs.ts
@@ -0,0 +1,44 @@
+import { defineComponent, h, provide, ref, watch } from 'vue'
+import { getUID } from '../../utils'
+
+const CTabs = defineComponent({
+  name: 'CTabs',
+  props: {
+    /**
+     * The active item key.
+     */
+    activeItemKey: {
+      type: [Number, String],
+      required: true,
+    }
+  },
+  emits: [
+    /**
+     * The callback is fired when the active tab changes.
+     */
+    'change',
+  ],
+  setup(props, { slots, emit }) {
+    const uID = ref(getUID('t'))
+    const activeItemKey = ref(props.activeItemKey)
+    const setActiveItemKey = (key: string | number) => {
+      activeItemKey.value = key
+    }
+
+    watch(
+      () => props.activeItemKey,
+      (value) => {
+        activeItemKey.value = value
+        emit('change', value)
+      },
+    )
+
+    provide('activeItemKey', activeItemKey)
+    provide('id', uID)
+    provide('setActiveItemKey', setActiveItemKey)
+
+    return () => h('div', { class: 'tabs' }, slots.default && slots.default())
+  },
+})
+
+export { CTabs }
diff --git a/packages/coreui-vue/src/components/tabs/index.ts b/packages/coreui-vue/src/components/tabs/index.ts
index 997480a5..7c848b03 100644
--- a/packages/coreui-vue/src/components/tabs/index.ts
+++ b/packages/coreui-vue/src/components/tabs/index.ts
@@ -1,12 +1,20 @@
 import { App } from 'vue'
+import { CTab } from './CTab'
 import { CTabContent } from './CTabContent'
+import { CTabList } from './CTabList'
 import { CTabPane } from './CTabPane'
+import { CTabPanel } from './CTabPanel'
+import { CTabs } from './CTabs'
 
 const CTabsPlugin = {
   install: (app: App): void => {
+    app.component(CTab.name as string, CTab)
     app.component(CTabContent.name as string, CTabContent)
+    app.component(CTabList.name as string, CTabList)
     app.component(CTabPane.name as string, CTabPane)
+    app.component(CTabPanel.name as string, CTabPanel)
+    app.component(CTabs.name as string, CTabs)
   },
 }
 
-export { CTabsPlugin, CTabContent, CTabPane }
+export { CTabsPlugin, CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs }
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 34678fec..932a5cf2 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -328,6 +328,10 @@ export default defineUserConfig({
             text: 'Table',
             link: `/components/table.html`,
           },
+          {
+            text: 'Tabs',
+            link: `/components/tabs.html`,
+          },
           {
             text: 'Toast',
             link: `/components/toast.html`,
diff --git a/packages/docs/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md
new file mode 100644
index 00000000..ed8dc7b0
--- /dev/null
+++ b/packages/docs/api/tabs/CTab.api.md
@@ -0,0 +1,13 @@
+### CTab
+
+```jsx
+import { CTab } from '@coreui/vue'
+// or
+import CTab from '@coreui/vue/src/components/tabs/CTab'
+```
+
+#### Props
+
+| Prop name    | Description | Type           | Values | Default |
+| ------------ | ----------- | -------------- | ------ | ------- |
+| **item-key** | Item key.   | number\|string | -      | -       |
diff --git a/packages/docs/api/tabs/CTabList.api.md b/packages/docs/api/tabs/CTabList.api.md
new file mode 100644
index 00000000..68b9ca46
--- /dev/null
+++ b/packages/docs/api/tabs/CTabList.api.md
@@ -0,0 +1,14 @@
+### CTabList
+
+```jsx
+import { CTabList } from '@coreui/vue'
+// or
+import CTabList from '@coreui/vue/src/components/tabs/CTabList'
+```
+
+#### Props
+
+| Prop name   | Description                           | Type   | Values                                                   | Default |
+| ----------- | ------------------------------------- | ------ | -------------------------------------------------------- | ------- |
+| **layout**  | Specify a layout type for component.  | string | `'fill'`, `'justified'`                                  | -       |
+| **variant** | Set the nav variant to tabs or pills. | string | `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/api/tabs/CTabPanel.api.md b/packages/docs/api/tabs/CTabPanel.api.md
new file mode 100644
index 00000000..bf254378
--- /dev/null
+++ b/packages/docs/api/tabs/CTabPanel.api.md
@@ -0,0 +1,22 @@
+### CTabPanel
+
+```jsx
+import { CTabPanel } from '@coreui/vue'
+// or
+import CTabPanel from '@coreui/vue/src/components/tabs/CTabPanel'
+```
+
+#### Props
+
+| Prop name      | Description                             | Type           | Values | Default |
+| -------------- | --------------------------------------- | -------------- | ------ | ------- |
+| **item-key**   | Item key.                               | number\|string | -      | -       |
+| **transition** | Enable fade in and fade out transition. | boolean        | -      | true    |
+| **visible**    | Toggle the visibility of component.     | boolean        | -      | false   |
+
+#### Events
+
+| Event name | Description                                              | Properties |
+| ---------- | -------------------------------------------------------- | ---------- |
+| **hide**   | Callback fired when the component requests to be hidden. |
+| **show**   | Callback fired when the component requests to be shown.  |
diff --git a/packages/docs/api/tabs/CTabs.api.md b/packages/docs/api/tabs/CTabs.api.md
new file mode 100644
index 00000000..4fea4982
--- /dev/null
+++ b/packages/docs/api/tabs/CTabs.api.md
@@ -0,0 +1,19 @@
+### CTabs
+
+```jsx
+import { CTabs } from '@coreui/vue'
+// or
+import CTabs from '@coreui/vue/src/components/tabs/CTabs'
+```
+
+#### Props
+
+| Prop name           | Description          | Type           | Values | Default |
+| ------------------- | -------------------- | -------------- | ------ | ------- |
+| **active-item-key** | The active item key. | number\|string | -      | -       |
+
+#### Events
+
+| Event name | Description                                        | Properties |
+| ---------- | -------------------------------------------------- | ---------- |
+| **change** | The callback is fired when the active tab changes. |
diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md
index 8da4e027..a7c06623 100644
--- a/packages/docs/components/tabs.md
+++ b/packages/docs/components/tabs.md
@@ -1,112 +1,489 @@
 ---
-title: CTabs
-description: 
-activeKey: 1
+title: Vue Tabs Components
+name: Tabs
+description: The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
+since: 5.1.0
 ---
 
-## Examples
-
-{{ $page.activeKey }}
-
-
-<CNav variant="tabs">
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=1">
-              Active
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=2">
-              Link
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=3">
-              Link
-            </CNavLink>
-          </CNavItem>
-        </CNav>
-        <CTabContent>
-          <CTabPane :visible="$page.activeKey == 1">
-            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-            aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-            helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-            banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-            Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 2">
-            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-            Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-            artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-            organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-            anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-            accusamus tattooed echo park.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 3">
-            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-            organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-            pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-            pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-            etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-            craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-          </CTabPane>
-        </CTabContent>
+## Example
 
+The basic Vue tabs example uses the `variant="tabs"` props to generate a tabbed interface.
 
+::: demo
+<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>
+:::
 ```vue
+<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>
+```
+
+
+## Available styles
+
+Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
+
+### Unstyled
 
-        <CNav variant="tabs">
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=1">
-              Active
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=2">
-              Link
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#" @click="$page.activeKey=3">
-              Link
-            </CNavLink>
-          </CNavItem>
-        </CNav>
-        <CTabContent>
-          <CTabPane :visible="$page.activeKey == 1">
-            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-            aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-            helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-            banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-            Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 2">
-            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-            Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-            artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-            organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-            anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-            accusamus tattooed echo park.
-          </CTabPane>
-          <CTabPane :visible="$page.activeKey == 3">
-            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-            organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-            pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-            pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-            etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-            craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-          </CTabPane>
-        </CTabContent>
+If you don’t provide the `variant` prop, the component will default to a basic style.
 
+::: demo
+<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 className="p-3" itemKey="home">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="profile">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="contact">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="disabled">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<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 className="p-3" itemKey="home">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="profile">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="contact">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" itemKey="disabled">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
 ```
 
+### Pills
+
+Take that same code, but use `variant="pills"` instead:
+
+::: demo
+<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 className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<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 className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+::: demo
+<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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+::: demo
+<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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+### Fill and justify
+
+Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+::: demo
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="fill">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile tab with longer content</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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="fill">
+    <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile tab with longer content</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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
+
+::: demo
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="justified">
+    <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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+:::
+```vue
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs" layout="justified">
+    <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 className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+## Accessibility
+
+Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+
+### WAI-ARIA Roles
+
+- The element that serves as the container for the set of tabs has the role `tablist`.
+- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
+- Each element that contains the content panel for a tab has the role `tabpanel`.
+- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
+- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
+- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
+- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
+
+Our Vue Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:
+
+```jsx
+<CTabs :activeItemKey="2">
+  <CTabList variant="tabs">
+    <CTab id="home-tab" aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
+    <CTab id="profile-tab" aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
+    <CTab id="contact-tab" aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
+    <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" :itemKey="1">
+      Home tab content
+    </CTabPanel>
+    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" :itemKey="2">
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" :itemKey="3">
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" :itemKey="4">
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your `<CTab>`'s and `<CTabPanels>`'s.
+
+### Keyboard Interaction
+
+**When focus enters the tab list:**
+
+<kbd>Tab</kbd>: It places focus on the active `tab` element.
+
+**When focus is on a tab element:**
+
+<kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
+
+<kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
+
+<kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
+
+<kbd>Home</kbd>: Moves focus to the first tab.
+
+<kbd>End</kbd>: Moves focus to the last tab.
+
+## Customizing
+
+### CSS variables
+
+Vue tabs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
+
+On the `.nav-tabs` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
+
+On the `.nav-pills` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
+
+On the `.nav-underline` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
+
+On the `.nav-underline-border` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const vars = { 
+  '--my-css-var': 10,
+  '--my-another-css-var': "red" 
+}
+return <CTabs :style="vars">...</CTabs>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="nav-variables"/>
+
+## API
 
-## Additional content
\ No newline at end of file
+!!!include(./api/tabs/CTab.api.md)!!!
+!!!include(./api/tabs/CTabContent.api.md)!!!
+!!!include(./api/tabs/CTabList.api.md)!!!
+!!!include(./api/tabs/CTabPanel.api.md)!!!
+!!!include(./api/tabs/CTabs.api.md)!!!
\ No newline at end of file

From 96cee23488500ba2c9b7a304fcce3c982f89f255 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:42:18 +0200
Subject: [PATCH 05/19] chore: add eslint comments

---
 packages/coreui-vue/src/components/dropdown/CDropdown.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index 97ef4fe5..d171f90b 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -228,6 +228,7 @@ const CDropdown = defineComponent({
       ) {
         event.preventDefault()
         const target = event.target as HTMLElement
+        // eslint-disable-next-line unicorn/prefer-spread
         const items: HTMLElement[] = Array.from(
           dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
         )

From 45a515d55c3b04cfedb5bc39261d0dc1439069b5 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:44:27 +0200
Subject: [PATCH 06/19] feat(CTabPane): add the `transition` property to enable
 control of fade animation on panels

---
 packages/coreui-vue/src/components/tabs/CTabPane.ts | 11 ++++++++++-
 packages/docs/api/tabs/CTabPane.api.md              |  7 ++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/coreui-vue/src/components/tabs/CTabPane.ts b/packages/coreui-vue/src/components/tabs/CTabPane.ts
index 9ff0050f..7614c346 100644
--- a/packages/coreui-vue/src/components/tabs/CTabPane.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabPane.ts
@@ -5,6 +5,15 @@ import { executeAfterTransition } from '../../utils/transition'
 const CTabPane = defineComponent({
   name: 'CTabPane',
   props: {
+    /**
+     * Enable fade in and fade out transition.
+     *
+     * @since 5.1.0
+     */
+    transition: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Toggle the visibility of component.
      */
@@ -57,9 +66,9 @@ const CTabPane = defineComponent({
               {
                 class: [
                   'tab-pane',
-                  'fade',
                   {
                     active: props.visible,
+                    fade: props.transition,
                     show: firstRender.value && props.visible,
                   },
                 ],
diff --git a/packages/docs/api/tabs/CTabPane.api.md b/packages/docs/api/tabs/CTabPane.api.md
index 61e1db99..17eb0a59 100644
--- a/packages/docs/api/tabs/CTabPane.api.md
+++ b/packages/docs/api/tabs/CTabPane.api.md
@@ -8,9 +8,10 @@ import CTabPane from '@coreui/vue/src/components/tabs/CTabPane'
 
 #### Props
 
-| Prop name   | Description                         | Type    | Values | Default |
-| ----------- | ----------------------------------- | ------- | ------ | ------- |
-| **visible** | Toggle the visibility of component. | boolean | -      | false   |
+| Prop name                                                     | Description                             | Type    | Values | Default |
+| ------------------------------------------------------------- | --------------------------------------- | ------- | ------ | ------- |
+| **transition** <br><div class="badge bg-primary">5.1.0+</div> | Enable fade in and fade out transition. | boolean | -      | true    |
+| **visible**                                                   | Toggle the visibility of component.     | boolean | -      | false   |
 
 #### Events
 

From fc6f12bcc7bba1779f92eb4af2d2ad430a0e631c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:45:00 +0200
Subject: [PATCH 07/19] docs: update content

---
 packages/docs/getting-started/introduction.md | 66 +++++++++++++++++--
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index 369de935..c0a6a0f4 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -9,36 +9,74 @@ menu: Getting started
 
 ### Npm
 
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
 ```bash
 npm install @coreui/vue @coreui/coreui
 ```
-
-If you use CoreUI PRO version.
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
 ```bash
 npm install @coreui/vue-pro @coreui/coreui-pro
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
+
 
 ### Yarn
 
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
 ```bash
 yarn add @coreui/vue @coreui/coreui
 ```
-
-If you use CoreUI PRO version.
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
 ```bash
 yarn add @coreui/vue-pro @coreui/coreui-pro
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
 
 ## Using components
 
-```ts
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
+```js
 import { CAlert } from '@coreui/vue';
+```
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
-// CoreUI PRO version
+```js
 import { CAlert } from '@coreui/vue-pro';
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
+
 
 ## Stylesheets
 
@@ -48,12 +86,26 @@ Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS
 
 ###### Basic usage
 
+<CTabs :activeItemKey="1">
+  <CTabList variant="underline-border">
+    <CTab :itemKey="1">CoreUI</CTab>
+    <CTab :itemKey="2">CoreUI PRO</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel :itemKey="1">
+    
 ```js
 import '@coreui/coreui/dist/css/coreui.min.css'
+```
+</CTabPanel>
+    <CTabPanel :itemKey="2">
 
-// CoreUI PRO version
+```js
 import '@coreui/coreui-pro/dist/css/coreui.min.css'
 ```
+</CTabPanel>
+  </CTabContent>
+</CTabs>
 
 ### Bootstrap CSS files
 

From 0b77985f6184876ba6a7d94d35567a92ffe82e45 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 13:45:28 +0200
Subject: [PATCH 08/19] docs: update content

---
 .../docs/.vuepress/src/client/components/ScssDocs.vue    | 4 ++--
 .../.vuepress/src/client/styles/_component-examples.scss | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index ae622b73..dd9fb126 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -21,11 +21,11 @@ export default defineComponent({
       window.Prism.manual = true;
     }
 
-    const files = import.meta.glob(`../../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
+    const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
       as: 'raw',
       eager: true,
     })
-    const file = files[`../../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+    const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
 
     const captureStart = `// scss-docs-start ${props.capture}`
     const captureEnd = `// scss-docs-end ${props.capture}`
diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
index c0909660..fbe5369c 100644
--- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -2,6 +2,15 @@
 // Docs examples
 //
 
+.tab-content .tab-pane {
+  @include border-top-radius(0 !important);
+
+  .highlight, div[class^="language-"] {
+    border-top: 0 !important;
+    @include border-top-radius(0 !important);
+  }
+}
+
 .docs-example-snippet {
   border: solid var(--cui-border-color);
   border-width: 1px 0;

From ea7050aaabed47029a64157530e8fee0def3bf3e Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 15:28:28 +0200
Subject: [PATCH 09/19] refactor(Utils): move `getNextActiveElement` from
 `CDropdown` utils to utils

---
 .../src/components/dropdown/CDropdown.ts      |  4 ++--
 .../src/components/dropdown/utils.ts          | 22 ------------------
 .../src/components/tabs/CTabList.ts           |  2 +-
 .../src/utils/getNextActiveElement.ts         | 23 +++++++++++++++++++
 packages/coreui-vue/src/utils/index.ts        |  3 ++-
 5 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 packages/coreui-vue/src/utils/getNextActiveElement.ts

diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
index d171f90b..32fe1ea0 100644
--- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts
+++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -3,10 +3,10 @@ import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
 import type { Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments } from './types'
-import { getNextActiveElement, getPlacement } from './utils'
+import { getPlacement } from './utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',
diff --git a/packages/coreui-vue/src/components/dropdown/utils.ts b/packages/coreui-vue/src/components/dropdown/utils.ts
index edddb0db..c9659636 100644
--- a/packages/coreui-vue/src/components/dropdown/utils.ts
+++ b/packages/coreui-vue/src/components/dropdown/utils.ts
@@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   return classNames
 }
 
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
 export const getPlacement = (
   placement: Placement,
   direction: string | undefined,
diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts
index 60028cd8..63b720f2 100644
--- a/packages/coreui-vue/src/components/tabs/CTabList.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabList.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, ref } from 'vue'
-import { getNextActiveElement } from '../dropdown/utils'
+import { getNextActiveElement } from '../../utils'
 
 const CTabList = defineComponent({
   name: 'CTabList',
diff --git a/packages/coreui-vue/src/utils/getNextActiveElement.ts b/packages/coreui-vue/src/utils/getNextActiveElement.ts
new file mode 100644
index 00000000..a80293ca
--- /dev/null
+++ b/packages/coreui-vue/src/utils/getNextActiveElement.ts
@@ -0,0 +1,23 @@
+const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export default getNextActiveElement
diff --git a/packages/coreui-vue/src/utils/index.ts b/packages/coreui-vue/src/utils/index.ts
index 2bd39724..b478e8c2 100644
--- a/packages/coreui-vue/src/utils/index.ts
+++ b/packages/coreui-vue/src/utils/index.ts
@@ -1,6 +1,7 @@
+import getNextActiveElement from './getNextActiveElement'
 import getRTLPlacement from './getRTLPlacement'
 import getUID from './getUID'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
 
-export { getRTLPlacement, getUID, isInViewport, isRTL }
+export { getNextActiveElement, getRTLPlacement, getUID, isInViewport, isRTL }

From 2bfd026198175b4b55c15835c75f6ebbe9594b91 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 15:28:51 +0200
Subject: [PATCH 10/19] docs: improve responsive layout

---
 .../src/client/styles/_component-examples.scss     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
index fbe5369c..aee50619 100644
--- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -2,10 +2,18 @@
 // Docs examples
 //
 
-.tab-content .tab-pane {
-  @include border-top-radius(0 !important);
+.docs-code-tabs {
+  padding: 0 ($cd-gutter-x * .5);
+  margin: 0 ($cd-gutter-x * -.5);
+
+  @include media-breakpoint-up(md) {
+    padding: 0;
+    margin: 0;
+  }
+}
 
-  .highlight, div[class^="language-"] {
+.docs-code-tab-content {
+  .tab-pane div[class^="language-"] {
     border-top: 0 !important;
     @include border-top-radius(0 !important);
   }

From b8756f24f64c1821765349aad9c4167ca4be4cae Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 27 May 2024 15:29:01 +0200
Subject: [PATCH 11/19] docs: update content

---
 .../client/components/other_frameworks.json   | 80 +++++++++----------
 packages/docs/getting-started/introduction.md | 16 ++--
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/other_frameworks.json b/packages/docs/.vuepress/src/client/components/other_frameworks.json
index df64148b..b9297930 100644
--- a/packages/docs/.vuepress/src/client/components/other_frameworks.json
+++ b/packages/docs/.vuepress/src/client/components/other_frameworks.json
@@ -1,240 +1,240 @@
 {
   "accordion": {
     "angular": "https://coreui.io/angular/docs/components/accordion/",
-    "bootstrap": "https://coreui.io/docs/components/accordion/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/accordion/",
     "react": "https://coreui.io/react/docs/components/accordion/",
     "vue": "https://coreui.io/vue/docs/components/accordion.html"
   },
   "alert": {
     "angular": "https://coreui.io/angular/docs/components/alert/",
-    "bootstrap": "https://coreui.io/docs/components/alerts/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/alerts/",
     "react": "https://coreui.io/react/docs/components/alert/",
     "vue": "https://coreui.io/vue/docs/components/alert.html"
   },
   "avatar": {
     "angular": "https://coreui.io/angular/docs/components/avatar/",
-    "bootstrap": "https://coreui.io/docs/components/avatar/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/avatar/",
     "react": "https://coreui.io/react/docs/components/avatar/",
     "vue": "https://coreui.io/vue/docs/components/avatar.html"
   },
   "badge": {
     "angular": "https://coreui.io/angular/docs/components/badge/",
-    "bootstrap": "https://coreui.io/docs/components/badge/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/badge/",
     "react": "https://coreui.io/react/docs/components/badge/",
     "vue": "https://coreui.io/vue/docs/components/badge.html"
   },
   "breadcrumb": {
     "angular": "https://coreui.io/angular/docs/components/breadcrumb/",
-    "bootstrap": "https://coreui.io/docs/components/breadcrumb/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/breadcrumb/",
     "react": "https://coreui.io/react/docs/components/breadcrumb/",
     "vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
   },
   "button": {
     "angular": "https://coreui.io/angular/docs/components/button/",
-    "bootstrap": "https://coreui.io/docs/components/buttons/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/buttons/",
     "react": "https://coreui.io/react/docs/components/button/",
     "vue": "https://coreui.io/vue/docs/components/button.html"
   },
   "button-group": {
     "angular": "https://coreui.io/angular/docs/components/button-group/",
-    "bootstrap": "https://coreui.io/docs/components/button-group/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/button-group/",
     "react": "https://coreui.io/react/docs/components/button-group/",
     "vue": "https://coreui.io/vue/docs/components/button-group.html"
   },
   "callout": {
     "angular": "https://coreui.io/angular/docs/components/callout/",
-    "bootstrap": "https://coreui.io/docs/components/callout/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/callout/",
     "react": "https://coreui.io/react/docs/components/callout/",
     "vue": "https://coreui.io/vue/docs/components/callout.html"
   },
   "card": {
     "angular": "https://coreui.io/angular/docs/components/card/",
-    "bootstrap": "https://coreui.io/docs/components/card/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/card/",
     "react": "https://coreui.io/react/docs/components/card/",
     "vue": "https://coreui.io/vue/docs/components/card.html"
   },
   "carousel": {
     "angular": "https://coreui.io/angular/docs/components/carousel/",
-    "bootstrap": "https://coreui.io/docs/components/carousel/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/carousel/",
     "react": "https://coreui.io/react/docs/components/carousel/",
     "vue": "https://coreui.io/vue/docs/components/carousel.html"
   },
   "checkbox": {
     "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/checkbox/",
     "vue": "https://coreui.io/vue/docs/forms/checkbox.html"
   },
   "close-button": {
     "angular": "https://coreui.io/angular/docs/components/close-button/",
-    "bootstrap": "https://coreui.io/docs/components/close-button/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/close-button/",
     "react": "https://coreui.io/react/docs/components/close-button/",
     "vue": "https://coreui.io/vue/docs/components/close-button.html"
   },
   "collapse": {
     "angular": "https://coreui.io/angular/docs/components/collapse/",
-    "bootstrap": "https://coreui.io/docs/components/collapse/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/collapse/",
     "react": "https://coreui.io/react/docs/components/collapse/",
     "vue": "https://coreui.io/vue/docs/components/collapse.html"
   },
   "dropdown": {
     "angular": "https://coreui.io/angular/docs/components/dropdown/",
-    "bootstrap": "https://coreui.io/docs/components/dropdowns/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/dropdowns/",
     "react": "https://coreui.io/react/docs/components/dropdown/",
     "vue": "https://coreui.io/vue/docs/components/dropdown.html"
   },
   "footer": {
     "angular": "https://coreui.io/angular/docs/components/footer/",
-    "bootstrap": "https://coreui.io/docs/components/footer/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/footer/",
     "react": "https://coreui.io/react/docs/components/footer/",
     "vue": "https://coreui.io/vue/docs/components/footer.html"
   },
   "header": {
     "angular": "https://coreui.io/angular/docs/components/header/",
-    "bootstrap": "https://coreui.io/docs/components/header/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/header/",
     "react": "https://coreui.io/react/docs/components/header/",
     "vue": "https://coreui.io/vue/docs/components/header.html"
   },
   "icon": {
     "angular": "https://coreui.io/angular/docs/components/icon/",
-    "bootstrap": "https://coreui.io/docs/components/icon/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/icon/",
     "react": "https://coreui.io/react/docs/components/icon/",
     "vue": "https://coreui.io/vue/docs/components/icon.html"
   },
   "image": {
     "angular": "https://coreui.io/angular/docs/components/image/",
-    "bootstrap": "https://coreui.io/docs/content/images/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/content/images/",
     "react": "https://coreui.io/react/docs/components/image/",
     "vue": "https://coreui.io/vue/docs/components/image.html"
   },
   "input": {
     "angular": "https://coreui.io/angular/docs/forms/input/",
-    "bootstrap": "https://coreui.io/docs/forms/form-control/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/input/",
     "vue": "https://coreui.io/vue/docs/forms/input.html"
   },
   "input-group": {
     "angular": "https://coreui.io/angular/docs/forms/input-group/",
-    "bootstrap": "https://coreui.io/docs/forms/input-group/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/input-group/",
     "react": "https://coreui.io/react/docs/forms/input-group/",
     "vue": "https://coreui.io/vue/docs/forms/input-group.html"
   },
   "floating-labels": {
     "angular": "https://coreui.io/angular/docs/forms/floating-labels/",
-    "bootstrap": "https://coreui.io/docs/forms/floating-labels/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/floating-labels/",
     "react": "https://coreui.io/react/docs/forms/floating-labels/",
     "vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
   },
   "list-group": {
     "angular": "https://coreui.io/angular/docs/components/list-group/",
-    "bootstrap": "https://coreui.io/docs/components/list-group/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/list-group/",
     "react": "https://coreui.io/react/docs/components/list-group/",
     "vue": "https://coreui.io/vue/docs/components/list-group.html"
   },
   "modal": {
     "angular": "https://coreui.io/angular/docs/components/modal/",
-    "bootstrap": "https://coreui.io/docs/components/modal/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/modal/",
     "react": "https://coreui.io/react/docs/components/modal/",
     "vue": "https://coreui.io/vue/docs/components/modal.html"
   },
   "navbar": {
-    "bootstrap": "https://coreui.io/docs/components/navbar/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/navbar/",
     "react": "https://coreui.io/react/docs/components/navbar/",
     "vue": "https://coreui.io/vue/docs/components/navbar.html"
   },
   "navs-tabs": {
     "angular": "https://coreui.io/angular/docs/components/nav/",
-    "bootstrap": "https://coreui.io/docs/components/navs-tabs/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/navs-tabs/",
     "react": "https://coreui.io/react/docs/components/navs-tabs/",
     "vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
   },
   "offcanvas": {
     "angular": "https://coreui.io/angular/docs/components/offcanvas/",
-    "bootstrap": "https://coreui.io/docs/components/offcanvas/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/offcanvas/",
     "react": "https://coreui.io/react/docs/components/offcanvas/",
     "vue": "https://coreui.io/vue/docs/components/offcanvas.html"
   },
   "pagination": {
     "angular": "https://coreui.io/angular/docs/components/pagination/",
-    "bootstrap": "https://coreui.io/docs/components/pagination/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/pagination/",
     "react": "https://coreui.io/react/docs/components/pagination/",
     "vue": "https://coreui.io/vue/docs/components/pagination.html"
   },
   "placeholder": {
     "angular": "https://coreui.io/angular/docs/components/placeholder/",
-    "bootstrap": "https://coreui.io/docs/components/placeholders/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/placeholders/",
     "react": "https://coreui.io/react/docs/components/placeholder/",
     "vue": "https://coreui.io/vue/docs/components/placeholder.html"
   },
   "popover": {
     "angular": "https://coreui.io/angular/docs/components/popover/",
-    "bootstrap": "https://coreui.io/docs/components/popovers/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/popovers/",
     "react": "https://coreui.io/react/docs/components/popover/",
     "vue": "https://coreui.io/vue/docs/components/popover.html"
   },
   "progress": {
     "angular": "https://coreui.io/angular/docs/components/progress/",
-    "bootstrap": "https://coreui.io/docs/components/progress/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/progress/",
     "react": "https://coreui.io/react/docs/components/progress/",
     "vue": "https://coreui.io/vue/docs/components/progress.html"
   },
   "radio": {
     "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/radio/",
     "vue": "https://coreui.io/vue/docs/forms/radio.html"
   },
   "range": {
     "angular": "https://coreui.io/angular/docs/forms/range/",
-    "bootstrap": "https://coreui.io/docs/forms/range/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/range/",
     "react": "https://coreui.io/react/docs/forms/range/",
     "vue": "https://coreui.io/vue/docs/forms/range.html"
   },
   "select": {
     "angular": "https://coreui.io/angular/docs/forms/select/",
-    "bootstrap": "https://coreui.io/docs/forms/select/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/select/",
     "react": "https://coreui.io/react/docs/forms/select/",
     "vue": "https://coreui.io/vue/docs/forms/select.html"
   },
   "sidebar": {
     "angular": "https://coreui.io/angular/docs/components/sidebar/",
-    "bootstrap": "https://coreui.io/docs/components/sidebar/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/sidebar/",
     "react": "https://coreui.io/react/docs/components/sidebar/",
     "vue": "https://coreui.io/vue/docs/components/sidebar.html"
   },
   "spinner": {
     "angular": "https://coreui.io/angular/docs/components/spinner/",
-    "bootstrap": "https://coreui.io/docs/components/spinners/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/spinners/",
     "react": "https://coreui.io/react/docs/components/spinner/",
     "vue": "https://coreui.io/vue/docs/components/spinner.html"
   },
   "switch": {
     "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/checks-radios/",
     "react": "https://coreui.io/react/docs/forms/switch/",
     "vue": "https://coreui.io/vue/docs/forms/switch.html"
   },
   "table": {
     "angular": "https://coreui.io/angular/docs/components/table/",
-    "bootstrap": "https://coreui.io/docs/content/tables/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/content/tables/",
     "react": "https://coreui.io/react/docs/components/table/",
     "vue": "https://coreui.io/vue/docs/components/table.html"
   },
   "textarea": {
     "angular": "https://coreui.io/angular/docs/forms/form-control/",
-    "bootstrap": "https://coreui.io/docs/forms/form-control/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/forms/form-control/",
     "react": "https://coreui.io/react/docs/forms/textarea/",
     "vue": "https://coreui.io/vue/docs/forms/textarea.html"
   },
   "toast": {
     "angular": "https://coreui.io/angular/docs/components/toast/",
-    "bootstrap": "https://coreui.io/docs/components/toasts/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/toasts/",
     "react": "https://coreui.io/react/docs/components/toast/",
     "vue": "https://coreui.io/vue/docs/components/toast.html"
   },
   "tooltip": {
     "angular": "https://coreui.io/angular/docs/components/tooltip/",
-    "bootstrap": "https://coreui.io/docs/components/tooltips/",
+    "bootstrap": "https://coreui.io/bootstrap/docs/components/tooltips/",
     "react": "https://coreui.io/react/docs/components/tooltip/",
     "vue": "https://coreui.io/vue/docs/components/tooltip.html"
   }
diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index c0a6a0f4..911e5bb2 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -10,11 +10,11 @@ menu: Getting started
 ### Npm
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```bash
@@ -34,11 +34,11 @@ npm install @coreui/vue-pro @coreui/coreui-pro
 ### Yarn
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```bash
@@ -57,11 +57,11 @@ yarn add @coreui/vue-pro @coreui/coreui-pro
 ## Using components
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```js
@@ -87,11 +87,11 @@ Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS
 ###### Basic usage
 
 <CTabs :activeItemKey="1">
-  <CTabList variant="underline-border">
+  <CTabList class="docs-code-tabs" variant="underline-border">
     <CTab :itemKey="1">CoreUI</CTab>
     <CTab :itemKey="2">CoreUI PRO</CTab>
   </CTabList>
-  <CTabContent>
+  <CTabContent class="docs-code-tab-content">
     <CTabPanel :itemKey="1">
     
 ```js

From 37eec0e3a742c33960f87723eba9d194c4fd282c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 28 May 2024 13:12:14 +0200
Subject: [PATCH 12/19] docs: update layout

---
 .../.vuepress/src/client/components/ScssDocs.vue     |  2 +-
 .../docs/.vuepress/src/client/layouts/Layout.vue     | 12 ++++++++++--
 packages/docs/.vuepress/src/shared/page.ts           |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index dd9fb126..6004d20a 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -22,7 +22,7 @@ export default defineComponent({
     }
 
     const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
-      as: 'raw',
+      query: '?raw',
       eager: true,
     })
     const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
index 936b31c4..486d0064 100755
--- a/packages/docs/.vuepress/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -13,8 +13,15 @@
           <main class="docs-main order-1">
             <div class="docs-intro ps-lg-4">
               <Banner />
-              <h1 className="docs-title" id="content">{{ title }}</h1>
-              <p class="docs-lead">{{ description }}</p>
+              <div v-if="name && name !== title" class="d-flex flex-column">
+                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
+                  {{ title }}
+                </h1>
+                <h2 class="docs-title order-1 h1">{{ name }}</h2>
+              </div>
+              <h1 v-else class="docs-title" id="content">
+                {{ title }}
+              </h1>
               <Ads />
               <OtherFrameworks />
             </div>
@@ -56,6 +63,7 @@ const scrollPromise = useScrollPromise()
 const onBeforeEnter = scrollPromise.resolve
 const onBeforeLeave = scrollPromise.pending
 
+const name = frontmatter.value.name
 const title = frontmatter.value.title
 const description = frontmatter.value.description
 
diff --git a/packages/docs/.vuepress/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
index 9feed30c..7e3bcdf5 100755
--- a/packages/docs/.vuepress/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -9,6 +9,7 @@ export interface DefaultThemePageFrontmatter {
   home?: boolean
   navbar?: boolean
   pageClass?: string
+  name?: string
 }
 
 export interface DefaultThemeHomePageFrontmatter

From 897780e086e22d5006475e154c793be2da33f7e8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 28 May 2024 13:12:25 +0200
Subject: [PATCH 13/19] docs: update content

---
 packages/docs/components/alert.md             | 1 +
 packages/docs/components/chart.md             | 1 +
 packages/docs/components/placeholder.md       | 1 +
 packages/docs/components/sidebar.md           | 1 +
 packages/docs/getting-started/introduction.md | 2 +-
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/docs/components/alert.md b/packages/docs/components/alert.md
index 8575ad96..7a757599 100644
--- a/packages/docs/components/alert.md
+++ b/packages/docs/components/alert.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Alert Component
+name: Alert
 description: Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
 other_frameworks: alert
 ---
diff --git a/packages/docs/components/chart.md b/packages/docs/components/chart.md
index 181f6635..d10a26d2 100644
--- a/packages/docs/components/chart.md
+++ b/packages/docs/components/chart.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Chart.js Component
+name: Chart.js
 description: Vue wrapper for Chart.js 3.0, the most popular charting library.
 ---
 
diff --git a/packages/docs/components/placeholder.md b/packages/docs/components/placeholder.md
index 658ca503..a18b0153 100644
--- a/packages/docs/components/placeholder.md
+++ b/packages/docs/components/placeholder.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Placeholder Component
+name: Placeholder
 description: Use loading vue placeholders for your components or pages to indicate something may still be loading.
 other_frameworks: placeholder
 ---
diff --git a/packages/docs/components/sidebar.md b/packages/docs/components/sidebar.md
index 1f32c9c6..b59d1f54 100644
--- a/packages/docs/components/sidebar.md
+++ b/packages/docs/components/sidebar.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Sidebar Component
+name: Sidebar
 description: Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
 other_frameworks: sidebar
 ---
diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index 911e5bb2..405a039e 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: Introduction
 name: Introduction
 description: CoreUI for Vue.js is UI Component library written in TypeScript, and ready for your next Vue.js project. Learn how to include CoreUI for Vue.js in your project.
 menu: Getting started

From 18644600476c7088229bcb1f5cb9edff156d50ee Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 28 May 2024 13:18:06 +0200
Subject: [PATCH 14/19] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                             ^5.0.1  →       ^5.0.2
@rollup/plugin-commonjs                   ^25.0.7  →      ^25.0.8
@typescript-eslint/eslint-plugin           ^7.4.0  →      ^7.11.0
@typescript-eslint/parser                  ^7.4.0  →      ^7.11.0
@vue/test-utils                            ^2.4.5  →       ^2.4.6
@vuepress/bundler-vite                2.0.0-rc.11  →  2.0.0-rc.12
@vuepress/plugin-active-header-links  2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-back-to-top          2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-git                  2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-prismjs              2.0.0-rc.30  →  2.0.0-rc.32
@vuepress/plugin-register-components  2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-theme-data           2.0.0-rc.30  →  2.0.0-rc.31
@vuepress/plugin-toc                  2.0.0-rc.30  →  2.0.0-rc.31
eslint-plugin-vue                         ^9.24.0  →      ^9.26.0
lerna                                      ^8.1.2  →       ^8.1.3
rollup                                    ^4.13.2  →      ^4.18.0
ts-jest                                   ^29.1.2  →      ^29.1.4
typescript                                 ^5.4.3  →       ^5.4.5
vue                                       ^3.4.21  →      ^3.4.27
vue-types                                  ^5.1.1  →       ^5.1.2
vuepress                              2.0.0-rc.11  →  2.0.0-rc.12
---
 package.json                     |  8 ++++----
 packages/coreui-vue/package.json | 16 ++++++++--------
 packages/docs/package.json       | 20 ++++++++++----------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index b8c9328f..f038380e 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,17 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/vue3-jest": "29.2.6",
     "eslint": "8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.24.0",
+    "eslint-plugin-vue": "^9.26.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-unicorn": "^51.0.1",
-    "lerna": "^8.1.2",
+    "lerna": "^8.1.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5"
   }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index f4134e45..dad717e6 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -41,25 +41,25 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.2",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/jest": "^29.5.12",
-    "@vue/test-utils": "^2.4.5",
+    "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.13.2",
+    "rollup": "^4.18.0",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.3",
-    "vue": "^3.4.21",
-    "vue-types": "^5.1.1"
+    "ts-jest": "^29.1.4",
+    "typescript": "^5.4.5",
+    "vue": "^3.4.27",
+    "vue-types": "^5.1.2"
   },
   "peerDependencies": {
     "vue": "^3.2.21"
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 1795fdbe..cd89b42f 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -9,25 +9,25 @@
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.1",
+    "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
-    "@vuepress/bundler-vite": "2.0.0-rc.11",
-    "@vuepress/plugin-active-header-links": "2.0.0-rc.30",
-    "@vuepress/plugin-back-to-top": "2.0.0-rc.30",
+    "@vuepress/bundler-vite": "2.0.0-rc.12",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
+    "@vuepress/plugin-back-to-top": "2.0.0-rc.31",
     "@vuepress/plugin-container": "2.0.0-rc.28",
-    "@vuepress/plugin-git": "2.0.0-rc.30",
-    "@vuepress/plugin-prismjs": "2.0.0-rc.30",
-    "@vuepress/plugin-theme-data": "2.0.0-rc.30",
-    "@vuepress/plugin-register-components": "2.0.0-rc.30",
-    "@vuepress/plugin-toc": "2.0.0-rc.30",
+    "@vuepress/plugin-git": "2.0.0-rc.31",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.32",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.31",
+    "@vuepress/plugin-register-components": "2.0.0-rc.31",
+    "@vuepress/plugin-toc": "2.0.0-rc.31",
     "markdown-it-include": "^2.0.0",
     "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.11"
+    "vuepress": "2.0.0-rc.12"
   }
 }

From af5303f2722371283de290a4f09f2c688c7e4b99 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 29 May 2024 11:35:11 +0200
Subject: [PATCH 15/19] docs: update layout

---
 .../docs/.vuepress/src/client/components/ScssDocs.vue     | 8 ++++----
 packages/docs/.vuepress/src/client/layouts/Layout.vue     | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index 6004d20a..ba8b8fe6 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -15,14 +15,14 @@ export default defineComponent({
     file: String,
   },
   setup(props) {
-
     if (typeof window !== 'undefined') {
-      window.Prism = window.Prism || {};
-      window.Prism.manual = true;
+      window.Prism = window.Prism || {}
+      window.Prism.manual = true
     }
 
     const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
       query: '?raw',
+      import: 'default',
       eager: true,
     })
     const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
@@ -40,7 +40,7 @@ export default defineComponent({
             .replaceAll('\n  @', '\n@'),
           Prism.languages.scss,
           'scss',
-      )
+        )
       : null
     return {
       code,
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
index 486d0064..672cf9be 100755
--- a/packages/docs/.vuepress/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -22,6 +22,7 @@
               <h1 v-else class="docs-title" id="content">
                 {{ title }}
               </h1>
+              <p class="docs-lead">{{ description }}</p>
               <Ads />
               <OtherFrameworks />
             </div>

From a2767fb0450eddf9ff08eeca65137f70db496815 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 11:12:59 +0200
Subject: [PATCH 16/19] docs: update theme

---
 packages/docs/.vuepress/client.ts             |  1 +
 packages/docs/.vuepress/config.ts             | 88 ++++++++-----------
 .../src/client/components/Banner.vue          | 16 ++--
 .../src/client/components/Callout.vue         | 41 ++++-----
 .../src/client/components/Footer.vue          | 17 +---
 .../src/client/components/Header.vue          | 29 ++----
 .../src/client/components/OtherFrameworks.vue | 42 ++++-----
 .../src/client/components/ScssDocs.vue        | 82 ++++++++---------
 .../src/client/components/Sidebar.vue         | 28 ++----
 .../.vuepress/src/client/components/Toc.vue   | 15 ++--
 .../docs/.vuepress/src/client/layouts/404.vue | 41 +++------
 .../.vuepress/src/client/layouts/Layout.vue   | 76 ++++++++--------
 .../docs/.vuepress/src/node/defaultTheme.ts   | 62 ++-----------
 packages/docs/.vuepress/src/shared/page.ts    | 27 +-----
 .../.vuepress/{ => src}/templates/build.html  |  0
 packages/docs/package.json                    |  8 +-
 16 files changed, 214 insertions(+), 359 deletions(-)
 rename packages/docs/.vuepress/{ => src}/templates/build.html (100%)

diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts
index b410c0a2..0ae21634 100644
--- a/packages/docs/.vuepress/client.ts
+++ b/packages/docs/.vuepress/client.ts
@@ -1,4 +1,5 @@
 import { defineClientConfig } from '@vuepress/client'
+
 import { CIcon } from '@coreui/icons-vue'
 import CChartPlugin from '@coreui/vue-chartjs'
 import CoreuiVue from '@coreui/vue/src/'
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 932a5cf2..abe4077c 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,14 +1,17 @@
 import { defineUserConfig } from 'vuepress'
 import { viteBundler } from '@vuepress/bundler-vite'
-import anchor from 'markdown-it-anchor'
-import include_plugin from 'markdown-it-include'
-import { defaultTheme } from './src/node/defaultTheme'
-
-import { containerPlugin } from '@vuepress/plugin-container'
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
+import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
+import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
 import { tocPlugin } from '@vuepress/plugin-toc'
 import { getDirname, path } from '@vuepress/utils'
+import anchor from 'markdown-it-anchor'
+import include_plugin from 'markdown-it-include'
+import { defaultTheme } from './src/node'
 
+import { fileURLToPath, URL } from 'url'
 const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({
@@ -16,22 +19,14 @@ export default defineUserConfig({
   lang: 'en-US',
   title: 'Vue UI Components · CoreUI',
   description: 'UI Components Library for Vue.js (Vue 3)',
-  head: [
-    ['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }],
-  ],
-  bundler: viteBundler({
-    viteOptions: {},
-    vuePluginOptions: {},
-  }),
+  head: [['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }]],
+  bundler: viteBundler(),
   markdown: {
     anchor: {
       permalink: anchor.permalink.ariaHidden({
         class: 'anchor-link',
-        placement: 'after'
-      })
-    },
-    code: {
-      lineNumbers: false,
+        placement: 'after',
+      }),
     },
   },
   extendsMarkdown: (md) => {
@@ -41,53 +36,42 @@ export default defineUserConfig({
       })
   },
   plugins: [
-    containerPlugin({
+    activeHeaderLinksPlugin({
+      headerLinkSelector: 'a.sidebar-item',
+      headerAnchorSelector: '.header-anchor',
+      // should greater than page transition duration
+      delay: 300,
+    }),
+    // backToTopPlugin(),
+    markdownContainerPlugin({
       type: 'demo',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded-top p-4">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+      before: (): string => `<div class="docs-example rounded-top p-4">\n`,
+      after: (): string => '</div>\n',
     }),
-    containerPlugin({
-      type: 'demo-rounded',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded p-4">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+    markdownContainerPlugin({
+      type: 'demo-bg-secondary',
+      before: (): string =>
+        `<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n`,
+      after: (): string => '</div>\n',
     }),
-    containerPlugin({
+    markdownContainerPlugin({
       type: 'demo-dark',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded-top p-4 bg-dark">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+      before: (): string => `<div class="docs-example rounded-top p-4 bg-dark">\n`,
+      after: (): string => '</div>\n',
     }),
-    containerPlugin({
-      type: 'demo-bg-secondary',
-      render: function (tokens, idx) {
-        if (tokens[idx].nesting === 1) {
-          return '<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n'
-        } else {
-          return '</div>\n'
-        }
-      },
+    markdownContainerPlugin({
+      type: 'demo-rounded',
+      before: (): string => `<div class="docs-example rounded p-4">\n`,
+      after: (): string => '</div>\n',
     }),
-    tocPlugin({}),
+    prismjsPlugin(),
     registerComponentsPlugin({
       components: {
         Callout: path.resolve(__dirname, './src/client/components/Callout.vue'),
         ScssDocs: path.resolve(__dirname, './src/client/components/ScssDocs.vue'),
       },
     }),
+    tocPlugin({}),
   ],
   theme: defaultTheme({
     sidebar: [
diff --git a/packages/docs/.vuepress/src/client/components/Banner.vue b/packages/docs/.vuepress/src/client/components/Banner.vue
index e37c867a..ba150ac6 100644
--- a/packages/docs/.vuepress/src/client/components/Banner.vue
+++ b/packages/docs/.vuepress/src/client/components/Banner.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const pro_component = frontmatter.value.pro_component
+</script>
+
 <template>
   <div
     v-if="pro_component"
@@ -38,11 +46,3 @@
     </ul>
   </div>
 </template>
-
-<script setup lang="ts">
-import { usePageFrontmatter } from '@vuepress/client'
-import type { DefaultThemePageFrontmatter } from '../../shared'
-
-const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
-const pro_component = frontmatter.value.pro_component
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/Callout.vue b/packages/docs/.vuepress/src/client/components/Callout.vue
index f3f3e8f1..da3b93d8 100644
--- a/packages/docs/.vuepress/src/client/components/Callout.vue
+++ b/packages/docs/.vuepress/src/client/components/Callout.vue
@@ -1,29 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  color: String,
+  title: String,
+})
+
+const className = [
+  'docs-callout',
+  {
+    [`docs-callout-${props.color}`]: props.color,
+  },
+]
+</script>
+
 <template>
-  <div :class="class">
-    <h5 v-if="title">{{ title }}</h5>
+  <div :class="className">
+    <h5 v-if="props.title">{{ props.title }}</h5>
     <slot></slot>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'Callout',
-  props: {
-    color: String,
-    title: String,
-  },
-  setup(props) {
-    return {
-      class: [
-        'docs-callout',
-        {
-          [`docs-callout-${props.color}`]: props.color,
-        }
-      ],
-      color: props.color,
-      title: props.title,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/Footer.vue b/packages/docs/.vuepress/src/client/components/Footer.vue
index 848a8785..d38e5749 100644
--- a/packages/docs/.vuepress/src/client/components/Footer.vue
+++ b/packages/docs/.vuepress/src/client/components/Footer.vue
@@ -35,19 +35,4 @@
       </p>
     </CContainer>
   </CFooter>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import pkg from './../../../../package.json'
-export default defineComponent({
-  name: 'Footer',
-  setup () {
-    const version = pkg.version
-    return {
-      version
-    }
-  }
-})
-</script>
-../../../../package.json
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/packages/docs/.vuepress/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue
index ca3f0165..17ee1090 100644
--- a/packages/docs/.vuepress/src/client/components/Header.vue
+++ b/packages/docs/.vuepress/src/client/components/Header.vue
@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import { useColorModes } from '@coreui/vue/src'
+
+const props = defineProps({
+  theme: String,
+})
+
+const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
+</script>
 <template>
   <CHeader class="mb-5 elevation-0 border-bottom" position="sticky">
     <CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
@@ -86,23 +95,3 @@
     </CButton>
   </CHeader>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useColorModes } from '@coreui/vue/src'
-
-export default defineComponent({
-  name: 'Header',
-  props: {
-    theme: String,
-  },
-  emits: ['toggle-sidebar'],
-  setup() {
-    const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
-    
-    return {
-      colorMode,
-      setColorMode,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
index f06b9959..b58ceed6 100644
--- a/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
+++ b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
@@ -1,23 +1,3 @@
-<template>
-  <template v-if="frameworks">
-    <h2>Other frameworks</h2>
-    <p>
-      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
-      components. To learn more please visit the following pages.
-    </p>
-    <ul>
-      <template v-for="framework in frameworks">
-        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
-          <li v-if="el !== 'vue'" :key="index">
-            <a :href="otherFrameworks[framework][el]"
-              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
-            >
-          </li>
-        </template>
-      </template>
-    </ul>
-  </template>
-</template>
 <script setup lang="ts">
 import { usePageFrontmatter } from '@vuepress/client'
 import jsonData from '../components/other_frameworks.json'
@@ -42,4 +22,24 @@ const humanize = (text: string) => {
   return string[0].toUpperCase() + string.slice(1)
 }
 </script>
-./other_frameworks.json
\ No newline at end of file
+
+<template>
+  <template v-if="frameworks">
+    <h2>Other frameworks</h2>
+    <p>
+      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
+      components. To learn more please visit the following pages.
+    </p>
+    <ul>
+      <template v-for="framework in frameworks">
+        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
+          <li v-if="el !== 'vue'" :key="index">
+            <a :href="otherFrameworks[framework][el]"
+              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
+            >
+          </li>
+        </template>
+      </template>
+    </ul>
+  </template>
+</template>
\ No newline at end of file
diff --git a/packages/docs/.vuepress/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
index ba8b8fe6..61a93fee 100644
--- a/packages/docs/.vuepress/src/client/components/ScssDocs.vue
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -1,50 +1,44 @@
-<template>
-  <div class="highlight">
-    <pre class="prism-code language-scss" v-html="code" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import Prism from 'prismjs'
 import 'prismjs/components/prism-scss'
-export default defineComponent({
-  name: 'ScssDocs',
-  props: {
-    capture: String,
-    file: String,
-  },
-  setup(props) {
-    if (typeof window !== 'undefined') {
-      window.Prism = window.Prism || {}
-      window.Prism.manual = true
-    }
 
-    const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
-      query: '?raw',
-      import: 'default',
-      eager: true,
-    })
-    const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+const props = defineProps({
+  capture: String,
+  file: String,
+})
+
+if (typeof window !== 'undefined') {
+  window.Prism = window.Prism || {}
+  window.Prism.manual = true
+}
 
-    const captureStart = `// scss-docs-start ${props.capture}`
-    const captureEnd = `// scss-docs-end ${props.capture}`
-    const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
-    const captured = re.exec(file)
-    const section = captured && captured[1].trim()
-    const code = section
-      ? Prism.highlight(
-          section
-            .replaceAll('--#{$prefix}', '--cui-')
-            .replaceAll('\n  -', '\n-')
-            .replaceAll('\n  @', '\n@'),
-          Prism.languages.scss,
-          'scss',
-        )
-      : null
-    return {
-      code,
-    }
-  },
+const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
+  query: '?raw',
+  import: 'default',
+  eager: true,
 })
+
+const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+
+const captureStart = `// scss-docs-start ${props.capture}`
+const captureEnd = `// scss-docs-end ${props.capture}`
+const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
+const captured = re.exec(file)
+const section = captured && captured[1].trim()
+const code = section
+  ? Prism.highlight(
+      section
+        .replaceAll('--#{$prefix}', '--cui-')
+        .replaceAll('\n  -', '\n-')
+        .replaceAll('\n  @', '\n@'),
+      Prism.languages.scss,
+      'scss',
+    )
+  : null
 </script>
+
+<template>
+  <div class="highlight">
+    <pre class="prism-code language-scss" v-html="code" />
+  </div>
+</template>
diff --git a/packages/docs/.vuepress/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue
index 6ad736e2..d05ff18f 100755
--- a/packages/docs/.vuepress/src/client/components/Sidebar.vue
+++ b/packages/docs/.vuepress/src/client/components/Sidebar.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { useSidebarItems } from '../composables'
+import { SidebarNav } from './SidebarNav'
+
+const sidebarItems = useSidebarItems()
+</script>
+
 <template>
   <CSidebar position="fixed" size="lg" class="docs-sidebar border-end px-xl-4 elevation-0">
     <CSidebarBrand class="justify-content-start ps-3">
@@ -35,24 +42,3 @@
     <SidebarNav :items="sidebarItems" />
   </CSidebar>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useSidebarItems } from '../composables'
-import { SidebarNav } from './SidebarNav'
-
-export default defineComponent({
-  name: 'Sidebar',
-
-  components: {
-    SidebarNav,
-  },
-
-  setup() {
-    const sidebarItems = useSidebarItems()
-    return {
-      sidebarItems,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/components/Toc.vue b/packages/docs/.vuepress/src/client/components/Toc.vue
index bcb036d1..074ca917 100644
--- a/packages/docs/.vuepress/src/client/components/Toc.vue
+++ b/packages/docs/.vuepress/src/client/components/Toc.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const visible = ref(false)
+const toggleVisible = () => {
+  visible.value = !visible.value
+}
+</script>
+
 <template>
   <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
     <button
@@ -27,10 +35,3 @@
     </CCollapse>
   </div>
 </template>
-<script setup lang="ts">
-import { ref } from 'vue'
-const visible = ref(false)
-const toggleVisible = () => {
-  visible.value = !visible.value
-}
-</script>
diff --git a/packages/docs/.vuepress/src/client/layouts/404.vue b/packages/docs/.vuepress/src/client/layouts/404.vue
index 1066e78c..b8315905 100755
--- a/packages/docs/.vuepress/src/client/layouts/404.vue
+++ b/packages/docs/.vuepress/src/client/layouts/404.vue
@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue'
+import { useRouteLocale } from '@vuepress/client'
+import { useThemeLocaleData } from '../composables'
+
+const routeLocale = useRouteLocale()
+const themeLocale = useThemeLocaleData()
+
+const messages = themeLocale.value.notFound ?? ['Not Found']
+const getMsg = (): string => messages[Math.floor(Math.random() * messages.length)]
+const homeLink = themeLocale.value.home ?? routeLocale.value
+const homeText = themeLocale.value.backToHome ?? 'Back to home'
+</script>
+
 <template>
   <div class="theme-container">
     <div class="theme-default-content">
@@ -9,30 +23,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useRouteLocale } from '@vuepress/client'
-import { useThemeLocaleData } from '../composables'
-
-export default defineComponent({
-  name: '404',
-
-  setup() {
-    const routeLocale = useRouteLocale()
-    const themeLocale = useThemeLocaleData()
-
-    const messages = themeLocale.value.notFound ?? ['Not Found']
-    const getMsg = (): string =>
-      messages[Math.floor(Math.random() * messages.length)]
-    const homeLink = themeLocale.value.home ?? routeLocale.value
-    const homeText = themeLocale.value.backToHome ?? 'Back to home'
-
-    return {
-      getMsg,
-      homeLink,
-      homeText,
-    }
-  },
-})
-</script>
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
index 672cf9be..75d6da70 100755
--- a/packages/docs/.vuepress/src/client/layouts/Layout.vue
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -1,41 +1,3 @@
-<template>
-  <div>
-    <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
-    <div class="wrapper flex-grow-1">
-      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
-      <Transition
-        name="fade-slide-y"
-        mode="out-in"
-        @before-enter="onBeforeEnter"
-        @before-leave="onBeforeLeave"
-      >
-        <CContainer class="my-md-4 flex-grow-1" lg>
-          <main class="docs-main order-1">
-            <div class="docs-intro ps-lg-4">
-              <Banner />
-              <div v-if="name && name !== title" class="d-flex flex-column">
-                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
-                  {{ title }}
-                </h1>
-                <h2 class="docs-title order-1 h1">{{ name }}</h2>
-              </div>
-              <h1 v-else class="docs-title" id="content">
-                {{ title }}
-              </h1>
-              <p class="docs-lead">{{ description }}</p>
-              <Ads />
-              <OtherFrameworks />
-            </div>
-            <Toc />
-            <div className="docs-content ps-lg-4"><Content /></div>
-          </main>
-        </CContainer>
-      </Transition>
-      <Footer />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { usePageFrontmatter } from '@vuepress/client'
@@ -80,3 +42,41 @@ onMounted(() => {
   })
 })
 </script>
+
+<template>
+  <div>
+    <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
+    <div class="wrapper flex-grow-1">
+      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
+      <Transition
+        name="fade-slide-y"
+        mode="out-in"
+        @before-enter="onBeforeEnter"
+        @before-leave="onBeforeLeave"
+      >
+        <CContainer class="my-md-4 flex-grow-1" lg>
+          <main class="docs-main order-1">
+            <div class="docs-intro ps-lg-4">
+              <Banner />
+              <div v-if="name && name !== title" class="d-flex flex-column">
+                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
+                  {{ title }}
+                </h1>
+                <h2 class="docs-title order-1 h1">{{ name }}</h2>
+              </div>
+              <h1 v-else class="docs-title" id="content">
+                {{ title }}
+              </h1>
+              <p class="docs-lead">{{ description }}</p>
+              <Ads />
+              <OtherFrameworks />
+            </div>
+            <Toc />
+            <div className="docs-content ps-lg-4"><Content /></div>
+          </main>
+        </CContainer>
+      </Transition>
+      <Footer />
+    </div>
+  </div>
+</template>
diff --git a/packages/docs/.vuepress/src/node/defaultTheme.ts b/packages/docs/.vuepress/src/node/defaultTheme.ts
index 0886fd22..0fe8ca5f 100755
--- a/packages/docs/.vuepress/src/node/defaultTheme.ts
+++ b/packages/docs/.vuepress/src/node/defaultTheme.ts
@@ -1,10 +1,12 @@
 import type { Page, Theme } from '@vuepress/core'
-import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
-import { prismjsPlugin } from '@vuepress/plugin-prismjs'
+
 import { themeDataPlugin } from '@vuepress/plugin-theme-data'
 import { fs, getDirname, path } from '@vuepress/utils'
-import type { DefaultThemeLocaleOptions, DefaultThemePluginsOptions } from '../shared'
+import type {
+  DefaultThemeLocaleOptions,
+  DefaultThemePageData,
+  DefaultThemePluginsOptions,
+} from '../shared'
 import { assignDefaultLocaleOptions } from './utils'
 
 const __dirname = getDirname(import.meta.url)
@@ -25,17 +27,7 @@ export const defaultTheme = ({
   return {
     name: '@vuepress/coreui-docs-theme',
 
-    templateBuild: path.resolve(__dirname, '../../templates/build.html'),
-
-    alias: {
-      // use alias to make all components replaceable
-      ...Object.fromEntries(
-        fs
-          .readdirSync(path.resolve(__dirname, '../client/components'))
-          .filter((file) => file.endsWith('.vue'))
-          .map((file) => [`@theme/${file}`, path.resolve(__dirname, '../client/components', file)]),
-      ),
-    },
+    templateBuild: path.resolve(__dirname, '../templates/build.html'),
 
     clientConfigFile: path.resolve(__dirname, '../client/config.ts'),
 
@@ -46,44 +38,6 @@ export const defaultTheme = ({
       page.routeMeta.title = page.title
     },
 
-    // layouts: path.resolve(__dirname, '../client/layouts'),
-
-    // clientAppEnhanceFiles: path.resolve(__dirname, '../client/clientAppEnhance.ts'),
-
-    // clientAppSetupFiles: path.resolve(__dirname, '../client/clientAppSetup.ts'),
-
-    // // use the relative file path to generate edit link
-    // extendsPageData: ({ filePathRelative }) => ({ filePathRelative }),
-
-    plugins: [
-      // @vuepress/plugin-active-header-link
-      themePlugins.activeHeaderLinks !== false
-        ? activeHeaderLinksPlugin({
-            headerLinkSelector: 'a.sidebar-item',
-            headerAnchorSelector: '.header-anchor',
-            // should greater than page transition duration
-            delay: 300,
-          })
-        : [],
-
-      // @vuepress/plugin-back-to-top
-      themePlugins.backToTop !== false ? backToTopPlugin() : [],
-
-      // @vuepress/plugin-prismjs
-      themePlugins.prismjs !== false ? prismjsPlugin() : [],
-
-      // @vuepress/plugin-theme-data
-      themeDataPlugin({ themeData: localeOptions }),
-      // [
-      //   '@vuepress/active-header-links',
-      //   {
-      //     headerLinkSelector: 'a.sidebar-item',
-      //     headerAnchorSelector: '.anchor-link',
-      //   },
-      // ],
-      // ['@vuepress/back-to-top', themePlugins.backToTop !== false],
-      // ['@vuepress/prismjs', themePlugins.prismjs !== false],
-      // ['@vuepress/theme-data', { themeData: localeOptions }],
-    ],
+    plugins: [themeDataPlugin({ themeData: localeOptions })],
   }
 }
diff --git a/packages/docs/.vuepress/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
index 7e3bcdf5..64e5fe99 100755
--- a/packages/docs/.vuepress/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -10,30 +10,11 @@ export interface DefaultThemePageFrontmatter {
   navbar?: boolean
   pageClass?: string
   name?: string
+  pro_component?: boolean
+  other_frameworks?: string
 }
 
-export interface DefaultThemeHomePageFrontmatter
-  extends DefaultThemePageFrontmatter {
-  home: true
-  heroImage?: string
-  heroAlt?: string
-  heroText?: string | null
-  tagline?: string | null
-  actions?: {
-    text: string
-    link: string
-    type?: 'primary' | 'secondary'
-  }[]
-  features?: {
-    title: string
-    details: string
-  }[]
-  footer?: string
-  footerHtml?: boolean
-}
-
-export interface DefaultThemeNormalPageFrontmatter
-  extends DefaultThemePageFrontmatter {
+export interface DefaultThemeNormalPageFrontmatter extends DefaultThemePageFrontmatter {
   home?: false
   editLink?: boolean
   lastUpdated?: boolean
@@ -42,6 +23,4 @@ export interface DefaultThemeNormalPageFrontmatter
   sidebarDepth?: number
   prev?: string | NavLink
   next?: string | NavLink
-  pro_component: boolean
-  other_frameworks?: string
 }
diff --git a/packages/docs/.vuepress/templates/build.html b/packages/docs/.vuepress/src/templates/build.html
similarity index 100%
rename from packages/docs/.vuepress/templates/build.html
rename to packages/docs/.vuepress/src/templates/build.html
diff --git a/packages/docs/package.json b/packages/docs/package.json
index cd89b42f..ef5215fd 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",
-    "build": "vuepress build"
+    "build": "vuepress build --debug"
   },
   "license": "MIT",
   "devDependencies": {
@@ -17,14 +17,18 @@
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
     "@vuepress/bundler-vite": "2.0.0-rc.12",
+    "@vuepress/bundler-webpack": "2.0.0-rc.12",
     "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
     "@vuepress/plugin-back-to-top": "2.0.0-rc.31",
-    "@vuepress/plugin-container": "2.0.0-rc.28",
     "@vuepress/plugin-git": "2.0.0-rc.31",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.30",
     "@vuepress/plugin-prismjs": "2.0.0-rc.32",
     "@vuepress/plugin-theme-data": "2.0.0-rc.31",
     "@vuepress/plugin-register-components": "2.0.0-rc.31",
     "@vuepress/plugin-toc": "2.0.0-rc.31",
+    "@vuepress/shared": "2.0.0-rc.12",
+    "@vuepress/utils": "2.0.0-rc.12",
+    "markdown-it-anchor": "^9.0.1",
     "markdown-it-include": "^2.0.0",
     "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",

From 78f7c60c6b41d1024be6bb88ff5e22aaf1dec126 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 17:37:36 +0200
Subject: [PATCH 17/19] refactor(CPopover, CTabs, CTooltips): change to an
 SSR-friendly unique ID generator

---
 .../src/components/popover/CPopover.ts         |  7 ++++---
 .../coreui-vue/src/components/tabs/CTab.ts     |  4 ++--
 .../src/components/tabs/CTabPanel.ts           |  4 ++--
 .../coreui-vue/src/components/tabs/CTabs.ts    |  5 +++--
 .../src/components/tooltip/CTooltip.ts         |  7 ++++---
 packages/coreui-vue/src/composables/index.ts   |  3 ++-
 .../coreui-vue/src/composables/useUniqueId.ts  | 18 ++++++++++++++++++
 .../coreui-vue/src/directives/v-c-popover.ts   |  6 +++---
 .../coreui-vue/src/directives/v-c-tooltip.ts   |  6 +++---
 packages/docs/.vuepress/config.ts              |  2 --
 10 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 packages/coreui-vue/src/composables/useUniqueId.ts

diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts
index a39aea63..3690fa48 100644
--- a/packages/coreui-vue/src/components/popover/CPopover.ts
+++ b/packages/coreui-vue/src/components/popover/CPopover.ts
@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -119,6 +119,7 @@ const CPopover = defineComponent({
     const popoverRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -149,7 +150,7 @@ const CPopover = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('popover')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {
diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts
index c7c54250..05ce3fe4 100644
--- a/packages/coreui-vue/src/components/tabs/CTab.ts
+++ b/packages/coreui-vue/src/components/tabs/CTab.ts
@@ -28,11 +28,11 @@ const CTab = defineComponent({
               active: isActive(),
             },
           ],
-          id: `${id.value}${props.itemKey}-tab`,
+          id: `${props.itemKey}-tab-${id.value}`,
           role: 'tab',
           tabindex: isActive() ? 0 : -1,
           type: 'button',
-          'aria-controls': `${id.value}${props.itemKey}-tab-pane`,
+          'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
           'aria-selected': isActive(),
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),
diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
index 5e2609bf..a4d23e7d 100644
--- a/packages/coreui-vue/src/components/tabs/CTabPanel.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts
@@ -112,9 +112,9 @@ const CTabPanel = defineComponent({
                     show: firstRender.value && visible.value,
                   },
                 ],
-                id: `${id.value}${props.itemKey}-tab-pane`,
+                id: `${props.itemKey}-tab-panel-${id.value}`,
                 role: 'tabpanel',
-                'aria-labelledby': `${id.value}${props.itemKey}-tab`,
+                'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
                 tabindex: 0,
                 ref: tabPaneRef,
               },
diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts
index e031153d..112decfe 100644
--- a/packages/coreui-vue/src/components/tabs/CTabs.ts
+++ b/packages/coreui-vue/src/components/tabs/CTabs.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, provide, ref, watch } from 'vue'
-import { getUID } from '../../utils'
+import { useUniqueId } from '../../composables'
 
 const CTabs = defineComponent({
   name: 'CTabs',
@@ -19,7 +19,8 @@ const CTabs = defineComponent({
     'change',
   ],
   setup(props, { slots, emit }) {
-    const uID = ref(getUID('t'))
+    const { getUID } = useUniqueId()
+    const uID = ref(getUID())
     const activeItemKey = ref(props.activeItemKey)
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key
diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
index 8ee54061..c982b3c8 100644
--- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts
+++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts
@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -115,6 +115,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -145,7 +146,7 @@ const CTooltip = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('tooltip')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {
diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts
index 4cee4c15..47572a5d 100644
--- a/packages/coreui-vue/src/composables/index.ts
+++ b/packages/coreui-vue/src/composables/index.ts
@@ -1,4 +1,5 @@
 import { useColorModes } from './useColorModes'
+import { useUniqueId } from './useUniqueId'
 import { usePopper } from './usePopper'
 
-export { useColorModes, usePopper }
+export { useColorModes, useUniqueId, usePopper }
diff --git a/packages/coreui-vue/src/composables/useUniqueId.ts b/packages/coreui-vue/src/composables/useUniqueId.ts
new file mode 100644
index 00000000..95810c31
--- /dev/null
+++ b/packages/coreui-vue/src/composables/useUniqueId.ts
@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+export const useUniqueId = (prefix: string = '') => {
+  const ids = ref<string[]>([])
+
+  const getUID = () => {
+    do {
+      prefix += Math.floor(Math.random() * 1_000_000)
+    } while (ids.value.includes(prefix))
+    
+    ids.value.push(prefix)
+    return prefix
+  }
+
+  return {
+    getUID,
+  }
+}
diff --git a/packages/coreui-vue/src/directives/v-c-popover.ts b/packages/coreui-vue/src/directives/v-c-popover.ts
index 41c22601..5e846244 100644
--- a/packages/coreui-vue/src/directives/v-c-popover.ts
+++ b/packages/coreui-vue/src/directives/v-c-popover.ts
@@ -1,9 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
-
 import type { Options } from '@popperjs/core'
 
-import { getUID } from '../utils'
+import { useUniqueId } from '../composables'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
   const popover = document.createElement('div')
@@ -56,6 +55,7 @@ export default {
   name: 'c-popover',
   uid: '',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const { getUID } = useUniqueId('popover')
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''
     const header = value.header ?? ''
@@ -77,7 +77,7 @@ export default {
       ],
     }
 
-    const uID = getUID('popover')
+    const uID = getUID()
     binding.arg = uID
     const popover = createPopoverElement(uID, header, content)
 
diff --git a/packages/coreui-vue/src/directives/v-c-tooltip.ts b/packages/coreui-vue/src/directives/v-c-tooltip.ts
index 50903711..bf888042 100644
--- a/packages/coreui-vue/src/directives/v-c-tooltip.ts
+++ b/packages/coreui-vue/src/directives/v-c-tooltip.ts
@@ -1,9 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
-
 import type { Options } from '@popperjs/core'
 
-import { getUID } from '../utils'
+import { useUniqueId } from '../composables'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   const tooltip = document.createElement('div')
@@ -54,6 +53,7 @@ const toggleTooltipElement = (
 export default {
   name: 'c-tooltip',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const { getUID } = useUniqueId('tooltip')
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''
     const trigger = value.trigger ?? 'hover'
@@ -74,7 +74,7 @@ export default {
       ],
     }
 
-    const uID = getUID('tooltip')
+    const uID = getUID()
     binding.arg = uID
     const tooltip = createTooltipElement(uID, content)
 
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index abe4077c..0ae26563 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,7 +1,6 @@
 import { defineUserConfig } from 'vuepress'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
 import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
 import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -11,7 +10,6 @@ import anchor from 'markdown-it-anchor'
 import include_plugin from 'markdown-it-include'
 import { defaultTheme } from './src/node'
 
-import { fileURLToPath, URL } from 'url'
 const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({

From fd9e5e3f3874f21f0784a762bba69cdb98ff8ce7 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 18:05:28 +0200
Subject: [PATCH 18/19] docs: update theme

---
 packages/coreui-vue/src/composables/index.ts |  4 ++--
 packages/docs/.vuepress/config.ts            | 10 ++++++++++
 packages/docs/.vuepress/src/shared/page.ts   |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts
index 47572a5d..4d78d30e 100644
--- a/packages/coreui-vue/src/composables/index.ts
+++ b/packages/coreui-vue/src/composables/index.ts
@@ -1,5 +1,5 @@
 import { useColorModes } from './useColorModes'
-import { useUniqueId } from './useUniqueId'
 import { usePopper } from './usePopper'
+import { useUniqueId } from './useUniqueId'
 
-export { useColorModes, useUniqueId, usePopper }
+export { useColorModes, usePopper, useUniqueId }
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 0ae26563..764793ab 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -70,6 +70,16 @@ export default defineUserConfig({
       },
     }),
     tocPlugin({}),
+    {
+      name: 'extendsPage',
+      extendsPage: (page) => {
+        const frontmatter = page.frontmatter
+
+        frontmatter.head = [
+          ['link', { rel: 'canonical', href: `https://coreui.io/vue/docs${page.path}` }],
+        ]
+      },
+    },
   ],
   theme: defaultTheme({
     sidebar: [
diff --git a/packages/docs/.vuepress/src/shared/page.ts b/packages/docs/.vuepress/src/shared/page.ts
index 64e5fe99..40007b84 100755
--- a/packages/docs/.vuepress/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -10,6 +10,7 @@ export interface DefaultThemePageFrontmatter {
   navbar?: boolean
   pageClass?: string
   name?: string
+  preview_component?: boolean
   pro_component?: boolean
   other_frameworks?: string
 }

From 1fd45ef8537a13c1a0b62df6861bc56c6e65d15f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 30 May 2024 18:06:01 +0200
Subject: [PATCH 19/19] release: v5.1.0

---
 lerna.json                       | 2 +-
 packages/coreui-vue/package.json | 2 +-
 packages/docs/package.json       | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lerna.json b/lerna.json
index 194343e3..5ceaf54d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.0.0",
+  "version": "5.1.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json
index dad717e6..2b94d01b 100644
--- a/packages/coreui-vue/package.json
+++ b/packages/coreui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index ef5215fd..1fc7b75b 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",
@@ -19,7 +19,6 @@
     "@vuepress/bundler-vite": "2.0.0-rc.12",
     "@vuepress/bundler-webpack": "2.0.0-rc.12",
     "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
-    "@vuepress/plugin-back-to-top": "2.0.0-rc.31",
     "@vuepress/plugin-git": "2.0.0-rc.31",
     "@vuepress/plugin-markdown-container": "2.0.0-rc.30",
     "@vuepress/plugin-prismjs": "2.0.0-rc.32",