diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 1846284b..00000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -/dist/** -/docs/** -.eslintrc.js \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index a0662dcd..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict' - -module.exports = { - root: true, // So parent files don't get applied - env: { - es6: true, - browser: true, - node: true, - }, - parser: '@typescript-eslint/parser', // Specifies the ESLint parser - parserOptions: { - ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features - sourceType: 'module', // Allows for the use of imports - extraFileExtensions: ['.vue'], - }, - extends: [ - 'eslint:recommended', - 'plugin:vue/vue3-recommended', - 'plugin:prettier/recommended', - 'plugin:unicorn/recommended', - '@vue/eslint-config-typescript/recommended', - '@vue/eslint-config-prettier', - ], - rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'unicorn/filename-case': 'off', - 'unicorn/no-array-for-each': 'off', - 'unicorn/no-null': 'off', - 'unicorn/prefer-dom-node-append': 'off', - 'unicorn/prefer-export-from': 'off', - 'unicorn/prefer-query-selector': 'off', - 'unicorn/prevent-abbreviations': 'off', - 'vue/require-default-prop': 'off', - }, - overrides: [ - { - files: ['**/*.mjs'], - env: { - browser: false, - node: true, - }, - parserOptions: { - sourceType: 'module', - }, - }, - { - files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'], - env: { - jest: true, - }, - }, - { - files: ['packages/docs/build/**'], - env: { - browser: false, - node: true, - }, - parserOptions: { - sourceType: 'script', - }, - rules: { - 'no-console': 'off', - strict: 'error', - }, - }, - ], -} diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 415ca057..00000000 --- a/.prettierrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - semi: false, - trailingComma: "all", - singleQuote: true, - printWidth: 100, - tabWidth: 2 -}; \ No newline at end of file diff --git a/LICENSE b/LICENSE index f19fc729..fbb053e0 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021 creativeLabs Łukasz Holeczek +Copyright (c) 2025 creativeLabs Łukasz Holeczek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index f4dc59ca..3d4aab99 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0-rc.3.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` @@ -134,6 +134,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [Vue Progress](https://coreui.io/vue/docs/components/progress.html) - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html) - [Vue Range](https://coreui.io/vue/docs/forms/range.html) +- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html) - [Vue Select](https://coreui.io/vue/docs/forms/select.html) - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html) - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO** @@ -226,4 +227,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How ## Copyright and license -Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). +Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..15164bf5 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,76 @@ +import eslint from '@eslint/js' +import eslintPluginUnicorn from 'eslint-plugin-unicorn' +import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' +import eslintPluginVue from 'eslint-plugin-vue' +import globals from 'globals' +import typescriptEslint from 'typescript-eslint' + +export default typescriptEslint.config( + { ignores: ['**/*.d.ts', '**/coverage', '**/dist', '**/docs'] }, + { + extends: [ + eslint.configs.recommended, + ...typescriptEslint.configs.recommended, + ...eslintPluginVue.configs['flat/recommended'], + eslintPluginUnicorn.configs['flat/recommended'], + ], + files: ['packages/**/src/**/*.{js,ts,tsx}'], + languageOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + globals: globals.browser, + parserOptions: { + parser: typescriptEslint.parser, + }, + }, + rules: { + 'no-console': 'off', + 'no-debugger': 'off', + 'unicorn/filename-case': 'off', + 'unicorn/no-array-for-each': 'off', + 'unicorn/no-null': 'off', + 'unicorn/prefer-dom-node-append': 'off', + 'unicorn/prefer-export-from': 'off', + 'unicorn/prefer-query-selector': 'off', + 'unicorn/prevent-abbreviations': 'off', + 'vue/require-default-prop': 'off', + }, + }, + { + files: ['**/*.mjs'], + languageOptions: { + globals: { + ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])), + ...globals.node, + }, + + ecmaVersion: 'latest', + sourceType: 'module', + }, + }, + { + files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'], + languageOptions: { + globals: { + ...globals.jest, + }, + }, + }, + { + files: ['packages/docs/build/**'], + languageOptions: { + globals: { + ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])), + ...globals.node, + }, + + ecmaVersion: 5, + sourceType: 'commonjs', + }, + rules: { + 'no-console': 'off', + strict: 'error', + }, + }, + eslintPluginPrettierRecommended, +) diff --git a/lerna.json b/lerna.json index 2a068bcd..6fea4400 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.3", + "version": "5.4.1", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 9173efda..9b945921 100644 --- a/package.json +++ b/package.json @@ -17,23 +17,21 @@ "lib:build": "lerna run --scope \"@coreui/vue\" build --stream", "lib:test": "lerna run --scope \"@coreui/vue\" test --stream", "lib:test:update": "lerna run --scope \"@coreui/vue\" test:update --stream", - "lint": "eslint \"packages/**/src/**/*.{js,ts,tsx}\"", + "lint": "eslint", "test": "npm-run-all charts:test icons:test lib:test", "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.3.1", - "@typescript-eslint/parser": "^7.3.1", - "@vue/eslint-config-prettier": "^9.0.0", - "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", - "eslint": "8.57.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-vue": "^9.23.0", + "eslint": "^9.17.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-unicorn": "^51.0.1", - "lerna": "^8.1.2", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-unicorn": "^56.0.1", + "eslint-plugin-vue": "^9.32.0", + "globals": "^15.14.0", + "lerna": "^8.1.9", "npm-run-all": "^4.1.5", - "prettier": "^3.2.5" + "prettier": "^3.4.2", + "typescript-eslint": "^8.19.1" } } diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue index b5f44477..009583d5 160000 --- a/packages/coreui-icons-vue +++ b/packages/coreui-icons-vue @@ -1 +1 @@ -Subproject commit b5f44477ddae0e06bb5c9adedcdcde1d2aa95713 +Subproject commit 009583d58f7ea9a2a7bc7a2e62861eba48c0d911 diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs index 4915760c..f3b8364d 160000 --- a/packages/coreui-vue-chartjs +++ b/packages/coreui-vue-chartjs @@ -1 +1 @@ -Subproject commit 4915760c5f87bd0106778d414288681edc086fa9 +Subproject commit f3b8364d04dcd94c273ead1f740e1d792a5fb041 diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 8293a55c..d422298c 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.4.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.1.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` @@ -134,6 +134,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [Vue Progress](https://coreui.io/vue/docs/components/progress.html) - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html) - [Vue Range](https://coreui.io/vue/docs/forms/range.html) +- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html) - [Vue Select](https://coreui.io/vue/docs/forms/select.html) - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html) - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO** diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 474a16e6..bc94fec7 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.0.0-rc.3", + "version": "5.4.1", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -41,27 +41,27 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0-rc.3", + "@coreui/coreui": "^5.2.0", "@popperjs/core": "^2.11.8" }, "devDependencies": { - "@rollup/plugin-commonjs": "^25.0.7", - "@rollup/plugin-node-resolve": "^15.2.3", - "@rollup/plugin-typescript": "^11.1.6", - "@types/jest": "^29.5.12", - "@vue/test-utils": "^2.4.5", + "@rollup/plugin-commonjs": "^28.0.2", + "@rollup/plugin-node-resolve": "^16.0.0", + "@rollup/plugin-typescript": "^12.1.2", + "@types/jest": "^29.5.14", + "@vue/test-utils": "^2.4.6", "@vue/vue3-jest": "29.2.6", "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.13.0", + "rollup": "^4.30.1", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.1.2", - "typescript": "^5.4.3", - "vue": "^3.4.21", - "vue-types": "^5.1.1" + "ts-jest": "^29.2.5", + "typescript": "^5.7.2", + "vue": "^3.5.13", + "vue-types": "^5.1.3" }, "peerDependencies": { - "vue": "^3.2.21" + "vue": "^3.5.0" } } diff --git a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts index 4a8d83ff..c8907021 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts @@ -4,11 +4,12 @@ import { CCollapse } from '../collapse/CCollapse' const CAccordionBody = defineComponent({ name: 'CAccordionBody', setup(_, { slots }) { + const id = inject('id') const visible = inject('visible') as Ref return () => h( CCollapse, - { class: 'accordion-collapse', visible: visible.value }, + { class: 'accordion-collapse', id, visible: visible.value }, { default: () => h('div', { class: ['accordion-body'] }, slots.default && slots.default()), }, diff --git a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts index 69ab7a00..f9820b4a 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts @@ -3,6 +3,7 @@ import { defineComponent, h, inject, Ref } from 'vue' const CAccordionButton = defineComponent({ name: 'CAccordionButton', setup(_, { slots }) { + const id = inject('id') as string const toggleVisibility = inject('toggleVisibility') as () => void const visible = inject('visible') as Ref @@ -11,7 +12,8 @@ const CAccordionButton = defineComponent({ 'button', { type: 'button', - 'aria-expanded': !visible.value, + 'aria-control': id, + 'aria-expanded': visible.value, class: ['accordion-button', { ['collapsed']: !visible.value }], onClick: () => toggleVisibility(), }, diff --git a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts index 20575085..f2ebe594 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts @@ -1,8 +1,12 @@ -import { defineComponent, h, inject, provide, ref, watch, Ref } from 'vue' +import { defineComponent, h, inject, provide, ref, watch, Ref, useId } from 'vue' const CAccordionItem = defineComponent({ name: 'CAccordionItem', props: { + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id: String, /** * The item key. */ @@ -13,16 +17,20 @@ const CAccordionItem = defineComponent({ const alwaysOpen = inject('alwaysOpen') as boolean const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void - const itemKey = ref(props.itemKey ?? Math.random().toString(36).slice(2, 11)) + const id = props.id ?? useId() + const itemKey = ref(props.itemKey ?? id) const visible = ref(Boolean(activeItemKey.value === itemKey.value)) watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value))) const toggleVisibility = () => { visible.value = !visible.value - !alwaysOpen && visible && setActiveItemKey(itemKey.value) + if (!alwaysOpen && visible) { + setActiveItemKey(itemKey.value) + } } + provide('id', id) provide('visible', visible) provide('toggleVisibility', toggleVisibility) diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts index 65e5936c..3802015d 100644 --- a/packages/coreui-vue/src/components/badge/CBadge.ts +++ b/packages/coreui-vue/src/components/badge/CBadge.ts @@ -50,7 +50,7 @@ const CBadge = defineComponent({ * 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. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' - * @since 5.0.0-rc.3 + * @since 5.0.0 */ textBgColor: Color, /** diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts index e918cbfc..287bfd12 100644 --- a/packages/coreui-vue/src/components/button/CButton.ts +++ b/packages/coreui-vue/src/components/button/CButton.ts @@ -93,8 +93,9 @@ export const CButton = defineComponent({ { class: [ 'btn', - props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`, { + [`btn-${props.color}`]: props.color && !props.variant, + [`btn-${props.variant}-${props.color}`]: props.color && props.variant, [`btn-${props.size}`]: props.size, active: props.active, disabled: props.disabled, diff --git a/packages/coreui-vue/src/components/card/CCard.ts b/packages/coreui-vue/src/components/card/CCard.ts index e63631fb..580dc207 100644 --- a/packages/coreui-vue/src/components/card/CCard.ts +++ b/packages/coreui-vue/src/components/card/CCard.ts @@ -15,7 +15,7 @@ const CCard = defineComponent({ * 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. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' - * @since 5.0.0-rc.3 + * @since 5.0.0 */ textBgColor: Color, /** diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts index 48df4843..9207fb9a 100644 --- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts +++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts @@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({ /** * An HTML element or function that returns a single element, with `document.body` as the default. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index 8f835633..679e5d6f 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -3,10 +3,10 @@ import type { Placement } from '@popperjs/core' import { usePopper } from '../../composables' import type { Triggers } from '../../types' -import { isRTL } from '../../utils' +import { getNextActiveElement, isRTL } from '../../utils' import type { Alignments } from './types' -import { getNextActiveElement, getPlacement } from './utils' +import { getPlacement } from './utils' const CDropdown = defineComponent({ name: 'CDropdown', @@ -62,7 +62,7 @@ const CDropdown = defineComponent({ /** * 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`. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, @@ -115,7 +115,7 @@ const CDropdown = defineComponent({ /** * Generates dropdown menu using Teleport. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ teleport: { type: Boolean, @@ -228,6 +228,7 @@ const CDropdown = defineComponent({ ) { event.preventDefault() const target = event.target as HTMLElement + // eslint-disable-next-line unicorn/prefer-spread const items: HTMLElement[] = Array.from( dropdownMenuRef.value.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'), ) diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index c64d4511..17fd034b 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({ /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ navLink: { type: Boolean, diff --git a/packages/coreui-vue/src/components/dropdown/utils.ts b/packages/coreui-vue/src/components/dropdown/utils.ts index edddb0db..c9659636 100644 --- a/packages/coreui-vue/src/components/dropdown/utils.ts +++ b/packages/coreui-vue/src/components/dropdown/utils.ts @@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => { return classNames } -export const getNextActiveElement = ( - list: HTMLElement[], - activeElement: HTMLElement, - shouldGetNext: boolean, - isCycleAllowed: boolean, -) => { - const listLength = list.length - let index = list.indexOf(activeElement) - - if (index === -1) { - return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0] - } - - index += shouldGetNext ? 1 : -1 - - if (isCycleAllowed) { - index = (index + listLength) % listLength - } - - return list[Math.max(0, Math.min(index, listLength - 1))] -} - export const getPlacement = ( placement: Placement, direction: string | undefined, diff --git a/packages/coreui-vue/src/components/footer/CFooter.ts b/packages/coreui-vue/src/components/footer/CFooter.ts index 81de0158..3f0d5fd2 100644 --- a/packages/coreui-vue/src/components/footer/CFooter.ts +++ b/packages/coreui-vue/src/components/footer/CFooter.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CFooter = defineComponent({ name: 'CFooter', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Place footer in non-static positions. * @@ -18,7 +25,7 @@ const CFooter = defineComponent({ setup(props, { slots }) { return () => h( - 'div', + props.as, { class: ['footer', { [`footer-${props.position}`]: props.position }] }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts index 4a5ba536..35b914ca 100644 --- a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts +++ b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts @@ -19,6 +19,15 @@ const customWrapper = mount(Component, { }, }) +const customWrapperTwo = mount(Component, { + propsData: { + as: 'footer', + }, + slots: { + default: 'Default slot', + }, +}) + describe(`Loads and display ${ComponentName} component`, () => { it('has a name', () => { expect(Component.name).toMatch(ComponentName) @@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.classes('footer-fixed')).toBe(true) }) }) + +describe(`Customize (number two) ${ComponentName} component`, () => { + it('renders correctly', () => { + expect(customWrapperTwo.html()).toMatchSnapshot() + }) + + it('tag name is custom', () => { + expect(customWrapperTwo.element.tagName).toBe('FOOTER') + }) +}) diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts index e4aee290..0ed3d195 100644 --- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -4,11 +4,27 @@ import { CFormFloating } from './CFormFloating' import { CFormLabel } from './CFormLabel' import { CFormText } from './CFormText' +import type { ComponentProps } from '../../utils/ComponentProps' + +interface CFormControlWrapperProps extends ComponentProps { + floatingClassName?: string + floatingLabel?: string + id?: string + label?: string + text?: string +} + const CFormControlWrapper = defineComponent({ name: 'CFormControlWrapper', inheritAttrs: false, props: { ...CFormControlValidation.props, + /** + * A string of all className you want applied to the floating label wrapper. + * + * @since 5.5.0 + */ + floatingClassName: String, /** * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * @@ -18,7 +34,9 @@ const CFormControlWrapper = defineComponent({ /** * @ignore */ - id: String, + id: { + type: String, + }, /** * Add a caption for a component. * @@ -32,7 +50,7 @@ const CFormControlWrapper = defineComponent({ */ text: String, }, - setup(props, { slots }) { + setup(props: CFormControlWrapperProps, { slots }) { const formControlValidation = () => h( CFormControlValidation, @@ -41,7 +59,6 @@ const CFormControlWrapper = defineComponent({ feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, - floatingLabel: props.floatingLabel, invalid: props.invalid, tooltipFeedback: props.tooltipFeedback, valid: props.valid, @@ -59,29 +76,36 @@ const CFormControlWrapper = defineComponent({ return () => props.floatingLabel - ? h(CFormFloating, () => [ - slots.default && slots.default(), - h( - CFormLabel, - { - for: props.id, - }, - { - default: () => (slots.label && slots.label()) || props.label || props.floatingLabel, - }, - ), - (props.text || slots.text) && + ? h( + CFormFloating, + { + class: props.floatingClassName, + }, + () => [ + slots.default && slots.default(), h( - CFormText, + CFormLabel, { - id: props.describedby, + for: props.id, }, { - default: () => (slots.text && slots.text()) || props.text, + default: () => + (slots.label && slots.label()) || props.label || props.floatingLabel, }, ), - formControlValidation(), - ]) + (props.text || slots.text) && + h( + CFormText, + { + id: props.describedby, + }, + { + default: () => (slots.text && slots.text()) || props.text, + }, + ), + formControlValidation(), + ], + ) : [ (props.label || slots.label) && h( diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 68746233..8dbe4eca 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -130,7 +130,9 @@ const CFormInput = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index b3086b60..23bd7b1b 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -119,7 +119,9 @@ const CFormSelect = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index a953991d..42a8a732 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/header/CHeader.ts b/packages/coreui-vue/src/components/header/CHeader.ts index 32ab0bf5..d1c23b45 100644 --- a/packages/coreui-vue/src/components/header/CHeader.ts +++ b/packages/coreui-vue/src/components/header/CHeader.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CHeader = defineComponent({ name: 'CHeader', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Defines optional container wrapping children elements. * @@ -31,7 +38,7 @@ const CHeader = defineComponent({ setup(props, { slots }) { return () => h( - 'div', + props.as, { class: ['header', { [`header-${props.position}`]: props.position }] }, props.container ? h( diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts index 2bb30916..09ec0065 100644 --- a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts +++ b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts @@ -20,6 +20,15 @@ const customWrapper = mount(Component, { }, }) +const customWrapperTwo = mount(Component, { + propsData: { + as: 'header', + }, + slots: { + default: 'Default slot', + }, +}) + describe(`Loads and display ${ComponentName} component`, () => { it('has a name', () => { expect(Component.name).toMatch(ComponentName) @@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true) }) }) + + +describe(`Customize (number two) ${ComponentName} component`, () => { + it('renders correctly', () => { + expect(customWrapperTwo.html()).toMatchSnapshot() + }) + it('tag name is custom', () => { + expect(customWrapperTwo.element.tagName).toBe('HEADER') + }) +}) \ No newline at end of file diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts index 1c5c12e4..e2e1947d 100644 --- a/packages/coreui-vue/src/components/modal/CModal.ts +++ b/packages/coreui-vue/src/components/modal/CModal.ts @@ -1,6 +1,7 @@ import { defineComponent, h, + PropType, provide, ref, RendererElement, @@ -11,6 +12,7 @@ import { } from 'vue' import { CBackdrop } from '../backdrop/CBackdrop' +import { CConditionalTeleport } from '../conditional-teleport' import { executeAfterTransition } from '../../utils/transition' @@ -47,6 +49,15 @@ const CModal = defineComponent({ return false }, }, + /** + * 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`. + * + * @since 5.3.0 + */ + container: { + type: [Object, String] as PropType HTMLElement) | string>, + default: 'body', + }, /** * A string of all className you want applied to the modal content component. */ @@ -54,7 +65,7 @@ const CModal = defineComponent({ /** * Puts the focus on the modal when shown. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ focus: { type: Boolean, @@ -99,6 +110,15 @@ const CModal = defineComponent({ return ['sm', 'lg', 'xl'].includes(value) }, }, + /** + * Generates modal using Teleport. + * + * @since 5.3.0 + */ + teleport: { + type: Boolean, + default: false, + }, /** * Remove animation to create modal that simply appear rather than fade in to view. */ @@ -264,27 +284,37 @@ const CModal = defineComponent({ ), ) - return () => [ + return () => h( - Transition, + CConditionalTeleport, { - css: false, - onEnter: (el, done) => handleEnter(el, done), - onAfterEnter: () => handleAfterEnter(), - onLeave: (el, done) => handleLeave(el, done), - onAfterLeave: (el) => handleAfterLeave(el), + container: props.container, + teleport: props.teleport, }, - () => - props.unmountOnClose - ? visible.value && modal() - : withDirectives(modal(), [[vShow, visible.value]]), - ), - props.backdrop && - h(CBackdrop, { - class: 'modal-backdrop', - visible: visible.value, - }), - ] + { + default: () => [ + h( + Transition, + { + css: false, + onEnter: (el, done) => handleEnter(el, done), + onAfterEnter: () => handleAfterEnter(), + onLeave: (el, done) => handleLeave(el, done), + onAfterLeave: (el) => handleAfterLeave(el), + }, + () => + props.unmountOnClose + ? visible.value && modal() + : withDirectives(modal(), [[vShow, visible.value]]), + ), + props.backdrop && + h(CBackdrop, { + class: 'modal-backdrop', + visible: visible.value, + }), + ], + }, + ) }, }) diff --git a/packages/coreui-vue/src/components/nav/CNavGroup.ts b/packages/coreui-vue/src/components/nav/CNavGroup.ts index 2c83ccdf..7c45bd7c 100644 --- a/packages/coreui-vue/src/components/nav/CNavGroup.ts +++ b/packages/coreui-vue/src/components/nav/CNavGroup.ts @@ -41,7 +41,10 @@ const CNavGroup = defineComponent({ onMounted(() => { visible.value = props.visible - props.visible && navGroupRef.value.classList.add('show') + if (props.visible) { + navGroupRef.value.classList.add('show') + } + emit('visible-change', visible.value) }) @@ -60,7 +63,8 @@ const CNavGroup = defineComponent({ emit('visible-change', visible.value) }) - const handleTogglerClick = () => { + const handleTogglerClick = (event: Event) => { + event.preventDefault() visible.value = !visible.value emit('visible-change', visible.value) } @@ -111,6 +115,7 @@ const CNavGroup = defineComponent({ 'a', { class: ['nav-link', 'nav-group-toggle'], + href: '#', onClick: handleTogglerClick, }, slots.togglerContent && slots.togglerContent(), diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts index 3ed139c7..e660c01a 100644 --- a/packages/coreui-vue/src/components/nav/CNavItem.ts +++ b/packages/coreui-vue/src/components/nav/CNavItem.ts @@ -1,11 +1,21 @@ import { defineComponent, h } from 'vue' - import { CNavLink } from './CNavLink' +import type { ComponentProps } from '../../utils/ComponentProps' + +interface CNavItemProps extends ComponentProps { + as: string + class: string +} + const CNavItem = defineComponent({ name: 'CNavItem', + inheritAttrs: false, props: { - ...CNavLink.props, + /** + * Toggle the active state for the component. + */ + active: Boolean, /** * Component used for the root node. Either a string to use a HTML element or a component. */ @@ -13,19 +23,31 @@ const CNavItem = defineComponent({ type: String, default: 'li', }, + /** + * A string of all className you want applied to the component. + */ + class: String, + /** + * Toggle the disabled state for the component. + */ + disabled: Boolean, + /** + * @ignore + */ + href: String, }, - setup(props, { slots }) { + setup(props: CNavItemProps, { attrs, slots }) { return () => h( props.as, { - as: props.component, - class: 'nav-item', + class: ['nav-item', props.class], }, props.href ? h( CNavLink, { + ...attrs, active: props.active, disabled: props.disabled, href: props.href, diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 908b0efb..300f876a 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -1,11 +1,11 @@ -import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue' +import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue' import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' import { usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' -import { getRTLPlacement, getUID } from '../../utils' +import { getRTLPlacement } from '../../utils' const CPopover = defineComponent({ name: 'CPopover', @@ -23,7 +23,7 @@ const CPopover = defineComponent({ /** * 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`. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, @@ -117,9 +117,10 @@ const CPopover = defineComponent({ setup(props, { attrs, slots, emit }) { const togglerRef = ref() const popoverRef = ref() - const uID = ref() const visible = ref(props.visible) + const { initPopper, destroyPopper } = usePopper() + const uniqueId = `popover-${useId()}` const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay @@ -148,10 +149,6 @@ const CPopover = defineComponent({ placement: getRTLPlacement(props.placement, togglerRef.value), } - onMounted(() => { - uID.value = getUID('popover') - }) - const handleEnter = (el: RendererElement, done: () => void) => { emit('show') initPopper(togglerRef.value, popoverRef.value, popperConfig) @@ -211,7 +208,7 @@ const CPopover = defineComponent({ }, attrs.class, ], - id: uID.value, + id: uniqueId, ref: popoverRef, role: 'tooltip', }, @@ -240,7 +237,7 @@ const CPopover = defineComponent({ ), slots.toggler && slots.toggler({ - id: visible.value ? uID.value : null, + id: visible.value ? uniqueId : null, on: { click: (event: Event) => props.trigger.includes('click') && toggleVisible(event, !visible.value), diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts index 95b0c532..03c39ed3 100644 --- a/packages/coreui-vue/src/components/progress/CProgress.ts +++ b/packages/coreui-vue/src/components/progress/CProgress.ts @@ -23,7 +23,7 @@ const CProgress = defineComponent({ /** * A string of all className you want applied to the component. * - * @since 5.0.0-rc.3 + * @since 5.0.0 */ progressBarClassName: String, /** diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts new file mode 100644 index 00000000..5eb4c513 --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTab.ts @@ -0,0 +1,52 @@ +import { defineComponent, h, inject, Ref } from 'vue' + +const CTab = defineComponent({ + name: 'CTab', + props: { + /** + * Toggle the disabled state for the component. + * + * @since 5.4.0 + */ + disabled: Boolean, + /** + * Item key. + */ + itemKey: { + type: [Number, String], + required: true, + }, + }, + setup(props, { slots }) { + const activeItemKey = inject('activeItemKey') as Ref + const id = inject('id') + const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void + + const isActive = () => props.itemKey === activeItemKey.value + + return () => + h( + 'button', + { + class: [ + 'nav-link', + { + active: isActive(), + }, + ], + id: `${props.itemKey}-tab-${id}`, + role: 'tab', + tabindex: isActive() ? 0 : -1, + type: 'button', + 'aria-controls': `${props.itemKey}-tab-panel-${id}`, + 'aria-selected': isActive(), + disabled: props.disabled, + onClick: () => setActiveItemKey(props.itemKey), + onFocus: () => setActiveItemKey(props.itemKey), + }, + slots.default && slots.default(), + ) + }, +}) + +export { CTab } diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts new file mode 100644 index 00000000..63b720f2 --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTabList.ts @@ -0,0 +1,89 @@ +import { defineComponent, h, ref } from 'vue' +import { getNextActiveElement } from '../../utils' + +const CTabList = defineComponent({ + name: 'CTabList', + props: { + /** + * Specify a layout type for component. + * + * @values 'fill', 'justified' + */ + layout: { + type: String, + validator: (value: string) => { + return ['fill', 'justified'].includes(value) + }, + }, + /** + * Set the nav variant to tabs or pills. + * + * @values 'pills', 'tabs', 'underline', 'underline-border' + */ + variant: { + type: String, + validator: (value: string) => { + return ['pills', 'tabs', 'underline', 'underline-border'].includes(value) + }, + }, + }, + setup(props, { slots }) { + const tabListRef = ref() + + const handleKeydown = (event: KeyboardEvent) => { + if ( + tabListRef.value && + (event.key === 'ArrowDown' || + event.key === 'ArrowUp' || + event.key === 'ArrowLeft' || + event.key === 'ArrowRight' || + event.key === 'Home' || + event.key === 'End') + ) { + event.preventDefault() + const target = event.target as HTMLElement + // eslint-disable-next-line unicorn/prefer-spread + const items: HTMLElement[] = Array.from( + tabListRef.value.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'), + ) + + let nextActiveElement + + if (event.key === 'Home' || event.key === 'End') { + nextActiveElement = event.key === 'End' ? items.at(-1) : items[0] + } else { + nextActiveElement = getNextActiveElement( + items, + target, + event.key === 'ArrowDown' || event.key === 'ArrowRight', + true, + ) + } + + if (nextActiveElement) { + nextActiveElement.focus({ preventScroll: true }) + } + } + } + + return () => + h( + 'div', + { + class: [ + 'nav', + { + [`nav-${props.layout}`]: props.layout, + [`nav-${props.variant}`]: props.variant, + }, + ], + role: 'tablist', + onKeydown: (event) => handleKeydown(event), + ref: tabListRef, + }, + slots.default && slots.default(), + ) + }, +}) + +export { CTabList } diff --git a/packages/coreui-vue/src/components/tabs/CTabPane.ts b/packages/coreui-vue/src/components/tabs/CTabPane.ts index 9ff0050f..7614c346 100644 --- a/packages/coreui-vue/src/components/tabs/CTabPane.ts +++ b/packages/coreui-vue/src/components/tabs/CTabPane.ts @@ -5,6 +5,15 @@ import { executeAfterTransition } from '../../utils/transition' const CTabPane = defineComponent({ name: 'CTabPane', props: { + /** + * Enable fade in and fade out transition. + * + * @since 5.1.0 + */ + transition: { + type: Boolean, + default: true, + }, /** * Toggle the visibility of component. */ @@ -57,9 +66,9 @@ const CTabPane = defineComponent({ { class: [ 'tab-pane', - 'fade', { active: props.visible, + fade: props.transition, show: firstRender.value && props.visible, }, ], diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts new file mode 100644 index 00000000..3182e74f --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts @@ -0,0 +1,128 @@ +import { + defineComponent, + h, + inject, + ref, + Ref, + RendererElement, + Transition, + vShow, + watch, + withDirectives, +} from 'vue' + +import { executeAfterTransition } from '../../utils/transition' + +const CTabPanel = defineComponent({ + name: 'CTabPanel', + props: { + /** + * Item key. + */ + itemKey: { + type: [Number, String], + required: true, + }, + /** + * Enable fade in and fade out transition. + */ + transition: { + type: Boolean, + default: true, + }, + /** + * Toggle the visibility of component. + */ + visible: { + type: Boolean, + default: false, + }, + }, + emits: [ + /** + * Callback fired when the component requests to be hidden. + */ + 'hide', + /** + * Callback fired when the component requests to be shown. + */ + 'show', + ], + setup(props, { slots, emit }) { + const activeItemKey = inject('activeItemKey') as Ref + const id = inject('id') + const tabPaneRef = ref() + const firstRender = ref(true) + const visible = ref() + + watch( + () => props.visible, + () => { + visible.value = props.visible + }, + { + immediate: true, + }, + ) + + watch( + activeItemKey, + () => { + visible.value = Boolean(activeItemKey.value === props.itemKey) + }, + { + immediate: true, + }, + ) + + const handleEnter = (el: RendererElement, done: () => void) => { + firstRender.value = false + emit('show') + setTimeout(() => { + executeAfterTransition(() => done(), el as HTMLElement) + el.classList.add('show') + }, 1) + } + + const handleLeave = (el: RendererElement, done: () => void) => { + firstRender.value = false + emit('hide') + el.classList.remove('show') + executeAfterTransition(() => done(), el as HTMLElement) + } + + return () => + h( + Transition, + { + onEnter: (el, done) => handleEnter(el, done), + onLeave: (el, done) => handleLeave(el, done), + }, + () => + withDirectives( + h( + 'div', + { + class: [ + 'tab-pane', + { + active: visible.value, + fade: props.transition, + show: firstRender.value && visible.value, + }, + ], + id: `${props.itemKey}-tab-panel-${id}`, + role: 'tabpanel', + 'aria-labelledby': `${props.itemKey}-tab-${id}`, + tabindex: 0, + ref: tabPaneRef, + }, + slots.default && slots.default(), + ), + [[vShow, visible.value]], + ), + ) + }, +}) + +export { CTabPanel } diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts new file mode 100644 index 00000000..b61908c2 --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTabs.ts @@ -0,0 +1,43 @@ +import { defineComponent, h, provide, ref, useId, watch } from 'vue' + +const CTabs = defineComponent({ + name: 'CTabs', + props: { + /** + * The active item key. + */ + activeItemKey: { + type: [Number, String], + required: true, + } + }, + emits: [ + /** + * The callback is fired when the active tab changes. + */ + 'change', + ], + setup(props, { slots, emit }) { + const activeItemKey = ref(props.activeItemKey) + const uniqueId = useId() + const setActiveItemKey = (key: string | number) => { + activeItemKey.value = key + } + + watch( + () => props.activeItemKey, + (value) => { + activeItemKey.value = value + emit('change', value) + }, + ) + + provide('activeItemKey', activeItemKey) + provide('id', uniqueId) + provide('setActiveItemKey', setActiveItemKey) + + return () => h('div', { class: 'tabs' }, slots.default && slots.default()) + }, +}) + +export { CTabs } diff --git a/packages/coreui-vue/src/components/tabs/index.ts b/packages/coreui-vue/src/components/tabs/index.ts index 997480a5..7c848b03 100644 --- a/packages/coreui-vue/src/components/tabs/index.ts +++ b/packages/coreui-vue/src/components/tabs/index.ts @@ -1,12 +1,20 @@ import { App } from 'vue' +import { CTab } from './CTab' import { CTabContent } from './CTabContent' +import { CTabList } from './CTabList' import { CTabPane } from './CTabPane' +import { CTabPanel } from './CTabPanel' +import { CTabs } from './CTabs' const CTabsPlugin = { install: (app: App): void => { + app.component(CTab.name as string, CTab) app.component(CTabContent.name as string, CTabContent) + app.component(CTabList.name as string, CTabList) app.component(CTabPane.name as string, CTabPane) + app.component(CTabPanel.name as string, CTabPanel) + app.component(CTabs.name as string, CTabs) }, } -export { CTabsPlugin, CTabContent, CTabPane } +export { CTabsPlugin, CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs } diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index b00e8dd1..a190e323 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -1,6 +1,12 @@ -import { defineComponent, h, inject } from 'vue' +import { defineComponent, h, inject, resolveComponent } from 'vue' import { CCloseButton } from '../close-button/CCloseButton' +import type { ComponentProps } from '../../utils/ComponentProps' + +interface CCloseButtonProps extends ComponentProps { + as?: string +} + const CToastClose = defineComponent({ name: 'CToastClose', props: { @@ -16,7 +22,7 @@ const CToastClose = defineComponent({ */ 'close', ], - setup(props, { slots, emit }) { + setup(props: CCloseButtonProps, { slots, emit }) { // eslint-disable-next-line no-unused-vars const updateVisible = inject('updateVisible') as (visible: boolean) => void const handleClose = () => { @@ -26,7 +32,7 @@ const CToastClose = defineComponent({ return () => props.as ? h( - props.as, + resolveComponent(props.as), { onClick: () => { handleClose() diff --git a/packages/coreui-vue/src/components/toast/CToastHeader.ts b/packages/coreui-vue/src/components/toast/CToastHeader.ts index 74fbc651..3f822da0 100644 --- a/packages/coreui-vue/src/components/toast/CToastHeader.ts +++ b/packages/coreui-vue/src/components/toast/CToastHeader.ts @@ -9,20 +9,11 @@ const CToastHeader = defineComponent({ */ closeButton: Boolean, }, - emits: [ - /** - * Event called after clicking the close button. - */ - 'close', - ], - setup(props, { slots, emit }) { + setup(props, { slots }) { return () => h('div', { class: 'toast-header' }, [ slots.default && slots.default(), - props.closeButton && - h(CToastClose, { - onClose: () => emit('close'), - }), + props.closeButton && h(CToastClose), ]) }, }) diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 2182345d..6fe15d0e 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -1,11 +1,11 @@ -import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue' +import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue' import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' import { usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' -import { getRTLPlacement, getUID } from '../../utils' +import { getRTLPlacement } from '../../utils' const CTooltip = defineComponent({ name: 'CTooltip', @@ -23,7 +23,7 @@ const CTooltip = defineComponent({ /** * 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`. * - * @since v5.0.0-rc.3 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, @@ -113,9 +113,10 @@ const CTooltip = defineComponent({ setup(props, { attrs, slots, emit }) { const togglerRef = ref() const tooltipRef = ref() - const uID = ref() const visible = ref(props.visible) + const { initPopper, destroyPopper } = usePopper() + const uniqueId = `tooltip-${useId()}` const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay @@ -144,10 +145,6 @@ const CTooltip = defineComponent({ placement: getRTLPlacement(props.placement, togglerRef.value), } - onMounted(() => { - uID.value = getUID('tooltip') - }) - const handleEnter = (el: RendererElement, done: () => void) => { emit('show') initPopper(togglerRef.value, tooltipRef.value, popperConfig) @@ -207,7 +204,7 @@ const CTooltip = defineComponent({ }, attrs.class, ], - id: uID.value, + id: uniqueId, ref: tooltipRef, role: 'tooltip', }, @@ -228,7 +225,7 @@ const CTooltip = defineComponent({ ), slots.toggler && slots.toggler({ - id: visible.value ? uID.value : null, + id: visible.value ? uniqueId : null, on: { click: (event: Event) => props.trigger.includes('click') && toggleVisible(event, !visible.value), diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts index 4cee4c15..4d78d30e 100644 --- a/packages/coreui-vue/src/composables/index.ts +++ b/packages/coreui-vue/src/composables/index.ts @@ -1,4 +1,5 @@ import { useColorModes } from './useColorModes' import { usePopper } from './usePopper' +import { useUniqueId } from './useUniqueId' -export { useColorModes, usePopper } +export { useColorModes, usePopper, useUniqueId } diff --git a/packages/coreui-vue/src/composables/useUniqueId.ts b/packages/coreui-vue/src/composables/useUniqueId.ts new file mode 100644 index 00000000..e6f724a9 --- /dev/null +++ b/packages/coreui-vue/src/composables/useUniqueId.ts @@ -0,0 +1,18 @@ +import { ref } from 'vue' + +export const useUniqueId = (prefix: string = '') => { + const ids = ref([]) + + const getUID = () => { + do { + prefix += Math.floor(Math.random() * 1_000_000) + } while (ids.value.includes(prefix)) + + ids.value.push(prefix) + return prefix + } + + return { + getUID, + } +} diff --git a/packages/coreui-vue/src/directives/v-c-popover.ts b/packages/coreui-vue/src/directives/v-c-popover.ts index 41c22601..5e846244 100644 --- a/packages/coreui-vue/src/directives/v-c-popover.ts +++ b/packages/coreui-vue/src/directives/v-c-popover.ts @@ -1,9 +1,8 @@ import { DirectiveBinding } from 'vue' import { createPopper } from '@popperjs/core' - import type { Options } from '@popperjs/core' -import { getUID } from '../utils' +import { useUniqueId } from '../composables' const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => { const popover = document.createElement('div') @@ -56,6 +55,7 @@ export default { name: 'c-popover', uid: '', mounted(el: HTMLElement, binding: DirectiveBinding): void { + const { getUID } = useUniqueId('popover') const value = binding.value const content = typeof value === 'string' ? value : value.content ?? '' const header = value.header ?? '' @@ -77,7 +77,7 @@ export default { ], } - const uID = getUID('popover') + const uID = getUID() binding.arg = uID const popover = createPopoverElement(uID, header, content) diff --git a/packages/coreui-vue/src/directives/v-c-tooltip.ts b/packages/coreui-vue/src/directives/v-c-tooltip.ts index 50903711..bf888042 100644 --- a/packages/coreui-vue/src/directives/v-c-tooltip.ts +++ b/packages/coreui-vue/src/directives/v-c-tooltip.ts @@ -1,9 +1,8 @@ import { DirectiveBinding } from 'vue' import { createPopper } from '@popperjs/core' - import type { Options } from '@popperjs/core' -import { getUID } from '../utils' +import { useUniqueId } from '../composables' const createTooltipElement = (id: string, content: string): HTMLDivElement => { const tooltip = document.createElement('div') @@ -54,6 +53,7 @@ const toggleTooltipElement = ( export default { name: 'c-tooltip', mounted(el: HTMLElement, binding: DirectiveBinding): void { + const { getUID } = useUniqueId('tooltip') const value = binding.value const content = typeof value === 'string' ? value : value.content ?? '' const trigger = value.trigger ?? 'hover' @@ -74,7 +74,7 @@ export default { ], } - const uID = getUID('tooltip') + const uID = getUID() binding.arg = uID const tooltip = createTooltipElement(uID, content) diff --git a/packages/coreui-vue/src/utils/ComponentProps.ts b/packages/coreui-vue/src/utils/ComponentProps.ts new file mode 100644 index 00000000..5bd3991c --- /dev/null +++ b/packages/coreui-vue/src/utils/ComponentProps.ts @@ -0,0 +1,6 @@ +import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue' + +export type ComponentProps = + T extends DefineComponent, any, any> + ? ExtractPublicPropTypes + : 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..0404f0fd 100644 --- a/packages/docs/.vuepress/client.ts +++ b/packages/docs/.vuepress/client.ts @@ -1,5 +1,6 @@ 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' @@ -70,6 +71,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..ea00ecf0 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,14 @@ export default defineUserConfig({ lang: 'en-US', title: 'Vue UI Components · CoreUI', description: 'UI Components Library for Vue.js (Vue 3)', - head: [ - ['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }], - ], + head: [['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }]], + bundler: viteBundler(), markdown: { anchor: { - permalink: anchor.permalink.ariaHidden({ + permalink: anchor.permalink.linkInsideHeader({ class: 'anchor-link', placement: 'after' - }) - }, - code: { - lineNumbers: false, + }), }, }, extendsMarkdown: (md) => { @@ -36,53 +34,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: [ @@ -323,6 +320,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 @@ + + + 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 @@ + + + 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/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/src/client/components/Header.vue similarity index 90% rename from packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue rename to packages/docs/.vuepress/src/client/components/Header.vue index ca3f0165..17ee1090 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue +++ b/packages/docs/.vuepress/src/client/components/Header.vue @@ -1,3 +1,12 @@ + - 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 @@ + + + \ 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..074ca917 --- /dev/null +++ b/packages/docs/.vuepress/src/client/components/Toc.vue @@ -0,0 +1,37 @@ + + + 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 @@ + + + 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 @@ + + + diff --git a/packages/docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue b/packages/docs/.vuepress/src/client/layouts/Redirect.vue similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/layouts/Redirect.vue rename to packages/docs/.vuepress/src/client/layouts/Redirect.vue diff --git a/packages/docs/.vuepress/theme-coreui/src/client/shim.d.ts b/packages/docs/.vuepress/src/client/shim.d.ts similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/shim.d.ts rename to packages/docs/.vuepress/src/client/shim.d.ts diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss b/packages/docs/.vuepress/src/client/styles/_ads.scss similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss rename to packages/docs/.vuepress/src/client/styles/_ads.scss diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss b/packages/docs/.vuepress/src/client/styles/_anchor.scss similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_anchor.scss rename to packages/docs/.vuepress/src/client/styles/_anchor.scss diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss b/packages/docs/.vuepress/src/client/styles/_callouts.scss similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss rename to packages/docs/.vuepress/src/client/styles/_callouts.scss diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss similarity index 94% 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 6561eaee..2e725c8f 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss +++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss @@ -2,6 +2,23 @@ // 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 +90,11 @@ margin-left: .5rem; } + // Avatars + > .avatar + .avatar { + margin-left: .25rem; + } + // Badges > .badge + .badge { margin-left: .25rem; @@ -374,19 +396,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 100% rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss rename to packages/docs/.vuepress/src/client/styles/_footer.scss diff --git a/packages/docs/.vuepress/src/client/styles/_layout.scss b/packages/docs/.vuepress/src/client/styles/_layout.scss new file mode 100644 index 00000000..2ee63995 --- /dev/null +++ b/packages/docs/.vuepress/src/client/styles/_layout.scss @@ -0,0 +1,54 @@ +.wrapper { + width: 100%; + @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); + will-change: auto; + @include transition(padding .15s); + + > .container-lg { + --cui-gutter-x: 3rem; + } +} + +.docs-sidebar { + grid-area: sidebar; +} + +.docs-main { + grid-area: main; + + @include media-breakpoint-down(lg) { + max-width: 760px; + margin-inline: auto; + } + + @include media-breakpoint-up(md) { + display: grid; + grid-template-areas: + "intro" + "toc" + "content"; + grid-template-rows: auto auto 1fr; + gap: $grid-gutter-width; + } + + @include media-breakpoint-up(lg) { + grid-template-areas: + "intro toc" + "content toc"; + grid-template-rows: auto 1fr; + grid-template-columns: 4fr 1fr; + } +} + +.docs-intro { + grid-area: intro; +} + +.docs-toc { + grid-area: toc; +} + +.docs-content { + grid-area: content; + min-width: 1px; // Fix width when bd-content contains a `
` 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 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_prism.scss
rename to packages/docs/.vuepress/src/client/styles/_prism.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss b/packages/docs/.vuepress/src/client/styles/_scrolling.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_scrolling.scss
rename to packages/docs/.vuepress/src/client/styles/_scrolling.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss b/packages/docs/.vuepress/src/client/styles/_search.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_search.scss
rename to packages/docs/.vuepress/src/client/styles/_search.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss b/packages/docs/.vuepress/src/client/styles/_sidebar.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss
rename to packages/docs/.vuepress/src/client/styles/_sidebar.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_table-api.scss b/packages/docs/.vuepress/src/client/styles/_table-api.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_table-api.scss
rename to packages/docs/.vuepress/src/client/styles/_table-api.scss
diff --git a/packages/docs/.vuepress/src/client/styles/_toc.scss b/packages/docs/.vuepress/src/client/styles/_toc.scss
new file mode 100644
index 00000000..8f6dc04d
--- /dev/null
+++ b/packages/docs/.vuepress/src/client/styles/_toc.scss
@@ -0,0 +1,87 @@
+// stylelint-disable selector-max-type
+
+.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;
+      }
+    }
+  }
+}
+
+.docs-toc-toggle {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(sm) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: var(--cui-body-color);
+    border: 1px solid var(--cui-border-color);
+    @include border-radius(var(--cui-border-radius));
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[aria-expanded="true"] {
+      color: var(--cui-primary);
+      background-color: var(--cui-body-bg);
+      border-color: var(--cui-primary);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--cui-primary-rgb), .25);
+    }
+  }
+}
+
+.docs-toc-collapse {
+  @include media-breakpoint-down(md) {
+    nav {
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      background-color: var(--cui-tertiary-bg);
+      border: 1px solid var(--cui-border-color);
+      @include border-radius(var(--cui-border-radius));
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss b/packages/docs/.vuepress/src/client/styles/_variables.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss
rename to packages/docs/.vuepress/src/client/styles/_variables.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/custom-container.scss b/packages/docs/.vuepress/src/client/styles/custom-container.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/custom-container.scss
rename to packages/docs/.vuepress/src/client/styles/custom-container.scss
diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss b/packages/docs/.vuepress/src/client/styles/index.scss
similarity index 100%
rename from packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss
rename to packages/docs/.vuepress/src/client/styles/index.scss
diff --git a/packages/docs/.vuepress/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 @@
-
-
-
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 @@
-
-
-
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 @@
-
-
-
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 @@
-
-
-
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/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/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md
index 4ee02b81..4d763c88 100644
--- a/packages/docs/api/badge/CBadge.api.md
+++ b/packages/docs/api/badge/CBadge.api.md
@@ -8,12 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge'
 
 #### 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 | -                                                                                                                                                                                                                                                                                                                                                                           | '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-rc.3+
 | 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'` | -       |
+| 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/card/CCard.api.md b/packages/docs/api/card/CCard.api.md
index 6f6734f7..49c792f9 100644
--- a/packages/docs/api/card/CCard.api.md
+++ b/packages/docs/api/card/CCard.api.md
@@ -8,8 +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-bg-color** 
5.0.0-rc.3+
 | 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'` | -       |
+| 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/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md
index 743b1d0a..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.3+
 | 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 8a5b1759..6d3bade5 100644
--- a/packages/docs/api/dropdown/CDropdown.api.md
+++ b/packages/docs/api/dropdown/CDropdown.api.md
@@ -8,21 +8,21 @@ 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:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string                              | -                                                                                                                                                                                             | true           |
-| **container** 
v5.0.0-rc.3+
 | 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.3+
  | 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:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string                              | -                                                                                                                                                                                             | true           |
+| **container** 
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           |
+| **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/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md
index 5c10b591..ddf79509 100644
--- a/packages/docs/api/dropdown/CDropdownToggle.api.md
+++ b/packages/docs/api/dropdown/CDropdownToggle.api.md
@@ -8,15 +8,15 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle
 
 #### 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   | -                                                                                               | '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'` | -        |
-| **caret**                                                         | Enables pseudo element caret on toggler.                                                                                                                                                                      | boolean  | -                                                                                               | true     |
-| **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.3+
 | 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.
`@type` 'hover' \| 'focus' \| 'click'                                                 | Triggers | -                                                                                               | 'click'  |
-| **variant**                                                       | Set the button variant to an outlined button or a ghost button.                                                                                                                                               | string   | `'ghost'`, `'outline'`                                                                          | -        |
+| 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   | -                                                                                               | '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'` | -        |
+| **caret**                                                   | Enables pseudo element caret on toggler.                                                                                                                                                                      | boolean  | -                                                                                               | true     |
+| **custom**                                                  | Create a custom toggler which accepts any content.                                                                                                                                                            | boolean  | -                                                                                               | -        |
+| **disabled**                                                | Toggle the disabled state for the component.                                                                                                                                                                  | boolean  | -                                                                                               | -        |
+| **nav-link** 
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  | -                                                                                               | -        |
+| **trigger**                                                 | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
`@type` 'hover' \| 'focus' \| 'click'                                                 | Triggers | -                                                                                               | 'click'  |
+| **variant**                                                 | Set the button variant to an outlined button or a ghost button.                                                                                                                                               | string   | `'ghost'`, `'outline'`                                                                          | -        |
diff --git a/packages/docs/api/footer/CFooter.api.md b/packages/docs/api/footer/CFooter.api.md
index b1eedef2..bc9337fe 100644
--- a/packages/docs/api/footer/CFooter.api.md
+++ b/packages/docs/api/footer/CFooter.api.md
@@ -8,6 +8,7 @@ import CFooter from '@coreui/vue/src/components/footer/CFooter'
 
 #### Props
 
-| Prop name    | Description                           | Type   | Values                | Default |
-| ------------ | ------------------------------------- | ------ | --------------------- | ------- |
-| **position** | Place footer 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'   |
+| **position** | Place footer in non-static positions.                                                   | string | `'fixed'`, `'sticky'` | -       |
diff --git a/packages/docs/api/form/CFormControlWrapper.api.md b/packages/docs/api/form/CFormControlWrapper.api.md
index c4d97891..ebce3a46 100644
--- a/packages/docs/api/form/CFormControlWrapper.api.md
+++ b/packages/docs/api/form/CFormControlWrapper.api.md
@@ -8,8 +8,9 @@ import CFormControlWrapper from '@coreui/vue/src/components/form/CFormControlWra
 
 #### Props
 
-| Prop name                                                         | Description                                                                                                                                         | Type   | Values | Default |
-| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ------- |
-| **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 | -      | -       |
+| 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/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/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md
index 66efacda..6f201012 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.3+
 | 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 offcanvas 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/nav/CNavItem.api.md b/packages/docs/api/nav/CNavItem.api.md
index 2a2d63d1..788b3792 100644
--- a/packages/docs/api/nav/CNavItem.api.md
+++ b/packages/docs/api/nav/CNavItem.api.md
@@ -8,6 +8,9 @@ import CNavItem from '@coreui/vue/src/components/nav/CNavItem'
 
 #### 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'    |
+| 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/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md
index 11cd30e9..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.3+
     | 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 821d6eef..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.3+
 | A string of all className you want applied to the  component.                                              | string  | -                                                                                               | -       |
-| **thin**                                                                        | Makes progress bar thinner.                                                                                               | boolean | -                                                                                               | -       |
-| **value**                                                                       | The percent to progress the ProgressBar.                                                                                  | number  | -                                                                                               | 0       |
-| **variant**                                                                     | Set the progress bar variant to optional striped.                                                                         | string  | `'striped'`                                                                                     | -       |
-| **white**                                                                       | Change the default color to white.                                                                                        | boolean | -                                                                                               | -       |
+| 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+
 | A string of all className you want applied to the  component.                                              | string  | -                                                                                               | -       |
+| **thin**                                                                   | Makes progress bar thinner.                                                                                               | boolean | -                                                                                               | -       |
+| **value**                                                                  | The percent to progress the ProgressBar.                                                                                  | number  | -                                                                                               | 0       |
+| **variant**                                                                | Set the progress bar variant to optional striped.                                                                         | string  | `'striped'`                                                                                     | -       |
+| **white**                                                                  | Change the default color to white.                                                                                        | boolean | -                                                                                               | -       |
diff --git a/packages/docs/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md
new file mode 100644
index 00000000..7cdff394
--- /dev/null
+++ b/packages/docs/api/tabs/CTab.api.md
@@ -0,0 +1,14 @@
+### CTab
+
+```jsx
+import { CTab } from '@coreui/vue'
+// or
+import CTab from '@coreui/vue/src/components/tabs/CTab'
+```
+
+#### Props
+
+| Prop name                                                   | Description                                  | Type           | Values | Default |
+| ----------------------------------------------------------- | -------------------------------------------- | -------------- | ------ | ------- |
+| **disabled** 
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..68b9ca46
--- /dev/null
+++ b/packages/docs/api/tabs/CTabList.api.md
@@ -0,0 +1,14 @@
+### CTabList
+
+```jsx
+import { CTabList } from '@coreui/vue'
+// or
+import CTabList from '@coreui/vue/src/components/tabs/CTabList'
+```
+
+#### Props
+
+| Prop name   | Description                           | Type   | Values                                                   | Default |
+| ----------- | ------------------------------------- | ------ | -------------------------------------------------------- | ------- |
+| **layout**  | Specify a layout type for component.  | string | `'fill'`, `'justified'`                                  | -       |
+| **variant** | Set the nav variant to tabs or pills. | string | `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/api/tabs/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/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 9794c42c..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.3+
     | 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/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
+
+
 ```
 
 ### 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
 
   
     
@@ -149,7 +161,8 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
 
 ::: demo
 
-  
+
+
   

     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
 
   
   

@@ -215,7 +228,7 @@ Use `variant="solid"` to change contextual colors to solid.
 A simple solid dark alert—check it out!
 :::
 
-```markup
+```vue
 A simple solid primary alert—check it out!
 A simple solid secondary alert—check it out!
 A simple solid success alert—check it out!
@@ -231,42 +244,24 @@ Use `variant="solid"` to change contextual colors to solid.
 Alerts can also be easily dismissed. Just add the `dismissible` prop.
 
 ::: demo
-
+
   Go right ahead and click that dimiss over there on the right.
 
 :::
 
-```markup
-
-  Go right ahead and click that dimiss over there on the right.
-
-
-
+
 ```
 
-
-
 ## Customizing
 
 ### CSS variables
@@ -278,9 +273,9 @@ Vue alerts use local CSS variables on `.alert` for enhanced real-time customizat
 #### How to use CSS variables
 
 ```js
-const vars = { 
+const vars = {
   '--my-css-var': 10,
-  '--my-another-css-var': "red" 
+  '--my-another-css-var': "red"
 }
 return ...
 ```
@@ -293,4 +288,12 @@ return ...
 
 !!!include(./api/alert/CAlert.api.md)!!!
 
-!!!include(./api/alert/CAlertHeading.api.md)!!!
\ No newline at end of file
+!!!include(./api/alert/CAlertHeading.api.md)!!!
+
+
diff --git a/packages/docs/components/avatar.md b/packages/docs/components/avatar.md
index e94d7e27..02fb3b37 100644
--- a/packages/docs/components/avatar.md
+++ b/packages/docs/components/avatar.md
@@ -1,12 +1,14 @@
 ---
 title: Vue Avatar Component
 name: Avatar
-description: Vue avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
+description: The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters.
 other_frameworks: avatar
 ---
 
 ## Image avatars
 
+Showcase Vue avatars using images. These avatars are typically circular and can display user profile pictures.
+
 ::: demo
 
 
@@ -17,8 +19,11 @@ other_frameworks: avatar
 
 
 ```
+
 ## Letter avatars
 
+Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
+
 ::: demo
 CUI
 CUI
@@ -30,6 +35,45 @@ other_frameworks: avatar
 CUI
 ```
 
+## Icons avatars 
+
+Incorporate icons within Vue avatars, allowing for a visual representation using scalable vector graphics (SVG).
+
+::: demo
+
+  
+    
+  
+
+
+  
+    
+  
+
+
+  
+    
+  
+
+:::
+```vue
+
+  
+    
+  
+
+
+  
+    
+  
+
+
+  
+    
+  
+
+```
+
 ## Rounded avatars
 
 Use the `shape="rounded"` prop to make avatars squared with rounded corners.
@@ -66,20 +110,23 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for
 ::: demo
 CUI
 CUI
+CUI
 CUI
 CUI
 :::
 ```vue
 CUI
 CUI
+CUI
 CUI
 CUI
 ```
 
 ## Avatars with status
 
-::: demo
+Add a status indicator to avatars using the `status` property to show online or offline status.
 
+::: demo
 
 CUI
 :::
@@ -88,6 +135,28 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for
 CUI
 ```
 
+## Customizing
+
+### CSS variables
+
+Vue avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+
+
+#### How to use CSS variables
+
+```jsx
+const vars = {
+  '--my-css-var': 10,
+  '--my-another-css-var': 'red',
+}
+return ...
+```
+
+### SASS variables
+
+
+
 ## API
 
 !!!include(./api/avatar/CAvatar.api.md)!!!
\ No newline at end of file
diff --git a/packages/docs/components/chart.md b/packages/docs/components/chart.md
index 181f6635..d10a26d2 100644
--- a/packages/docs/components/chart.md
+++ b/packages/docs/components/chart.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Chart.js Component
+name: Chart.js
 description: Vue wrapper for Chart.js 3.0, the most popular charting library.
 ---
 
diff --git a/packages/docs/components/collapse.md b/packages/docs/components/collapse.md
index 162b1a16..0dffb5d0 100644
--- a/packages/docs/components/collapse.md
+++ b/packages/docs/components/collapse.md
@@ -28,6 +28,10 @@ You can use a link or a button component.
 
 :::
 ```vue
+
 
- 
 ```
 
 ## Horizontal
@@ -69,6 +64,10 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
 

 :::
 ```vue
+
 
-
 ```
 
 ## Multiple targets
@@ -132,6 +122,11 @@ A `` can show and hide multiple elements.
 
 :::
 ```vue
+
   
-
+
 ```
 
-
-
 ## 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 da73b72e..cc321091 100644
--- a/packages/docs/components/dropdown.md
+++ b/packages/docs/components/dropdown.md
@@ -65,7 +65,7 @@ And with `` elements:
 The best part is you can do this with any button variant, too:
 
 ::: demo
-