diff --git a/lerna.json b/lerna.json index 194343e3..5ceaf54d 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0", + "version": "5.1.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index b8c9328f..f038380e 100644 --- a/package.json +++ b/package.json @@ -22,17 +22,17 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.4.0", - "@typescript-eslint/parser": "^7.4.0", + "@typescript-eslint/eslint-plugin": "^7.11.0", + "@typescript-eslint/parser": "^7.11.0", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", "eslint": "8.57.0", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-vue": "^9.24.0", + "eslint-plugin-vue": "^9.26.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-unicorn": "^51.0.1", - "lerna": "^8.1.2", + "lerna": "^8.1.3", "npm-run-all": "^4.1.5", "prettier": "^3.2.5" } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index f4134e45..2b94d01b 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.0.0", + "version": "5.1.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -41,25 +41,25 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0", + "@coreui/coreui": "^5.0.2", "@popperjs/core": "^2.11.8" }, "devDependencies": { - "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-commonjs": "^25.0.8", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", "@types/jest": "^29.5.12", - "@vue/test-utils": "^2.4.5", + "@vue/test-utils": "^2.4.6", "@vue/vue3-jest": "29.2.6", "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.13.2", + "rollup": "^4.18.0", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.1.2", - "typescript": "^5.4.3", - "vue": "^3.4.21", - "vue-types": "^5.1.1" + "ts-jest": "^29.1.4", + "typescript": "^5.4.5", + "vue": "^3.4.27", + "vue-types": "^5.1.2" }, "peerDependencies": { "vue": "^3.2.21" diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index 97ef4fe5..32fe1ea0 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -3,10 +3,10 @@ import type { Placement } from '@popperjs/core' import { usePopper } from '../../composables' import type { Triggers } from '../../types' -import { isRTL } from '../../utils' +import { getNextActiveElement, isRTL } from '../../utils' import type { Alignments } from './types' -import { getNextActiveElement, getPlacement } from './utils' +import { getPlacement } from './utils' const CDropdown = defineComponent({ name: 'CDropdown', @@ -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/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/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index a39aea63..3690fa48 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' -import { usePopper } from '../../composables' +import { useUniqueId, usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' -import { getRTLPlacement, getUID } from '../../utils' +import { getRTLPlacement } from '../../utils' const CPopover = defineComponent({ name: 'CPopover', @@ -119,6 +119,7 @@ const CPopover = defineComponent({ const popoverRef = ref() const uID = ref() const visible = ref(props.visible) + const { getUID } = useUniqueId('popover') const { initPopper, destroyPopper } = usePopper() const delay = @@ -149,7 +150,7 @@ const CPopover = defineComponent({ } onMounted(() => { - uID.value = getUID('popover') + uID.value = getUID() }) const handleEnter = (el: RendererElement, done: () => void) => { diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts new file mode 100644 index 00000000..05ce3fe4 --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTab.ts @@ -0,0 +1,45 @@ +import { defineComponent, h, inject, Ref } from 'vue' + +const CTab = defineComponent({ + name: 'CTab', + props: { + /** + * Item key. + */ + itemKey: { + type: [Number, String], + required: true, + }, + }, + setup(props, { slots }) { + const activeItemKey = inject('activeItemKey') as Ref + const id = inject('id') as Ref + 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.value}`, + role: 'tab', + tabindex: isActive() ? 0 : -1, + type: 'button', + 'aria-controls': `${props.itemKey}-tab-panel-${id.value}`, + 'aria-selected': isActive(), + onClick: () => setActiveItemKey(props.itemKey), + onFocus: () => setActiveItemKey(props.itemKey), + }, + slots.default && slots.default(), + ) + }, +}) + +export { CTab } diff --git a/packages/coreui-vue/src/components/tabs/CTabList.ts b/packages/coreui-vue/src/components/tabs/CTabList.ts new file mode 100644 index 00000000..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..a4d23e7d --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts @@ -0,0 +1,129 @@ +import { + defineComponent, + h, + inject, + ref, + Ref, + RendererElement, + Transition, + vShow, + watch, + withDirectives, +} from 'vue' + +import { executeAfterTransition } from '../../utils/transition' + +const CTabPanel = defineComponent({ + name: 'CTabPanel', + props: { + /** + * Item key. + */ + itemKey: { + type: [Number, String], + required: true, + }, + /** + * Enable fade in and fade out transition. + */ + transition: { + type: Boolean, + default: true, + }, + /** + * Toggle the visibility of component. + */ + visible: { + type: Boolean, + default: false, + }, + }, + emits: [ + /** + * Callback fired when the component requests to be hidden. + */ + 'hide', + /** + * Callback fired when the component requests to be shown. + */ + 'show', + ], + setup(props, { slots, emit }) { + const activeItemKey = inject('activeItemKey') as Ref + const id = inject('id') as Ref + + 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.value}`, + role: 'tabpanel', + 'aria-labelledby': `${props.itemKey}-tab-${id.value}`, + 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..112decfe --- /dev/null +++ b/packages/coreui-vue/src/components/tabs/CTabs.ts @@ -0,0 +1,45 @@ +import { defineComponent, h, provide, ref, watch } from 'vue' +import { useUniqueId } from '../../composables' + +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 { getUID } = useUniqueId() + const uID = ref(getUID()) + const activeItemKey = ref(props.activeItemKey) + const setActiveItemKey = (key: string | number) => { + activeItemKey.value = key + } + + watch( + () => props.activeItemKey, + (value) => { + activeItemKey.value = value + emit('change', value) + }, + ) + + provide('activeItemKey', activeItemKey) + provide('id', uID) + provide('setActiveItemKey', setActiveItemKey) + + return () => h('div', { class: 'tabs' }, slots.default && slots.default()) + }, +}) + +export { CTabs } diff --git a/packages/coreui-vue/src/components/tabs/index.ts b/packages/coreui-vue/src/components/tabs/index.ts index 997480a5..7c848b03 100644 --- a/packages/coreui-vue/src/components/tabs/index.ts +++ b/packages/coreui-vue/src/components/tabs/index.ts @@ -1,12 +1,20 @@ import { App } from 'vue' +import { CTab } from './CTab' import { CTabContent } from './CTabContent' +import { CTabList } from './CTabList' import { CTabPane } from './CTabPane' +import { CTabPanel } from './CTabPanel' +import { CTabs } from './CTabs' const CTabsPlugin = { install: (app: App): void => { + app.component(CTab.name as string, CTab) app.component(CTabContent.name as string, CTabContent) + app.component(CTabList.name as string, CTabList) app.component(CTabPane.name as string, CTabPane) + app.component(CTabPanel.name as string, CTabPanel) + app.component(CTabs.name as string, CTabs) }, } -export { CTabsPlugin, CTabContent, CTabPane } +export { CTabsPlugin, CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs } diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 8ee54061..c982b3c8 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' -import { usePopper } from '../../composables' +import { useUniqueId, usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' -import { getRTLPlacement, getUID } from '../../utils' +import { getRTLPlacement } from '../../utils' const CTooltip = defineComponent({ name: 'CTooltip', @@ -115,6 +115,7 @@ const CTooltip = defineComponent({ const tooltipRef = ref() const uID = ref() const visible = ref(props.visible) + const { getUID } = useUniqueId('popover') const { initPopper, destroyPopper } = usePopper() const delay = @@ -145,7 +146,7 @@ const CTooltip = defineComponent({ } onMounted(() => { - uID.value = getUID('tooltip') + uID.value = getUID() }) const handleEnter = (el: RendererElement, done: () => void) => { diff --git a/packages/coreui-vue/src/composables/index.ts b/packages/coreui-vue/src/composables/index.ts index 4cee4c15..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..95810c31 --- /dev/null +++ b/packages/coreui-vue/src/composables/useUniqueId.ts @@ -0,0 +1,18 @@ +import { ref } from 'vue' + +export const useUniqueId = (prefix: string = '') => { + const ids = ref([]) + + 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/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/.vuepress/client.ts b/packages/docs/.vuepress/client.ts index b410c0a2..0ae21634 100644 --- a/packages/docs/.vuepress/client.ts +++ b/packages/docs/.vuepress/client.ts @@ -1,4 +1,5 @@ import { defineClientConfig } from '@vuepress/client' + import { CIcon } from '@coreui/icons-vue' import CChartPlugin from '@coreui/vue-chartjs' import CoreuiVue from '@coreui/vue/src/' diff --git a/packages/docs/.vuepress/config.ts b/packages/docs/.vuepress/config.ts index 4c55aee9..764793ab 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({ class: 'anchor-link', - placement: 'after' - }) - }, - code: { - lineNumbers: false, + placement: 'after', + }), }, }, 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 95% rename from packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue rename to packages/docs/.vuepress/src/client/components/Sidebar.vue index 6ad736e2..d05ff18f 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue +++ b/packages/docs/.vuepress/src/client/components/Sidebar.vue @@ -1,3 +1,10 @@ + + - - diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts b/packages/docs/.vuepress/src/client/components/SidebarNav.ts similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts rename to packages/docs/.vuepress/src/client/components/SidebarNav.ts diff --git a/packages/docs/.vuepress/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 99% rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts rename to packages/docs/.vuepress/src/client/composables/useSidebarItems.ts index 0cf89962..d68d9dad 100755 --- a/packages/docs/.vuepress/theme-coreui/src/client/composables/useSidebarItems.ts +++ b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts @@ -1,7 +1,6 @@ import { usePageData, usePageFrontmatter } from '@vuepress/client' import type { PageHeader } from '@vuepress/client' import { - isArray, isPlainObject, isString, resolveLocalePath, @@ -70,7 +69,7 @@ export const resolveSidebarItems = ( return resolveAutoSidebarItems(sidebarDepth) } - if (isArray(sidebarConfig)) { + if (Array.isArray(sidebarConfig)) { return resolveArraySidebarItems(sidebarConfig, sidebarDepth) } diff --git a/packages/docs/.vuepress/theme-coreui/src/client/composables/useThemeData.ts b/packages/docs/.vuepress/src/client/composables/useThemeData.ts similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/composables/useThemeData.ts rename to packages/docs/.vuepress/src/client/composables/useThemeData.ts diff --git a/packages/docs/.vuepress/theme-coreui/src/client/config.ts b/packages/docs/.vuepress/src/client/config.ts similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/config.ts rename to packages/docs/.vuepress/src/client/config.ts diff --git a/packages/docs/.vuepress/theme-coreui/src/client/index.ts b/packages/docs/.vuepress/src/client/index.ts similarity index 100% rename from packages/docs/.vuepress/theme-coreui/src/client/index.ts rename to packages/docs/.vuepress/src/client/index.ts diff --git a/packages/docs/.vuepress/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 95% 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..aee50619 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; @@ -374,19 +391,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/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md
new file mode 100644
index 00000000..ed8dc7b0
--- /dev/null
+++ b/packages/docs/api/tabs/CTab.api.md
@@ -0,0 +1,13 @@
+### CTab
+
+```jsx
+import { CTab } from '@coreui/vue'
+// or
+import CTab from '@coreui/vue/src/components/tabs/CTab'
+```
+
+#### Props
+
+| Prop name    | Description | Type           | Values | Default |
+| ------------ | ----------- | -------------- | ------ | ------- |
+| **item-key** | Item key.   | number\|string | -      | -       |
diff --git a/packages/docs/api/tabs/CTabList.api.md b/packages/docs/api/tabs/CTabList.api.md
new file mode 100644
index 00000000..68b9ca46
--- /dev/null
+++ b/packages/docs/api/tabs/CTabList.api.md
@@ -0,0 +1,14 @@
+### CTabList
+
+```jsx
+import { CTabList } from '@coreui/vue'
+// or
+import CTabList from '@coreui/vue/src/components/tabs/CTabList'
+```
+
+#### Props
+
+| Prop name   | Description                           | Type   | Values                                                   | Default |
+| ----------- | ------------------------------------- | ------ | -------------------------------------------------------- | ------- |
+| **layout**  | Specify a layout type for component.  | string | `'fill'`, `'justified'`                                  | -       |
+| **variant** | Set the nav variant to tabs or pills. | string | `'pills'`, `'tabs'`, `'underline'`, `'underline-border'` | -       |
diff --git a/packages/docs/api/tabs/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/components/alert.md b/packages/docs/components/alert.md
index 8575ad96..7a757599 100644
--- a/packages/docs/components/alert.md
+++ b/packages/docs/components/alert.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Alert Component
+name: Alert
 description: Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
 other_frameworks: alert
 ---
diff --git a/packages/docs/components/chart.md b/packages/docs/components/chart.md
index 181f6635..d10a26d2 100644
--- a/packages/docs/components/chart.md
+++ b/packages/docs/components/chart.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Chart.js Component
+name: Chart.js
 description: Vue wrapper for Chart.js 3.0, the most popular charting library.
 ---
 
diff --git a/packages/docs/components/placeholder.md b/packages/docs/components/placeholder.md
index 658ca503..a18b0153 100644
--- a/packages/docs/components/placeholder.md
+++ b/packages/docs/components/placeholder.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Placeholder Component
+name: Placeholder
 description: Use loading vue placeholders for your components or pages to indicate something may still be loading.
 other_frameworks: placeholder
 ---
diff --git a/packages/docs/components/sidebar.md b/packages/docs/components/sidebar.md
index 1f32c9c6..b59d1f54 100644
--- a/packages/docs/components/sidebar.md
+++ b/packages/docs/components/sidebar.md
@@ -1,5 +1,6 @@
 ---
 title: Vue Sidebar Component
+name: Sidebar
 description: Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
 other_frameworks: sidebar
 ---
diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md
index 8da4e027..a7c06623 100644
--- a/packages/docs/components/tabs.md
+++ b/packages/docs/components/tabs.md
@@ -1,112 +1,489 @@
 ---
-title: CTabs
-description: 
-activeKey: 1
+title: Vue Tabs Components
+name: Tabs
+description: The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
+since: 5.1.0
 ---
 
-## Examples
-
-{{ $page.activeKey }}
-
-
-
-          
-            
-              Active
-            
-          
-          
-            
-              Link
-            
-          
-          
-            
-              Link
-            
-          
-        
-        
-          
-            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-            aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-            helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-            banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-            Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-          
-          
-            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-            Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-            artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-            organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-            anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-            accusamus tattooed echo park.
-          
-          
-            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-            organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-            pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-            pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-            etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-            craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-          
-        
+## Example
 
+The basic Vue tabs example uses the `variant="tabs"` props to generate a tabbed interface.
 
+::: demo
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
 ```vue
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+
+## Available styles
+
+Change the style of ``'s component with modifiers and utilities. Mix and match as needed, or build your own.
+
+### Unstyled
 
-        
-          
-            
-              Active
-            
-          
-          
-            
-              Link
-            
-          
-          
-            
-              Link
-            
-          
-        
-        
-          
-            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-            aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-            helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
-            banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
-            Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-          
-          
-            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-            Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
-            artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
-            enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
-            organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
-            yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
-            anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
-            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
-            accusamus tattooed echo park.
-          
-          
-            Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
-            organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
-            pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
-            hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
-            pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
-            etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
-            craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
-          
-        
+If you don’t provide the `variant` prop, the component will default to a basic style.
 
+::: demo
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
+```vue
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
 ```
 
+### Pills
+
+Take that same code, but use `variant="pills"` instead:
+
+::: demo
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
+```vue
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+::: demo
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
+```vue
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+::: demo
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
+```vue
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+### Fill and justify
+
+Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+::: demo
+
+  
+    Home
+    Profile tab with longer content
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
+```vue
+
+  
+    Home
+    Profile tab with longer content
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
+
+::: demo
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+:::
+```vue
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+## Accessibility
+
+Dynamic tabbed interfaces, as described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+
+### WAI-ARIA Roles
+
+- The element that serves as the container for the set of tabs has the role `tablist`.
+- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
+- Each element that contains the content panel for a tab has the role `tabpanel`.
+- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
+- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
+- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
+- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
+
+Our Vue Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:
+
+```jsx
+
+  
+    Home
+    Profile
+    Contact
+    Disabled
+  
+  
+    
+      Home tab content
+    
+    
+      Profile tab content
+    
+    
+      Contact tab content
+    
+    
+      Disabled tab content
+    
+  
+
+```
+
+This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your ``'s and ``'s.
+
+### Keyboard Interaction
+
+**When focus enters the tab list:**
+
+Tab: It places focus on the active `tab` element.
+
+**When focus is on a tab element:**
+
+Tab: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
+
+Left Arrow: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
+
+Right Arrow: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
+
+Home: Moves focus to the first tab.
+
+End: Moves focus to the last tab.
+
+## Customizing
+
+### CSS variables
+
+Vue tabs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+
+
+On the `.nav-tabs` modifier class:
+
+
+
+On the `.nav-pills` modifier class:
+
+
+
+On the `.nav-underline` modifier class:
+
+
+
+On the `.nav-underline-border` modifier class:
+
+
+
+#### How to use CSS variables
+
+```jsx
+const vars = { 
+  '--my-css-var': 10,
+  '--my-another-css-var': "red" 
+}
+return ...
+```
+
+### SASS variables
+
+
+
+## API
 
-## Additional content
\ No newline at end of file
+!!!include(./api/tabs/CTab.api.md)!!!
+!!!include(./api/tabs/CTabContent.api.md)!!!
+!!!include(./api/tabs/CTabList.api.md)!!!
+!!!include(./api/tabs/CTabPanel.api.md)!!!
+!!!include(./api/tabs/CTabs.api.md)!!!
\ No newline at end of file
diff --git a/packages/docs/getting-started/introduction.md b/packages/docs/getting-started/introduction.md
index 369de935..405a039e 100644
--- a/packages/docs/getting-started/introduction.md
+++ b/packages/docs/getting-started/introduction.md
@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: Introduction
 name: Introduction
 description: CoreUI for Vue.js is UI Component library written in TypeScript, and ready for your next Vue.js project. Learn how to include CoreUI for Vue.js in your project.
 menu: Getting started
@@ -9,36 +9,74 @@ menu: Getting started
 
 ### Npm
 
+
+  
+    CoreUI
+    CoreUI PRO
+  
+  
+    
+    
 ```bash
 npm install @coreui/vue @coreui/coreui
 ```
-
-If you use CoreUI PRO version.
+
+    
 
 ```bash
 npm install @coreui/vue-pro @coreui/coreui-pro
 ```
+
+  
+
+
 
 ### Yarn
 
+
+  
+    CoreUI
+    CoreUI PRO
+  
+  
+    
+    
 ```bash
 yarn add @coreui/vue @coreui/coreui
 ```
-
-If you use CoreUI PRO version.
+
+    
 
 ```bash
 yarn add @coreui/vue-pro @coreui/coreui-pro
 ```
+
+  
+
 
 ## Using components
 
-```ts
+
+  
+    CoreUI
+    CoreUI PRO
+  
+  
+    
+    
+```js
 import { CAlert } from '@coreui/vue';
+```
+
+    
 
-// CoreUI PRO version
+```js
 import { CAlert } from '@coreui/vue-pro';
 ```
+
+  
+
+
 
 ## Stylesheets
 
@@ -48,12 +86,26 @@ Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS
 
 ###### Basic usage
 
+
+  
+    CoreUI
+    CoreUI PRO
+  
+  
+    
+    
 ```js
 import '@coreui/coreui/dist/css/coreui.min.css'
+```
+
+    
 
-// CoreUI PRO version
+```js
 import '@coreui/coreui-pro/dist/css/coreui.min.css'
 ```
+
+  
+
 
 ### Bootstrap CSS files
 
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 95f61218..1fc7b75b 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,25 +1,36 @@
 {
   "name": "@coreui/vue-docs",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "scripts": {
     "api": "vue-docgen -c build/docgen.config.js",
     "dev": "vuepress dev --clean-cache",
-    "build": "vuepress build"
+    "build": "vuepress build --debug"
   },
   "license": "MIT",
   "devDependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.0",
+    "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-vue": "^2.0.0",
     "@coreui/utils": "^2.0.2",
     "@coreui/vue-chartjs": "^3.0.0",
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
-    "@vuepress/plugin-register-components": "2.0.0-rc.0",
-    "@vuepress/plugin-toc": "2.0.0-rc.0",
+    "@vuepress/bundler-vite": "2.0.0-rc.12",
+    "@vuepress/bundler-webpack": "2.0.0-rc.12",
+    "@vuepress/plugin-active-header-links": "2.0.0-rc.31",
+    "@vuepress/plugin-git": "2.0.0-rc.31",
+    "@vuepress/plugin-markdown-container": "2.0.0-rc.30",
+    "@vuepress/plugin-prismjs": "2.0.0-rc.32",
+    "@vuepress/plugin-theme-data": "2.0.0-rc.31",
+    "@vuepress/plugin-register-components": "2.0.0-rc.31",
+    "@vuepress/plugin-toc": "2.0.0-rc.31",
+    "@vuepress/shared": "2.0.0-rc.12",
+    "@vuepress/utils": "2.0.0-rc.12",
+    "markdown-it-anchor": "^9.0.1",
     "markdown-it-include": "^2.0.0",
+    "sass": "^1.77.2",
     "vue-docgen-cli": "^4.79.0",
-    "vuepress": "2.0.0-rc.0"
+    "vuepress": "2.0.0-rc.12"
   }
 }