-
-### Gold Sponsors
-
-Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
-
-
-
-### Silver Sponsors
-
-Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
-
-
-
-### Bronze Sponsors
-
-Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile.
-
-
-
-### Backers
-
-Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
-
-
-
-
+CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=vue&src=github-coreui-vue) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
## Copyright and license
-Copyright 2022 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-vue/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..15164bf5
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,76 @@
+import eslint from '@eslint/js'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import eslintPluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import typescriptEslint from 'typescript-eslint'
+
+export default typescriptEslint.config(
+ { ignores: ['**/*.d.ts', '**/coverage', '**/dist', '**/docs'] },
+ {
+ extends: [
+ eslint.configs.recommended,
+ ...typescriptEslint.configs.recommended,
+ ...eslintPluginVue.configs['flat/recommended'],
+ eslintPluginUnicorn.configs['flat/recommended'],
+ ],
+ files: ['packages/**/src/**/*.{js,ts,tsx}'],
+ languageOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ globals: globals.browser,
+ parserOptions: {
+ parser: typescriptEslint.parser,
+ },
+ },
+ rules: {
+ 'no-console': 'off',
+ 'no-debugger': 'off',
+ 'unicorn/filename-case': 'off',
+ 'unicorn/no-array-for-each': 'off',
+ 'unicorn/no-null': 'off',
+ 'unicorn/prefer-dom-node-append': 'off',
+ 'unicorn/prefer-export-from': 'off',
+ 'unicorn/prefer-query-selector': 'off',
+ 'unicorn/prevent-abbreviations': 'off',
+ 'vue/require-default-prop': 'off',
+ },
+ },
+ {
+ files: ['**/*.mjs'],
+ languageOptions: {
+ globals: {
+ ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+ ...globals.node,
+ },
+
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ },
+ },
+ {
+ files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+ languageOptions: {
+ globals: {
+ ...globals.jest,
+ },
+ },
+ },
+ {
+ files: ['packages/docs/build/**'],
+ languageOptions: {
+ globals: {
+ ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+ ...globals.node,
+ },
+
+ ecmaVersion: 5,
+ sourceType: 'commonjs',
+ },
+ rules: {
+ 'no-console': 'off',
+ strict: 'error',
+ },
+ },
+ eslintPluginPrettierRecommended,
+)
diff --git a/lerna.json b/lerna.json
index e3154cd5..6fea4400 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,8 +1,6 @@
{
"npmClient": "yarn",
- "packages": [
- "packages/*"
- ],
- "useWorkspaces": true,
- "version": "4.5.0"
+ "packages": ["packages/*"],
+ "version": "5.4.1",
+ "$schema": "node_modules/lerna/schemas/lerna-schema.json"
}
diff --git a/package.json b/package.json
index 7676447a..9b945921 100644
--- a/package.json
+++ b/package.json
@@ -5,36 +5,33 @@
],
"scripts": {
"charts:build": "lerna run --scope \"@coreui/vue-chartjs\" build --stream",
- "charts:lint": "lerna run --scope \"@coreui/vue-chartjs\" lint --stream",
"charts:test": "lerna run --scope \"@coreui/vue-chartjs\" test --stream",
+ "charts:test:update": "lerna run --scope \"@coreui/vue-chartjs\" test:update --stream",
"docs:api": "lerna run --scope \"@coreui/vue-docs\" api --stream",
"docs:dev": "lerna run --scope \"@coreui/vue-docs\" dev --stream",
"docs:build": "lerna run --scope \"@coreui/vue-docs\" build --stream",
"docs:dist": "lerna run --scope \"@coreui/vue-docs\" dist --stream",
+ "icons:build": "lerna run --scope \"@coreui/icons-vue\" build --stream",
+ "icons:test": "lerna run --scope \"@coreui/icons-vue\" test --stream",
+ "icons:test:update": "lerna run --scope \"@coreui/icons-vue\" test:update --stream",
"lib:build": "lerna run --scope \"@coreui/vue\" build --stream",
- "lib:lint": "lerna run --scope \"@coreui/vue\" lint --stream",
"lib:test": "lerna run --scope \"@coreui/vue\" test --stream",
- "lint": "eslint \"packages/**/src/components/**/*.{js,ts,tsx}\"",
- "test": "jest --coverage",
- "test:clear": "jest --clearCache",
- "test:update": "jest --coverage --updateSnapshot"
+ "lib:test:update": "lerna run --scope \"@coreui/vue\" test:update --stream",
+ "lint": "eslint",
+ "test": "npm-run-all charts:test icons:test lib:test",
+ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
},
"devDependencies": {
- "@types/jest": "^28.1.8",
- "@typescript-eslint/eslint-plugin": "^5.37.0",
- "@typescript-eslint/parser": "^5.37.0",
- "@vue/compiler-sfc": "^3.2.39",
- "@vue/eslint-config-prettier": "^7.0.0",
- "@vue/eslint-config-typescript": "^11.0.1",
- "@vue/vue3-jest": "28.0.1",
- "eslint": "8.23.1",
- "eslint-plugin-prettier": "^4.2.1",
- "eslint-plugin-vue": "^9.5.1",
- "jest": "^28.1.3",
- "jest-canvas-mock": "^2.4.0",
- "jest-environment-jsdom": "^28.1.3",
- "lerna": "^4.0.0",
- "prettier": "^2.7.1",
- "ts-jest": "^28.0.8"
+ "@vue/vue3-jest": "29.2.6",
+ "eslint": "^9.17.0",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-plugin-prettier": "^5.2.1",
+ "eslint-plugin-unicorn": "^56.0.1",
+ "eslint-plugin-vue": "^9.32.0",
+ "globals": "^15.14.0",
+ "lerna": "^8.1.9",
+ "npm-run-all": "^4.1.5",
+ "prettier": "^3.4.2",
+ "typescript-eslint": "^8.19.1"
}
}
diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue
new file mode 160000
index 00000000..009583d5
--- /dev/null
+++ b/packages/coreui-icons-vue
@@ -0,0 +1 @@
+Subproject commit 009583d58f7ea9a2a7bc7a2e62861eba48c0d911
diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs
new file mode 160000
index 00000000..f3b8364d
--- /dev/null
+++ b/packages/coreui-vue-chartjs
@@ -0,0 +1 @@
+Subproject commit f3b8364d04dcd94c273ead1f740e1d792a5fb041
diff --git a/packages/coreui-vue-chartjs/.browserslistrc b/packages/coreui-vue-chartjs/.browserslistrc
deleted file mode 100644
index bd3ad98e..00000000
--- a/packages/coreui-vue-chartjs/.browserslistrc
+++ /dev/null
@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not ie <= 8
\ No newline at end of file
diff --git a/packages/coreui-vue-chartjs/LICENSE b/packages/coreui-vue-chartjs/LICENSE
deleted file mode 100644
index c3f8e99e..00000000
--- a/packages/coreui-vue-chartjs/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 creativeLabs Łukasz Holeczek
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/packages/coreui-vue-chartjs/README.md b/packages/coreui-vue-chartjs/README.md
deleted file mode 100644
index 846140e1..00000000
--- a/packages/coreui-vue-chartjs/README.md
+++ /dev/null
@@ -1,184 +0,0 @@
-
-
- 
-
-
CoreUI Vue.js wrapper for Chart.js
- -
- Explore @coreui/vue-chartjs docs & examples »
-
-
- Report bug
- ·
- Request feature
- ·
- Blog
-
Default slot
"`;
+exports[`Loads and display CAccordion component renders correctly 1`] = `"Default slot
"`;
diff --git a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.ts.snap b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.ts.snap
index 1a1eadbb..30734b2b 100644
--- a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.ts.snap
+++ b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.ts.snap
@@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loads and display CAccordionBody component renders correctly 1`] = `
-"
-
+ "
`;
diff --git a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.ts.snap b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.ts.snap
index 4e3cb967..fb38caae 100644
--- a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.ts.snap
+++ b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.ts.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Loads and display CAccordionButton component renders correctly 1`] = `""`;
+exports[`Loads and display CAccordionButton component renders correctly 1`] = `""`;
diff --git a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap
index 95bad8ef..01863eed 100644
--- a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap
+++ b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.ts.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Loads and display CAccordionHeader component renders correctly 1`] = `""`;
+exports[`Loads and display CAccordionHeader component renders correctly 1`] = `""`;
diff --git a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.ts.snap b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.ts.snap
index 8cfe605f..cead44ef 100644
--- a/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.ts.snap
+++ b/packages/coreui-vue/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.ts.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Loads and display CAccordionItem component renders correctly 1`] = `"
+
Default slot
+"
+
Default slot
Default slot
"`;
+exports[`Loads and display CAccordionItem component renders correctly 1`] = `"Default slot
"`;
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/CAlert.ts b/packages/coreui-vue/src/components/alert/CAlert.ts
index 36398262..117c4ee2 100644
--- a/packages/coreui-vue/src/components/alert/CAlert.ts
+++ b/packages/coreui-vue/src/components/alert/CAlert.ts
@@ -1,7 +1,8 @@
import { defineComponent, h, ref, Transition, watch } from 'vue'
-import { Color } from '../props'
-import { CCloseButton } from '../close-button/CCloseButton'
+import { CCloseButton } from '../close-button'
+
+import { Color } from '../../props'
export const CAlert = defineComponent({
name: 'CAlert',
@@ -15,11 +16,7 @@ export const CAlert = defineComponent({
/**
* Optionally add a close button to alert and allow it to self dismisss.
*/
- dismissible: {
- type: Boolean,
- default: false,
- required: false,
- },
+ dismissible: Boolean,
/**
* Set the alert variant to a solid.
*
@@ -27,8 +24,6 @@ export const CAlert = defineComponent({
*/
variant: {
type: String,
- default: undefined,
- required: false,
validator: (value: string) => {
return value === 'solid'
},
@@ -39,7 +34,6 @@ export const CAlert = defineComponent({
visible: {
type: Boolean,
default: true,
- required: false,
},
},
emits: [
@@ -67,8 +61,6 @@ export const CAlert = defineComponent({
h(
Transition,
{
- name: 'fade',
- duration: 350,
enterFromClass: '',
enterActiveClass: 'fade',
enterToClass: 'fade show',
diff --git a/packages/coreui-vue/src/components/alert/CAlertHeading.ts b/packages/coreui-vue/src/components/alert/CAlertHeading.ts
index dbae5e6e..94ed187c 100644
--- a/packages/coreui-vue/src/components/alert/CAlertHeading.ts
+++ b/packages/coreui-vue/src/components/alert/CAlertHeading.ts
@@ -6,16 +6,15 @@ export const CAlertHeading = defineComponent({
/**
* Component used for the root node. Either a string to use a HTML element or a component.
*/
- component: {
+ as: {
type: String,
default: 'h4',
- required: false,
},
},
setup(props, { slots }) {
return () =>
h(
- props.component,
+ props.as,
{
class: 'alert-heading',
},
diff --git a/packages/coreui-vue/src/components/alert/__tests__/CAlert.spec.ts b/packages/coreui-vue/src/components/alert/__tests__/CAlert.spec.ts
index 810b418c..572cd284 100644
--- a/packages/coreui-vue/src/components/alert/__tests__/CAlert.spec.ts
+++ b/packages/coreui-vue/src/components/alert/__tests__/CAlert.spec.ts
@@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils'
-import { CAlert as Component } from './../../'
+import { CAlert as Component } from '../../'
const ComponentName = 'CAlert'
const wrapper = shallowMount(Component)
diff --git a/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts b/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts
index 628ba7ad..73448f41 100644
--- a/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts
+++ b/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
const customWrapper = mount(Component, {
propsData: {
- component: 'h2',
+ as: 'h2',
},
slots: {
default: 'Default slot',
diff --git a/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlert.spec.ts.snap b/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlert.spec.ts.snap
index 2f25b67b..cbb36d96 100644
--- a/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlert.spec.ts.snap
+++ b/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlert.spec.ts.snap
@@ -1,7 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loads and display CAlert component renders correctly 1`] = `
-
@@ -13,7 +21,14 @@ exports[`Loads and display CAlert component renders correctly 1`] = `
exports[`Loads and display CAlert component renders correctly with slot 1`] = `
Default slot"`;
+exports[`Customize CAlertHeading component renders correctly 1`] = `"
Default slot
"`; -exports[`Loads and display CAlertHeading component renders correctly 1`] = `"Default slot
"`; +exports[`Loads and display CAlertHeading component renders correctly 1`] = `"Default slot
"`; diff --git a/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.ts.snap b/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.ts.snap index 50f9e223..02173479 100644 --- a/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.ts.snap +++ b/packages/coreui-vue/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loads and display CAlertLink component renders correctly 1`] = `"Default slot"`; +exports[`Loads and display CAlertLink component renders correctly 1`] = `"Default slot"`; 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/CAvatar.ts b/packages/coreui-vue/src/components/avatar/CAvatar.ts index c424f40d..d35ee265 100644 --- a/packages/coreui-vue/src/components/avatar/CAvatar.ts +++ b/packages/coreui-vue/src/components/avatar/CAvatar.ts @@ -1,5 +1,6 @@ import { defineComponent, h } from 'vue' -import { Color, Shape, TextColor } from '../props' + +import { Color, Shape, TextColor } from '../../props' const CAvatar = defineComponent({ name: 'CAvatar', @@ -23,8 +24,6 @@ const CAvatar = defineComponent({ */ size: { type: String, - default: undefined, - required: false, validator: (value: string) => { return ['sm', 'md', 'lg', 'xl'].includes(value) }, @@ -32,11 +31,7 @@ const CAvatar = defineComponent({ /** * The src attribute for the img element. */ - src: { - type: String, - default: undefined, - required: false, - }, + src: String, /** * Sets the color context of the status indicator to one of CoreUI’s themed colors. * @@ -44,8 +39,6 @@ const CAvatar = defineComponent({ */ status: { type: String, - default: undefined, - required: false, validator: (value: string) => { return [ 'primary', @@ -62,7 +55,7 @@ const CAvatar = defineComponent({ /** * Sets the text color of the component to one of CoreUI’s themed colors. * - * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse' + * @values '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' */ textColor: TextColor, }, diff --git a/packages/coreui-vue/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.ts.snap b/packages/coreui-vue/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.ts.snap index 4b59877f..5166a5f1 100644 --- a/packages/coreui-vue/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.ts.snap +++ b/packages/coreui-vue/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.ts.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loads and display CAvatar component renders correctly 1`] = ` -"Default slot
+"![](\\"/bazinga\\")
"`;
+exports[`Loads and display CAvatar component renders correctly 2`] = `"
"`;
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/CBackdrop.ts b/packages/coreui-vue/src/components/backdrop/CBackdrop.ts
index 36cc4e11..adea3428 100644
--- a/packages/coreui-vue/src/components/backdrop/CBackdrop.ts
+++ b/packages/coreui-vue/src/components/backdrop/CBackdrop.ts
@@ -1,6 +1,4 @@
-import { defineComponent, h, RendererElement, Transition } from 'vue'
-
-import { executeAfterTransition } from './../../utils/transition'
+import { defineComponent, h, Transition } from 'vue'
const CBackdrop = defineComponent({
name: 'CBackdrop',
@@ -11,39 +9,19 @@ const CBackdrop = defineComponent({
visible: {
type: Boolean,
default: false,
- required: false,
},
},
setup(props) {
- const handleBeforeEnter = (el: RendererElement) => {
- el.classList.remove('d-none')
- }
-
- const handleEnter = (el: RendererElement, done: () => void) => {
- executeAfterTransition(() => done(), el as HTMLElement)
- setTimeout(() => {
- el.style.visibility = 'visible'
- el.classList.add('show')
- }, 1)
- }
-
- const handleLeave = (el: RendererElement, done: () => void) => {
- executeAfterTransition(() => done(), el as HTMLElement)
- el.classList.remove('show')
- }
-
- const handleAfterLeave = (el: RendererElement) => {
- el.classList.add('d-none')
- }
-
return () =>
h(
Transition,
{
- onBeforeEnter: (el) => handleBeforeEnter(el),
- onEnter: (el, done) => handleEnter(el, done),
- onLeave: (el, done) => handleLeave(el, done),
- onAfterLeave: (el) => handleAfterLeave(el),
+ onEnter: (el) => {
+ el.classList.add('show')
+ },
+ onLeave: (el) => {
+ el.classList.remove('show')
+ },
},
() =>
props.visible &&
diff --git a/packages/coreui-vue/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.ts.snap b/packages/coreui-vue/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.ts.snap
index 2d73f2e9..2bf4c264 100644
--- a/packages/coreui-vue/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.ts.snap
+++ b/packages/coreui-vue/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.ts.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loads and display CBackdrop component renders correctly 1`] = `
-"
-
+"
+
"
`;
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 d6194e53..3802015d 100644
--- a/packages/coreui-vue/src/components/badge/CBadge.ts
+++ b/packages/coreui-vue/src/components/badge/CBadge.ts
@@ -1,24 +1,23 @@
import { defineComponent, h } from 'vue'
-import { Color, Shape, TextColor } from '../props'
+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.
*/
- component: {
+ as: {
type: String,
- required: false,
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.
*
@@ -26,8 +25,6 @@ const CBadge = defineComponent({
*/
position: {
type: String,
- default: undefined,
- required: false,
validator: (value: string) => {
return ['top-start', 'top-end', 'bottom-end', 'bottom-start'].includes(value)
},
@@ -45,23 +42,28 @@ const CBadge = defineComponent({
*/
size: {
type: String,
- default: undefined,
- required: false,
validator: (value: string) => {
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
+ */
+ textBgColor: Color,
/**
* Sets the text color of the component to one of CoreUI’s themed colors.
*
- * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+ * @values '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'
*/
textColor: TextColor,
},
setup(props, { slots }) {
return () =>
h(
- props.component,
+ props.as,
{
class: [
'badge',
@@ -74,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/__tests__/CBadge.spec.ts b/packages/coreui-vue/src/components/badge/__tests__/CBadge.spec.ts
index 5d22bd88..4d132901 100644
--- a/packages/coreui-vue/src/components/badge/__tests__/CBadge.spec.ts
+++ b/packages/coreui-vue/src/components/badge/__tests__/CBadge.spec.ts
@@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils'
-import { CBadge as Component } from './../../'
+import { CBadge as Component } from '../../'
const ComponentName = 'CBadge'
const wrapper = shallowMount(Component)
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/CBreadcrumb.ts b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts
index 9e8bcc62..df95f2ff 100644
--- a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts
+++ b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumb.ts
@@ -2,6 +2,7 @@ import { defineComponent, h } from 'vue'
const CBreadcrumb = defineComponent({
name: 'CBreadcrumb',
+ inheritAttrs: false,
setup(_, { slots, attrs }) {
return () =>
h(
diff --git a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts
index 3debd8bc..4b5fa4a6 100644
--- a/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts
+++ b/packages/coreui-vue/src/components/breadcrumb/CBreadcrumbItem.ts
@@ -6,18 +6,11 @@ const CBreadcrumbItem = defineComponent({
/**
* Toggle the active state for the component.
*/
- active: {
- type: Boolean,
- required: false,
- },
+ active: Boolean,
/**
* The `href` attribute for the inner link component.
*/
- href: {
- type: String,
- default: undefined,
- required: false,
- },
+ href: String,
},
setup(props, { slots }) {
diff --git a/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap b/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap
index 6a7933af..2cccad76 100644
--- a/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap
+++ b/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loads and display CBreadcrumb component renders correctly 1`] = `
-"
Default slot
"
`;
-exports[`Loads and display CAvatar component renders correctly 2`] = `"