From 9ec63704fbf4d7568e3d6986043a036355787724 Mon Sep 17 00:00:00 2001 From: Cesar Date: Thu, 30 May 2024 15:21:13 +0200 Subject: [PATCH 01/52] 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 7f9805cce40f6a4a64351fda0de98e9fd7e3a29d Mon Sep 17 00:00:00 2001 From: Cesar Date: Fri, 31 May 2024 13:28:49 +0200 Subject: [PATCH 02/52] Add the *as* property in the CHeader component to use semantic tag --- .../src/components/header/CHeader.ts | 9 ++++++++- .../header/__tests__/CHeader.spec.ts | 19 +++++++++++++++++++ packages/docs/api/header/CHeader.api.md | 9 +++++---- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/coreui-vue/src/components/header/CHeader.ts b/packages/coreui-vue/src/components/header/CHeader.ts index 32ab0bf5..d1c23b45 100644 --- a/packages/coreui-vue/src/components/header/CHeader.ts +++ b/packages/coreui-vue/src/components/header/CHeader.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CHeader = defineComponent({ name: 'CHeader', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Defines optional container wrapping children elements. * @@ -31,7 +38,7 @@ const CHeader = defineComponent({ setup(props, { slots }) { return () => h( - 'div', + props.as, { class: ['header', { [`header-${props.position}`]: props.position }] }, props.container ? h( diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts index 2bb30916..09ec0065 100644 --- a/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts +++ b/packages/coreui-vue/src/components/header/__tests__/CHeader.spec.ts @@ -20,6 +20,15 @@ const customWrapper = mount(Component, { }, }) +const customWrapperTwo = mount(Component, { + propsData: { + as: 'header', + }, + slots: { + default: 'Default slot', + }, +}) + describe(`Loads and display ${ComponentName} component`, () => { it('has a name', () => { expect(Component.name).toMatch(ComponentName) @@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.find('.container-lg').classes('container-lg')).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('HEADER') + }) +}) \ No newline at end of file diff --git a/packages/docs/api/header/CHeader.api.md b/packages/docs/api/header/CHeader.api.md index 0416d9ee..f47ab627 100644 --- a/packages/docs/api/header/CHeader.api.md +++ b/packages/docs/api/header/CHeader.api.md @@ -8,7 +8,8 @@ import CHeader from '@coreui/vue/src/components/header/CHeader' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | ------------------------------------------------------ | --------------- | ------------------------------------------------------------- | ------- | -| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - | -| **position** | Place header in non-static positions. | string | `'fixed'`, `'sticky'` | - | +| Prop name | Description | Type | Values | Default | +| ------------- | --------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------- | ------- | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' | +| **container** | Defines optional container wrapping children elements. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'` | - | +| **position** | Place header in non-static positions. | string | `'fixed'`, `'sticky'` | - | From b52f2ea6dbf6f83e7dece8325a9223b083efd8aa Mon Sep 17 00:00:00 2001 From: Cesar Date: Fri, 31 May 2024 13:42:20 +0200 Subject: [PATCH 03/52] docs: add as property in CFooter api --- packages/docs/api/footer/CFooter.api.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/docs/api/footer/CFooter.api.md b/packages/docs/api/footer/CFooter.api.md index b1eedef2..bc9337fe 100644 --- a/packages/docs/api/footer/CFooter.api.md +++ b/packages/docs/api/footer/CFooter.api.md @@ -8,6 +8,7 @@ import CFooter from '@coreui/vue/src/components/footer/CFooter' #### Props -| Prop name | Description | Type | Values | Default | -| ------------ | ------------------------------------- | ------ | --------------------- | ------- | -| **position** | Place footer in non-static positions. | string | `'fixed'`, `'sticky'` | - | +| Prop name | Description | Type | Values | Default | +| ------------ | --------------------------------------------------------------------------------------- | ------ | --------------------- | ------- | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' | +| **position** | Place footer in non-static positions. | string | `'fixed'`, `'sticky'` | - | From 0627839c115e1e1c931d9b7e1e6eaff848913555 Mon Sep 17 00:00:00 2001 From: atari <89896729+atari-sog@users.noreply.github.com> Date: Mon, 24 Jun 2024 15:34:06 +0900 Subject: [PATCH 04/52] Update CFormSelect.api.md Added 'selected' to the options. --- packages/docs/api/form/CFormSelect.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/api/form/CFormSelect.api.md b/packages/docs/api/form/CFormSelect.api.md index 8d77c483..2637bffa 100644 --- a/packages/docs/api/form/CFormSelect.api.md +++ b/packages/docs/api/form/CFormSelect.api.md @@ -19,7 +19,7 @@ import CFormSelect from '@coreui/vue/src/components/form/CFormSelect' | **invalid** | Set component validation state to invalid. | boolean | - | - | | **label**
4.3.0+
| Add a caption for a component. | string | - | - | | **model-value** | The default name for a value passed using v-model. | string \| string[] | - | - | -| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`.
Examples:
- `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
- `:options="['js', 'html']"` | Option[] \| string[] | - | - | +| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`, `selected`.
Examples:
- `:options="[{ value: 'js', label: 'JavaScript', selected: true }, { value: 'html', label: 'HTML', disabled: true }]"`
- `:options="['js', 'html']"` | Option[] \| string[] | - | - | | **size** | Size the component small or large. | string | `'sm' \| 'lg'` | - | | **text**
4.3.0+
| Add helper text to the component. | string | - | - | | **tooltip-feedback**
4.3.0+
| Display validation feedback in a styled tooltip. | boolean | - | - | From 3cdb3776aa7be02a6d2c1283246d7dae5418aaa3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 24 Jul 2024 12:56:06 +0200 Subject: [PATCH 05/52] 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 06/52] 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 07/52] 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 08/52] 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 ``` - - ## API -!!!include(./api/collapse/CCollapse.api.md)!!! \ No newline at end of file +!!!include(./api/collapse/CCollapse.api.md)!!! + + \ No newline at end of file diff --git a/packages/docs/components/header.md b/packages/docs/components/header.md index 5094d15c..8c45d6a3 100644 --- a/packages/docs/components/header.md +++ b/packages/docs/components/header.md @@ -68,60 +68,42 @@ Here's an example of all the sub-components included in a responsive light-theme ::: ```vue - - - Header - - - - - - Home - - - - Link - - - Action - Another action - Something else here - - - - Disabled - - - - - - - - + ``` - - - ## Customizing ### CSS variables @@ -150,4 +132,9 @@ return ... !!!include(./api/header/CHeaderBrand.api.md)!!! -!!!include(./api/header/CHeaderNav.api.md)!!! \ No newline at end of file +!!!include(./api/header/CHeaderNav.api.md)!!! + + diff --git a/packages/docs/components/icon.md b/packages/docs/components/icon.md index 1d71d1d9..a68ced42 100644 --- a/packages/docs/components/icon.md +++ b/packages/docs/components/icon.md @@ -42,20 +42,9 @@ To use a single Vue.js icon, import the `` component and the desired icon - ``` @@ -67,21 +56,12 @@ To use all icons available in the CoreUI Vue.js Icons package, import the CIcon - ``` + ### Icons object This way you import your needed Vue.js icons once and pass them to $root object on 'icons' key @@ -147,7 +127,6 @@ With some [color utility classes](https://coreui.io/docs/utilities/colors/), you ::: ```vue -::: demo @@ -155,7 +134,6 @@ With some [color utility classes](https://coreui.io/docs/utilities/colors/), you -::: ``` #### CSS Variables @@ -220,6 +198,9 @@ The ` component allows you to add custom SVG icons to your applicatio ::: ```vue + - ``` ## Available icons @@ -319,38 +292,22 @@ CoreUI Icons package is delivered with more than 1500 icons in multiple formats - +!!!include(./api/coreui-icons-vue/src/CIconSvg.api.md)!!! + \ No newline at end of file diff --git a/packages/docs/components/modal.md b/packages/docs/components/modal.md index 72ea1b66..07e19ad8 100644 --- a/packages/docs/components/modal.md +++ b/packages/docs/components/modal.md @@ -60,7 +60,11 @@ Toggle a working modal demo by clicking the button below. It will slide down and ::: -``` vue +```vue + - ``` ### Static backdrop @@ -114,7 +109,11 @@ If you set `backdrop` property to `static`, your modal will behave as though the ::: -``` vue +```vue + - ``` ### Scrolling long content @@ -248,7 +238,11 @@ When modals become too long for the user's viewport or device, they scroll indep ::: -``` vue +```vue + - ``` You can also create a scrollable modal that allows scroll the modal body by adding `scrollable` prop. @@ -459,7 +444,11 @@ You can also create a scrollable modal that allows scroll the modal body by addi ::: -``` vue +```vue + - ``` ### Vertically centered @@ -596,7 +576,11 @@ Add `alignment="center` to `` to vertically center the modal. ::: -``` vue +```vue +