From 7f9805cce40f6a4a64351fda0de98e9fd7e3a29d Mon Sep 17 00:00:00 2001 From: Cesar Date: Fri, 31 May 2024 13:28:49 +0200 Subject: [PATCH 01/45] 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 02/45] 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 03/45] 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 7626e30aaa69bd6ab1ba796d8dd8c04c62c178a6 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 29 Aug 2024 12:54:33 +0200 Subject: [PATCH 04/45] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.1.0 → ^5.1.2 @typescript-eslint/eslint-plugin ^7.17.0 → ^8.3.0 @typescript-eslint/parser ^7.17.0 → ^8.3.0 @vuepress/bundler-vite 2.0.0-rc.14 → 2.0.0-rc.15 @vuepress/bundler-webpack 2.0.0-rc.14 → 2.0.0-rc.15 @vuepress/plugin-active-header-links 2.0.0-rc.39 → 2.0.0-rc.42 @vuepress/plugin-git 2.0.0-rc.38 → 2.0.0-rc.42 @vuepress/plugin-markdown-container 2.0.0-rc.37 → 2.0.0-rc.42 @vuepress/plugin-register-components 2.0.0-rc.37 → 2.0.0-rc.42 @vuepress/plugin-theme-data 2.0.0-rc.39 → 2.0.0-rc.42 @vuepress/plugin-toc 2.0.0-rc.39 → 2.0.0-rc.42 @vuepress/shared 2.0.0-rc.14 → 2.0.0-rc.15 @vuepress/utils 2.0.0-rc.14 → 2.0.0-rc.15 eslint-plugin-unicorn ^54.0.0 → ^55.0.0 lerna ^8.1.7 → ^8.1.8 markdown-it-anchor ^9.0.1 → ^9.1.0 rollup ^4.19.0 → ^4.21.1 ts-jest ^29.2.3 → ^29.2.5 vue ^3.4.33 → ^3.4.38 vuepress 2.0.0-rc.14 → 2.0.0-rc.15 --- package.json | 8 ++++---- packages/coreui-vue/package.json | 8 ++++---- packages/docs/package.json | 26 +++++++++++++------------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index f732fb97..41fbecce 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.17.0", - "@typescript-eslint/parser": "^7.17.0", + "@typescript-eslint/eslint-plugin": "^8.3.0", + "@typescript-eslint/parser": "^8.3.0", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", @@ -31,8 +31,8 @@ "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-vue": "^9.27.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-unicorn": "^54.0.0", - "lerna": "^8.1.7", + "eslint-plugin-unicorn": "^55.0.0", + "lerna": "^8.1.8", "npm-run-all": "^4.1.5", "prettier": "^3.3.3" } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index be156612..95c382a3 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.1.0", + "@coreui/coreui": "^5.1.2", "@popperjs/core": "^2.11.8" }, "devDependencies": { @@ -54,11 +54,11 @@ "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.19.0", + "rollup": "^4.21.1", "rollup-plugin-vue": "^6.0.0", - "ts-jest": "^29.2.3", + "ts-jest": "^29.2.5", "typescript": "^5.5.4", - "vue": "^3.4.33", + "vue": "^3.4.38", "vue-types": "^5.1.3" }, "peerDependencies": { diff --git a/packages/docs/package.json b/packages/docs/package.json index 3dfd25a2..14f551b1 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.1.0", + "@coreui/coreui": "^5.1.2", "@coreui/icons": "^3.0.1", "@coreui/icons-vue": "^2.1.0", "@coreui/utils": "^2.0.2", "@coreui/vue-chartjs": "^3.0.0", "@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/bundler-vite": "2.0.0-rc.15", + "@vuepress/bundler-webpack": "2.0.0-rc.15", + "@vuepress/plugin-active-header-links": "2.0.0-rc.42", + "@vuepress/plugin-git": "2.0.0-rc.42", + "@vuepress/plugin-markdown-container": "2.0.0-rc.42", "@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", + "@vuepress/plugin-theme-data": "2.0.0-rc.42", + "@vuepress/plugin-register-components": "2.0.0-rc.42", + "@vuepress/plugin-toc": "2.0.0-rc.42", + "@vuepress/shared": "2.0.0-rc.15", + "@vuepress/utils": "2.0.0-rc.15", + "markdown-it-anchor": "^9.1.0", "markdown-it-include": "^2.0.0", "sass": "^1.77.8", "vue-docgen-cli": "^4.79.0", - "vuepress": "2.0.0-rc.14" + "vuepress": "2.0.0-rc.15" } } From d15e7054866c0f3719e8220324335ea070e6741a Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 29 Aug 2024 14:13:12 +0200 Subject: [PATCH 05/45] feat(CModal): the `container` and `teleport` properties to enable appending the modal to a specific element --- .../coreui-vue/src/components/modal/CModal.ts | 68 +++++++++++++------ packages/docs/api/modal/CModal.api.md | 28 ++++---- 2 files changed, 64 insertions(+), 32 deletions(-) diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts index 78a238b9..e2e1947d 100644 --- a/packages/coreui-vue/src/components/modal/CModal.ts +++ b/packages/coreui-vue/src/components/modal/CModal.ts @@ -1,6 +1,7 @@ import { defineComponent, h, + PropType, provide, ref, RendererElement, @@ -11,6 +12,7 @@ import { } from 'vue' import { CBackdrop } from '../backdrop/CBackdrop' +import { CConditionalTeleport } from '../conditional-teleport' import { executeAfterTransition } from '../../utils/transition' @@ -47,6 +49,15 @@ const CModal = defineComponent({ return false }, }, + /** + * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. + * + * @since 5.3.0 + */ + container: { + type: [Object, String] as PropType HTMLElement) | string>, + default: 'body', + }, /** * A string of all className you want applied to the modal content component. */ @@ -54,7 +65,7 @@ const CModal = defineComponent({ /** * Puts the focus on the modal when shown. * - * @since v5.0.0 + * @since 5.0.0 */ focus: { type: Boolean, @@ -99,6 +110,15 @@ const CModal = defineComponent({ return ['sm', 'lg', 'xl'].includes(value) }, }, + /** + * Generates modal using Teleport. + * + * @since 5.3.0 + */ + teleport: { + type: Boolean, + default: false, + }, /** * Remove animation to create modal that simply appear rather than fade in to view. */ @@ -264,27 +284,37 @@ const CModal = defineComponent({ ), ) - return () => [ + return () => h( - Transition, + CConditionalTeleport, { - css: false, - onEnter: (el, done) => handleEnter(el, done), - onAfterEnter: () => handleAfterEnter(), - onLeave: (el, done) => handleLeave(el, done), - onAfterLeave: (el) => handleAfterLeave(el), + container: props.container, + teleport: props.teleport, }, - () => - props.unmountOnClose - ? visible.value && modal() - : withDirectives(modal(), [[vShow, visible.value]]), - ), - props.backdrop && - h(CBackdrop, { - class: 'modal-backdrop', - visible: visible.value, - }), - ] + { + default: () => [ + h( + Transition, + { + css: false, + onEnter: (el, done) => handleEnter(el, done), + onAfterEnter: () => handleAfterEnter(), + onLeave: (el, done) => handleLeave(el, done), + onAfterLeave: (el) => handleAfterLeave(el), + }, + () => + props.unmountOnClose + ? visible.value && modal() + : withDirectives(modal(), [[vShow, visible.value]]), + ), + props.backdrop && + h(CBackdrop, { + class: 'modal-backdrop', + visible: visible.value, + }), + ], + }, + ) }, }) diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md index 582c2798..6f201012 100644 --- a/packages/docs/api/modal/CModal.api.md +++ b/packages/docs/api/modal/CModal.api.md @@ -8,19 +8,21 @@ import CModal from '@coreui/vue/src/components/modal/CModal' #### Props -| Prop name | Description | Type | Values | Default | -| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- | -| **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' | -| **backdrop** | Apply a backdrop on body while offcanvas is open. | boolean\|string | `boolean \| 'static'` | true | -| **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - | -| **focus**
v5.0.0+
| Puts the focus on the modal when shown. | boolean | - | true | -| **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - | -| **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true | -| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - | -| **size** | Size the component small, large, or extra large. | string | `'sm'`, `'lg'`, `'xl'` | - | -| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | boolean | - | true | -| **unmount-on-close** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | - | true | -| **visible** | Toggle the visibility of alert component. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | ------- | +| **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' | +| **backdrop** | Apply a backdrop on body while offcanvas is open. | boolean\|string | `boolean \| 'static'` | true | +| **container**
5.3.0+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - | +| **focus**
5.0.0+
| Puts the focus on the modal when shown. | boolean | - | true | +| **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - | +| **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true | +| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - | +| **size** | Size the component small, large, or extra large. | string | `'sm'`, `'lg'`, `'xl'` | - | +| **teleport**
5.3.0+
| Generates modal using Teleport. | boolean | - | false | +| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | boolean | - | true | +| **unmount-on-close** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | - | true | +| **visible** | Toggle the visibility of alert component. | boolean | - | - | #### Events From 7cc0c88b9d1748d82ea1578300a229ec608b5b4a Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 29 Aug 2024 14:17:40 +0200 Subject: [PATCH 06/45] docs: update API documentation --- .../CConditionalTeleport.ts | 2 +- .../src/components/dropdown/CDropdown.ts | 4 +-- .../components/dropdown/CDropdownToggle.ts | 2 +- .../src/components/popover/CPopover.ts | 2 +- .../src/components/tooltip/CTooltip.ts | 2 +- .../CConditionalTeleport.api.md | 8 ++--- packages/docs/api/dropdown/CDropdown.api.md | 30 +++++++++---------- .../docs/api/dropdown/CDropdownToggle.api.md | 24 +++++++-------- packages/docs/api/form/CFormSelect.api.md | 2 +- packages/docs/api/popover/CPopover.api.md | 2 +- packages/docs/api/tooltip/CTooltip.api.md | 2 +- 11 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts index 8fd104a1..9207fb9a 100644 --- a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts +++ b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts @@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({ /** * An HTML element or function that returns a single element, with `document.body` as the default. * - * @since v5.0.0 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts index 32fe1ea0..679e5d6f 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdown.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdown.ts @@ -62,7 +62,7 @@ const CDropdown = defineComponent({ /** * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. * - * @since v5.0.0 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, @@ -115,7 +115,7 @@ const CDropdown = defineComponent({ /** * Generates dropdown menu using Teleport. * - * @since v5.0.0 + * @since 5.0.0 */ teleport: { type: Boolean, diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index 33e96a35..17fd034b 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts @@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({ /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0 + * @since 5.0.0 */ navLink: { type: Boolean, diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 3690fa48..03ade861 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -23,7 +23,7 @@ const CPopover = defineComponent({ /** * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. * - * @since v5.0.0 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index c982b3c8..02ad416e 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -23,7 +23,7 @@ const CTooltip = defineComponent({ /** * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. * - * @since v5.0.0 + * @since 5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md index 66b3972f..79b60043 100644 --- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md +++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md @@ -8,7 +8,7 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor #### Props -| Prop name | Description | Type | Values | Default | -| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- | -| **container**
v5.0.0+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | -| **teleport** | Render some children into a different part of the DOM | boolean | - | true | +| Prop name | Description | Type | Values | Default | +| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- | +| **container**
5.0.0+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **teleport** | Render some children into a different part of the DOM | boolean | - | true | diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md index 3eaad39f..6d3bade5 100644 --- a/packages/docs/api/dropdown/CDropdown.api.md +++ b/packages/docs/api/dropdown/CDropdown.api.md @@ -8,21 +8,21 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown' #### Props -| Prop name | Description | Type | Values | Default | -| ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - | -| **auto-close** | Configure the auto close behavior of the dropdown:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true | -| **container**
v5.0.0+
| Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | -| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - | -| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - | -| **disabled** | Toggle the disabled state for the component. | boolean | - | - | -| **offset**
4.9.0+
| Offset of the dropdown menu relative to its target. | array | - | [0, 2] | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' | -| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true | -| **teleport**
v5.0.0+
| Generates dropdown menu using Teleport. | boolean | - | false | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' | -| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' | -| **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| **alignment** | Set aligment of dropdown menu. | string \| Alignments | `{ 'start' \| 'end' \| { xs: 'start' \| 'end' } \| { sm: 'start' \| 'end' } \| { md: 'start' \| 'end' } \| { lg: 'start' \| 'end' } \| { xl: 'start' \| 'end'} \| { xxl: 'start' \| 'end'} }` | - | +| **auto-close** | Configure the auto close behavior of the dropdown:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | boolean\|string | - | true | +| **container**
5.0.0+
| Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **dark** | Sets a darker color scheme to match a dark navbar. | boolean | - | - | +| **direction** | Sets a specified direction and location of the dropdown menu. | string | `'center'`, `'dropup'`, `'dropup-center'`, `'dropend'`, `'dropstart'` | - | +| **disabled** | Toggle the disabled state for the component. | boolean | - | - | +| **offset**
4.9.0+
| Offset of the dropdown menu relative to its target. | array | - | [0, 2] | +| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | Placement | `'auto'`, `'top-end'`, `'top'`, `'top-start'`, `'bottom-end'`, `'bottom'`, `'bottom-start'`, `'right-start'`, `'right'`, `'right-end'`, `'left-start'`, `'left'`, `'left-end'` | 'bottom-start' | +| **popper** | If you want to disable dynamic positioning set this property to `true`. | boolean | - | true | +| **teleport**
5.0.0+
| Generates dropdown menu using Teleport. | boolean | - | false | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | Triggers | - | 'click' | +| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | string | `'btn-group'`, `'dropdown'`, `'input-group'`, `'nav-item'` | 'btn-group' | +| **visible** | Toggle the visibility of dropdown menu component. | boolean | - | - | #### Events diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md index 2c5e2d20..ddf79509 100644 --- a/packages/docs/api/dropdown/CDropdownToggle.api.md +++ b/packages/docs/api/dropdown/CDropdownToggle.api.md @@ -8,15 +8,15 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle #### Props -| 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 | - | 'button' | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **caret** | Enables pseudo element caret on toggler. | boolean | - | true | -| **custom** | Create a custom toggler which accepts any content. | boolean | - | - | -| **disabled** | Toggle the disabled state for the component. | boolean | - | - | -| **nav-link**
v5.0.0+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true | -| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | -| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean | - | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
`@type` 'hover' \| 'focus' \| 'click' | Triggers | - | 'click' | -| **variant** | Set the button variant to an outlined button or a ghost button. | string | `'ghost'`, `'outline'` | - | +| 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 | - | 'button' | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **caret** | Enables pseudo element caret on toggler. | boolean | - | true | +| **custom** | Create a custom toggler which accepts any content. | boolean | - | - | +| **disabled** | Toggle the disabled state for the component. | boolean | - | - | +| **nav-link**
5.0.0+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true | +| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | +| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | boolean | - | - | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
`@type` 'hover' \| 'focus' \| 'click' | Triggers | - | 'click' | +| **variant** | Set the button variant to an outlined button or a ghost button. | string | `'ghost'`, `'outline'` | - | diff --git a/packages/docs/api/form/CFormSelect.api.md b/packages/docs/api/form/CFormSelect.api.md index 2637bffa..8d77c483 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`, `selected`.
Examples:
- `:options="[{ value: 'js', label: 'JavaScript', selected: true }, { value: 'html', label: 'HTML', disabled: true }]"`
- `:options="['js', 'html']"` | Option[] \| 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[] | - | - | | **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 | - | - | diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md index 55a94fd7..725e4846 100644 --- a/packages/docs/api/popover/CPopover.api.md +++ b/packages/docs/api/popover/CPopover.api.md @@ -11,7 +11,7 @@ import CPopover from '@coreui/vue/src/components/popover/CPopover' | Prop name | Description | Type | Values | Default | | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- | | **animation**
4.9.0+
| Apply a CSS fade transition to the popover. | boolean | - | true | -| **container**
v5.0.0+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **container**
5.0.0+
| Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | | **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | | **delay**
4.9.0+
| The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 | | **fallback-placements**
4.9.0+
| Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] | diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md index f8f3d672..3b0cac97 100644 --- a/packages/docs/api/tooltip/CTooltip.api.md +++ b/packages/docs/api/tooltip/CTooltip.api.md @@ -11,7 +11,7 @@ import CTooltip from '@coreui/vue/src/components/tooltip/CTooltip' | Prop name | Description | Type | Values | Default | | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- | ---------------------------------------- | | **animation**
4.9.0+
| Apply a CSS fade transition to the tooltip. | boolean | - | true | -| **container**
v5.0.0+
| Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **container**
5.0.0+
| Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | | **content** | Content for your component. If you want to pass non-string value please use dedicated slot `` | string | - | - | | **delay**
4.9.0+
| The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | number \| { show: number; hide: number } | - | 0 | | **fallback-placements**
4.9.0+
| Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | Placements \| Placements[] | - | () => ['top', 'right', 'bottom', 'left'] | From 766700b8251336c0a559cb1c4f06c7c117852a41 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 30 Aug 2024 10:57:22 +0200 Subject: [PATCH 07/45] docs: migrate examples to ` + ``` ### Link color @@ -48,32 +56,32 @@ Click the button below to show an alert (hidden with inline styles to start), th Use the `` component to immediately give matching colored links inside any alert. ::: demo - A simple primary alert with an example link. Give it a click if you like. +A simple primary alert with an example link. Give it a click if you like. - A simple secondary alert with an example link. Give it a click if you like. +A simple secondary alert with an example link. Give it a click if you like. - A simple success alert with an example link. Give it a click if you like. +A simple success alert with an example link. Give it a click if you like. - A simple danger alert with an example link. Give it a click if you like. +A simple danger alert with an example link. Give it a click if you like. - A simple warning alert with an example link. Give it a click if you like. +A simple warning alert with an example link. Give it a click if you like. - A simple info alert with an example link. Give it a click if you like. +A simple info alert with an example link. Give it a click if you like. - A simple light alert with an example link. Give it a click if you like. +A simple light alert with an example link. Give it a click if you like. - A simple dark alert with an example link. Give it a click if you like. +A simple dark alert with an example link. Give it a click if you like. ::: -```markup +```vue A simple primary alert with an example link. Give it a click if you like. @@ -106,14 +114,15 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph, ::: demo - Well done! +Well done! +

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

 ::: -```markup +```vue Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

@@ -121,21 +130,23 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

 ``` + ### Icons Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. ::: demo - - - + + + +
An example alert with an icon
::: -```markup +```vue @@ -150,7 +161,8 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i ::: demo - + +
An example alert with an icon
@@ -174,7 +186,7 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i ::: -```markup +```vue
@@ -216,7 +228,7 @@ Use `variant="solid"` to change contextual colors to solid. A simple solid dark alert—check it out! ::: -```markup +```vue A simple solid primary alert—check it out! A simple solid secondary alert—check it out! A simple solid success alert—check it out! @@ -232,42 +244,24 @@ Use `variant="solid"` to change contextual colors to solid. Alerts can also be easily dismissed. Just add the `dismissible` prop. ::: demo - + Go right ahead and click that dimiss over there on the right. ::: -```markup - - Go right ahead and click that dimiss over there on the right. - - - + ``` - - ## Customizing ### CSS variables @@ -279,9 +273,9 @@ Vue alerts use local CSS variables on `.alert` for enhanced real-time customizat #### How to use CSS variables ```js -const vars = { +const vars = { '--my-css-var': 10, - '--my-another-css-var': "red" + '--my-another-css-var': "red" } return ... ``` @@ -294,4 +288,12 @@ return ... !!!include(./api/alert/CAlert.api.md)!!! -!!!include(./api/alert/CAlertHeading.api.md)!!! \ No newline at end of file +!!!include(./api/alert/CAlertHeading.api.md)!!! + + diff --git a/packages/docs/components/collapse.md b/packages/docs/components/collapse.md index 162b1a16..0dffb5d0 100644 --- a/packages/docs/components/collapse.md +++ b/packages/docs/components/collapse.md @@ -28,6 +28,10 @@ You can use a link or a button component. ::: ```vue + - ``` ## Horizontal @@ -69,6 +64,10 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
::: ```vue + - ``` ## Multiple targets @@ -132,6 +122,11 @@ A `` can show and hide multiple elements. ::: ```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 +