diff --git a/README.md b/README.md index 3eec02ea..f4dc59ca 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.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.0.0-rc.3.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 49a8b937..2a068bcd 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index bd7fafa4..474a16e6 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.2", + "version": "5.0.0-rc.3", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md index b3c3e1ff..4ee02b81 100644 --- a/packages/docs/api/badge/CBadge.api.md +++ b/packages/docs/api/badge/CBadge.api.md @@ -8,11 +8,12 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge' #### 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'` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | -| **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-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-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'` | - | diff --git a/packages/docs/api/card/CCard.api.md b/packages/docs/api/card/CCard.api.md index facd1fe6..6f6734f7 100644 --- a/packages/docs/api/card/CCard.api.md +++ b/packages/docs/api/card/CCard.api.md @@ -8,7 +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-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-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'` | - | diff --git a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md index ece97230..743b1d0a 100644 --- a/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md +++ b/packages/docs/api/conditional-teleport/CConditionalTeleport.api.md @@ -10,5 +10,5 @@ import CConditionalTeleport from '@coreui/vue/src/components/conditional-telepor | Prop name | Description | Type | Values | Default | | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------- | ------ | ------- | -| **container**
v5.0.0-rc.2+
| An HTML element or function that returns a single element, with `document.body` as the default. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' | +| **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 | diff --git a/packages/docs/api/dropdown/CDropdown.api.md b/packages/docs/api/dropdown/CDropdown.api.md index 02de108d..8a5b1759 100644 --- a/packages/docs/api/dropdown/CDropdown.api.md +++ b/packages/docs/api/dropdown/CDropdown.api.md @@ -12,14 +12,14 @@ import CDropdown from '@coreui/vue/src/components/dropdown/CDropdown' | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | **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.2+
| 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' | +| **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.2+
| Generates dropdown menu using Teleport. | boolean | - | false | +| **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 | - | - | diff --git a/packages/docs/api/dropdown/CDropdownToggle.api.md b/packages/docs/api/dropdown/CDropdownToggle.api.md index 5d6c2b55..5c10b591 100644 --- a/packages/docs/api/dropdown/CDropdownToggle.api.md +++ b/packages/docs/api/dropdown/CDropdownToggle.api.md @@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/vue/src/components/dropdown/CDropdownToggle | **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.2+
| If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | boolean | - | true | +| **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' | diff --git a/packages/docs/api/modal/CModal.api.md b/packages/docs/api/modal/CModal.api.md index fec31d16..66efacda 100644 --- a/packages/docs/api/modal/CModal.api.md +++ b/packages/docs/api/modal/CModal.api.md @@ -13,7 +13,7 @@ import CModal from '@coreui/vue/src/components/modal/CModal' | **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.2+
| Puts the focus on the modal when shown. | boolean | - | true | +| **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 | - | - | diff --git a/packages/docs/api/popover/CPopover.api.md b/packages/docs/api/popover/CPopover.api.md index 3bfa8ba6..11cd30e9 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.2+
| 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-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' | | **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 2f03bcd8..821d6eef 100644 --- a/packages/docs/api/progress/CProgress.api.md +++ b/packages/docs/api/progress/CProgress.api.md @@ -13,7 +13,7 @@ import CProgress from '@coreui/vue/src/components/progress/CProgress' | **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.2+
| A string of all className you want applied to the component. | string | - | - | +| **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'` | - | diff --git a/packages/docs/api/tooltip/CTooltip.api.md b/packages/docs/api/tooltip/CTooltip.api.md index 169db23d..9794c42c 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.2+
| 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-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' | | **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 a2df3ca1..ebd6b72b 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "scripts": { "api": "vue-docgen -c build/docgen.config.js", "dev": "vuepress dev --clean-cache",