diff --git a/README.md b/README.md index 31114030..8999a03d 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/lerna.json b/lerna.json index 8e4098d4..a5830df9 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.3.0", + "version": "5.4.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 41fbecce..a8e640de 100644 --- a/package.json +++ b/package.json @@ -22,14 +22,14 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^8.3.0", - "@typescript-eslint/parser": "^8.3.0", + "@typescript-eslint/eslint-plugin": "^8.6.0", + "@typescript-eslint/parser": "^8.6.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.2.1", - "eslint-plugin-vue": "^9.27.0", + "eslint-plugin-vue": "^9.28.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-unicorn": "^55.0.0", "lerna": "^8.1.8", diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue index be8961e2..009583d5 160000 --- a/packages/coreui-icons-vue +++ b/packages/coreui-icons-vue @@ -1 +1 @@ -Subproject commit be8961e2115c0c86a1be72e4d0ea176c69ed4740 +Subproject commit 009583d58f7ea9a2a7bc7a2e62861eba48c0d911 diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs index a3a42cab..f3b8364d 160000 --- a/packages/coreui-vue-chartjs +++ b/packages/coreui-vue-chartjs @@ -1 +1 @@ -Subproject commit a3a42cabd2b34dd1b1b78cbb72d5e6cdc41ba5cd +Subproject commit f3b8364d04dcd94c273ead1f740e1d792a5fb041 diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 1ecdf9ed..32c3cc2a 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-vue.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue` diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 0bd4aee3..f6d14f23 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.3.0", + "version": "5.4.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -48,20 +48,20 @@ "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", - "@types/jest": "^29.5.12", + "@types/jest": "^29.5.13", "@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.21.2", + "rollup": "^4.22.4", "rollup-plugin-vue": "^6.0.0", "ts-jest": "^29.2.5", - "typescript": "^5.5.4", - "vue": "^3.4.38", + "typescript": "^5.6.2", + "vue": "^3.5.8", "vue-types": "^5.1.3" }, "peerDependencies": { - "vue": "^3.2.21" + "vue": "^3.5.0" } } diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts index e4aee290..bdecc2ff 100644 --- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -4,6 +4,15 @@ import { CFormFloating } from './CFormFloating' import { CFormLabel } from './CFormLabel' import { CFormText } from './CFormText' +import type { ComponentProps } from '../../utils/ComponentProps' + +interface CFormControlWrapperProps extends ComponentProps { + floatingLabel?: string + id?: string + label?: string + text?: string +} + const CFormControlWrapper = defineComponent({ name: 'CFormControlWrapper', inheritAttrs: false, @@ -18,7 +27,9 @@ const CFormControlWrapper = defineComponent({ /** * @ignore */ - id: String, + id: { + type: String, + }, /** * Add a caption for a component. * @@ -32,7 +43,7 @@ const CFormControlWrapper = defineComponent({ */ text: String, }, - setup(props, { slots }) { + setup(props: CFormControlWrapperProps, { slots }) { const formControlValidation = () => h( CFormControlValidation, @@ -41,7 +52,6 @@ const CFormControlWrapper = defineComponent({ feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, - floatingLabel: props.floatingLabel, invalid: props.invalid, tooltipFeedback: props.tooltipFeedback, valid: props.valid, diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 68746233..8dbe4eca 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -130,7 +130,9 @@ const CFormInput = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index b3086b60..23bd7b1b 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -119,7 +119,9 @@ const CFormSelect = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index a953991d..42a8a732 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts index 3ed139c7..1774dcba 100644 --- a/packages/coreui-vue/src/components/nav/CNavItem.ts +++ b/packages/coreui-vue/src/components/nav/CNavItem.ts @@ -1,7 +1,12 @@ import { defineComponent, h } from 'vue' - import { CNavLink } from './CNavLink' +import type { ComponentProps } from '../../utils/ComponentProps' + +interface CNavItemProps extends ComponentProps { + as: string +} + const CNavItem = defineComponent({ name: 'CNavItem', props: { @@ -14,12 +19,11 @@ const CNavItem = defineComponent({ default: 'li', }, }, - setup(props, { slots }) { + setup(props: CNavItemProps, { slots }) { return () => h( props.as, { - as: props.component, class: 'nav-item', }, props.href diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 03ade861..300f876a 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -1,8 +1,8 @@ -import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue' +import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue' import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' -import { useUniqueId, usePopper } from '../../composables' +import { usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' import { getRTLPlacement } from '../../utils' @@ -117,10 +117,10 @@ const CPopover = defineComponent({ setup(props, { attrs, slots, emit }) { const togglerRef = ref() const popoverRef = ref() - const uID = ref() const visible = ref(props.visible) - const { getUID } = useUniqueId('popover') + const { initPopper, destroyPopper } = usePopper() + const uniqueId = `popover-${useId()}` const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay @@ -149,10 +149,6 @@ const CPopover = defineComponent({ placement: getRTLPlacement(props.placement, togglerRef.value), } - onMounted(() => { - uID.value = getUID() - }) - const handleEnter = (el: RendererElement, done: () => void) => { emit('show') initPopper(togglerRef.value, popoverRef.value, popperConfig) @@ -212,7 +208,7 @@ const CPopover = defineComponent({ }, attrs.class, ], - id: uID.value, + id: uniqueId, ref: popoverRef, role: 'tooltip', }, @@ -241,7 +237,7 @@ const CPopover = defineComponent({ ), slots.toggler && slots.toggler({ - id: visible.value ? uID.value : null, + id: visible.value ? uniqueId : null, on: { click: (event: Event) => props.trigger.includes('click') && toggleVisible(event, !visible.value), diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts index 05ce3fe4..5eb4c513 100644 --- a/packages/coreui-vue/src/components/tabs/CTab.ts +++ b/packages/coreui-vue/src/components/tabs/CTab.ts @@ -3,6 +3,12 @@ import { defineComponent, h, inject, Ref } from 'vue' const CTab = defineComponent({ name: 'CTab', props: { + /** + * Toggle the disabled state for the component. + * + * @since 5.4.0 + */ + disabled: Boolean, /** * Item key. */ @@ -13,7 +19,7 @@ const CTab = defineComponent({ }, setup(props, { slots }) { const activeItemKey = inject('activeItemKey') as Ref - const id = inject('id') as Ref + const id = inject('id') const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void const isActive = () => props.itemKey === activeItemKey.value @@ -28,12 +34,13 @@ const CTab = defineComponent({ active: isActive(), }, ], - id: `${props.itemKey}-tab-${id.value}`, + id: `${props.itemKey}-tab-${id}`, role: 'tab', tabindex: isActive() ? 0 : -1, type: 'button', - 'aria-controls': `${props.itemKey}-tab-panel-${id.value}`, + 'aria-controls': `${props.itemKey}-tab-panel-${id}`, 'aria-selected': isActive(), + disabled: props.disabled, onClick: () => setActiveItemKey(props.itemKey), onFocus: () => setActiveItemKey(props.itemKey), }, diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts index a4d23e7d..3182e74f 100644 --- a/packages/coreui-vue/src/components/tabs/CTabPanel.ts +++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts @@ -50,8 +50,7 @@ const CTabPanel = defineComponent({ ], setup(props, { slots, emit }) { const activeItemKey = inject('activeItemKey') as Ref - const id = inject('id') as Ref - + const id = inject('id') const tabPaneRef = ref() const firstRender = ref(true) const visible = ref() @@ -112,9 +111,9 @@ const CTabPanel = defineComponent({ show: firstRender.value && visible.value, }, ], - id: `${props.itemKey}-tab-panel-${id.value}`, + id: `${props.itemKey}-tab-panel-${id}`, role: 'tabpanel', - 'aria-labelledby': `${props.itemKey}-tab-${id.value}`, + 'aria-labelledby': `${props.itemKey}-tab-${id}`, tabindex: 0, ref: tabPaneRef, }, diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts index 112decfe..b61908c2 100644 --- a/packages/coreui-vue/src/components/tabs/CTabs.ts +++ b/packages/coreui-vue/src/components/tabs/CTabs.ts @@ -1,5 +1,4 @@ -import { defineComponent, h, provide, ref, watch } from 'vue' -import { useUniqueId } from '../../composables' +import { defineComponent, h, provide, ref, useId, watch } from 'vue' const CTabs = defineComponent({ name: 'CTabs', @@ -19,9 +18,8 @@ const CTabs = defineComponent({ 'change', ], setup(props, { slots, emit }) { - const { getUID } = useUniqueId() - const uID = ref(getUID()) const activeItemKey = ref(props.activeItemKey) + const uniqueId = useId() const setActiveItemKey = (key: string | number) => { activeItemKey.value = key } @@ -35,7 +33,7 @@ const CTabs = defineComponent({ ) provide('activeItemKey', activeItemKey) - provide('id', uID) + provide('id', uniqueId) provide('setActiveItemKey', setActiveItemKey) return () => h('div', { class: 'tabs' }, slots.default && slots.default()) diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index b00e8dd1..a190e323 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -1,6 +1,12 @@ -import { defineComponent, h, inject } from 'vue' +import { defineComponent, h, inject, resolveComponent } from 'vue' import { CCloseButton } from '../close-button/CCloseButton' +import type { ComponentProps } from '../../utils/ComponentProps' + +interface CCloseButtonProps extends ComponentProps { + as?: string +} + const CToastClose = defineComponent({ name: 'CToastClose', props: { @@ -16,7 +22,7 @@ const CToastClose = defineComponent({ */ 'close', ], - setup(props, { slots, emit }) { + setup(props: CCloseButtonProps, { slots, emit }) { // eslint-disable-next-line no-unused-vars const updateVisible = inject('updateVisible') as (visible: boolean) => void const handleClose = () => { @@ -26,7 +32,7 @@ const CToastClose = defineComponent({ return () => props.as ? h( - props.as, + resolveComponent(props.as), { onClick: () => { handleClose() diff --git a/packages/coreui-vue/src/components/toast/CToastHeader.ts b/packages/coreui-vue/src/components/toast/CToastHeader.ts index 74fbc651..3f822da0 100644 --- a/packages/coreui-vue/src/components/toast/CToastHeader.ts +++ b/packages/coreui-vue/src/components/toast/CToastHeader.ts @@ -9,20 +9,11 @@ const CToastHeader = defineComponent({ */ closeButton: Boolean, }, - emits: [ - /** - * Event called after clicking the close button. - */ - 'close', - ], - setup(props, { slots, emit }) { + setup(props, { slots }) { return () => h('div', { class: 'toast-header' }, [ slots.default && slots.default(), - props.closeButton && - h(CToastClose, { - onClose: () => emit('close'), - }), + props.closeButton && h(CToastClose), ]) }, }) diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 02ad416e..6fe15d0e 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -1,8 +1,8 @@ -import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue' +import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue' import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' -import { useUniqueId, usePopper } from '../../composables' +import { usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' import { getRTLPlacement } from '../../utils' @@ -113,10 +113,10 @@ const CTooltip = defineComponent({ setup(props, { attrs, slots, emit }) { const togglerRef = ref() const tooltipRef = ref() - const uID = ref() const visible = ref(props.visible) - const { getUID } = useUniqueId('popover') + const { initPopper, destroyPopper } = usePopper() + const uniqueId = `tooltip-${useId()}` const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay @@ -145,10 +145,6 @@ const CTooltip = defineComponent({ placement: getRTLPlacement(props.placement, togglerRef.value), } - onMounted(() => { - uID.value = getUID() - }) - const handleEnter = (el: RendererElement, done: () => void) => { emit('show') initPopper(togglerRef.value, tooltipRef.value, popperConfig) @@ -208,7 +204,7 @@ const CTooltip = defineComponent({ }, attrs.class, ], - id: uID.value, + id: uniqueId, ref: tooltipRef, role: 'tooltip', }, @@ -229,7 +225,7 @@ const CTooltip = defineComponent({ ), slots.toggler && slots.toggler({ - id: visible.value ? uID.value : null, + id: visible.value ? uniqueId : null, on: { click: (event: Event) => props.trigger.includes('click') && toggleVisible(event, !visible.value), diff --git a/packages/coreui-vue/src/composables/useUniqueId.ts b/packages/coreui-vue/src/composables/useUniqueId.ts index 95810c31..e6f724a9 100644 --- a/packages/coreui-vue/src/composables/useUniqueId.ts +++ b/packages/coreui-vue/src/composables/useUniqueId.ts @@ -7,7 +7,7 @@ export const useUniqueId = (prefix: string = '') => { do { prefix += Math.floor(Math.random() * 1_000_000) } while (ids.value.includes(prefix)) - + ids.value.push(prefix) return prefix } diff --git a/packages/coreui-vue/src/utils/ComponentProps.ts b/packages/coreui-vue/src/utils/ComponentProps.ts new file mode 100644 index 00000000..5bd3991c --- /dev/null +++ b/packages/coreui-vue/src/utils/ComponentProps.ts @@ -0,0 +1,6 @@ +import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue' + +export type ComponentProps = + T extends DefineComponent, any, any> + ? ExtractPublicPropTypes + : never diff --git a/packages/docs/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md index ed8dc7b0..7cdff394 100644 --- a/packages/docs/api/tabs/CTab.api.md +++ b/packages/docs/api/tabs/CTab.api.md @@ -8,6 +8,7 @@ import CTab from '@coreui/vue/src/components/tabs/CTab' #### Props -| Prop name | Description | Type | Values | Default | -| ------------ | ----------- | -------------- | ------ | ------- | -| **item-key** | Item key. | number\|string | - | - | +| Prop name | Description | Type | Values | Default | +| ----------------------------------------------------------- | -------------------------------------------- | -------------- | ------ | ------- | +| **disabled**
5.4.0+
| Toggle the disabled state for the component. | boolean | - | - | +| **item-key** | Item key. | number\|string | - | - | diff --git a/packages/docs/api/toast/CToastHeader.api.md b/packages/docs/api/toast/CToastHeader.api.md index fdd97dc8..a8ff8638 100644 --- a/packages/docs/api/toast/CToastHeader.api.md +++ b/packages/docs/api/toast/CToastHeader.api.md @@ -11,9 +11,3 @@ import CToastHeader from '@coreui/vue/src/components/toast/CToastHeader' | Prop name | Description | Type | Values | Default | | ---------------- | ----------------------------------------------- | ------- | ------ | ------- | | **close-button** | Automatically add a close button to the header. | boolean | - | - | - -#### Events - -| Event name | Description | Properties | -| ---------- | --------------------------------------------- | ---------- | -| **close** | Event called after clicking the close button. | diff --git a/packages/docs/build/docgen.config.js b/packages/docs/build/docgen.config.js index e4c71f24..7d654712 100644 --- a/packages/docs/build/docgen.config.js +++ b/packages/docs/build/docgen.config.js @@ -8,7 +8,8 @@ module.exports = { components: [ '**/[A-Z]*.ts', '!**/[A-Z]*.d.ts', - '!**/[A-Z]*.spec.ts' + '!**/[A-Z]*.spec.ts', + '!**/ComponentProps.ts', ], outDir: 'api', // folder to save components docs in (relative to the current working directry) getDocFileName: (componentPath) => diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md index a7c06623..fcb3dd2a 100644 --- a/packages/docs/components/tabs.md +++ b/packages/docs/components/tabs.md @@ -76,16 +76,16 @@ If you don’t provide the `variant` prop, the component will default to a basic Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -100,16 +100,16 @@ If you don’t provide the `variant` prop, the component will default to a basic Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -129,16 +129,16 @@ Take that same code, but use `variant="pills"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -153,16 +153,16 @@ Take that same code, but use `variant="pills"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -182,16 +182,16 @@ Take that same code, but use `variant="underline"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -206,16 +206,16 @@ Take that same code, but use `variant="underline"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -235,16 +235,16 @@ Take that same code, but use `variant="underline-border"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -259,16 +259,16 @@ Take that same code, but use `variant="underline-border"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -288,16 +288,16 @@ Force your ``'s contents to extend the full available width one of two mo Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -312,16 +312,16 @@ Force your ``'s contents to extend the full available width one of two mo Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -339,16 +339,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -363,16 +363,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -404,16 +404,16 @@ Our Vue Tabs component automatically manages all `role="..."` and `aria-` attrib Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content diff --git a/packages/docs/package.json b/packages/docs/package.json index 0495b5e1..e164bbd8 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "5.3.0", + "version": "5.4.0", "scripts": { "api": "vue-docgen -c build/docgen.config.js", "dev": "vuepress dev --clean-cache", @@ -18,18 +18,18 @@ "@docsearch/js": "^3.6.1", "@vuepress/bundler-vite": "2.0.0-rc.15", "@vuepress/bundler-webpack": "2.0.0-rc.15", - "@vuepress/plugin-active-header-links": "2.0.0-rc.42", - "@vuepress/plugin-git": "2.0.0-rc.42", - "@vuepress/plugin-markdown-container": "2.0.0-rc.42", + "@vuepress/plugin-active-header-links": "2.0.0-rc.47", + "@vuepress/plugin-git": "2.0.0-rc.44", + "@vuepress/plugin-markdown-container": "2.0.0-rc.43", "@vuepress/plugin-prismjs": "2.0.0-rc.37", - "@vuepress/plugin-theme-data": "2.0.0-rc.42", - "@vuepress/plugin-register-components": "2.0.0-rc.42", - "@vuepress/plugin-toc": "2.0.0-rc.42", + "@vuepress/plugin-theme-data": "2.0.0-rc.47", + "@vuepress/plugin-register-components": "2.0.0-rc.44", + "@vuepress/plugin-toc": "2.0.0-rc.47", "@vuepress/shared": "2.0.0-rc.15", "@vuepress/utils": "2.0.0-rc.15", - "markdown-it-anchor": "^9.1.0", + "markdown-it-anchor": "^9.2.0", "markdown-it-include": "^2.0.0", - "sass": "^1.77.8", + "sass": "^1.79.3", "vue-docgen-cli": "^4.79.0", "vuepress": "2.0.0-rc.15" }