diff --git a/README.md b/README.md index 0a993209..355d7967 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.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.2.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/lerna.json b/lerna.json index 5ceaf54d..f19238c5 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.1.0", + "version": "5.2.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } 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/README.md b/packages/coreui-vue/README.md index 8293a55c..24bc3f28 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.2.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 2b94d01b..be156612 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.1.0", + "version": "5.2.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -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/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, 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') + }) +}) 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/.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/README.md b/packages/docs/README.md deleted file mode 100644 index 54e0c48e..00000000 --- a/packages/docs/README.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -layout: Redirect -lang: en-US -title: Title of this page -description: Description of this page ---- -### Components: - -[ CAccordion ](./4.0/components/accordion.md) - -[ CAlert ](./4.0/components/alert.md) - -[ CAvatar ](./4.0/components/avatar.md) - -[ CBackdrop ](./4.0/components/backdrop.md) - -[ CBadge ](./4.0/components/badge.md) - -[ CBreadcrumb ](./4.0/components/breadcrumb.md) - -[ CButton ](./4.0/components/button.md) - -[ CButtonGroup ](./4.0/components/button-group.md) - -[ CCallout ](./4.0/components/callout.md) - -[ CCard ](./4.0/components/card.md) - -[ CCollapse ](./4.0/components/collapse.md) - -[ CDropdown ](./4.0/components/dropdown.md) - -[ CDropdown ](./4.0/components/dropdown.md) - -[ CFooter ](./4.0/components/footer.md) - -[ CForm ](./4.0/components/form.md) - -[ CGrid ](./4.0/components/grid.md) - -[ CHeader ](./4.0/components/header.md) - -[ CLink ](./4.0/components/link.md) - -[ CListGroup ](./4.0/components/list-group.md) - -[ CLoadingButton ](./4.0/components/loading-button.md) - -[ CModal ](./4.0/components/modal.md) - -[ CMultiSelect ](./4.0/components/multi-select.md) - -[ CNav ](./4.0/components/nav.md) - -[ CNavBar ](./4.0/components/navbar.md) - -[ COffcanvas ](./4.0/components/offcanvas.md) - -[ CPagination ](./4.0/components/pagination.md) - -[ CPopover ](./4.0/components/popover.md) - -[ CProgress ](./4.0/components/progress.md) - -[ CSidebar ](./4.0/components/sidebar.md) - -[ CSpinner ](./4.0/components/spinner.md) - -[ CTable ](./4.0/components/table.md) - -[ CTabs ](./4.0/components/tabs.md) - -[ CToast ](./4.0/components/toast.md) - -### Directives: - - -[ CTooltip ](./4.0/directives/tooltip.md) - -[ CPopover ](./4.0/directives/popover.md) \ No newline at end of file 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/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 diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md index d50d957e..1d71d1d9 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