From 9ec63704fbf4d7568e3d6986043a036355787724 Mon Sep 17 00:00:00 2001 From: Cesar Date: Thu, 30 May 2024 15:21:13 +0200 Subject: [PATCH 1/7] Add the *as* property in the CFoooter component to use semantic tag --- .../src/components/footer/CFooter.ts | 9 ++++++++- .../footer/__tests__/CFooter.spec.ts | 19 +++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/coreui-vue/src/components/footer/CFooter.ts b/packages/coreui-vue/src/components/footer/CFooter.ts index 81de0158..3f0d5fd2 100644 --- a/packages/coreui-vue/src/components/footer/CFooter.ts +++ b/packages/coreui-vue/src/components/footer/CFooter.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CFooter = defineComponent({ name: 'CFooter', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Place footer in non-static positions. * @@ -18,7 +25,7 @@ const CFooter = defineComponent({ setup(props, { slots }) { return () => h( - 'div', + props.as, { class: ['footer', { [`footer-${props.position}`]: props.position }] }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts index 4a5ba536..35b914ca 100644 --- a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts +++ b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts @@ -19,6 +19,15 @@ const customWrapper = mount(Component, { }, }) +const customWrapperTwo = mount(Component, { + propsData: { + as: 'footer', + }, + slots: { + default: 'Default slot', + }, +}) + describe(`Loads and display ${ComponentName} component`, () => { it('has a name', () => { expect(Component.name).toMatch(ComponentName) @@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.classes('footer-fixed')).toBe(true) }) }) + +describe(`Customize (number two) ${ComponentName} component`, () => { + it('renders correctly', () => { + expect(customWrapperTwo.html()).toMatchSnapshot() + }) + + it('tag name is custom', () => { + expect(customWrapperTwo.element.tagName).toBe('FOOTER') + }) +}) From 3cdb3776aa7be02a6d2c1283246d7dae5418aaa3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 24 Jul 2024 12:56:06 +0200 Subject: [PATCH 2/7] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.0.2 → ^5.1.0 @docsearch/css ^3.6.0 → ^3.6.1 @docsearch/js ^3.6.0 → ^3.6.1 @rollup/plugin-commonjs ^25.0.8 → ^26.0.1 @typescript-eslint/eslint-plugin ^7.11.0 → ^7.17.0 @typescript-eslint/parser ^7.11.0 → ^7.17.0 @vuepress/bundler-vite 2.0.0-rc.12 → 2.0.0-rc.14 @vuepress/bundler-webpack 2.0.0-rc.12 → 2.0.0-rc.14 @vuepress/plugin-active-header-links 2.0.0-rc.31 → 2.0.0-rc.39 @vuepress/plugin-git 2.0.0-rc.31 → 2.0.0-rc.38 @vuepress/plugin-markdown-container 2.0.0-rc.30 → 2.0.0-rc.37 @vuepress/plugin-prismjs 2.0.0-rc.32 → 2.0.0-rc.37 @vuepress/plugin-register-components 2.0.0-rc.31 → 2.0.0-rc.37 @vuepress/plugin-theme-data 2.0.0-rc.31 → 2.0.0-rc.39 @vuepress/plugin-toc 2.0.0-rc.31 → 2.0.0-rc.39 @vuepress/shared 2.0.0-rc.12 → 2.0.0-rc.14 @vuepress/utils 2.0.0-rc.12 → 2.0.0-rc.14 eslint-plugin-prettier ^5.1.3 → ^5.2.1 eslint-plugin-unicorn ^51.0.1 → ^54.0.0 eslint-plugin-vue ^9.26.0 → ^9.27.0 lerna ^8.1.3 → ^8.1.7 prettier ^3.2.5 → ^3.3.3 rollup ^4.18.0 → ^4.19.0 sass ^1.77.2 → ^1.77.8 ts-jest ^29.1.4 → ^29.2.3 typescript ^5.4.5 → ^5.5.4 vue ^3.4.27 → ^3.4.33 vue-types ^5.1.2 → ^5.1.3 vuepress 2.0.0-rc.12 → 2.0.0-rc.14 --- package.json | 14 +++++++------- packages/coreui-vue/package.json | 14 +++++++------- packages/docs/package.json | 32 ++++++++++++++++---------------- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index f038380e..f732fb97 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.11.0", - "@typescript-eslint/parser": "^7.11.0", + "@typescript-eslint/eslint-plugin": "^7.17.0", + "@typescript-eslint/parser": "^7.17.0", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", "eslint": "8.57.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-vue": "^9.26.0", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-vue": "^9.27.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-unicorn": "^51.0.1", - "lerna": "^8.1.3", + "eslint-plugin-unicorn": "^54.0.0", + "lerna": "^8.1.7", "npm-run-all": "^4.1.5", - "prettier": "^3.2.5" + "prettier": "^3.3.3" } } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 2b94d01b..f663bbf2 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -41,11 +41,11 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.2", + "@coreui/coreui": "^5.1.0", "@popperjs/core": "^2.11.8" }, "devDependencies": { - "@rollup/plugin-commonjs": "^25.0.8", + "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", "@types/jest": "^29.5.12", @@ -54,12 +54,12 @@ "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.18.0", + "rollup": "^4.19.0", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.1.4", - "typescript": "^5.4.5", - "vue": "^3.4.27", - "vue-types": "^5.1.2" + "ts-jest": "^29.2.3", + "typescript": "^5.5.4", + "vue": "^3.4.33", + "vue-types": "^5.1.3" }, "peerDependencies": { "vue": "^3.2.21" diff --git a/packages/docs/package.json b/packages/docs/package.json index 1fc7b75b..629de096 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -9,28 +9,28 @@ "license": "MIT", "devDependencies": { "@coreui/chartjs": "^4.0.0", - "@coreui/coreui": "^5.0.2", + "@coreui/coreui": "^5.1.0", "@coreui/icons": "^3.0.1", "@coreui/icons-vue": "^2.0.0", "@coreui/utils": "^2.0.2", "@coreui/vue-chartjs": "^3.0.0", - "@docsearch/css": "^3.6.0", - "@docsearch/js": "^3.6.0", - "@vuepress/bundler-vite": "2.0.0-rc.12", - "@vuepress/bundler-webpack": "2.0.0-rc.12", - "@vuepress/plugin-active-header-links": "2.0.0-rc.31", - "@vuepress/plugin-git": "2.0.0-rc.31", - "@vuepress/plugin-markdown-container": "2.0.0-rc.30", - "@vuepress/plugin-prismjs": "2.0.0-rc.32", - "@vuepress/plugin-theme-data": "2.0.0-rc.31", - "@vuepress/plugin-register-components": "2.0.0-rc.31", - "@vuepress/plugin-toc": "2.0.0-rc.31", - "@vuepress/shared": "2.0.0-rc.12", - "@vuepress/utils": "2.0.0-rc.12", + "@docsearch/css": "^3.6.1", + "@docsearch/js": "^3.6.1", + "@vuepress/bundler-vite": "2.0.0-rc.14", + "@vuepress/bundler-webpack": "2.0.0-rc.14", + "@vuepress/plugin-active-header-links": "2.0.0-rc.39", + "@vuepress/plugin-git": "2.0.0-rc.38", + "@vuepress/plugin-markdown-container": "2.0.0-rc.37", + "@vuepress/plugin-prismjs": "2.0.0-rc.37", + "@vuepress/plugin-theme-data": "2.0.0-rc.39", + "@vuepress/plugin-register-components": "2.0.0-rc.37", + "@vuepress/plugin-toc": "2.0.0-rc.39", + "@vuepress/shared": "2.0.0-rc.14", + "@vuepress/utils": "2.0.0-rc.14", "markdown-it-anchor": "^9.0.1", "markdown-it-include": "^2.0.0", - "sass": "^1.77.2", + "sass": "^1.77.8", "vue-docgen-cli": "^4.79.0", - "vuepress": "2.0.0-rc.12" + "vuepress": "2.0.0-rc.14" } } From 5f76520011c138b7cd4b530f6ad762ce21ae7c0b Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 24 Jul 2024 13:11:12 +0200 Subject: [PATCH 3/7] docs: update `CAvatar` documentation --- .../client/styles/_component-examples.scss | 5 ++ packages/docs/components/avatar.md | 73 ++++++++++++++++++- 2 files changed, 76 insertions(+), 2 deletions(-) diff --git a/packages/docs/.vuepress/src/client/styles/_component-examples.scss b/packages/docs/.vuepress/src/client/styles/_component-examples.scss index aee50619..2e725c8f 100644 --- a/packages/docs/.vuepress/src/client/styles/_component-examples.scss +++ b/packages/docs/.vuepress/src/client/styles/_component-examples.scss @@ -90,6 +90,11 @@ margin-left: .5rem; } + // Avatars + > .avatar + .avatar { + margin-left: .25rem; + } + // Badges > .badge + .badge { margin-left: .25rem; diff --git a/packages/docs/components/avatar.md b/packages/docs/components/avatar.md index e94d7e27..02fb3b37 100644 --- a/packages/docs/components/avatar.md +++ b/packages/docs/components/avatar.md @@ -1,12 +1,14 @@ --- title: Vue Avatar Component name: Avatar -description: Vue avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters. +description: The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters. other_frameworks: avatar --- ## Image avatars +Showcase Vue avatars using images. These avatars are typically circular and can display user profile pictures. + ::: demo @@ -17,8 +19,11 @@ other_frameworks: avatar ``` + ## Letter avatars +Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials. + ::: demo CUI CUI @@ -30,6 +35,45 @@ other_frameworks: avatar CUI ``` +## Icons avatars + +Incorporate icons within Vue avatars, allowing for a visual representation using scalable vector graphics (SVG). + +::: demo + + + + + + + + + + + + + + + +::: +```vue + + + + + + + + + + + + + + + +``` + ## Rounded avatars Use the `shape="rounded"` prop to make avatars squared with rounded corners. @@ -66,20 +110,23 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for ::: demo CUI CUI +CUI CUI CUI ::: ```vue CUI CUI +CUI CUI CUI ``` ## Avatars with status -::: demo +Add a status indicator to avatars using the `status` property to show online or offline status. +::: demo CUI ::: @@ -88,6 +135,28 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for CUI ``` +## Customizing + +### CSS variables + +Vue avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +#### How to use CSS variables + +```jsx +const vars = { + '--my-css-var': 10, + '--my-another-css-var': 'red', +} +return ... +``` + +### SASS variables + + + ## API !!!include(./api/avatar/CAvatar.api.md)!!! \ No newline at end of file From 51cf9a92d73de7abf205df5a5287228f495c3508 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 24 Jul 2024 15:45:53 +0200 Subject: [PATCH 4/7] refactor(CButton): improve colors and variants handling --- packages/coreui-vue/src/components/button/CButton.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts index e918cbfc..287bfd12 100644 --- a/packages/coreui-vue/src/components/button/CButton.ts +++ b/packages/coreui-vue/src/components/button/CButton.ts @@ -93,8 +93,9 @@ export const CButton = defineComponent({ { class: [ 'btn', - props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`, { + [`btn-${props.color}`]: props.color && !props.variant, + [`btn-${props.variant}-${props.color}`]: props.color && props.variant, [`btn-${props.size}`]: props.size, active: props.active, disabled: props.disabled, From 18c962df8ffbf3f1a9192e3219439ecda6f96283 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 25 Jul 2024 18:05:37 +0200 Subject: [PATCH 5/7] docs: update icons documentation --- packages/docs/.vuepress/client.ts | 3 +- .../api/coreui-icons-vue/src/CIconSvg.api.md | 17 ++ packages/docs/components/icon.md | 157 +++++++++++++++--- packages/docs/package.json | 2 +- 4 files changed, 158 insertions(+), 21 deletions(-) create mode 100644 packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md diff --git a/packages/docs/.vuepress/client.ts b/packages/docs/.vuepress/client.ts index 0ae21634..0404f0fd 100644 --- a/packages/docs/.vuepress/client.ts +++ b/packages/docs/.vuepress/client.ts @@ -1,6 +1,6 @@ import { defineClientConfig } from '@vuepress/client' -import { CIcon } from '@coreui/icons-vue' +import { CIcon, CIconSvg } from '@coreui/icons-vue' import CChartPlugin from '@coreui/vue-chartjs' import CoreuiVue from '@coreui/vue/src/' import '@coreui/coreui/scss/coreui.scss' @@ -71,6 +71,7 @@ export default defineClientConfig({ app.use(CoreuiVue) app.provide('icons', icons) app.component('CIcon', CIcon) + app.component('CIconSvg', CIconSvg) app.use(CChartPlugin), router.addRoute({ path: '', redirect: '/getting-started/introduction.html' }) }, diff --git a/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md b/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md new file mode 100644 index 00000000..1984a5a7 --- /dev/null +++ b/packages/docs/api/coreui-icons-vue/src/CIconSvg.api.md @@ -0,0 +1,17 @@ +### CIconSvg + +```jsx +import { CIconSvg } from '@coreui/icons-vue' +// or +import CIconSvg from '@coreui/icons-vue/src/CIconSvg' +``` + +#### Props + +| Prop name | Description | Type | Values | Default | +| --------------------- | ------------------------------------------------------------------------------------------------- | --------------------- | ------ | ------- | +| **custom-class-name** | Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop. | string\|array\|object | - | - | +| **height** | The height attribute defines the vertical length of an icon. | number | - | - | +| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | string | - | - | +| **title** | Title tag content. | string | - | - | +| **width** | The width attribute defines the horizontal length of an icon. | number | - | - | diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md index d50d957e..10794fff 100644 --- a/packages/docs/components/icon.md +++ b/packages/docs/components/icon.md @@ -1,12 +1,12 @@ --- title: Vue Icon Component name: Icon -description: Official Vue.js component for CoreUI Icons and CoreUI Icons PRO. +description: Vue icons library is a great resource for Vue developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work. --- ## Installation -If you want to use our icon component and our icons library you have to install two additional packages. +To start using CoreUI Vue Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice: ### Npm @@ -27,7 +27,11 @@ yarn add @coreui/icons-vue ## Usage -### Single icon +Import vue.js icons using one of these two options: + +### Single Vue.js icon + +To use a single Vue.js icon, import the `` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop. ::: demo @@ -57,6 +61,8 @@ export default { ### All icons +To use all icons available in the CoreUI Vue.js Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop. + ```vue