diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 1846284b..00000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -/dist/** -/docs/** -.eslintrc.js \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 52772cf5..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,29 +0,0 @@ -module.exports = { - parser: '@typescript-eslint/parser', // Specifies the ESLint parser - parserOptions: { - ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features - sourceType: 'module', // Allows for the use of imports - extraFileExtensions: ['.vue'], - ecmaFeatures: { - jsx: true, - }, - }, - extends: [ - 'eslint:recommended', - 'plugin:vue/vue3-essential', - '@vue/eslint-config-typescript', - '@vue/eslint-config-prettier', - ], - rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - }, - overrides: [ - { - files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'], - env: { - jest: true, - }, - }, - ], -} diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 415ca057..00000000 --- a/.prettierrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - semi: false, - trailingComma: "all", - singleQuote: true, - printWidth: 100, - tabWidth: 2 -}; \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 05197705..00000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,43 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment include: - -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -- The use of sexualized language or imagery and unwelcome sexual attention or advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. - -## Scope - -This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support@coreui.io. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. - -Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at diff --git a/LICENSE b/LICENSE index f19fc729..fbb053e0 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021 creativeLabs Łukasz Holeczek +Copyright (c) 2025 creativeLabs Łukasz Holeczek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index 878a1b56..e6c179ec 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,8 @@ · Request feature · + Roadmap + · Blog

@@ -46,7 +48,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.8.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.7.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` @@ -101,6 +103,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [Vue Accordion](https://coreui.io/vue/docs/components/accordion.html) - [Vue Alert](https://coreui.io/vue/docs/components/alert.html) +- [Vue Autocomplete](https://coreui.io/vue/docs/forms/autocomplete.html) **PRO** - [Vue Avatar](https://coreui.io/vue/docs/components/avatar.html) - [Vue Badge](https://coreui.io/vue/docs/components/badge.html) - [Vue Breadcrumb](https://coreui.io/vue/docs/components/breadcrumb.html) @@ -116,6 +119,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [Vue Date Range Picker](https://coreui.io/vue/docs/forms/date-range-picker.html) **PRO** - [Vue Dropdown](https://coreui.io/vue/docs/components/dropdown.html) - [Vue Floating Labels](https://coreui.io/vue/docs/forms/floating-labels.html) +- [Vue Focus Trap](https://coreui.io/vue/docs/components/focus-trap.html) - [Vue Footer](https://coreui.io/vue/docs/components/footer.html) - [Vue Header](https://coreui.io/vue/docs/components/header.html) - [Vue Image](https://coreui.io/vue/docs/components/image.html) @@ -134,11 +138,14 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [Vue Progress](https://coreui.io/vue/docs/components/progress.html) - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html) - [Vue Range](https://coreui.io/vue/docs/forms/range.html) +- [Vue Range Slider](https://coreui.io/vue/docs/forms/range-slider.html) **PRO** +- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html) - [Vue Select](https://coreui.io/vue/docs/forms/select.html) - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html) - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO** - [Vue Smart Table](https://coreui.io/vue/docs/components/smart-table.html) **PRO** - [Vue Spinner](https://coreui.io/vue/docs/components/spinner.html) +- [Vue Stepper](https://coreui.io/vue/docs/forms/stepper.html) **PRO** - [Vue Switch](https://coreui.io/vue/docs/forms/switch.html) - [Vue Table](https://coreui.io/vue/docs/components/table.html) - [Vue Textarea](https://coreui.io/vue/docs/forms/textarea.html) @@ -148,11 +155,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; ## Status -[![Build Status](https://github.com/coreui/coreui-vue/workflows/JS%20Tests/badge.svg?branch=main)](https://github.com/coreui/coreui-vue/actions?query=workflow%3AJS+Tests+branch%3Amain) [![npm version](https://img.shields.io/npm/v/@coreui/vue)](https://www.npmjs.com/package/@coreui/vue) -[![peerDependencies Status](https://img.shields.io/david/peer/coreui/coreui)](https://david-dm.org/coreui/coreui?type=peer) -[![devDependency Status](https://img.shields.io/david/dev/coreui/coreui)](https://david-dm.org/coreui/coreui?type=dev) -[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui-vue/v4)](https://coveralls.io/github/coreui/coreui-vue?branch=v4) ## Bugs and feature requests @@ -182,10 +185,11 @@ CoreUI supports most popular frameworks. Fully featured, out-of-the-box, templates for your application based on CoreUI. -- [Angular Admin Template](https://coreui.io/angular) -- [Bootstrap Admin Template](https://coreui.io/) -- [React Admin Template](https://coreui.io/react) -- [Vue Admin Template](https://coreui.io/vue) +- [Angular Admin Templates](https://coreui.io/themes-templates/admin-dashboard/angular/) +- [Bootstrap Admin Templates](https://coreui.io/themes-templates/admin-dashboard/bootstrap/) +- [Next.js Admin Templates](https://coreui.io/themes-templates/admin-dashboard/next-js/) +- [React Admin Templates](https://coreui.io/themes-templates/admin-dashboard/react/) +- [Vue Admin Templates](https://coreui.io/themes-templates/admin-dashboard/vue/) ## Contributing @@ -197,9 +201,9 @@ Editor preferences are available in the [editor config](https://github.com/coreu Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. -- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/). - -You can also follow [@core_ui on Twitter](https://twitter.com/core_ui). +- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog). +- Follow [@core_ui on Twitter](https://x.com/core_ui). +- Discuss, ask questions, and more on [the community Discord](https://discord.gg/pQRWe5XdGm). ## Versioning @@ -211,55 +215,23 @@ See [the Releases section of our project](https://github.com/coreui/coreui-vue/r **Łukasz Holeczek** -- -- +* +* **Andrzej Kopański** -- +* -**The CoreUI Team** +**CoreUI Team** -- +* +* +* ## Support CoreUI Development -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/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). - - - -### Platinum Sponsors - -Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website. - - - -### 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 33eb41c9..e456a603 100644 --- a/lerna.json +++ b/lerna.json @@ -1,8 +1,6 @@ { "npmClient": "yarn", - "packages": [ - "packages/*" - ], - "useWorkspaces": true, - "version": "4.8.1" + "packages": ["packages/*"], + "version": "5.7.0", + "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index f5aa38f3..345d3fae 100644 --- a/package.json +++ b/package.json @@ -17,21 +17,21 @@ "lib:build": "lerna run --scope \"@coreui/vue\" build --stream", "lib:test": "lerna run --scope \"@coreui/vue\" test --stream", "lib:test:update": "lerna run --scope \"@coreui/vue\" test:update --stream", - "lint": "eslint \"packages/**/src/**/*.{js,ts,tsx}\"", + "lint": "eslint", "test": "npm-run-all charts:test icons:test lib:test", "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^5.57.0", - "@typescript-eslint/parser": "^5.57.0", - "@vue/eslint-config-prettier": "^7.1.0", - "@vue/eslint-config-typescript": "^11.0.2", - "@vue/vue3-jest": "29.2.3", - "eslint": "8.36.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-vue": "^9.10.0", - "lerna": "^6.6.1", + "@vue/vue3-jest": "29.2.6", + "eslint": "^9.35.0", + "eslint-config-prettier": "^10.1.8", + "eslint-plugin-prettier": "^5.5.4", + "eslint-plugin-unicorn": "^61.0.2", + "eslint-plugin-vue": "^10.4.0", + "globals": "^16.4.0", + "lerna": "^8.2.4", "npm-run-all": "^4.1.5", - "prettier": "^2.8.7" + "prettier": "^3.6.2", + "typescript-eslint": "^8.44.0" } } diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue index 823c1ec9..009583d5 160000 --- a/packages/coreui-icons-vue +++ b/packages/coreui-icons-vue @@ -1 +1 @@ -Subproject commit 823c1ec9e66adfed26e4575657a32479d6cf71bd +Subproject commit 009583d58f7ea9a2a7bc7a2e62861eba48c0d911 diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs index f480fc65..f3b8364d 160000 --- a/packages/coreui-vue-chartjs +++ b/packages/coreui-vue-chartjs @@ -1 +1 @@ -Subproject commit f480fc657431cd33d5267ca6b0791da945dc1d1d +Subproject commit f3b8364d04dcd94c273ead1f740e1d792a5fb041 diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 8293a55c..6237b002 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v4.4.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.7.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` @@ -134,6 +134,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [Vue Progress](https://coreui.io/vue/docs/components/progress.html) - [Vue Radio](https://coreui.io/vue/docs/forms/radio.html) - [Vue Range](https://coreui.io/vue/docs/forms/range.html) +- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html) - [Vue Select](https://coreui.io/vue/docs/forms/select.html) - [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html) - [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO** diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index b937ff4a..f932b6c5 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "4.8.1", + "version": "5.7.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -23,44 +23,45 @@ }, "license": "MIT", "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", - "main": "dist/index.js", - "module": "dist/index.es.js", - "types": "dist/index.d.ts", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "jsnext:main": "dist/esm/index.js", + "types": "dist/esm/index.d.ts", "files": [ "dist/", "src/" ], "scripts": { - "build": "rollup -c --bundleConfigAsCjs", + "build": "npm-run-all clean build-*", + "build-cjs": "rollup --environment ESM:false --config", + "build-esm": "rollup --environment ESM:true --config", + "clean": "cross-env-shell \"rm -rf dist\"", "test": "jest --coverage", "test:clear": "jest --clearCache", "test:update": "jest --coverage --updateSnapshot" }, + "dependencies": { + "@coreui/coreui": "^5.4.3", + "@popperjs/core": "^2.11.8" + }, "devDependencies": { - "@popperjs/core": "^2.11.7", - "@rollup/plugin-commonjs": "^24.0.1", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-typescript": "^11.0.0", - "@types/jest": "^29.5.0", - "@vue/test-utils": "^2.3.2", - "@vue/vue3-jest": "29.2.3", - "jest": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", - "rollup": "^3.20.2", + "@rollup/plugin-commonjs": "^28.0.6", + "@rollup/plugin-node-resolve": "^16.0.1", + "@rollup/plugin-typescript": "^12.1.4", + "@types/jest": "^29.5.14", + "@vue/test-utils": "^2.4.6", + "@vue/vue3-jest": "29.2.6", + "cross-env": "^10.0.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "rollup": "^4.50.2", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.0.5", - "typescript": "^4.9.5", - "vue": "^3.2.47", - "vue-types": "^5.0.2" + "ts-jest": "^29.4.1", + "typescript": "^5.9.2", + "vue": "^3.5.21", + "vue-types": "^6.0.0" }, "peerDependencies": { - "@coreui/coreui": "^4.2.6", - "vue": "^3.2.21" - }, - "standard": { - "ignore": [ - "node_modules/", - "build/" - ] + "vue": "^3.5.0" } } diff --git a/packages/coreui-vue/rollup.config.js b/packages/coreui-vue/rollup.config.js deleted file mode 100644 index c4b5a462..00000000 --- a/packages/coreui-vue/rollup.config.js +++ /dev/null @@ -1,58 +0,0 @@ -import commonjs from '@rollup/plugin-commonjs' -import typescript from '@rollup/plugin-typescript' -import resolve from '@rollup/plugin-node-resolve' -import vue from 'rollup-plugin-vue' -import pkg from './package.json' - -const plugins = [ - resolve({ - dedupe: ['vue'], - extensions: ['.ts', '.json', '.vue'], - }), - typescript({ - exclude: ['**/__tests__/**'], - tsconfig: './tsconfig.json', - }), - commonjs({ - include: ['../../node_modules/**'], - }), -] - -const external = ['vue'] - -export default [ - // ESM build to be used with webpack/rollup. - { - input: 'src/index.ts', - output: { - format: 'es', - file: pkg.module, - exports: 'named', - sourcemap: true, - sourcemapPathTransform: (relativeSourcePath) => { - return relativeSourcePath - .replace('../../node_modules/', '../') - .replace('../packages/coreui-vue', '..') - }, - }, - external, - plugins: [...plugins, vue()], - }, - // SSR build. - { - input: 'src/index.ts', - output: { - format: 'cjs', - file: pkg.main, - exports: 'named', - sourcemap: true, - sourcemapPathTransform: (relativeSourcePath) => { - return relativeSourcePath - .replace('../../node_modules/', '../') - .replace('../packages/coreui-vue', '..') - }, - }, - external, - plugins: [...plugins, vue({ template: { optimizeSSR: true } })], - }, -] diff --git a/packages/coreui-vue/rollup.config.mjs b/packages/coreui-vue/rollup.config.mjs new file mode 100644 index 00000000..c47d4ac0 --- /dev/null +++ b/packages/coreui-vue/rollup.config.mjs @@ -0,0 +1,52 @@ +import commonjs from '@rollup/plugin-commonjs' +import typescript from '@rollup/plugin-typescript' +import resolve from '@rollup/plugin-node-resolve' +import vue from 'rollup-plugin-vue' +import { readFileSync } from 'node:fs' +import { dirname } from 'node:path' + +const pkg = JSON.parse(readFileSync(new URL('package.json', import.meta.url))) + +const DIR_CJS = dirname(pkg.main) +const DIR_ESM = dirname(pkg.module) +const ESM = process.env.ESM === 'true' + +const plugins = [ + resolve({ + dedupe: ['vue'], + extensions: ['.ts', '.json', '.vue'], + }), + typescript({ + exclude: ['**/__tests__/**'], + tsconfig: './tsconfig.json', + compilerOptions: { + declarationDir: ESM ? DIR_ESM : DIR_CJS, + outDir: ESM ? DIR_ESM : DIR_CJS, + }, + }), + commonjs({ + include: ['../../node_modules/**'], + }), + ESM ? vue({ template: { optimizeSSR: true } }) : vue(), +] + +const external = ['@popperjs/core', 'vue'] + +const rollupConfig = { + input: 'src/index.ts', + output: { + dir: ESM ? DIR_ESM : DIR_CJS, + format: ESM ? 'esm' : 'cjs', + exports: 'named', + preserveModules: true, + preserveModulesRoot: 'src', + sourcemap: true, + sourcemapPathTransform: (relativeSourcePath) => { + return relativeSourcePath.replace('../../node_modules/', '../').replace('../src/', 'src/') + }, + }, + external, + plugins, +} + +export default rollupConfig diff --git a/packages/coreui-vue/src/components/accordion/CAccordion.ts b/packages/coreui-vue/src/components/accordion/CAccordion.ts index 1422d40b..639b5af2 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordion.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordion.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, provide, ref } from 'vue' +import { defineComponent, h, provide, ref, watch } from 'vue' const CAccordion = defineComponent({ name: 'CAccordion', @@ -21,6 +21,12 @@ const CAccordion = defineComponent({ const setActiveItemKey = (key: string | number) => { activeItemKey.value = key } + + watch( + () => props.activeItemKey, + (value) => (activeItemKey.value = value), + ) + provide('activeItemKey', activeItemKey) provide('alwaysOpen', props.alwaysOpen) provide('setActiveItemKey', setActiveItemKey) diff --git a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts index 4a8d83ff..c8907021 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionBody.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionBody.ts @@ -4,11 +4,12 @@ import { CCollapse } from '../collapse/CCollapse' const CAccordionBody = defineComponent({ name: 'CAccordionBody', setup(_, { slots }) { + const id = inject('id') const visible = inject('visible') as Ref return () => h( CCollapse, - { class: 'accordion-collapse', visible: visible.value }, + { class: 'accordion-collapse', id, visible: visible.value }, { default: () => h('div', { class: ['accordion-body'] }, slots.default && slots.default()), }, diff --git a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts index 69ab7a00..f9820b4a 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionButton.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionButton.ts @@ -3,6 +3,7 @@ import { defineComponent, h, inject, Ref } from 'vue' const CAccordionButton = defineComponent({ name: 'CAccordionButton', setup(_, { slots }) { + const id = inject('id') as string const toggleVisibility = inject('toggleVisibility') as () => void const visible = inject('visible') as Ref @@ -11,7 +12,8 @@ const CAccordionButton = defineComponent({ 'button', { type: 'button', - 'aria-expanded': !visible.value, + 'aria-control': id, + 'aria-expanded': visible.value, class: ['accordion-button', { ['collapsed']: !visible.value }], onClick: () => toggleVisibility(), }, diff --git a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts index 1e749e71..f2ebe594 100644 --- a/packages/coreui-vue/src/components/accordion/CAccordionItem.ts +++ b/packages/coreui-vue/src/components/accordion/CAccordionItem.ts @@ -1,28 +1,36 @@ -import { defineComponent, h, inject, provide, ref, watch, Ref } from 'vue' +import { defineComponent, h, inject, provide, ref, watch, Ref, useId } from 'vue' const CAccordionItem = defineComponent({ name: 'CAccordionItem', props: { + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id: String, /** * The item key. */ - itemKey: [Number, String] + itemKey: [Number, String], }, setup(props, { slots }) { const activeItemKey = inject('activeItemKey') as Ref const alwaysOpen = inject('alwaysOpen') as boolean const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void - const itemKey = ref(props.itemKey ? props.itemKey : Math.random().toString(36).substr(2, 9)) + const id = props.id ?? useId() + const itemKey = ref(props.itemKey ?? id) const visible = ref(Boolean(activeItemKey.value === itemKey.value)) watch(activeItemKey, () => (visible.value = Boolean(activeItemKey.value === itemKey.value))) const toggleVisibility = () => { visible.value = !visible.value - !alwaysOpen && visible && setActiveItemKey(itemKey.value) + if (!alwaysOpen && visible) { + setActiveItemKey(itemKey.value) + } } + provide('id', id) provide('visible', visible) provide('toggleVisibility', toggleVisibility) diff --git a/packages/coreui-vue/src/components/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/CAlertHeading.ts b/packages/coreui-vue/src/components/alert/CAlertHeading.ts index fbf38c69..94ed187c 100644 --- a/packages/coreui-vue/src/components/alert/CAlertHeading.ts +++ b/packages/coreui-vue/src/components/alert/CAlertHeading.ts @@ -6,7 +6,7 @@ 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', }, @@ -14,7 +14,7 @@ export const CAlertHeading = defineComponent({ setup(props, { slots }) { return () => h( - props.component, + props.as, { class: 'alert-heading', }, 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/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 27008005..d35ee265 100644 --- a/packages/coreui-vue/src/components/avatar/CAvatar.ts +++ b/packages/coreui-vue/src/components/avatar/CAvatar.ts @@ -55,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/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 951f35cd..adea3428 100644 --- a/packages/coreui-vue/src/components/backdrop/CBackdrop.ts +++ b/packages/coreui-vue/src/components/backdrop/CBackdrop.ts @@ -21,7 +21,7 @@ const CBackdrop = defineComponent({ }, onLeave: (el) => { el.classList.remove('show') - } + }, }, () => props.visible && 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 717adac3..3802015d 100644 --- a/packages/coreui-vue/src/components/badge/CBadge.ts +++ b/packages/coreui-vue/src/components/badge/CBadge.ts @@ -5,19 +5,19 @@ 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, 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,17 +46,24 @@ 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 + */ + 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', @@ -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/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/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap b/packages/coreui-vue/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap index fa56864c..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`] = ` -"