+ : never
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 }
diff --git a/packages/docs/.prettierrc b/packages/docs/.prettierrc
new file mode 100644
index 00000000..53e4559d
--- /dev/null
+++ b/packages/docs/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "semi": false,
+ "trailingComma": "es5",
+ "singleQuote": true,
+ "printWidth": 100,
+ "tabWidth": 2
+
+}
diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts
index b410c0a2..ae44077a 100644
--- a/packages/docs/.vuepress/client.ts
+++ b/packages/docs/.vuepress/client.ts
@@ -1,8 +1,8 @@
import { defineClientConfig } from '@vuepress/client'
-import { CIcon } from '@coreui/icons-vue'
+
+import { CIcon, CIconSvg } from '@coreui/icons-vue'
import CChartPlugin from '@coreui/vue-chartjs'
import CoreuiVue from '@coreui/vue/src/'
-import '@coreui/coreui/scss/coreui.scss'
import '@coreui/chartjs/scss/coreui-chartjs.scss'
import {
@@ -20,6 +20,7 @@ import {
cilCheckCircle,
cilCloudDownload,
cilContrast,
+ cilExternalLink,
cilHandshake,
cilInfo,
cilLayers,
@@ -50,6 +51,7 @@ export const icons = {
cilCheckCircle,
cilCloudDownload,
cilContrast,
+ cilExternalLink,
cilHandshake,
cilInfo,
cilLayers,
@@ -70,6 +72,7 @@ export default defineClientConfig({
app.use(CoreuiVue)
app.provide('icons', icons)
app.component('CIcon', CIcon)
+ app.component('CIconSvg', CIconSvg)
app.use(CChartPlugin),
router.addRoute({ path: '', redirect: '/getting-started/introduction.html' })
},
diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts
index 4c55aee9..3a05c647 100644
--- a/packages/docs/.vuepress/config.ts
+++ b/packages/docs/.vuepress/config.ts
@@ -1,12 +1,14 @@
import { defineUserConfig } from 'vuepress'
-import anchor from 'markdown-it-anchor'
-import include_plugin from 'markdown-it-include'
-import { defaultTheme } from './theme-coreui'
-
-import { containerPlugin } from '@vuepress/plugin-container'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
+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'
const __dirname = getDirname(import.meta.url)
@@ -15,18 +17,21 @@ 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` }],
- ],
+ head: [['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }]],
+ bundler: viteBundler(),
+ alias: {
+ '@example': path.resolve(__dirname, '../code-examples/'),
+ },
markdown: {
anchor: {
- permalink: anchor.permalink.ariaHidden({
+ permalink: anchor.permalink.linkInsideHeader({
class: 'anchor-link',
placement: 'after'
- })
+ }),
},
- code: {
- lineNumbers: false,
+ importCode: {
+ handleImportPath: (str) =>
+ str.replace(/^@example/, path.resolve(__dirname, '../code-examples/')),
},
},
extendsMarkdown: (md) => {
@@ -36,53 +41,52 @@ 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 '\n'
- } else {
- return '
\n'
- }
- },
+ before: (): string => `\n`,
+ after: (): string => '
\n',
}),
- containerPlugin({
- type: 'demo-rounded',
- render: function (tokens, idx) {
- if (tokens[idx].nesting === 1) {
- return '\n'
- } else {
- return '
\n'
- }
- },
+ markdownContainerPlugin({
+ type: 'demo-bg-secondary',
+ before: (): string =>
+ `\n`,
+ after: (): string => '
\n',
}),
- containerPlugin({
+ markdownContainerPlugin({
type: 'demo-dark',
- render: function (tokens, idx) {
- if (tokens[idx].nesting === 1) {
- return '\n'
- } else {
- return '
\n'
- }
- },
+ before: (): string => `\n`,
+ after: (): string => '
\n',
}),
- containerPlugin({
- type: 'demo-bg-secondary',
- render: function (tokens, idx) {
- if (tokens[idx].nesting === 1) {
- return '\n'
- } else {
- return '
\n'
- }
- },
+ markdownContainerPlugin({
+ type: 'demo-rounded',
+ before: (): string => `\n`,
+ after: (): string => '
\n',
}),
- tocPlugin({}),
+ prismjsPlugin(),
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'),
},
}),
+ 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: [
@@ -259,6 +263,10 @@ export default defineUserConfig({
text: 'Dropdown',
link: `/components/dropdown.html`,
},
+ {
+ text: 'Focus Trap',
+ link: `/components/focus-trap.html`,
+ },
{
text: 'Footer',
link: `/components/footer.html`,
@@ -323,6 +331,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/.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/src/client/components/Banner.vue b/packages/docs/.vuepress/src/client/components/Banner.vue
new file mode 100644
index 00000000..ba150ac6
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/components/Banner.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
CoreUI PRO Component
+
+ To use this component you must have a CoreUI PRO license. Buy the
+ CoreUI PRO
+ and get access to all PRO components, features, templates, and dedicated support.
+
+
+
Support CoreUI Development
+
+ CoreUI is an MIT-licensed open source project and is completely free to use. However, the
+ amount of effort needed to maintain and develop new features for the project is not
+ sustainable without proper financial backing.
+
+
You can support our Open Source software development in the following ways:
+
+
+ Buy the
+ CoreUI PRO ,
+ and get access to PRO components, and dedicated support.
+
+
+ Became a sponsor , and get
+ your logo on BACKERS.md/README.md files or each site of this documentation
+
+
+ Give us a star ⭐️ on
+ Github .
+
+
+
diff --git a/packages/docs/.vuepress/src/client/components/Callout.vue b/packages/docs/.vuepress/src/client/components/Callout.vue
new file mode 100644
index 00000000..da3b93d8
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/components/Callout.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
{{ props.title }}
+
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue b/packages/docs/.vuepress/src/client/components/Footer.vue
similarity index 84%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue
rename to packages/docs/.vuepress/src/client/components/Footer.vue
index ca00885f..d38e5749 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Footer.vue
+++ b/packages/docs/.vuepress/src/client/components/Footer.vue
@@ -35,18 +35,4 @@
-
-
-
+
\ 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
new file mode 100644
index 00000000..04628a9a
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/components/Header.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pricing
+
+
+ Roadmap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get CoreUI PRO all-access →
+
+
+
diff --git a/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
new file mode 100644
index 00000000..b58ceed6
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/components/OtherFrameworks.vue
@@ -0,0 +1,45 @@
+
+
+
+
+ Other frameworks
+
+ CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
+ components. To learn more please visit the following pages.
+
+
+
+
\ 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
new file mode 100644
index 00000000..61a93fee
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/components/ScssDocs.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue
similarity index 94%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
rename to packages/docs/.vuepress/src/client/components/Sidebar.vue
index 6ad736e2..49581af1 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue
+++ b/packages/docs/.vuepress/src/client/components/Sidebar.vue
@@ -1,3 +1,7 @@
+
+
-
-
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts b/packages/docs/.vuepress/src/client/components/SidebarNav.ts
similarity index 90%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts
rename to packages/docs/.vuepress/src/client/components/SidebarNav.ts
index 09184a1e..ba1b4a81 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts
+++ b/packages/docs/.vuepress/src/client/components/SidebarNav.ts
@@ -1,14 +1,15 @@
import { defineComponent, h, computed, onMounted, ref } from 'vue'
-import type { VNode } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import type { ResolvedSidebarItem } from '../../shared'
-
+import { useRoute } from 'vuepress/client'
+import { RouterLink} from 'vue-router'
+import { useSidebarItems } from '../composables'
import { withBase } from '@vuepress/client'
-
import { CBadge, CNavGroup, CNavItem, CSidebarNav } from '@coreui/vue/src/'
import { CIcon } from '@coreui/icons-vue'
+import type { VNode } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ResolvedSidebarItem } from '../../shared'
+
const normalizePath = (path: string): string =>
decodeURI(path)
.replace(/#.*$/, '')
@@ -43,13 +44,8 @@ const isActiveItem = (route: RouteLocationNormalizedLoaded, item: ResolvedSideba
const SidebarNav = defineComponent({
name: 'SidebarNav',
- props: {
- items: {
- type: Array,
- required: true,
- },
- },
- setup(props) {
+ setup() {
+ const sidebarItems = useSidebarItems()
const route = useRoute()
const firstRender = ref(true)
@@ -57,7 +53,7 @@ const SidebarNav = defineComponent({
firstRender.value = false
})
- const renderItem = (item: ResolvedSidebarItem): VNode => {
+ const renderItem = (item: any): VNode => {
if (item.children && !item.link.includes('.html')) {
const visible = computed(() => item.children.some((child) => isActiveItem(route, child)))
@@ -122,7 +118,7 @@ const SidebarNav = defineComponent({
CSidebarNav,
{},
{
- default: () => props.items.map((item: any) => renderItem(item)),
+ default: () => sidebarItems.value.map((item: any) => renderItem(item)),
}
)
},
diff --git a/packages/docs/.vuepress/src/client/components/Toc.vue b/packages/docs/.vuepress/src/client/components/Toc.vue
new file mode 100644
index 00000000..e30ff3d8
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/components/Toc.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+ On this page
+
+
+
+
On this page
+
+
+
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 66%
rename from packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json
rename to packages/docs/.vuepress/src/client/components/other_frameworks.json
index 32046bbd..b9297930 100644
--- a/packages/docs/.vuepress/theme-coreui/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/alert/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/button/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/dropdown/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/image/",
+ "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/",
+ "angular": "https://coreui.io/angular/docs/forms/input/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/nav/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/placeholder/",
+ "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/",
+ "angular": "https://coreui.io/angular/docs/components/popover/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/spinner/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/table/",
+ "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/",
+ "angular": "https://coreui.io/angular/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/",
+ "angular": "https://coreui.io/angular/docs/components/toast/",
+ "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/",
+ "angular": "https://coreui.io/angular/docs/components/tooltip/",
+ "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/.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 91%
rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts
rename to packages/docs/.vuepress/src/client/composables/useSidebarItems.ts
index 0cf89962..cc9aa7b6 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)
}
@@ -144,19 +143,20 @@ export const resolveArraySidebarItems = (
}
}
+ // TODO: check if we need this
// if the sidebar item is current page and children is not set
// use headers of current page as children
- if (childItem.link === route.path) {
- // skip h1 header
- const headers =
- page.value.headers[0]?.level === 1
- ? page.value.headers[0].children
- : page.value.headers
- return {
- ...childItem,
- children: headersToSidebarItemChildren(headers, sidebarDepth),
- }
- }
+ // if (childItem.link === route.path) {
+ // // skip h1 header
+ // const headers =
+ // page.value.headers[0]?.level === 1
+ // ? page.value.headers[0].children
+ // : page.value.headers
+ // return {
+ // ...childItem,
+ // children: headersToSidebarItemChildren(headers, sidebarDepth),
+ // }
+ // }
return childItem
}
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/src/client/layouts/404.vue b/packages/docs/.vuepress/src/client/layouts/404.vue
new file mode 100755
index 00000000..b8315905
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/layouts/404.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
404
+
+
{{ getMsg() }}
+
+
{{ homeText }}
+
+
diff --git a/packages/docs/.vuepress/src/client/layouts/Layout.vue b/packages/docs/.vuepress/src/client/layouts/Layout.vue
new file mode 100755
index 00000000..75d6da70
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/layouts/Layout.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+ {{ name }}
+
+
+ {{ title }}
+
+
{{ description }}
+
+
+
+
+
+
+
+
+
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 81%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss
rename to packages/docs/.vuepress/src/client/styles/_ads.scss
index 575db8b0..b2b942f0 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss
+++ b/packages/docs/.vuepress/src/client/styles/_ads.scss
@@ -1,4 +1,7 @@
// stylelint-disable declaration-no-important, selector-max-id
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
//
// Carbon ads
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss b/packages/docs/.vuepress/src/client/styles/_anchor.scss
similarity index 78%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss
rename to packages/docs/.vuepress/src/client/styles/_anchor.scss
index 3f9ade89..5098ac5a 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss
+++ b/packages/docs/.vuepress/src/client/styles/_anchor.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
.anchor-link {
font-weight: 400;
color: rgba($link-color, .5);
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss b/packages/docs/.vuepress/src/client/styles/_callouts.scss
similarity index 92%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss
rename to packages/docs/.vuepress/src/client/styles/_callouts.scss
index a0dc566c..9c29d8b1 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss
+++ b/packages/docs/.vuepress/src/client/styles/_callouts.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
//
// Callouts
//
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 89%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
rename to packages/docs/.vuepress/src/client/styles/_component-examples.scss
index 10462b61..e5c07161 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss
+++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss
@@ -1,7 +1,33 @@
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/clearfix" as *;
+@use "@coreui/coreui/scss/mixins/container" as *;
+@use "@coreui/coreui/scss/mixins/grid" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
//
// Docs examples
//
+.docs-code-tabs {
+ padding: 0 ($cd-gutter-x * .5);
+ margin: 0 ($cd-gutter-x * -.5);
+
+ @include media-breakpoint-up(md) {
+ padding: 0;
+ margin: 0;
+ }
+}
+
+.docs-code-tab-content {
+ .tab-pane 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;
@@ -73,6 +99,16 @@
margin-left: .5rem;
}
+ // Avatars
+ > .avatar + .avatar {
+ margin-left: .25rem;
+ }
+
+ // Badges
+ > .badge + .badge {
+ margin-left: .25rem;
+ }
+
// Buttons
> .btn,
> .btn-group {
@@ -369,19 +405,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/_footer.scss b/packages/docs/.vuepress/src/client/styles/_footer.scss
similarity index 53%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss
rename to packages/docs/.vuepress/src/client/styles/_footer.scss
index 7544a17b..d7edfce1 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss
+++ b/packages/docs/.vuepress/src/client/styles/_footer.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
//
// Footer
//
@@ -7,13 +10,12 @@
@include font-size(.875rem);
a {
- color: var(--#{$prefix}tertiary-color);
- text-decoration: none;
+ color: var(--#{$prefix}secondary-color);
+ // text-decoration: none;
&:hover,
&:focus {
color: var(--cui-link-hover-color);
- text-decoration: underline;
}
}
}
diff --git a/packages/docs/.vuepress/src/client/styles/_layout.scss b/packages/docs/.vuepress/src/client/styles/_layout.scss
new file mode 100644
index 00000000..7b4740de
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/styles/_layout.scss
@@ -0,0 +1,57 @@
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
+.wrapper {
+ width: 100%;
+ padding-inline-start: var(--cui-sidebar-occupy-start, 0);
+ will-change: auto;
+ @include transition(padding .15s);
+}
+
+.docs-sidebar {
+ grid-area: sidebar;
+}
+
+.docs-main {
+ grid-area: main;
+ display: grid;
+ grid-template-areas:
+ "header"
+ "intro"
+ "toc"
+ "content";
+ grid-template-rows: auto auto 1fr;
+ gap: .5rem;
+
+ @include media-breakpoint-down(lg) {
+ max-width: 760px;
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(xl) {
+ grid-template-areas:
+ "intro toc"
+ "content toc";
+ grid-template-rows: auto auto;
+ grid-template-columns: 4fr 1fr;
+ gap: $grid-gutter-width;
+ }
+}
+
+.docs-header {
+ grid-area: header;
+}
+
+.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 `` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss b/packages/docs/.vuepress/src/client/styles/_prism.scss
similarity index 94%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss
rename to packages/docs/.vuepress/src/client/styles/_prism.scss
index 6145e4b6..8e6bc187 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss
+++ b/packages/docs/.vuepress/src/client/styles/_prism.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
/* PrismJS 1.24.1
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
/**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
--base05: #333;
--base06: #fff;
--base07: #{$teal-700}; // #9a6700
- --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+ --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
--base09: #{$cyan-700}; // #087990
--base0A: #{$purple-500}; // #795da3
--base0B: #{$blue-700}; // #183691
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 74%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss
rename to packages/docs/.vuepress/src/client/styles/_search.scss
index c487e640..16fa476c 100644
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss
+++ b/packages/docs/.vuepress/src/client/styles/_search.scss
@@ -1,8 +1,27 @@
-// stylelint-disable selector-class-pattern
+/*!
+ * CoreUI Docs (https://coreui.io/bootstrap/docs/)
+ * Copyright 2025 creativeLabs Łukasz Holeczek
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/box-shadow" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
+@forward "@docsearch/css/dist/style";
+
+// stylelint-disable selector-class-pattern
:root {
--docsearch-primary-color: var(--cui-primary);
+ --docsearch-muted-color: var(--cui-secondary-color);
--docsearch-logo-color: var(--cui-primary);
+ --docsearch-key-color: var(--cui-secondary-color);
}
@include color-mode(dark, true) {
@@ -26,9 +45,9 @@
}
.DocSearch-Container {
- --docsearch-muted-color: var(--cui-secondary-color);
--docsearch-hit-shadow: none;
+ position: fixed;
z-index: 2000; // Make sure to be over all components showcased in the documentation
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
@@ -39,14 +58,9 @@
.DocSearch-Button {
--docsearch-searchbox-background: #{rgba($black, .1)};
- // --docsearch-searchbox-color: #{$white};
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
- // --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
- // --docsearch-text-color: #{$white};
- // --docsearch-muted-color: #{rgba($white, .65)};
- min-width: 200px;
- min-height: 38px;
+ margin: 0;
font-family: $input-font-family;
font-weight: $input-font-weight;
line-height: $input-line-height;
@@ -58,11 +72,11 @@
// Note: This has no effect on s in some browsers, due to the limited stylability of ``s in CSS.
@include border-radius($btn-border-radius);
-
@include box-shadow($input-box-shadow);
@include transition($input-transition);
- &:focus {
+ &:focus,
+ &:hover {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
@@ -75,8 +89,14 @@
}
}
- &:hover:not(:disabled):not([readonly])::file-selector-button {
- background-color: $form-file-button-hover-bg;
+ @include media-breakpoint-down(md) {
+ &,
+ &:hover,
+ &:focus {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ }
}
.DocSearch-Search-Icon {
@@ -84,36 +104,32 @@
}
}
-
.DocSearch-Button-Keys {
min-width: 0;
padding: 0 .25rem;
- background: rgba($black, .125);
+ background: var(--cui-secondary-bg);
@include border-radius(.25rem);
}
.DocSearch-Button-Key {
- top: 0;
width: auto;
- height: 1.5rem;
- padding: 0 .125rem;
- margin-right: 0;
- font-size: .875rem;
+ padding: 0;
background: none;
+ border: 0;
box-shadow: none;
-}
-.DocSearch-Commands-Key {
- padding-left: 1px;
- font-size: .875rem;
- background-color: rgba($black, .1);
- background-image: none;
- box-shadow: none;
+ &:first-child {
+ margin-right: 0;
+ }
}
-.DocSearch-Form {
- @include border-radius(var(--cui-border-radius));
-}
+// .DocSearch-Commands-Key {
+// padding-left: 1px;
+// font-size: .875rem;
+// background-color: rgba($black, .1);
+// background-image: none;
+// box-shadow: none;
+// }
.DocSearch-Hits {
mark {
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
similarity index 83%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
rename to packages/docs/.vuepress/src/client/styles/_sidebar.scss
index 3e2482fa..d8cfb716 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
+++ b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
@@ -1,4 +1,6 @@
-.sidebar.docs-sidebar {
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
+.docs-sidebar {
--cui-sidebar-bg: var(--cui-tertiary-bg);
--cui-sidebar-brand-bg: transparent;
--cui-sidebar-brand-color: var(--cui-body-color);
@@ -23,10 +25,8 @@
}
}
-@if $enable-dark-mode {
- @include color-mode(dark) {
- .docs-sidebar {
- --cui-sidebar-bg: var(--cui-body-bg);
- }
+@include color-mode(dark) {
+ .docs-sidebar {
+ --cui-sidebar-bg: var(--cui-body-bg);
}
}
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/src/client/styles/_toc.scss b/packages/docs/.vuepress/src/client/styles/_toc.scss
new file mode 100644
index 00000000..255c69f1
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/styles/_toc.scss
@@ -0,0 +1,93 @@
+// stylelint-disable selector-max-type
+
+@use "@coreui/coreui/scss/functions/math" as *;
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+
+.docs-toc {
+ @include media-breakpoint-up(xl) {
+ position: sticky;
+ top: 5rem;
+ right: 0;
+ z-index: 2;
+ height: subtract(100vh, 7rem);
+ overflow-y: auto;
+ }
+
+ nav {
+ @include font-size(.875rem);
+
+ ul {
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+
+ ul {
+ padding-left: 1rem;
+ margin-top: .25rem;
+ }
+ }
+
+ li {
+ margin-bottom: .25rem;
+ }
+
+ a {
+ color: inherit;
+
+ &:not(:hover) {
+ text-decoration: none;
+ }
+
+ code {
+ font: inherit;
+ }
+ }
+ }
+}
+
+.docs-toc-toggle {
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-down(sm) {
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ @include media-breakpoint-down(lg) {
+ 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(lg) {
+ 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(lg) {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss b/packages/docs/.vuepress/src/client/styles/_variables.scss
similarity index 73%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
rename to packages/docs/.vuepress/src/client/styles/_variables.scss
index b53b7754..ba0ee56c 100755
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
+++ b/packages/docs/.vuepress/src/client/styles/_variables.scss
@@ -1,8 +1,9 @@
-// stylelint-disable scss/dollar-variable-default
-
+@use "sass:color";
+@use "@coreui/coreui/scss/variables" as *;
// Local docs variables
-$cd-purple: #4c0bce;
-$cd-violet: lighten(saturate($cd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+
+$cd-purple: #4c0bce;
+$cd-violet: color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
$cd-accent: #ffe484;
$cd-gutter-x: 3rem;
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/src/client/styles/index.scss b/packages/docs/.vuepress/src/client/styles/index.scss
new file mode 100755
index 00000000..4376c666
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/styles/index.scss
@@ -0,0 +1,24 @@
+@use "@coreui/coreui/scss/coreui" with (
+ $enable-deprecation-messages: false
+);
+
+@forward "ads";
+@forward "anchor";
+@forward "callouts";
+@forward "component-examples";
+@forward "footer";
+@forward "layout";
+@forward "prism";
+@forward "scrolling";
+@forward "search";
+@forward "sidebar";
+@forward "table-api";
+@forward "toc";
+@forward "custom-container";
+
+.back-to-top {
+--c-brand: #3eaf7c;
+--c-brand-light: #4abf8a;
+--back-to-top-color: var(--c-brand);
+--back-to-top-color-hover: var(--c-brand-light);
+}
\ No newline at end of file
diff --git a/packages/docs/.vuepress/src/node/defaultTheme.ts b/packages/docs/.vuepress/src/node/defaultTheme.ts
new file mode 100755
index 00000000..0fe8ca5f
--- /dev/null
+++ b/packages/docs/.vuepress/src/node/defaultTheme.ts
@@ -0,0 +1,43 @@
+import type { Page, Theme } from '@vuepress/core'
+
+import { themeDataPlugin } from '@vuepress/plugin-theme-data'
+import { fs, getDirname, path } from '@vuepress/utils'
+import type {
+ DefaultThemeLocaleOptions,
+ DefaultThemePageData,
+ DefaultThemePluginsOptions,
+} from '../shared'
+import { assignDefaultLocaleOptions } from './utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export interface DefaultThemeOptions extends DefaultThemeLocaleOptions {
+ /**
+ * To avoid confusion with the root `plugins` option,
+ * we use `themePlugins`
+ */
+ themePlugins?: DefaultThemePluginsOptions
+}
+export const defaultTheme = ({
+ themePlugins = {},
+ ...localeOptions
+}: DefaultThemeOptions = {}): Theme => {
+ assignDefaultLocaleOptions(localeOptions)
+
+ return {
+ name: '@vuepress/coreui-docs-theme',
+
+ templateBuild: path.resolve(__dirname, '../templates/build.html'),
+
+ clientConfigFile: path.resolve(__dirname, '../client/config.ts'),
+
+ extendsPage: (page: Page>) => {
+ // save relative file path into page data to generate edit link
+ page.data.filePathRelative = page.filePathRelative
+ // save title into route meta to generate navbar and sidebar
+ page.routeMeta.title = page.title
+ },
+
+ plugins: [themeDataPlugin({ themeData: localeOptions })],
+ }
+}
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 52%
rename from packages/docs/.vuepress/theme-coreui/src/shared/page.ts
rename to packages/docs/.vuepress/src/shared/page.ts
index 9feed30c..40007b84 100755
--- a/packages/docs/.vuepress/theme-coreui/src/shared/page.ts
+++ b/packages/docs/.vuepress/src/shared/page.ts
@@ -9,30 +9,13 @@ export interface DefaultThemePageFrontmatter {
home?: boolean
navbar?: boolean
pageClass?: string
+ name?: string
+ preview_component?: boolean
+ 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
@@ -41,6 +24,4 @@ export interface DefaultThemeNormalPageFrontmatter
sidebarDepth?: number
prev?: string | NavLink
next?: string | NavLink
- pro_component: boolean
- other_frameworks?: string
}
diff --git a/packages/docs/.vuepress/theme-coreui/templates/build.html b/packages/docs/.vuepress/src/templates/build.html
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/templates/build.html
rename to packages/docs/.vuepress/src/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"
- }
-}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue
deleted file mode 100644
index f3f3e8f1..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
{{ title }}
-
-
-
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
deleted file mode 100644
index 183935cf..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Get CoreUI PRO
-
-
-
-
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 @@
-
-
-
CoreUI PRO Component
-
- To use this component you must have a CoreUI PRO license. Buy the
- CoreUI PRO
- and get access to all PRO components, features, templates, and dedicated support.
-
-
-
Support CoreUI Development
-
- CoreUI is an MIT-licensed open source project and is completely free to use. However, the
- amount of effort needed to maintain and develop new features for the project is not
- sustainable without proper financial backing.
-
-
You can support our Open Source software development in the following ways:
-
-
- Buy the
- CoreUI PRO ,
- and get access to PRO components, and dedicated support.
-
-
- Became a sponsor , and get
- your logo on BACKERS.md/README.md files or each site of this documentation
-
-
- Give us a star ⭐️ on
- Github .
-
-
-
-
-
{{ title }}
-
{{ description }}
-
-
- Other frameworks
-
- CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
- components. To learn more please visit the following pages.
-
-
-
-
-
-
-
-
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue
deleted file mode 100644
index ae622b73..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
-
-
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue b/packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue
deleted file mode 100755
index 1066e78c..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/layouts/404.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
-
404
-
-
{{ getMsg() }}
-
-
{{ homeText }}
-
-
-
-
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue b/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
deleted file mode 100755
index 24fdb74b..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- On this page
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
deleted file mode 100644
index 284eae98..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_layout.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
- width: 100%;
- @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
- will-change: auto;
- @include transition(padding .15s);
-}
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
deleted file mode 100644
index fc1f0fee..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_toc.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.docs-toc {
- @include media-breakpoint-up(lg) {
- position: sticky;
- top: 5rem;
- right: 0;
- z-index: 2;
- height: subtract(100vh, 7rem);
- overflow-y: auto;
- }
-
- nav {
- @include font-size(.875rem);
-
- ul {
- padding-left: 0;
- list-style: none;
-
- ul {
- padding-left: 1rem;
- margin-top: .25rem;
- }
- }
-
- li {
- margin-bottom: .25rem;
- }
-
- a {
- color: inherit;
-
- &:not(:hover) {
- text-decoration: none;
- }
-
- code {
- font: inherit;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
deleted file mode 100755
index ea3615e4..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "@coreui/coreui/scss/coreui.scss";
-@import "@docsearch/css/dist/style.css";
-
-@import "variables";
-
-@import "ads";
-@import "anchor";
-@import "callouts";
-@import "component-examples";
-@import "footer";
-@import "layout";
-@import "prism";
-@import "scrolling";
-@import "search";
-@import "sidebar";
-@import "table-api";
-@import "toc";
-@import "custom-container";
-
-.back-to-top {
---c-brand: #3eaf7c;
---c-brand-light: #4abf8a;
---back-to-top-color: var(--c-brand);
---back-to-top-color-hover: var(--c-brand-light);
-}
\ No newline at end of file
diff --git a/packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts b/packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts
deleted file mode 100755
index 0886fd22..00000000
--- a/packages/docs/.vuepress/theme-coreui/src/node/defaultTheme.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-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 { assignDefaultLocaleOptions } from './utils'
-
-const __dirname = getDirname(import.meta.url)
-
-export interface DefaultThemeOptions extends DefaultThemeLocaleOptions {
- /**
- * To avoid confusion with the root `plugins` option,
- * we use `themePlugins`
- */
- themePlugins?: DefaultThemePluginsOptions
-}
-export const defaultTheme = ({
- themePlugins = {},
- ...localeOptions
-}: DefaultThemeOptions = {}): Theme => {
- assignDefaultLocaleOptions(localeOptions)
-
- 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)]),
- ),
- },
-
- clientConfigFile: path.resolve(__dirname, '../client/config.ts'),
-
- extendsPage: (page: Page>) => {
- // save relative file path into page data to generate edit link
- page.data.filePathRelative = page.filePathRelative
- // save title into route meta to generate navbar and sidebar
- 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 }],
- ],
- }
-}
diff --git a/packages/docs/README.md b/packages/docs/README.md
deleted file mode 100644
index 54e0c48e..00000000
--- a/packages/docs/README.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: Redirect
-lang: en-US
-title: Title of this page
-description: Description of this page
----
-### Components:
-
-[ CAccordion ](./4.0/components/accordion.md)
-
-[ CAlert ](./4.0/components/alert.md)
-
-[ CAvatar ](./4.0/components/avatar.md)
-
-[ CBackdrop ](./4.0/components/backdrop.md)
-
-[ CBadge ](./4.0/components/badge.md)
-
-[ CBreadcrumb ](./4.0/components/breadcrumb.md)
-
-[ CButton ](./4.0/components/button.md)
-
-[ CButtonGroup ](./4.0/components/button-group.md)
-
-[ CCallout ](./4.0/components/callout.md)
-
-[ CCard ](./4.0/components/card.md)
-
-[ CCollapse ](./4.0/components/collapse.md)
-
-[ CDropdown ](./4.0/components/dropdown.md)
-
-[ CDropdown ](./4.0/components/dropdown.md)
-
-[ CFooter ](./4.0/components/footer.md)
-
-[ CForm ](./4.0/components/form.md)
-
-[ CGrid ](./4.0/components/grid.md)
-
-[ CHeader ](./4.0/components/header.md)
-
-[ CLink ](./4.0/components/link.md)
-
-[ CListGroup ](./4.0/components/list-group.md)
-
-[ CLoadingButton ](./4.0/components/loading-button.md)
-
-[ CModal ](./4.0/components/modal.md)
-
-[ CMultiSelect ](./4.0/components/multi-select.md)
-
-[ CNav ](./4.0/components/nav.md)
-
-[ CNavBar ](./4.0/components/navbar.md)
-
-[ COffcanvas ](./4.0/components/offcanvas.md)
-
-[ CPagination ](./4.0/components/pagination.md)
-
-[ CPopover ](./4.0/components/popover.md)
-
-[ CProgress ](./4.0/components/progress.md)
-
-[ CSidebar ](./4.0/components/sidebar.md)
-
-[ CSpinner ](./4.0/components/spinner.md)
-
-[ CTable ](./4.0/components/table.md)
-
-[ CTabs ](./4.0/components/tabs.md)
-
-[ CToast ](./4.0/components/toast.md)
-
-### Directives:
-
-
-[ CTooltip ](./4.0/directives/tooltip.md)
-
-[ CPopover ](./4.0/directives/popover.md)
\ No newline at end of file
diff --git a/packages/docs/api/accordion/CAccordionItem.api.md b/packages/docs/api/accordion/CAccordionItem.api.md
index 753acd83..3e07d5aa 100644
--- a/packages/docs/api/accordion/CAccordionItem.api.md
+++ b/packages/docs/api/accordion/CAccordionItem.api.md
@@ -8,6 +8,7 @@ import CAccordionItem from '@coreui/vue/src/components/accordion/CAccordionItem'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------ | ------------- | -------------- | ------ | ------- |
-| **item-key** | The item key. | number\|string | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------------- | -------------- | ------ | ------- |
+| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
+| **item-key** | The item key. | number\|string | - | - |
diff --git a/packages/docs/api/alert/CAlertHeading.api.md b/packages/docs/api/alert/CAlertHeading.api.md
index 30262600..da1acd2d 100644
--- a/packages/docs/api/alert/CAlertHeading.api.md
+++ b/packages/docs/api/alert/CAlertHeading.api.md
@@ -8,6 +8,6 @@ import CAlertHeading from '@coreui/vue/src/components/alert/CAlertHeading'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h4' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h4' |
diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md
index 0c953392..4d763c88 100644
--- a/packages/docs/api/badge/CBadge.api.md
+++ b/packages/docs/api/badge/CBadge.api.md
@@ -8,11 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge'
#### Props
-| Prop name | Description | Type | Values | Default |
-| -------------- | --------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
-| **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - |
-| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - |
-| **size** | Size the component small. | string | `'sm'` | - |
-| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - |
+| Prop name | Description | Type | Values | Default |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
+| **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - |
+| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - |
+| **size** | Size the component small. | string | `'sm'` | - |
+| **text-bg-color** 5.0.0+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
+| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - |
diff --git a/packages/docs/api/button/CButton.api.md b/packages/docs/api/button/CButton.api.md
index 8f8f11ee..47adf340 100644
--- a/packages/docs/api/button/CButton.api.md
+++ b/packages/docs/api/button/CButton.api.md
@@ -8,17 +8,17 @@ import CButton from '@coreui/vue/src/components/button/CButton'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| **active** | Toggle the active state for the component. | boolean | - | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
-| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - |
-| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - |
-| **type** | Specifies the type of button. Always specify the type attribute for the `` element.` element. | string | `'button'`, `'submit'`, `'reset'` | 'button' |
-| **variant** | Set the button variant to an outlined button or a ghost button. | string | `'ghost'`, `'outline'` | - |
+| Prop name | Description | Type | Values | Default |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
+| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
+| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - |
+| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - |
+| **type** | Specifies the type of button. Always specify the type attribute for the `` element.` element. | string | `'button'`, `'submit'`, `'reset'` | 'button' |
+| **variant** | Set the button variant to an outlined button or a ghost button. | string | `'ghost'`, `'outline'` | - |
#### Events
diff --git a/packages/docs/api/card/CCard.api.md b/packages/docs/api/card/CCard.api.md
index facd1fe6..49c792f9 100644
--- a/packages/docs/api/card/CCard.api.md
+++ b/packages/docs/api/card/CCard.api.md
@@ -8,7 +8,8 @@ import CCard from '@coreui/vue/src/components/card/CCard'
#### Props
-| Prop name | Description | Type | Values | Default |
-| -------------- | ------------------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
-| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - |
+| Prop name | Description | Type | Values | Default |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
+| **text-bg-color** 5.0.0+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
+| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - |
diff --git a/packages/docs/api/card/CCardHeader.api.md b/packages/docs/api/card/CCardHeader.api.md
index fb314279..a04ae736 100644
--- a/packages/docs/api/card/CCardHeader.api.md
+++ b/packages/docs/api/card/CCardHeader.api.md
@@ -8,6 +8,6 @@ import CCardHeader from '@coreui/vue/src/components/card/CCardHeader'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
diff --git a/packages/docs/api/card/CCardImage.api.md b/packages/docs/api/card/CCardImage.api.md
index 117d906b..880ccab1 100644
--- a/packages/docs/api/card/CCardImage.api.md
+++ b/packages/docs/api/card/CCardImage.api.md
@@ -10,5 +10,5 @@ import CCardImage from '@coreui/vue/src/components/card/CCardImage'
| Prop name | Description | Type | Values | Default |
| --------------- | --------------------------------------------------------------------------------------- | ------ | ------------------- | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'img' |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'img' |
| **orientation** | Optionally orientate the image to the top, bottom. | string | `'top'`, `'bottom'` | - |
diff --git a/packages/docs/api/card/CCardSubtitle.api.md b/packages/docs/api/card/CCardSubtitle.api.md
index 92ebf44e..8961c4d0 100644
--- a/packages/docs/api/card/CCardSubtitle.api.md
+++ b/packages/docs/api/card/CCardSubtitle.api.md
@@ -8,6 +8,6 @@ import CCardSubtitle from '@coreui/vue/src/components/card/CCardSubtitle'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h6' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h6' |
diff --git a/packages/docs/api/card/CCardText.api.md b/packages/docs/api/card/CCardText.api.md
index 6dc7aaae..b2550fb6 100644
--- a/packages/docs/api/card/CCardText.api.md
+++ b/packages/docs/api/card/CCardText.api.md
@@ -8,6 +8,6 @@ import CCardText from '@coreui/vue/src/components/card/CCardText'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'p' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'p' |
diff --git a/packages/docs/api/card/CCardTitle.api.md b/packages/docs/api/card/CCardTitle.api.md
index e2cb5eb4..6fe87e17 100644
--- a/packages/docs/api/card/CCardTitle.api.md
+++ b/packages/docs/api/card/CCardTitle.api.md
@@ -8,6 +8,6 @@ import CCardTitle from '@coreui/vue/src/components/card/CCardTitle'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h5' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h5' |
diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index bd56a962..79b60043 100644
--- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
+++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
@@ -8,7 +8,7 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor
#### Props
-| Prop name | Description | Type | Values | Default |
-| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
-| **container** v5.0.0-rc.0+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
-| **teleport** | Render some children into a different part of the DOM | boolean | - | true |
+| Prop name | Description | Type | Values | Default |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- |
+| **container** 5.0.0+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
+| **teleport** | Render some children into a different part of the DOM | boolean | - | true |
diff --git a/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md b/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md
new file mode 100644
index 00000000..1984a5a7
--- /dev/null
+++ b/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md
@@ -0,0 +1,17 @@
+### CIconSvg
+
+```jsx
+import { CIconSvg } from '@coreui/icons-vue'
+// or
+import CIconSvg from '@coreui/icons-vue/src/CIconSvg'
+```
+
+#### Props
+
+| Prop name | Description | Type | Values | Default |
+| --------------------- | ------------------------------------------------------------------------------------------------- | --------------------- | ------ | ------- |
+| **custom-class-name** | Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop. | string\|array\|object | - | - |
+| **height** | The height attribute defines the vertical length of an icon. | number | - | - |
+| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | string | - | - |
+| **title** | Title tag content. | string | - | - |
+| **width** | The width attribute defines the horizontal length of an icon. | number | - | - |
diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md
index 2d6af004..ed5fa645 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,21 +8,22 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown'
#### Props
-| Prop name | Description | Type | Values | Default |
-| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - |
-| **auto-close** | Configure the auto close behavior of the dropdown:v5.0.0-rc.0+
| Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
-| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - |
-| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **offset** 4.9.0+
| Offset of the dropdown menu relative to its target. | array | - | [0, 2] |
-| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' |
-| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true |
-| **teleport** v5.0.0-rc.0+
| Generates dropdown menu using Teleport. | boolean | - | false |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' |
-| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' |
-| **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - |
+| **auto-close** | Configure the auto close behavior of the dropdown:5.0.0+
| Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
+| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - |
+| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
+| **offset** 4.9.0+
| Offset of the dropdown menu relative to its target. | array | - | [0, 2] |
+| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' |
+| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true |
+| **reference** 5.7.0+
| Sets the reference element for positioning the Vue Dropdown Menu. | - | 'toggle' |
+| **teleport** 5.0.0+
| Generates dropdown menu using Teleport. | boolean | - | false |
+| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' |
+| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' |
+| **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - |
#### Events
diff --git a/packages/docs/api/dropdown/CDropdownHeader.api.md b/packages/docs/api/dropdown/CDropdownHeader.api.md
index ce854682..97d237e2 100644
--- a/packages/docs/api/dropdown/CDropdownHeader.api.md
+++ b/packages/docs/api/dropdown/CDropdownHeader.api.md
@@ -8,6 +8,6 @@ import CDropdownHeader from '@coreui/vue/src/components/dropdown/CDropdownHeader
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h6' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h6' |
diff --git a/packages/docs/api/dropdown/CDropdownItem.api.md b/packages/docs/api/dropdown/CDropdownItem.api.md
index d3739469..c9d88766 100644
--- a/packages/docs/api/dropdown/CDropdownItem.api.md
+++ b/packages/docs/api/dropdown/CDropdownItem.api.md
@@ -8,9 +8,9 @@ import CDropdownItem from '@coreui/vue/src/components/dropdown/CDropdownItem'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active** | Toggle the active state for the component. | boolean | - | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
+| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
diff --git a/packages/docs/api/dropdown/CDropdownMenu.api.md b/packages/docs/api/dropdown/CDropdownMenu.api.md
index d283ed5c..2c7c07b0 100644
--- a/packages/docs/api/dropdown/CDropdownMenu.api.md
+++ b/packages/docs/api/dropdown/CDropdownMenu.api.md
@@ -8,6 +8,6 @@ import CDropdownMenu from '@coreui/vue/src/components/dropdown/CDropdownMenu'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | --------------- | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | `'div'`, `'ul'` | 'div' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | --------------- | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | `'div'`, `'ul'` | 'div' |
diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 87c73be4..587b216f 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -8,15 +8,16 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- | -------- |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
-| **caret** | Enables pseudo element caret on toggler. | boolean | - | true |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' |
-| **custom** | Create a custom toggler which accepts any content. | boolean | - | - |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **nav-link** v5.0.0-rc.0+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true |
-| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - |
-| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean | - | - |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.5.0.0+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true |
+| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - |
+| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean | - | - |
+| **split-label** 5.7.0+
| Screen reader label for split button dropdown toggle. | string | - | 'Toggle Dropdown' |
+| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | - | - |
+| **focus-first-element** | Controls whether to focus the first selectable element or the container itself.4.3.0+
| Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | - | - |
-| **label** 4.3.0+
| Add a caption for a component. | string | - | - |
-| **text** 4.3.0+
| Add helper text to the component. | string | - | - |
+| Prop name | Description | Type | Values | Default |
+| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **floating-class-name** 5.5.0+
| A string of all className you want applied to the floating label wrapper. | string | - | - |
+| **floating-label** 4.3.0+
| Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | string | - | - |
+| **label** 4.3.0+
| Add a caption for a component. | string | - | - |
+| **text** 4.3.0+
| Add helper text to the component. | string | - | - |
diff --git a/packages/docs/api/form/CFormFeedback.api.md b/packages/docs/api/form/CFormFeedback.api.md
index bc45a57d..3ab11d05 100644
--- a/packages/docs/api/form/CFormFeedback.api.md
+++ b/packages/docs/api/form/CFormFeedback.api.md
@@ -8,9 +8,9 @@ import CFormFeedback from '@coreui/vue/src/components/form/CFormFeedback'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
-| **invalid** | Method called immediately after the `value` prop changes. | boolean | - | - |
-| **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | - | - |
-| **valid** | Set component validation state to valid. | boolean | - | - |
+| Prop name | Description | Type | Values | Default |
+| ----------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
+| **invalid** | Method called immediately after the `value` prop changes. | boolean | - | - |
+| **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | - | - |
+| **valid** | Set component validation state to valid. | boolean | - | - |
diff --git a/packages/docs/api/form/CFormText.api.md b/packages/docs/api/form/CFormText.api.md
index 939772da..33cdc019 100644
--- a/packages/docs/api/form/CFormText.api.md
+++ b/packages/docs/api/form/CFormText.api.md
@@ -8,6 +8,6 @@ import CFormText from '@coreui/vue/src/components/form/CFormText'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
diff --git a/packages/docs/api/form/CInputGroupText.api.md b/packages/docs/api/form/CInputGroupText.api.md
index a3ad985f..09998a59 100644
--- a/packages/docs/api/form/CInputGroupText.api.md
+++ b/packages/docs/api/form/CInputGroupText.api.md
@@ -8,6 +8,6 @@ import CInputGroupText from '@coreui/vue/src/components/form/CInputGroupText'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
diff --git a/packages/docs/api/header/CHeader.api.md b/packages/docs/api/header/CHeader.api.md
index 0416d9ee..f47ab627 100644
--- a/packages/docs/api/header/CHeader.api.md
+++ b/packages/docs/api/header/CHeader.api.md
@@ -8,7 +8,8 @@ import CHeader from '@coreui/vue/src/components/header/CHeader'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | ------------------------------------------------------ | --------------- | ------------------------------------------------------------- | ------- |
-| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - |
-| **position** | Place header in non-static positions. | string | `'fixed'`, `'sticky'` | - |
+| Prop name | Description | Type | Values | Default |
+| ------------- | --------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------- | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
+| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - |
+| **position** | Place header in non-static positions. | string | `'fixed'`, `'sticky'` | - |
diff --git a/packages/docs/api/header/CHeaderBrand.api.md b/packages/docs/api/header/CHeaderBrand.api.md
index a87636c5..9249d0a0 100644
--- a/packages/docs/api/header/CHeaderBrand.api.md
+++ b/packages/docs/api/header/CHeaderBrand.api.md
@@ -8,6 +8,6 @@ import CHeaderBrand from '@coreui/vue/src/components/header/CHeaderBrand'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
diff --git a/packages/docs/api/header/CHeaderNav.api.md b/packages/docs/api/header/CHeaderNav.api.md
index 1ceb45e3..dde286f0 100644
--- a/packages/docs/api/header/CHeaderNav.api.md
+++ b/packages/docs/api/header/CHeaderNav.api.md
@@ -8,6 +8,6 @@ import CHeaderNav from '@coreui/vue/src/components/header/CHeaderNav'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
diff --git a/packages/docs/api/link/CLink.api.md b/packages/docs/api/link/CLink.api.md
index 5404dffa..ddf93047 100644
--- a/packages/docs/api/link/CLink.api.md
+++ b/packages/docs/api/link/CLink.api.md
@@ -8,12 +8,12 @@ import CLink from '@coreui/vue/src/components/link/CLink'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active** | Toggle the active state for the component. | boolean | - | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
+| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
#### Events
diff --git a/packages/docs/api/list-group/CListGroup.api.md b/packages/docs/api/list-group/CListGroup.api.md
index 005ead80..2a88b9d3 100644
--- a/packages/docs/api/list-group/CListGroup.api.md
+++ b/packages/docs/api/list-group/CListGroup.api.md
@@ -8,8 +8,8 @@ import CListGroup from '@coreui/vue/src/components/list-group/CListGroup'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
-| **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``) | boolean | - | - |
-| **layout** | Specify a layout type. | string | `'horizontal'`, `'horizontal-sm'`, `'horizontal-md'`, `'horizontal-lg'`, `'horizontal-xl'`, `'horizontal-xxl'`, `` | - |
+| Prop name | Description | Type | Values | Default |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
+| **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``) | boolean | - | - |
+| **layout** | Specify a layout type. | string | `'horizontal'`, `'horizontal-sm'`, `'horizontal-md'`, `'horizontal-lg'`, `'horizontal-xl'`, `'horizontal-xxl'`, `` | - |
diff --git a/packages/docs/api/list-group/CListGroupItem.api.md b/packages/docs/api/list-group/CListGroupItem.api.md
index 3cfe1132..a5eddd7a 100644
--- a/packages/docs/api/list-group/CListGroupItem.api.md
+++ b/packages/docs/api/list-group/CListGroupItem.api.md
@@ -8,9 +8,9 @@ import CListGroupItem from '@coreui/vue/src/components/list-group/CListGroupItem
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ------- |
-| **active** | Toggle the active state for the component. | boolean | - | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | - |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'li' |
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'li' |
+| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | - |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index c30862a4..31a0e728 100644
--- a/packages/docs/api/modal/CModal.api.md
+++ b/packages/docs/api/modal/CModal.api.md
@@ -8,19 +8,21 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- |
-| **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' |
-| **backdrop** | Apply a backdrop on body while offcanvas is open. | boolean\|string | `boolean \| 'static'` | true |
-| **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - |
-| **focus** v5.0.0-rc.0+
| Puts the focus on the modal when shown. | boolean | - | true |
-| **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
-| **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true |
-| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - |
-| **size** | Size the component small, large, or extra large. | string | `'sm'`, `'lg'`, `'xl'` | - |
-| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | boolean | - | true |
-| **unmount-on-close** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | - | true |
-| **visible** | Toggle the visibility of alert component. | boolean | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | ------- |
+| **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' |
+| **backdrop** | Apply a backdrop on body while modal is open. | boolean\|string | `boolean \| 'static'` | true |
+| **container** 5.3.0+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
+| **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - |
+| **focus** 5.0.0+
| Puts the focus on the modal when shown. | boolean | - | true |
+| **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
+| **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true |
+| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - |
+| **size** | Size the component small, large, or extra large. | string | `'sm'`, `'lg'`, `'xl'` | - |
+| **teleport** 5.3.0+
| Generates modal using Teleport. | boolean | - | false |
+| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | boolean | - | true |
+| **unmount-on-close** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | - | true |
+| **visible** | Toggle the visibility of alert component. | boolean | - | - |
#### Events
diff --git a/packages/docs/api/modal/CModalTitle.api.md b/packages/docs/api/modal/CModalTitle.api.md
index 81ba100e..93d9891a 100644
--- a/packages/docs/api/modal/CModalTitle.api.md
+++ b/packages/docs/api/modal/CModalTitle.api.md
@@ -8,6 +8,6 @@ import CModalTitle from '@coreui/vue/src/components/modal/CModalTitle'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h5' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h5' |
diff --git a/packages/docs/api/nav/CNav.api.md b/packages/docs/api/nav/CNav.api.md
index 787a3ac5..37c9f02c 100644
--- a/packages/docs/api/nav/CNav.api.md
+++ b/packages/docs/api/nav/CNav.api.md
@@ -8,8 +8,8 @@ import CNav from '@coreui/vue/src/components/nav/CNav'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------- | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
-| **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'` | - |
+| Prop name | Description | Type | Values | Default |
+| ----------- | --------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
+| **layout** | Specify a layout type for component. | string | `'fill'`, `'justified'` | - |
+| **variant** | Set the nav variant to tabs or pills. | string | `'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | - |
diff --git a/packages/docs/api/nav/CNavGroup.api.md b/packages/docs/api/nav/CNavGroup.api.md
index 3d826283..309a55c4 100644
--- a/packages/docs/api/nav/CNavGroup.api.md
+++ b/packages/docs/api/nav/CNavGroup.api.md
@@ -8,10 +8,11 @@ import CNavGroup from '@coreui/vue/src/components/nav/CNavGroup'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ----------- | ------------------------------------------------------------- | ------- | ------ | ------- |
-| **compact** | Make nav group more compact by cutting all `padding` in half. | boolean | - | - |
-| **visible** | Show nav group items. | boolean | - | - |
+| Prop name | Description | Type | Values | Default |
+| ----------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'li' |
+| **compact** | Make nav group more compact by cutting all `padding` in half. | boolean | - | - |
+| **visible** | Show nav group items. | boolean | - | - |
#### Events
diff --git a/packages/docs/api/nav/CNavItem.api.md b/packages/docs/api/nav/CNavItem.api.md
index 0be3893c..788b3792 100644
--- a/packages/docs/api/nav/CNavItem.api.md
+++ b/packages/docs/api/nav/CNavItem.api.md
@@ -5,3 +5,12 @@ import { CNavItem } from '@coreui/vue'
// or
import CNavItem from '@coreui/vue/src/components/nav/CNavItem'
```
+
+#### Props
+
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'li' |
+| **class** | A string of all className you want applied to the component. | string | - | - |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
diff --git a/packages/docs/api/nav/CNavLink.api.md b/packages/docs/api/nav/CNavLink.api.md
index 748b5bea..7e17ce27 100644
--- a/packages/docs/api/nav/CNavLink.api.md
+++ b/packages/docs/api/nav/CNavLink.api.md
@@ -8,8 +8,8 @@ import CNavLink from '@coreui/vue/src/components/nav/CNavLink'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active** | Toggle the active state for the component. | boolean | - | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
diff --git a/packages/docs/api/nav/CNavTitle.api.md b/packages/docs/api/nav/CNavTitle.api.md
index 856e314b..ce56c9b1 100644
--- a/packages/docs/api/nav/CNavTitle.api.md
+++ b/packages/docs/api/nav/CNavTitle.api.md
@@ -5,3 +5,9 @@ import { CNavTitle } from '@coreui/vue'
// or
import CNavTitle from '@coreui/vue/src/components/nav/CNavTitle'
```
+
+#### Props
+
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'li' |
diff --git a/packages/docs/api/navbar/CNavbar.api.md b/packages/docs/api/navbar/CNavbar.api.md
index d907f3fc..bc8d5c8b 100644
--- a/packages/docs/api/navbar/CNavbar.api.md
+++ b/packages/docs/api/navbar/CNavbar.api.md
@@ -10,9 +10,9 @@ import CNavbar from '@coreui/vue/src/components/navbar/CNavbar'
| Prop name | Description | Type | Values | Default |
| ---------------- | --------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'nav' |
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | - |
| **color-scheme** | Sets if the color of text should be colored for a light or dark dark background. | string | `'dark'`, `'light'` | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'nav' |
| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - |
| **expand** | Defines the responsive breakpoint to determine when content collapses. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
| **placement** | Place component in non-static positions. | string | `'fixed-top'`, `'fixed-bottom'`, `'sticky-top'` | - |
diff --git a/packages/docs/api/navbar/CNavbarBrand.api.md b/packages/docs/api/navbar/CNavbarBrand.api.md
index 5d24b0e8..de415ed5 100644
--- a/packages/docs/api/navbar/CNavbarBrand.api.md
+++ b/packages/docs/api/navbar/CNavbarBrand.api.md
@@ -8,7 +8,7 @@ import CNavbarBrand from '@coreui/vue/src/components/navbar/CNavbarBrand'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
-| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'a' |
+| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
diff --git a/packages/docs/api/navbar/CNavbarNav.api.md b/packages/docs/api/navbar/CNavbarNav.api.md
index d71b96fc..ce7da6a2 100644
--- a/packages/docs/api/navbar/CNavbarNav.api.md
+++ b/packages/docs/api/navbar/CNavbarNav.api.md
@@ -8,6 +8,6 @@ import CNavbarNav from '@coreui/vue/src/components/navbar/CNavbarNav'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'ul' |
diff --git a/packages/docs/api/offcanvas/COffcanvasTitle.api.md b/packages/docs/api/offcanvas/COffcanvasTitle.api.md
index 48fff654..f920006c 100644
--- a/packages/docs/api/offcanvas/COffcanvasTitle.api.md
+++ b/packages/docs/api/offcanvas/COffcanvasTitle.api.md
@@ -8,6 +8,6 @@ import COffcanvasTitle from '@coreui/vue/src/components/offcanvas/COffcanvasTitl
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h5' |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h5' |
diff --git a/packages/docs/api/pagination/CPaginationItem.api.md b/packages/docs/api/pagination/CPaginationItem.api.md
index fced0268..ce607b0b 100644
--- a/packages/docs/api/pagination/CPaginationItem.api.md
+++ b/packages/docs/api/pagination/CPaginationItem.api.md
@@ -8,9 +8,9 @@ import CPaginationItem from '@coreui/vue/src/components/pagination/CPaginationIt
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
-| **active** | Toggle the active state for the component. | boolean | - | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | - |
-| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
+| Prop name | Description | Type | Values | Default |
+| ------------ | --------------------------------------------------------------------------------------- | ------- | ------ | ------- |
+| **active** | Toggle the active state for the component. | boolean | - | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | - |
+| **disabled** | Toggle the disabled state for the component. | boolean | - | - |
+| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - |
diff --git a/packages/docs/api/placeholder/CPlaceholder.api.md b/packages/docs/api/placeholder/CPlaceholder.api.md
index e229a9dc..074a0c57 100644
--- a/packages/docs/api/placeholder/CPlaceholder.api.md
+++ b/packages/docs/api/placeholder/CPlaceholder.api.md
@@ -11,8 +11,8 @@ import CPlaceholder from '@coreui/vue/src/components/placeholder/CPlaceholder'
| Prop name | Description | Type | Values | Default |
| ------------- | --------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------- | ------- |
| **animation** | Set animation type to better convey the perception of something being actively loaded. | string | `'glow'`, `'wave'` | - |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
| **size** | Size the component extra small, small, or large. | string | `'xs'`, `'sm'`, `'lg'` | - |
| **xs** | The number of columns on extra small devices (<576px). | number | - | - |
| **sm** | The number of columns on small devices (<768px). | number | - | - |
diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index d9cb2297..725e4846 100644
--- a/packages/docs/api/popover/CPopover.api.md
+++ b/packages/docs/api/popover/CPopover.api.md
@@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover'
| Prop name | Description | Type | Values | Default |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- |
| **animation** 4.9.0+
| Apply a CSS fade transition to the popover. | boolean | - | true |
-| **container** v5.0.0-rc.0+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
+| **container** 5.0.0+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
| **content** | Content for your component. If you want to pass non-string value please use dedicated slot `... ` | string | - | - |
| **delay** 4.9.0+
| The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 |
| **fallback-placements** 4.9.0+
| Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] |
diff --git a/packages/docs/api/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md
index c33100ae..1236b6ba 100644
--- a/packages/docs/api/progress/CProgress.api.md
+++ b/packages/docs/api/progress/CProgress.api.md
@@ -8,13 +8,13 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress'
#### Props
-| Prop name | Description | Type | Values | Default |
-| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- | ------- |
-| **animated** | Use to animate the stripes right to left via CSS3 animations. | boolean | - | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - |
-| **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | number | - | - |
-| **progress-bar-class-name** 5.0.0-rc.0+
| A string of all className you want applied to the ` will automatically resize accordingly. | number | - | - |
+| **progress-bar-class-name** 5.0.0+
| A string of all className you want applied to the 5.4.0+
| Toggle the disabled state for the component. | boolean | - | - |
+| **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..c12138af
--- /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 | `'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | - |
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** 5.1.0+
| Enable fade in and fade out transition. | boolean | - | true |
+| **visible** | Toggle the visibility of component. | boolean | - | false |
#### Events
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/api/toast/CToastClose.api.md b/packages/docs/api/toast/CToastClose.api.md
index beab2765..c1b0f388 100644
--- a/packages/docs/api/toast/CToastClose.api.md
+++ b/packages/docs/api/toast/CToastClose.api.md
@@ -8,9 +8,9 @@ import CToastClose from '@coreui/vue/src/components/toast/CToastClose'
#### Props
-| Prop name | Description | Type | Values | Default |
-| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | - |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- |
+| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | - |
#### Events
diff --git a/packages/docs/api/toast/CToastHeader.api.md b/packages/docs/api/toast/CToastHeader.api.md
index fdd97dc8..a8ff8638 100644
--- a/packages/docs/api/toast/CToastHeader.api.md
+++ b/packages/docs/api/toast/CToastHeader.api.md
@@ -11,9 +11,3 @@ import CToastHeader from '@coreui/vue/src/components/toast/CToastHeader'
| Prop name | Description | Type | Values | Default |
| ---------------- | ----------------------------------------------- | ------- | ------ | ------- |
| **close-button** | Automatically add a close button to the header. | boolean | - | - |
-
-#### Events
-
-| Event name | Description | Properties |
-| ---------- | --------------------------------------------- | ---------- |
-| **close** | Event called after clicking the close button. |
diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md
index 054895ab..3b0cac97 100644
--- a/packages/docs/api/tooltip/CTooltip.api.md
+++ b/packages/docs/api/tooltip/CTooltip.api.md
@@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip'
| Prop name | Description | Type | Values | Default |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- |
| **animation** 4.9.0+
| Apply a CSS fade transition to the tooltip. | boolean | - | true |
-| **container** v5.0.0-rc.0+
| Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
+| **container** 5.0.0+
| Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
| **content** | Content for your component. If you want to pass non-string value please use dedicated slot `... ` | string | - | - |
| **delay** 4.9.0+
| The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 |
| **fallback-placements** 4.9.0+
| Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] |
diff --git a/packages/docs/build/docgen.config.js b/packages/docs/build/docgen.config.js
index e4c71f24..7d654712 100644
--- a/packages/docs/build/docgen.config.js
+++ b/packages/docs/build/docgen.config.js
@@ -8,7 +8,8 @@ module.exports = {
components: [
'**/[A-Z]*.ts',
'!**/[A-Z]*.d.ts',
- '!**/[A-Z]*.spec.ts'
+ '!**/[A-Z]*.spec.ts',
+ '!**/ComponentProps.ts',
],
outDir: 'api', // folder to save components docs in (relative to the current working directry)
getDocFileName: (componentPath) =>
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapBasicExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapBasicExample.vue
new file mode 100644
index 00000000..807df9b0
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapBasicExample.vue
@@ -0,0 +1,38 @@
+
+
+
+ {{ trapActive ? 'Deactivate' : 'Activate' }} Focus Trap
+
+
+
+
+
+
Focus Trapped Area
+
Tab and Shift+Tab will cycle within this area when active.
+
+ Button
+
+
+
+
+
+
Outside Trapped Area
+
These elements are not accessible via Tab when focus trap is active.
+
+
Outside Button
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapConditionalExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapConditionalExample.vue
new file mode 100644
index 00000000..2beb241c
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapConditionalExample.vue
@@ -0,0 +1,229 @@
+
+
+
+
Conditional Focus Trap Demo
+
+ This example shows how focus traps can be conditionally activated based on application
+ state.
+
+
+
+
+
+
+
+
+
+ User Role
+
+ Guest
+ Authenticated User
+ Administrator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main Panel: {{ mainPanelTrapActive ? 'Active' : 'Inactive' }}
+
+
+
+
+ Sidebar: {{ sidebarTrapActive ? 'Active' : 'Inactive' }}
+
+
+
+
+ Toolbar: {{ toolbarTrapActive ? 'Active' : 'Inactive' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Content Editor
+
+
+
+
+
+ Save
+
+ Preview
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dashboard
+
+
+ My Documents
+
+
+ Admin Panel
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Document
+
+ Help
+
+ Keyboard Shortcuts
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapDropdownExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapDropdownExample.vue
new file mode 100644
index 00000000..2f0ada5d
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapDropdownExample.vue
@@ -0,0 +1,51 @@
+
+
+
+
+ Enhanced Dropdown with Focus Trap
+
+
+
+
+
Search Options
+
+
+
+
Action 1
+
Action 2
+
Action 3
+
+
+ Apply
+ Cancel
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapEventsExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapEventsExample.vue
new file mode 100644
index 00000000..870bab12
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapEventsExample.vue
@@ -0,0 +1,180 @@
+
+
+
+
+ {{ trapActive ? 'Deactivate' : 'Activate' }} Focus Trap
+
+
+ Clear Log
+
+
+
+
+
+
+
+
+
+
+
Interactive Content
+
This area demonstrates focus trap event handling.
+
+
+ Username
+
+
+
+ Email
+
+
+
+
+
+
+
+ Submit
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+
+
+
+ No events logged yet.
+
+
+ {{ event.timestamp }}: {{ event.message }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapFocusControlExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapFocusControlExample.vue
new file mode 100644
index 00000000..f8864f6f
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapFocusControlExample.vue
@@ -0,0 +1,104 @@
+
+
+
+
+ Focus First Element
+
+
+ Focus Container
+
+
+ Deactivate
+
+
+
+
+ Instructions: Click one of the activation buttons above, then use Tab to see the difference in initial focus behavior.
+
+
+
+
+
+
+
+
+
+
Container with tabindex="-1"
+
+
+
+
+
Submit
+
+
+
+
+
+
+
+
+
+
+
+
Container receives focus first
+
+
+
+
+
Submit
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapModalExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapModalExample.vue
new file mode 100644
index 00000000..e8699883
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapModalExample.vue
@@ -0,0 +1,56 @@
+
+
+
+ Open Modal with Focus Trap
+
+
+
+
+ Modal with Built-in Focus Trap
+
+
+
+ This modal includes built-in focus trapping. Try using Tab to navigate -
+ focus will stay within this modal dialog.
+
+
+ First Field
+
+
+ Second Field
+
+
+
+
+ Close
+
+
+ Save Changes
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapRestoreFocusExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapRestoreFocusExample.vue
new file mode 100644
index 00000000..bc7c238f
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapRestoreFocusExample.vue
@@ -0,0 +1,119 @@
+
+
+
+
Instructions: Focus on one of the buttons below, then activate a focus trap. When you deactivate the trap, notice where focus returns based on the restore-focus setting.
+
+
+
+
+
+ Activate with Restore Focus
+
+
+ Activate without Restore Focus
+
+
+ Another Focusable Button
+
+
+
+
+
+
+
+
+
+
+
+
Focus will return to the triggering button when deactivated.
+
+
+
+ Save
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
Focus will not automatically return when deactivated.
+
+
+
+ Save
+ Close
+
+
+
+
+
+
+
+
+ Last Event: {{ lastEvent }}
+
+
+
+
\ No newline at end of file
diff --git a/packages/docs/code-examples/focus-trap/FocusTrapSidebarExample.vue b/packages/docs/code-examples/focus-trap/FocusTrapSidebarExample.vue
new file mode 100644
index 00000000..00d212c3
--- /dev/null
+++ b/packages/docs/code-examples/focus-trap/FocusTrapSidebarExample.vue
@@ -0,0 +1,62 @@
+
+
+
+ Open Sidebar with Focus Trap
+
+
+
+
+ Navigation Sidebar
+
+
+
+ This sidebar includes built-in focus trapping. Tab navigation will stay within this panel
+ while it's open.
+
+
+
+
+
+
+
+ Dashboard
+
+
+ Users
+
+
+ Products
+
+
+ Settings
+
+
+
+
+ Quick Action
+ Help
+
+
+
+
+
+
diff --git a/packages/docs/components/alert.md b/packages/docs/components/alert.md
index 8575ad96..96091ca9 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
---
@@ -18,7 +19,8 @@ Vue Alert is prepared for any length of text, as well as an optional close butto
A simple light alert—check it out!
A simple dark alert—check it out!
:::
-```markup
+
+```vue
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
@@ -37,9 +39,16 @@ Click the button below to show an alert (hidden with inline styles to start), th
A simple primary alert—check it out!
Show live alert
:::
-```markup
-A simple primary alert—check it out!
-Show live alert
+
+```vue
+
+
+ A simple primary alert—check it out!
+ Show live alert
+
```
### Link color
@@ -47,32 +56,32 @@ Click the button below to show an alert (hidden with inline styles to start), th
Use the `` component to immediately give matching colored links inside any alert.
::: demo
- A simple primary alert with an example link . Give it a click if you like.
+A simple primary alert with an example link . Give it a click if you like.
- A simple secondary alert with an example link . Give it a click if you like.
+A simple secondary alert with an example link . Give it a click if you like.
- A simple success alert with an example link . Give it a click if you like.
+A simple success alert with an example link . Give it a click if you like.
- A simple danger alert with an example link . Give it a click if you like.
+A simple danger alert with an example link . Give it a click if you like.
- A simple warning alert with an example link . Give it a click if you like.
+A simple warning alert with an example link . Give it a click if you like.
- A simple info alert with an example link . Give it a click if you like.
+A simple info alert with an example link . Give it a click if you like.
- A simple light alert with an example link . Give it a click if you like.
+A simple light alert with an example link . Give it a click if you like.
- A simple dark alert with an example link . Give it a click if you like.
+A simple dark alert with an example link . Give it a click if you like.
:::
-```markup
+```vue
A simple primary alert with an example link . Give it a click if you like.
@@ -105,14 +114,15 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,
::: demo
- Well done!
+Well done!
+
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
:::
-```markup
+```vue
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
@@ -120,21 +130,23 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
```
+
### Icons
Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
::: demo
-
-
+
+
+
An example alert with an icon
:::
-```markup
+```vue
-
An example alert with an icon
@@ -173,7 +186,7 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
:::
-```markup
+```vue
Button
@@ -81,15 +80,6 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
-
```
## Multiple targets
@@ -132,6 +122,11 @@ A `` can show and hide multiple elements.
:::
```vue
+
Toggle first element
Toggle second element
@@ -166,32 +161,17 @@ A `` can show and hide multiple elements.
-
-
+
```
-
-
## API
-!!!include(./api/collapse/CCollapse.api.md)!!!
\ No newline at end of file
+!!!include(./api/collapse/CCollapse.api.md)!!!
+
+
\ No newline at end of file
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
index 7e99ce96..e6ad7933 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -43,7 +43,7 @@ And with `` elements:
::: demo
- Dropdown Button
+ Dropdown Button
Action
Another action
@@ -53,7 +53,7 @@ And with `` elements:
:::
```vue
- Dropdown Button
+ Dropdown Button
Action
Another action
@@ -65,7 +65,7 @@ And with `` elements:
The best part is you can do this with any button variant, too:
::: demo
-
+
{{item}}
@@ -77,7 +77,7 @@ The best part is you can do this with any button variant, too:
:::
```vue
-
+
{{togglerText}}
@@ -96,7 +96,7 @@ Similarly, create split button dropdowns with virtually the same markup as singl
We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
::: demo
-
+
{{ item }}
{{item}}
@@ -109,7 +109,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
:::
```vue
-
+
{{ item }}
{{item}}
@@ -422,7 +422,7 @@ Trigger dropdown menus at the right of the elements by adding `direction="dropen
Split dropend
-
Action
Another action
@@ -445,7 +445,7 @@ Trigger dropdown menus at the right of the elements by adding `direction="dropen
Split dropend
-
Action
Another action
@@ -473,7 +473,7 @@ Trigger dropdown menus at the left of the elements by adding `direction="dropsta
-
Action
Another action
@@ -498,7 +498,7 @@ Trigger dropdown menus at the left of the elements by adding `direction="dropsta
-
Action
Another action
@@ -578,7 +578,7 @@ Add a header to label sections of actions in any dropdown menu.
In the following example we use `div` instead of `` to show `` content.
::: demo
-
+