diff --git a/README.md b/README.md index 3eec02ea..f4dc59ca 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0-rc.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0-rc.3.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 49a8b937..2a068bcd 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 2139943d..9173efda 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": "^7.1.1", - "@typescript-eslint/parser": "^7.1.1", + "@typescript-eslint/eslint-plugin": "^7.3.1", + "@typescript-eslint/parser": "^7.3.1", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", "eslint": "8.57.0", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-vue": "^9.22.0", + "eslint-plugin-vue": "^9.23.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-unicorn": "^51.0.1", "lerna": "^8.1.2", diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index e30b2abe..474a16e6 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -41,24 +41,24 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0-rc.2", + "@coreui/coreui": "^5.0.0-rc.3", "@popperjs/core": "^2.11.8" }, "devDependencies": { "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-node-resolve": "^15.2.3", - "@rollup/plugin-typescript": "^11.1.5", - "@types/jest": "^29.5.11", - "@vue/test-utils": "^2.4.3", + "@rollup/plugin-typescript": "^11.1.6", + "@types/jest": "^29.5.12", + "@vue/test-utils": "^2.4.5", "@vue/vue3-jest": "29.2.6", "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.9.2", + "rollup": "^4.13.0", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.1.1", - "typescript": "^5.3.3", - "vue": "^3.4.3", + "ts-jest": "^29.1.2", + "typescript": "^5.4.3", + "vue": "^3.4.21", "vue-types": "^5.1.1" }, "peerDependencies": { diff --git a/packages/coreui-vue/src/components/accordion/index.ts b/packages/coreui-vue/src/components/accordion/index.ts index ee2326db..0d3d51dd 100644 --- a/packages/coreui-vue/src/components/accordion/index.ts +++ b/packages/coreui-vue/src/components/accordion/index.ts @@ -7,11 +7,11 @@ import { CAccordionItem } from './CAccordionItem' const CAccordionPlugin = { install: (app: App): void => { - app.component(CAccordion.name, CAccordion) - app.component(CAccordionBody.name, CAccordionBody) - app.component(CAccordionButton.name, CAccordionButton) - app.component(CAccordionHeader.name, CAccordionHeader) - app.component(CAccordionItem.name, CAccordionItem) + app.component(CAccordion.name as string, CAccordion) + app.component(CAccordionBody.name as string, CAccordionBody) + app.component(CAccordionButton.name as string, CAccordionButton) + app.component(CAccordionHeader.name as string, CAccordionHeader) + app.component(CAccordionItem.name as string, CAccordionItem) }, } diff --git a/packages/coreui-vue/src/components/alert/index.ts b/packages/coreui-vue/src/components/alert/index.ts index c8f7b404..d3fadac4 100644 --- a/packages/coreui-vue/src/components/alert/index.ts +++ b/packages/coreui-vue/src/components/alert/index.ts @@ -5,9 +5,9 @@ import { CAlertLink } from './CAlertLink' const CAlertPlugin = { install: (app: App): void => { - app.component(CAlert.name, CAlert) - app.component(CAlertHeading.name, CAlertHeading) - app.component(CAlertLink.name, CAlertLink) + app.component(CAlert.name as string, CAlert) + app.component(CAlertHeading.name as string, CAlertHeading) + app.component(CAlertLink.name as string, CAlertLink) }, } diff --git a/packages/coreui-vue/src/components/avatar/index.ts b/packages/coreui-vue/src/components/avatar/index.ts index 650fb4e6..479ab9f4 100644 --- a/packages/coreui-vue/src/components/avatar/index.ts +++ b/packages/coreui-vue/src/components/avatar/index.ts @@ -3,7 +3,7 @@ import { CAvatar } from './CAvatar' const CAvatarPlugin = { install: (app: App): void => { - app.component(CAvatar.name, CAvatar) + app.component(CAvatar.name as string, CAvatar) }, } diff --git a/packages/coreui-vue/src/components/backdrop/index.ts b/packages/coreui-vue/src/components/backdrop/index.ts index 7202b8fd..440292ba 100644 --- a/packages/coreui-vue/src/components/backdrop/index.ts +++ b/packages/coreui-vue/src/components/backdrop/index.ts @@ -3,7 +3,7 @@ import { CBackdrop } from './CBackdrop' const CBackdropPlugin = { install: (app: App): void => { - app.component(CBackdrop.name, CBackdrop) + app.component(CBackdrop.name as string, CBackdrop) }, } diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts index 18480ba4..65e5936c 100644 --- a/packages/coreui-vue/src/components/badge/CBadge.ts +++ b/packages/coreui-vue/src/components/badge/CBadge.ts @@ -5,12 +5,6 @@ import { Color, Shape, TextColor } from '../../props' const CBadge = defineComponent({ name: 'CBadge', props: { - /** - * Sets the color context of the component to one of CoreUI’s themed colors. - * - * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' - */ - color: Color, /** * Component used for the root node. Either a string to use a HTML element or a component. */ @@ -18,6 +12,12 @@ const CBadge = defineComponent({ type: String, default: 'span', }, + /** + * Sets the color context of the component to one of CoreUI’s themed colors. + * + * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' + */ + color: Color, /** * Position badge in one of the corners of a link or button. * @@ -46,6 +46,13 @@ const CBadge = defineComponent({ return value === 'sm' }, }, + /** + * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. + * + * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' + * @since 5.0.0-rc.3 + */ + textBgColor: Color, /** * Sets the text color of the component to one of CoreUI’s themed colors. * @@ -61,7 +68,7 @@ const CBadge = defineComponent({ class: [ 'badge', { - [`text-bg-${props.color}`]: props.color, + [`bg-${props.color}`]: props.color, 'position-absolute translate-middle': props.position, 'top-0': props.position && props.position.includes('top'), 'top-100': props.position && props.position.includes('bottom'), @@ -69,6 +76,7 @@ const CBadge = defineComponent({ 'start-0': props.position && props.position.includes('start'), [`badge-${props.size}`]: props.size, [`text-${props.textColor}`]: props.textColor, + [`text-bg-${props.textBgColor}`]: props.textBgColor, }, props.shape, ], diff --git a/packages/coreui-vue/src/components/badge/index.ts b/packages/coreui-vue/src/components/badge/index.ts index 3bd6f86a..9a2e47a3 100644 --- a/packages/coreui-vue/src/components/badge/index.ts +++ b/packages/coreui-vue/src/components/badge/index.ts @@ -3,7 +3,7 @@ import { CBadge } from './CBadge' const CBadgePlugin = { install: (app: App): void => { - app.component(CBadge.name, CBadge) + app.component(CBadge.name as string, CBadge) }, } diff --git a/packages/coreui-vue/src/components/breadcrumb/index.ts b/packages/coreui-vue/src/components/breadcrumb/index.ts index 90b2b6f1..b7bad130 100644 --- a/packages/coreui-vue/src/components/breadcrumb/index.ts +++ b/packages/coreui-vue/src/components/breadcrumb/index.ts @@ -4,8 +4,8 @@ import { CBreadcrumb } from './CBreadcrumb' const CBreadcrumbPlugin = { install: (app: App): void => { - app.component(CBreadcrumb.name, CBreadcrumb) - app.component(CBreadcrumbItem.name, CBreadcrumbItem) + app.component(CBreadcrumb.name as string, CBreadcrumb) + app.component(CBreadcrumbItem.name as string, CBreadcrumbItem) }, } diff --git a/packages/coreui-vue/src/components/button-group/index.ts b/packages/coreui-vue/src/components/button-group/index.ts index ed8c71c5..f038168b 100644 --- a/packages/coreui-vue/src/components/button-group/index.ts +++ b/packages/coreui-vue/src/components/button-group/index.ts @@ -4,8 +4,8 @@ import { CButtonGroup } from './CButtonGroup' const CButtonGroupPlugin = { install: (app: App): void => { - app.component(CButtonToolbar.name, CButtonToolbar) - app.component(CButtonGroup.name, CButtonGroup) + app.component(CButtonToolbar.name as string, CButtonToolbar) + app.component(CButtonGroup.name as string, CButtonGroup) }, } diff --git a/packages/coreui-vue/src/components/button/index.ts b/packages/coreui-vue/src/components/button/index.ts index 8a2531c0..679616e0 100644 --- a/packages/coreui-vue/src/components/button/index.ts +++ b/packages/coreui-vue/src/components/button/index.ts @@ -3,7 +3,7 @@ import { CButton } from './CButton' const CButtonPlugin = { install: (app: App): void => { - app.component(CButton.name, CButton) + app.component(CButton.name as string, CButton) }, } diff --git a/packages/coreui-vue/src/components/callout/index.ts b/packages/coreui-vue/src/components/callout/index.ts index 1fe788de..e0baf185 100644 --- a/packages/coreui-vue/src/components/callout/index.ts +++ b/packages/coreui-vue/src/components/callout/index.ts @@ -3,7 +3,7 @@ import { CCallout } from './CCallout' const CCalloutPlugin = { install: (app: App): void => { - app.component(CCallout.name, CCallout) + app.component(CCallout.name as string, CCallout) }, } diff --git a/packages/coreui-vue/src/components/card/CCard.ts b/packages/coreui-vue/src/components/card/CCard.ts index 34e0531a..e63631fb 100644 --- a/packages/coreui-vue/src/components/card/CCard.ts +++ b/packages/coreui-vue/src/components/card/CCard.ts @@ -11,6 +11,13 @@ const CCard = defineComponent({ * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' */ color: Color, + /** + * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. + * + * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' + * @since 5.0.0-rc.3 + */ + textBgColor: Color, /** * Sets the text color context of the component to one of CoreUI’s themed colors. * @@ -28,6 +35,7 @@ const CCard = defineComponent({ { [`bg-${props.color}`]: props.color, [`text-${props.textColor}`]: props.textColor, + [`text-bg-${props.textBgColor}`]: props.textBgColor, }, ], }, diff --git a/packages/coreui-vue/src/components/card/index.ts b/packages/coreui-vue/src/components/card/index.ts index ef61b81a..cad0a6ca 100644 --- a/packages/coreui-vue/src/components/card/index.ts +++ b/packages/coreui-vue/src/components/card/index.ts @@ -13,17 +13,17 @@ import { CCardTitle } from './CCardTitle' const CCardPlugin = { install: (app: App): void => { - app.component(CCard.name, CCard) - app.component(CCardBody.name, CCardBody) - app.component(CCardFooter.name, CCardFooter) - app.component(CCardGroup.name, CCardGroup) - app.component(CCardHeader.name, CCardHeader) - app.component(CCardImage.name, CCardImage) - app.component(CCardImageOverlay.name, CCardImageOverlay) - app.component(CCardLink.name, CCardLink) - app.component(CCardSubtitle.name, CCardSubtitle) - app.component(CCardText.name, CCardText) - app.component(CCardTitle.name, CCardTitle) + app.component(CCard.name as string, CCard) + app.component(CCardBody.name as string, CCardBody) + app.component(CCardFooter.name as string, CCardFooter) + app.component(CCardGroup.name as string, CCardGroup) + app.component(CCardHeader.name as string, CCardHeader) + app.component(CCardImage.name as string, CCardImage) + app.component(CCardImageOverlay.name as string, CCardImageOverlay) + app.component(CCardLink.name as string, CCardLink) + app.component(CCardSubtitle.name as string, CCardSubtitle) + app.component(CCardText.name as string, CCardText) + app.component(CCardTitle.name as string, CCardTitle) }, } diff --git a/packages/coreui-vue/src/components/carousel/index.ts b/packages/coreui-vue/src/components/carousel/index.ts index 68c66fa5..59566ee8 100644 --- a/packages/coreui-vue/src/components/carousel/index.ts +++ b/packages/coreui-vue/src/components/carousel/index.ts @@ -5,9 +5,9 @@ import { CCarouselItem } from './CCarouselItem' const CCarouselPlugin = { install: (app: App): void => { - app.component(CCarousel.name, CCarousel) - app.component(CCarouselCaption.name, CCarouselCaption) - app.component(CCarouselItem.name, CCarouselItem) + app.component(CCarousel.name as string, CCarousel) + app.component(CCarouselCaption.name as string, CCarouselCaption) + app.component(CCarouselItem.name as string, CCarouselItem) }, } diff --git a/packages/coreui-vue/src/components/close-button/index.ts b/packages/coreui-vue/src/components/close-button/index.ts index 7c19c164..7445eb8f 100644 --- a/packages/coreui-vue/src/components/close-button/index.ts +++ b/packages/coreui-vue/src/components/close-button/index.ts @@ -3,7 +3,7 @@ import { CCloseButton } from './CCloseButton' const CCloseButtonPlugin = { install: (app: App): void => { - app.component(CCloseButton.name, CCloseButton) + app.component(CCloseButton.name as string, CCloseButton) }, } diff --git a/packages/coreui-vue/src/components/collapse/index.ts b/packages/coreui-vue/src/components/collapse/index.ts index c13fa246..2c6ccd7c 100644 --- a/packages/coreui-vue/src/components/collapse/index.ts +++ b/packages/coreui-vue/src/components/collapse/index.ts @@ -3,7 +3,7 @@ import { CCollapse } from './CCollapse' const CCollapsePlugin = { install: (app: App): void => { - app.component(CCollapse.name, CCollapse) + app.component(CCollapse.name as string, CCollapse) }, } diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts index 44bc6660..48df4843 100644 --- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts +++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts @@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({ /** * An HTML element or function that returns a single element, with `document.body` as the default. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/conditional-teleport/index.ts b/packages/coreui-vue/src/components/conditional-teleport/index.ts index 249949b4..538edf16 100644 --- a/packages/coreui-vue/src/components/conditional-teleport/index.ts +++ b/packages/coreui-vue/src/components/conditional-teleport/index.ts @@ -3,7 +3,7 @@ import { CConditionalTeleport } from './CConditionalTeleport' const CConditionalTeleportPlugin = { install: (app: App): void => { - app.component(CConditionalTeleport.name, CConditionalTeleport) + app.component(CConditionalTeleport.name as string, CConditionalTeleport) }, } diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index dc6ca125..8f835633 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -62,7 +62,7 @@ const CDropdown = defineComponent({ /** * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ container: { type: [Object, String] as PropType HTMLElement) | string>, @@ -115,7 +115,7 @@ const CDropdown = defineComponent({ /** * Generates dropdown menu using Teleport. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ teleport: { type: Boolean, diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index 6f348894..c64d4511 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({ /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ navLink: { type: Boolean, @@ -176,8 +176,8 @@ const CDropdownToggle = defineComponent({ CButton, { ...togglerProps.value, + as: props.as, color: props.color, - component: props.as, disabled: props.disabled, shape: props.shape, size: props.size, diff --git a/packages/coreui-vue/src/components/dropdown/index.ts b/packages/coreui-vue/src/components/dropdown/index.ts index 3bec8afd..aabcfeb8 100644 --- a/packages/coreui-vue/src/components/dropdown/index.ts +++ b/packages/coreui-vue/src/components/dropdown/index.ts @@ -8,12 +8,12 @@ import { CDropdownToggle } from './CDropdownToggle' const CDropdownPlugin = { install: (app: App): void => { - app.component(CDropdown.name, CDropdown) - app.component(CDropdownItem.name, CDropdownItem) - app.component(CDropdownHeader.name, CDropdownHeader) - app.component(CDropdownDivider.name, CDropdownDivider) - app.component(CDropdownMenu.name, CDropdownMenu) - app.component(CDropdownToggle.name, CDropdownToggle) + app.component(CDropdown.name as string, CDropdown) + app.component(CDropdownItem.name as string, CDropdownItem) + app.component(CDropdownHeader.name as string, CDropdownHeader) + app.component(CDropdownDivider.name as string, CDropdownDivider) + app.component(CDropdownMenu.name as string, CDropdownMenu) + app.component(CDropdownToggle.name as string, CDropdownToggle) }, } diff --git a/packages/coreui-vue/src/components/footer/index.ts b/packages/coreui-vue/src/components/footer/index.ts index 3f64755a..8bd4edd4 100644 --- a/packages/coreui-vue/src/components/footer/index.ts +++ b/packages/coreui-vue/src/components/footer/index.ts @@ -3,7 +3,7 @@ import { CFooter } from './CFooter' const CFooterPlugin = { install: (app: App): void => { - app.component(CFooter.name, CFooter) + app.component(CFooter.name as string, CFooter) }, } diff --git a/packages/coreui-vue/src/components/form/index.ts b/packages/coreui-vue/src/components/form/index.ts index 583df8d7..6fa6fb5c 100644 --- a/packages/coreui-vue/src/components/form/index.ts +++ b/packages/coreui-vue/src/components/form/index.ts @@ -1,7 +1,6 @@ import { App } from 'vue' import { CForm } from './CForm' import { CFormCheck } from './CFormCheck' -// import { CFormControl } from './CFormControl' import { CFormFeedback } from './CFormFeedback' import { CFormFloating } from './CFormFloating' import { CFormInput } from './CFormInput' @@ -16,20 +15,19 @@ import { CInputGroupText } from './CInputGroupText' const CFormPlugin = { install: (app: App): void => { - app.component(CForm.name, CForm) - app.component(CFormCheck.name, CFormCheck) - // app.component(CFormControl.name, CFormControl) - app.component(CFormFeedback.name, CFormFeedback) - app.component(CFormFloating.name, CFormFloating) - app.component(CFormInput.name, CFormInput) - app.component(CFormLabel.name, CFormLabel) - app.component(CFormRange.name, CFormRange) - app.component(CFormSelect.name, CFormSelect) - app.component(CFormSwitch.name, CFormSwitch) - app.component(CFormText.name, CFormText) - app.component(CFormTextarea.name, CFormTextarea) - app.component(CInputGroup.name, CInputGroup) - app.component(CInputGroupText.name, CInputGroupText) + app.component(CForm.name as string, CForm) + app.component(CFormCheck.name as string, CFormCheck) + app.component(CFormFeedback.name as string, CFormFeedback) + app.component(CFormFloating.name as string, CFormFloating) + app.component(CFormInput.name as string, CFormInput) + app.component(CFormLabel.name as string, CFormLabel) + app.component(CFormRange.name as string, CFormRange) + app.component(CFormSelect.name as string, CFormSelect) + app.component(CFormSwitch.name as string, CFormSwitch) + app.component(CFormText.name as string, CFormText) + app.component(CFormTextarea.name as string, CFormTextarea) + app.component(CInputGroup.name as string, CInputGroup) + app.component(CInputGroupText.name as string, CInputGroupText) }, } @@ -37,7 +35,6 @@ export { CFormPlugin, CForm, CFormCheck, - // CFormControl, CFormFeedback, CFormFloating, CFormInput, diff --git a/packages/coreui-vue/src/components/grid/index.ts b/packages/coreui-vue/src/components/grid/index.ts index 1af418a2..785efaac 100644 --- a/packages/coreui-vue/src/components/grid/index.ts +++ b/packages/coreui-vue/src/components/grid/index.ts @@ -5,9 +5,9 @@ import { CRow } from './CRow' const CGridPlugin = { install: (app: App): void => { - app.component(CCol.name, CCol) - app.component(CContainer.name, CContainer) - app.component(CRow.name, CRow) + app.component(CCol.name as string, CCol) + app.component(CContainer.name as string, CContainer) + app.component(CRow.name as string, CRow) }, } export { CGridPlugin, CCol, CContainer, CRow } diff --git a/packages/coreui-vue/src/components/header/index.ts b/packages/coreui-vue/src/components/header/index.ts index 3b8c7ddd..85c25975 100644 --- a/packages/coreui-vue/src/components/header/index.ts +++ b/packages/coreui-vue/src/components/header/index.ts @@ -8,12 +8,12 @@ import { CHeaderToggler } from './CHeaderToggler' const CHeaderPlugin = { install: (app: App): void => { - app.component(CHeader.name, CHeader) - app.component(CHeaderBrand.name, CHeaderBrand) - app.component(CHeaderDivider.name, CHeaderDivider) - app.component(CHeaderNav.name, CHeaderNav) - app.component(CHeaderText.name, CHeaderText) - app.component(CHeaderToggler.name, CHeaderToggler) + app.component(CHeader.name as string, CHeader) + app.component(CHeaderBrand.name as string, CHeaderBrand) + app.component(CHeaderDivider.name as string, CHeaderDivider) + app.component(CHeaderNav.name as string, CHeaderNav) + app.component(CHeaderText.name as string, CHeaderText) + app.component(CHeaderToggler.name as string, CHeaderToggler) }, } diff --git a/packages/coreui-vue/src/components/image/index.ts b/packages/coreui-vue/src/components/image/index.ts index 072142f4..cd4c69ae 100644 --- a/packages/coreui-vue/src/components/image/index.ts +++ b/packages/coreui-vue/src/components/image/index.ts @@ -3,7 +3,7 @@ import { CImage } from './CImage' const CImagePlugin = { install: (app: App): void => { - app.component(CImage.name, CImage) + app.component(CImage.name as string, CImage) }, } diff --git a/packages/coreui-vue/src/components/link/index.ts b/packages/coreui-vue/src/components/link/index.ts index 4e45e441..04be72dd 100644 --- a/packages/coreui-vue/src/components/link/index.ts +++ b/packages/coreui-vue/src/components/link/index.ts @@ -3,7 +3,7 @@ import { CLink } from './CLink' const CCLinkPlugin = { install: (app: App): void => { - app.component(CLink.name, CLink) + app.component(CLink.name as string, CLink) }, } diff --git a/packages/coreui-vue/src/components/list-group/index.ts b/packages/coreui-vue/src/components/list-group/index.ts index 3aaafb5b..d969a028 100644 --- a/packages/coreui-vue/src/components/list-group/index.ts +++ b/packages/coreui-vue/src/components/list-group/index.ts @@ -4,8 +4,8 @@ import { CListGroupItem } from './CListGroupItem' const CListGroupPlugin = { install: (app: App): void => { - app.component(CListGroup.name, CListGroup) - app.component(CListGroupItem.name, CListGroupItem) + app.component(CListGroup.name as string, CListGroup) + app.component(CListGroupItem.name as string, CListGroupItem) }, } diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts index 1ee36c53..1c5c12e4 100644 --- a/packages/coreui-vue/src/components/modal/CModal.ts +++ b/packages/coreui-vue/src/components/modal/CModal.ts @@ -54,7 +54,7 @@ const CModal = defineComponent({ /** * Puts the focus on the modal when shown. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ focus: { type: Boolean, diff --git a/packages/coreui-vue/src/components/modal/index.ts b/packages/coreui-vue/src/components/modal/index.ts index 7e1c8e6b..4ebad336 100644 --- a/packages/coreui-vue/src/components/modal/index.ts +++ b/packages/coreui-vue/src/components/modal/index.ts @@ -7,11 +7,11 @@ import { CModalTitle } from './CModalTitle' const CModalPlugin = { install: (app: App): void => { - app.component(CModal.name, CModal) - app.component(CModalBody.name, CModalBody) - app.component(CModalFooter.name, CModalFooter) - app.component(CModalHeader.name, CModalHeader) - app.component(CModalTitle.name, CModalTitle) + app.component(CModal.name as string, CModal) + app.component(CModalBody.name as string, CModalBody) + app.component(CModalFooter.name as string, CModalFooter) + app.component(CModalHeader.name as string, CModalHeader) + app.component(CModalTitle.name as string, CModalTitle) }, } diff --git a/packages/coreui-vue/src/components/nav/CNavLink.ts b/packages/coreui-vue/src/components/nav/CNavLink.ts index d2df89bb..63c2af94 100644 --- a/packages/coreui-vue/src/components/nav/CNavLink.ts +++ b/packages/coreui-vue/src/components/nav/CNavLink.ts @@ -30,9 +30,9 @@ const CNavLink = defineComponent({ h( CLink, { - class: 'nav-link', + as: props.as, active: props.active, - component: props.as, + class: 'nav-link', disabled: props.disabled, href: props.href, }, diff --git a/packages/coreui-vue/src/components/nav/index.ts b/packages/coreui-vue/src/components/nav/index.ts index d8796b1e..d38a6cfd 100644 --- a/packages/coreui-vue/src/components/nav/index.ts +++ b/packages/coreui-vue/src/components/nav/index.ts @@ -8,12 +8,12 @@ import { CNavTitle } from './CNavTitle' const CNavPlugin = { install: (app: App): void => { - app.component(CNav.name, CNav) - app.component(CNavGroup.name, CNavGroup) - app.component(CNavGroupItems.name, CNavGroupItems) - app.component(CNavItem.name, CNavItem) - app.component(CNavLink.name, CNavLink) - app.component(CNavTitle.name, CNavTitle) + app.component(CNav.name as string, CNav) + app.component(CNavGroup.name as string, CNavGroup) + app.component(CNavGroupItems.name as string, CNavGroupItems) + app.component(CNavItem.name as string, CNavItem) + app.component(CNavLink.name as string, CNavLink) + app.component(CNavTitle.name as string, CNavTitle) }, } diff --git a/packages/coreui-vue/src/components/navbar/index.ts b/packages/coreui-vue/src/components/navbar/index.ts index b857b0f9..c466c871 100644 --- a/packages/coreui-vue/src/components/navbar/index.ts +++ b/packages/coreui-vue/src/components/navbar/index.ts @@ -7,11 +7,11 @@ import { CNavbarToggler } from './CNavbarToggler' const CNavbarPlugin = { install: (app: App): void => { - app.component(CNavbar.name, CNavbar) - app.component(CNavbarBrand.name, CNavbarBrand) - app.component(CNavbarNav.name, CNavbarNav) - app.component(CNavbarText.name, CNavbarText) - app.component(CNavbarToggler.name, CNavbarToggler) + app.component(CNavbar.name as string, CNavbar) + app.component(CNavbarBrand.name as string, CNavbarBrand) + app.component(CNavbarNav.name as string, CNavbarNav) + app.component(CNavbarText.name as string, CNavbarText) + app.component(CNavbarToggler.name as string, CNavbarToggler) }, } diff --git a/packages/coreui-vue/src/components/offcanvas/index.ts b/packages/coreui-vue/src/components/offcanvas/index.ts index cad1d0d3..28572037 100644 --- a/packages/coreui-vue/src/components/offcanvas/index.ts +++ b/packages/coreui-vue/src/components/offcanvas/index.ts @@ -6,10 +6,10 @@ import { COffcanvasTitle } from './COffcanvasTitle' const COffcanvasPlugin = { install: (app: App): void => { - app.component(COffcanvas.name, COffcanvas) - app.component(COffcanvasBody.name, COffcanvasBody) - app.component(COffcanvasHeader.name, COffcanvasHeader) - app.component(COffcanvasTitle.name, COffcanvasTitle) + app.component(COffcanvas.name as string, COffcanvas) + app.component(COffcanvasBody.name as string, COffcanvasBody) + app.component(COffcanvasHeader.name as string, COffcanvasHeader) + app.component(COffcanvasTitle.name as string, COffcanvasTitle) }, } diff --git a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts index c997c061..c4085a9a 100644 --- a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts +++ b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts @@ -41,8 +41,8 @@ const CPaginationItem = defineComponent({ ? h( CLink, { + as: component, class: ['page-link'], - component: component, href: props.href, }, { diff --git a/packages/coreui-vue/src/components/pagination/index.ts b/packages/coreui-vue/src/components/pagination/index.ts index 307d0534..8c7d5e7c 100644 --- a/packages/coreui-vue/src/components/pagination/index.ts +++ b/packages/coreui-vue/src/components/pagination/index.ts @@ -4,8 +4,8 @@ import { CPaginationItem } from './CPaginationItem' const CPaginationPlugin = { install: (app: App): void => { - app.component(CPagination.name, CPagination) - app.component(CPaginationItem.name, CPaginationItem) + app.component(CPagination.name as string, CPagination) + app.component(CPaginationItem.name as string, CPaginationItem) }, } diff --git a/packages/coreui-vue/src/components/placeholder/index.ts b/packages/coreui-vue/src/components/placeholder/index.ts index 39369fc1..87038824 100644 --- a/packages/coreui-vue/src/components/placeholder/index.ts +++ b/packages/coreui-vue/src/components/placeholder/index.ts @@ -3,7 +3,7 @@ import { CPlaceholder } from './CPlaceholder' const CPlaceholderPlugin = { install: (app: App): void => { - app.component(CPlaceholder.name, CPlaceholder) + app.component(CPlaceholder.name as string, CPlaceholder) }, } diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index b472b9d2..908b0efb 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -23,7 +23,7 @@ const CPopover = defineComponent({ /** * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/popover/index.ts b/packages/coreui-vue/src/components/popover/index.ts index 58eaee32..261dae00 100644 --- a/packages/coreui-vue/src/components/popover/index.ts +++ b/packages/coreui-vue/src/components/popover/index.ts @@ -3,7 +3,7 @@ import { CPopover } from './CPopover' const CPopoverPlugin = { install: (app: App): void => { - app.component(CPopover.name, CPopover) + app.component(CPopover.name as string, CPopover) }, } diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts index 26cf43eb..95b0c532 100644 --- a/packages/coreui-vue/src/components/progress/CProgress.ts +++ b/packages/coreui-vue/src/components/progress/CProgress.ts @@ -23,7 +23,7 @@ const CProgress = defineComponent({ /** * A string of all className you want applied to the component. * - * @since 5.0.0-rc.2 + * @since 5.0.0-rc.3 */ progressBarClassName: String, /** diff --git a/packages/coreui-vue/src/components/progress/index.ts b/packages/coreui-vue/src/components/progress/index.ts index 3d16c4f2..ae6fabfc 100644 --- a/packages/coreui-vue/src/components/progress/index.ts +++ b/packages/coreui-vue/src/components/progress/index.ts @@ -5,9 +5,9 @@ import { CProgressStacked } from './CProgressStacked' const CProgressPlugin = { install: (app: App): void => { - app.component(CProgress.name, CProgress) - app.component(CProgressBar.name, CProgressBar) - app.component(CProgressStacked.name, CProgressStacked) + app.component(CProgress.name as string, CProgress) + app.component(CProgressBar.name as string, CProgressBar) + app.component(CProgressStacked.name as string, CProgressStacked) }, } diff --git a/packages/coreui-vue/src/components/sidebar/index.ts b/packages/coreui-vue/src/components/sidebar/index.ts index ec0e1826..11dd0095 100644 --- a/packages/coreui-vue/src/components/sidebar/index.ts +++ b/packages/coreui-vue/src/components/sidebar/index.ts @@ -8,12 +8,12 @@ import { CSidebarToggler } from './CSidebarToggler' const CSidebarPlugin = { install: (app: App): void => { - app.component(CSidebar.name, CSidebar) - app.component(CSidebarBrand.name, CSidebarBrand) - app.component(CSidebarFooter.name, CSidebarFooter) - app.component(CSidebarHeader.name, CSidebarHeader) - app.component(CSidebarNav.name, CSidebarNav) - app.component(CSidebarToggler.name, CSidebarToggler) + app.component(CSidebar.name as string, CSidebar) + app.component(CSidebarBrand.name as string, CSidebarBrand) + app.component(CSidebarFooter.name as string, CSidebarFooter) + app.component(CSidebarHeader.name as string, CSidebarHeader) + app.component(CSidebarNav.name as string, CSidebarNav) + app.component(CSidebarToggler.name as string, CSidebarToggler) }, } diff --git a/packages/coreui-vue/src/components/spinner/index.ts b/packages/coreui-vue/src/components/spinner/index.ts index f1b76dda..8bcffb6d 100644 --- a/packages/coreui-vue/src/components/spinner/index.ts +++ b/packages/coreui-vue/src/components/spinner/index.ts @@ -3,7 +3,7 @@ import { CSpinner } from './CSpinner' const CSpinnerPlugin = { install: (app: App): void => { - app.component(CSpinner.name, CSpinner) + app.component(CSpinner.name as string, CSpinner) }, } diff --git a/packages/coreui-vue/src/components/table/index.ts b/packages/coreui-vue/src/components/table/index.ts index 9bdba307..96b44727 100644 --- a/packages/coreui-vue/src/components/table/index.ts +++ b/packages/coreui-vue/src/components/table/index.ts @@ -10,14 +10,14 @@ import { CTableRow } from './CTableRow' const CTablePlugin = { install: (app: App): void => { - app.component(CTable.name, CTable) - app.component(CTableBody.name, CTableBody) - app.component(CTableCaption.name, CTableCaption) - app.component(CTableDataCell.name, CTableDataCell) - app.component(CTableFoot.name, CTableFoot) - app.component(CTableHead.name, CTableHead) - app.component(CTableHeaderCell.name, CTableHeaderCell) - app.component(CTableRow.name, CTableRow) + app.component(CTable.name as string, CTable) + app.component(CTableBody.name as string, CTableBody) + app.component(CTableCaption.name as string, CTableCaption) + app.component(CTableDataCell.name as string, CTableDataCell) + app.component(CTableFoot.name as string, CTableFoot) + app.component(CTableHead.name as string, CTableHead) + app.component(CTableHeaderCell.name as string, CTableHeaderCell) + app.component(CTableRow.name as string, CTableRow) }, } diff --git a/packages/coreui-vue/src/components/tabs/index.ts b/packages/coreui-vue/src/components/tabs/index.ts index 47f3846a..997480a5 100644 --- a/packages/coreui-vue/src/components/tabs/index.ts +++ b/packages/coreui-vue/src/components/tabs/index.ts @@ -4,8 +4,8 @@ import { CTabPane } from './CTabPane' const CTabsPlugin = { install: (app: App): void => { - app.component(CTabContent.name, CTabContent) - app.component(CTabPane.name, CTabPane) + app.component(CTabContent.name as string, CTabContent) + app.component(CTabPane.name as string, CTabPane) }, } diff --git a/packages/coreui-vue/src/components/toast/index.ts b/packages/coreui-vue/src/components/toast/index.ts index 4e2ac38d..bf297589 100644 --- a/packages/coreui-vue/src/components/toast/index.ts +++ b/packages/coreui-vue/src/components/toast/index.ts @@ -7,11 +7,11 @@ import { CToastHeader } from './CToastHeader' const CToastPlugin = { install: (app: App): void => { - app.component(CToast.name, CToast) - app.component(CToastBody.name, CToastBody) - app.component(CToastClose.name, CToastClose) - app.component(CToaster.name, CToaster) - app.component(CToastHeader.name, CToastHeader) + app.component(CToast.name as string, CToast) + app.component(CToastBody.name as string, CToastBody) + app.component(CToastClose.name as string, CToastClose) + app.component(CToaster.name as string, CToaster) + app.component(CToastHeader.name as string, CToastHeader) }, } diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 06607284..2182345d 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -23,7 +23,7 @@ const CTooltip = defineComponent({ /** * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/tooltip/index.ts b/packages/coreui-vue/src/components/tooltip/index.ts index 88b3e802..cde4a9a3 100644 --- a/packages/coreui-vue/src/components/tooltip/index.ts +++ b/packages/coreui-vue/src/components/tooltip/index.ts @@ -3,7 +3,7 @@ import { CTooltip } from './CTooltip' const CTooltipPlugin = { install: (app: App): void => { - app.component(CTooltip.name, CTooltip) + app.component(CTooltip.name as string, CTooltip) }, } diff --git a/packages/coreui-vue/src/components/widgets/index.ts b/packages/coreui-vue/src/components/widgets/index.ts index 2e6cdb18..38a6f825 100644 --- a/packages/coreui-vue/src/components/widgets/index.ts +++ b/packages/coreui-vue/src/components/widgets/index.ts @@ -8,12 +8,12 @@ import { CWidgetStatsF } from './CWidgetStatsF' const CWidgetsStatsPlugin = { install: (app: App): void => { - app.component(CWidgetStatsA.name, CWidgetStatsA) - app.component(CWidgetStatsB.name, CWidgetStatsB) - app.component(CWidgetStatsC.name, CWidgetStatsC) - app.component(CWidgetStatsD.name, CWidgetStatsD) - app.component(CWidgetStatsE.name, CWidgetStatsE) - app.component(CWidgetStatsF.name, CWidgetStatsF) + app.component(CWidgetStatsA.name as string, CWidgetStatsA) + app.component(CWidgetStatsB.name as string, CWidgetStatsB) + app.component(CWidgetStatsC.name as string, CWidgetStatsC) + app.component(CWidgetStatsD.name as string, CWidgetStatsD) + app.component(CWidgetStatsE.name as string, CWidgetStatsE) + app.component(CWidgetStatsF.name as string, CWidgetStatsF) }, } diff --git a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue index 183935cf..ca3f0165 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue +++ b/packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue @@ -28,7 +28,7 @@ @@ -37,7 +37,7 @@ @@ -46,7 +46,7 @@ @@ -62,7 +62,7 @@ @@ -79,7 +79,7 @@ Get CoreUI PRO diff --git a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss index 10462b61..6561eaee 100644 --- a/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss +++ b/packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss @@ -73,6 +73,11 @@ margin-left: .5rem; } + // Badges + > .badge + .badge { + margin-left: .25rem; + } + // Buttons > .btn, > .btn-group { diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md index b3c3e1ff..4ee02b81 100644 --- a/packages/docs/api/badge/CBadge.api.md +++ b/packages/docs/api/badge/CBadge.api.md @@ -8,11 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge' #### Props -| Prop name | Description | Type | Values | Default | -| -------------- | --------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | -| **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | -| **size** | Size the component small. | string | `'sm'` | - | -| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | +| Prop name | Description | Type | Values | Default | +| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - | +| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | +| **size** | Size the component small. | string | `'sm'` | - | +| **text-bg-color**
5.0.0-rc.3+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | diff --git a/packages/docs/api/card/CCard.api.md b/packages/docs/api/card/CCard.api.md index facd1fe6..6f6734f7 100644 --- a/packages/docs/api/card/CCard.api.md +++ b/packages/docs/api/card/CCard.api.md @@ -8,7 +8,8 @@ import CCard from '@coreui/vue/src/components/card/CCard' #### Props -| Prop name | Description | Type | Values | Default | -| -------------- | ------------------------------------------------------------------------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | +| Prop name | Description | Type | Values | Default | +| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **text-bg-color**
5.0.0-rc.3+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md index ece97230..743b1d0a 100644 --- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md +++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md @@ -10,5 +10,5 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor | Prop name | Description | Type | Values | Default | | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- | -| **container**
v5.0.0-rc.2+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **container**
v5.0.0-rc.3+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | | **teleport** | Render some children into a different part of the DOM | boolean | - | true | diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md index 02de108d..8a5b1759 100644 --- a/packages/docs/api/dropdown/CDropdown.api.md +++ b/packages/docs/api/dropdown/CDropdown.api.md @@ -12,14 +12,14 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown' | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - | | **auto-close** | Configure the auto close behavior of the dropdown:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true | -| **container**
v5.0.0-rc.2+
| Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **container**
v5.0.0-rc.3+
| Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | | **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - | | **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - | | **disabled** | Toggle the disabled state for the component. | boolean | - | - | | **offset**
4.9.0+
| Offset of the dropdown menu relative to its target. | array | - | [0, 2] | | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' | | **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true | -| **teleport**
v5.0.0-rc.2+
| Generates dropdown menu using Teleport. | boolean | - | false | +| **teleport**
v5.0.0-rc.3+
| Generates dropdown menu using Teleport. | boolean | - | false | | **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' | | **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' | | **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - | diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md index 5d6c2b55..5c10b591 100644 --- a/packages/docs/api/dropdown/CDropdownToggle.api.md +++ b/packages/docs/api/dropdown/CDropdownToggle.api.md @@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle | **caret** | Enables pseudo element caret on toggler. | boolean | - | true | | **custom** | Create a custom toggler which accepts any content. | boolean | - | - | | **disabled** | Toggle the disabled state for the component. | boolean | - | - | -| **nav-link**
v5.0.0-rc.2+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true | +| **nav-link**
v5.0.0-rc.3+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true | | **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | | **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean | - | - | | **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
`@type` 'hover' \| 'focus' \| 'click' | Triggers | - | 'click' | diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md index fec31d16..66efacda 100644 --- a/packages/docs/api/modal/CModal.api.md +++ b/packages/docs/api/modal/CModal.api.md @@ -13,7 +13,7 @@ import CModal from '@coreui/vue/src/components/modal/CModal' | **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' | | **backdrop** | Apply a backdrop on body while offcanvas is open. | boolean\|string | `boolean \| 'static'` | true | | **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - | -| **focus**
v5.0.0-rc.2+
| Puts the focus on the modal when shown. | boolean | - | true | +| **focus**
v5.0.0-rc.3+
| Puts the focus on the modal when shown. | boolean | - | true | | **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - | | **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true | | **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - | diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md index 3bfa8ba6..11cd30e9 100644 --- a/packages/docs/api/popover/CPopover.api.md +++ b/packages/docs/api/popover/CPopover.api.md @@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover' | Prop name | Description | Type | Values | Default | | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- | | **animation**
4.9.0+
| Apply a CSS fade transition to the popover. | boolean | - | true | -| **container**
v5.0.0-rc.2+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **container**
v5.0.0-rc.3+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | | **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | | **delay**
4.9.0+
| The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 | | **fallback-placements**
4.9.0+
| Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] | diff --git a/packages/docs/api/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md index 2f03bcd8..821d6eef 100644 --- a/packages/docs/api/progress/CProgress.api.md +++ b/packages/docs/api/progress/CProgress.api.md @@ -13,7 +13,7 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress' | **animated** | Use to animate the stripes right to left via CSS3 animations. | boolean | - | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | | **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | number | - | - | -| **progress-bar-class-name**
5.0.0-rc.2+
| A string of all className you want applied to the component. | string | - | - | +| **progress-bar-class-name**
5.0.0-rc.3+
| A string of all className you want applied to the component. | string | - | - | | **thin** | Makes progress bar thinner. | boolean | - | - | | **value** | The percent to progress the ProgressBar. | number | - | 0 | | **variant** | Set the progress bar variant to optional striped. | string | `'striped'` | - | diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md index 169db23d..9794c42c 100644 --- a/packages/docs/api/tooltip/CTooltip.api.md +++ b/packages/docs/api/tooltip/CTooltip.api.md @@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip' | Prop name | Description | Type | Values | Default | | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- | | **animation**
4.9.0+
| Apply a CSS fade transition to the tooltip. | boolean | - | true | -| **container**
v5.0.0-rc.2+
| Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **container**
v5.0.0-rc.3+
| Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | | **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | | **delay**
4.9.0+
| The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 | | **fallback-placements**
4.9.0+
| Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] | diff --git a/packages/docs/components/badge.md b/packages/docs/components/badge.md index 5f6a22a0..6d46e501 100644 --- a/packages/docs/components/badge.md +++ b/packages/docs/components/badge.md @@ -145,7 +145,7 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad danger warning info -light +light dark ::: ```vue @@ -154,10 +154,32 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad danger warning info -light +light dark ``` +You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility. + +::: demo +primary +success +danger +warning +info +light +dark +::: +```vue +primary +success +danger +warning +info +light +dark +``` + + ## Pill badges Apply the `shape="rounded-pill"` prop to make badges rounded. @@ -168,7 +190,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded. danger warning info -light +light dark ::: ```vue @@ -177,7 +199,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded. danger warning info -light +light dark ``` diff --git a/packages/docs/components/button.md b/packages/docs/components/button.md index e772d760..0f9a8428 100644 --- a/packages/docs/components/button.md +++ b/packages/docs/components/button.md @@ -47,18 +47,18 @@ The `` component are designed for `