diff --git a/README.md b/README.md index f4dc59ca..0a993209 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-rc.3.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.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` diff --git a/lerna.json b/lerna.json index 2a068bcd..194343e3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.3", + "version": "5.0.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 30e2a72a..f4134e45 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.0.0-rc.3", + "version": "5.0.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts index 65e5936c..3802015d 100644 --- a/packages/coreui-vue/src/components/badge/CBadge.ts +++ b/packages/coreui-vue/src/components/badge/CBadge.ts @@ -50,7 +50,7 @@ const CBadge = defineComponent({ * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' - * @since 5.0.0-rc.3 + * @since 5.0.0 */ textBgColor: Color, /** diff --git a/packages/coreui-vue/src/components/card/CCard.ts b/packages/coreui-vue/src/components/card/CCard.ts index e63631fb..580dc207 100644 --- a/packages/coreui-vue/src/components/card/CCard.ts +++ b/packages/coreui-vue/src/components/card/CCard.ts @@ -15,7 +15,7 @@ const CCard = defineComponent({ * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' - * @since 5.0.0-rc.3 + * @since 5.0.0 */ textBgColor: Color, /** diff --git a/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts b/packages/coreui-vue/src/components/conditional-teleport/CConditionalTeleport.ts index 48df4843..8fd104a1 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-rc.3 + * @since v5.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 8f835633..97ef4fe5 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-rc.3 + * @since v5.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-rc.3 + * @since v5.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 c64d4511..33e96a35 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-rc.3 + * @since v5.0.0 */ navLink: { type: Boolean, diff --git a/packages/coreui-vue/src/components/modal/CModal.ts b/packages/coreui-vue/src/components/modal/CModal.ts index 1c5c12e4..78a238b9 100644 --- a/packages/coreui-vue/src/components/modal/CModal.ts +++ b/packages/coreui-vue/src/components/modal/CModal.ts @@ -54,7 +54,7 @@ const CModal = defineComponent({ /** * Puts the focus on the modal when shown. * - * @since v5.0.0-rc.3 + * @since v5.0.0 */ focus: { type: Boolean, diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 908b0efb..a39aea63 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-rc.3 + * @since v5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/coreui-vue/src/components/progress/CProgress.ts b/packages/coreui-vue/src/components/progress/CProgress.ts index 95b0c532..03c39ed3 100644 --- a/packages/coreui-vue/src/components/progress/CProgress.ts +++ b/packages/coreui-vue/src/components/progress/CProgress.ts @@ -23,7 +23,7 @@ const CProgress = defineComponent({ /** * A string of all className you want applied to the component. * - * @since 5.0.0-rc.3 + * @since 5.0.0 */ progressBarClassName: String, /** diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 2182345d..8ee54061 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-rc.3 + * @since v5.0.0 */ container: { type: [Object, String] as PropType HTMLElement) | string>, diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md index 4ee02b81..4d763c88 100644 --- a/packages/docs/api/badge/CBadge.api.md +++ b/packages/docs/api/badge/CBadge.api.md @@ -8,12 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge' #### 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 | - | 'span' | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | -| **size** | Size the component small. | string | `'sm'` | - | -| **text-bg-color**
5.0.0-rc.3+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | +| 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 | - | 'span' | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - | +| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | +| **size** | Size the component small. | string | `'sm'` | - | +| **text-bg-color**
5.0.0+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **text-color** | Sets the text color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | diff --git a/packages/docs/api/card/CCard.api.md b/packages/docs/api/card/CCard.api.md index 6f6734f7..49c792f9 100644 --- a/packages/docs/api/card/CCard.api.md +++ b/packages/docs/api/card/CCard.api.md @@ -8,8 +8,8 @@ import CCard from '@coreui/vue/src/components/card/CCard' #### Props -| Prop name | Description | Type | Values | Default | -| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **text-bg-color**
5.0.0-rc.3+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | +| Prop name | Description | Type | Values | Default | +| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **text-bg-color**
5.0.0+
| Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **text-color** | Sets the text color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'` | - | diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md index 743b1d0a..66b3972f 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-rc.3+
| 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**
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 | diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md index 8a5b1759..3eaad39f 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-rc.3+
| 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-rc.3+
| 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**
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 | - | - | #### Events diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md index 5c10b591..2c5e2d20 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-rc.3+
| 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**
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'` | - | diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md index 66efacda..582c2798 100644 --- a/packages/docs/api/modal/CModal.api.md +++ b/packages/docs/api/modal/CModal.api.md @@ -8,19 +8,19 @@ 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-rc.3+
| 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 | +| **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 | - | - | #### Events diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md index 11cd30e9..55a94fd7 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-rc.3+
| 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**
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' | | **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/progress/CProgress.api.md b/packages/docs/api/progress/CProgress.api.md index 821d6eef..1236b6ba 100644 --- a/packages/docs/api/progress/CProgress.api.md +++ b/packages/docs/api/progress/CProgress.api.md @@ -8,13 +8,13 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress' #### Props -| Prop name | Description | Type | Values | Default | -| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- | ------- | -| **animated** | Use to animate the stripes right to left via CSS3 animations. | boolean | - | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | number | - | - | -| **progress-bar-class-name**
5.0.0-rc.3+
| A string of all className you want applied to the component. | string | - | - | -| **thin** | Makes progress bar thinner. | boolean | - | - | -| **value** | The percent to progress the ProgressBar. | number | - | 0 | -| **variant** | Set the progress bar variant to optional striped. | string | `'striped'` | - | -| **white** | Change the default color to white. | boolean | - | - | +| Prop name | Description | Type | Values | Default | +| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- | ------- | +| **animated** | Use to animate the stripes right to left via CSS3 animations. | boolean | - | - | +| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | +| **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | number | - | - | +| **progress-bar-class-name**
5.0.0+
| A string of all className you want applied to the component. | string | - | - | +| **thin** | Makes progress bar thinner. | boolean | - | - | +| **value** | The percent to progress the ProgressBar. | number | - | 0 | +| **variant** | Set the progress bar variant to optional striped. | string | `'striped'` | - | +| **white** | Change the default color to white. | boolean | - | - | diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md index 9794c42c..f8f3d672 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-rc.3+
| 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**
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' | | **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/package.json b/packages/docs/package.json index d33b8100..95f61218 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "5.0.0-rc.3", + "version": "5.0.0", "scripts": { "api": "vue-docgen -c build/docgen.config.js", "dev": "vuepress dev --clean-cache",