diff --git a/README.md b/README.md index 355d7967..31114030 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.2.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.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 f19238c5..8e4098d4 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.2.0", + "version": "5.3.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } 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-icons-vue b/packages/coreui-icons-vue index 9de09384..be8961e2 160000 --- a/packages/coreui-icons-vue +++ b/packages/coreui-icons-vue @@ -1 +1 @@ -Subproject commit 9de09384e7b0ece5196adf30b0f5e25cee77975c +Subproject commit be8961e2115c0c86a1be72e4d0ea176c69ed4740 diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 24bc3f28..1ecdf9ed 100644 --- a/packages/coreui-vue/README.md +++ b/packages/coreui-vue/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.2.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.3.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/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index be156612..0bd4aee3 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.2.0", + "version": "5.3.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", @@ -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.2", "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/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/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/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/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/.vuepress/config.ts b/packages/docs/.vuepress/config.ts index 764793ab..ea00ecf0 100644 --- a/packages/docs/.vuepress/config.ts +++ b/packages/docs/.vuepress/config.ts @@ -21,9 +21,9 @@ export default defineUserConfig({ bundler: viteBundler(), markdown: { anchor: { - permalink: anchor.permalink.ariaHidden({ + permalink: anchor.permalink.linkInsideHeader({ class: 'anchor-link', - placement: 'after', + placement: 'after' }), }, }, diff --git a/packages/docs/.vuepress/src/client/components/Sidebar.vue b/packages/docs/.vuepress/src/client/components/Sidebar.vue index d05ff18f..49581af1 100755 --- a/packages/docs/.vuepress/src/client/components/Sidebar.vue +++ b/packages/docs/.vuepress/src/client/components/Sidebar.vue @@ -1,8 +1,5 @@ diff --git a/packages/docs/.vuepress/src/client/components/SidebarNav.ts b/packages/docs/.vuepress/src/client/components/SidebarNav.ts index 09184a1e..ba1b4a81 100755 --- a/packages/docs/.vuepress/src/client/components/SidebarNav.ts +++ b/packages/docs/.vuepress/src/client/components/SidebarNav.ts @@ -1,14 +1,15 @@ import { defineComponent, h, computed, onMounted, ref } from 'vue' -import type { VNode } from 'vue' -import { RouterLink, useRoute } from 'vue-router' -import type { RouteLocationNormalizedLoaded } from 'vue-router' -import type { ResolvedSidebarItem } from '../../shared' - +import { useRoute } from 'vuepress/client' +import { RouterLink} from 'vue-router' +import { useSidebarItems } from '../composables' import { withBase } from '@vuepress/client' - import { CBadge, CNavGroup, CNavItem, CSidebarNav } from '@coreui/vue/src/' import { CIcon } from '@coreui/icons-vue' +import type { VNode } from 'vue' +import type { RouteLocationNormalizedLoaded } from 'vue-router' +import type { ResolvedSidebarItem } from '../../shared' + const normalizePath = (path: string): string => decodeURI(path) .replace(/#.*$/, '') @@ -43,13 +44,8 @@ const isActiveItem = (route: RouteLocationNormalizedLoaded, item: ResolvedSideba const SidebarNav = defineComponent({ name: 'SidebarNav', - props: { - items: { - type: Array, - required: true, - }, - }, - setup(props) { + setup() { + const sidebarItems = useSidebarItems() const route = useRoute() const firstRender = ref(true) @@ -57,7 +53,7 @@ const SidebarNav = defineComponent({ firstRender.value = false }) - const renderItem = (item: ResolvedSidebarItem): VNode => { + const renderItem = (item: any): VNode => { if (item.children && !item.link.includes('.html')) { const visible = computed(() => item.children.some((child) => isActiveItem(route, child))) @@ -122,7 +118,7 @@ const SidebarNav = defineComponent({ CSidebarNav, {}, { - default: () => props.items.map((item: any) => renderItem(item)), + default: () => sidebarItems.value.map((item: any) => renderItem(item)), } ) }, diff --git a/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts index d68d9dad..cc9aa7b6 100755 --- a/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts +++ b/packages/docs/.vuepress/src/client/composables/useSidebarItems.ts @@ -143,19 +143,20 @@ export const resolveArraySidebarItems = ( } } + // TODO: check if we need this // if the sidebar item is current page and children is not set // use headers of current page as children - if (childItem.link === route.path) { - // skip h1 header - const headers = - page.value.headers[0]?.level === 1 - ? page.value.headers[0].children - : page.value.headers - return { - ...childItem, - children: headersToSidebarItemChildren(headers, sidebarDepth), - } - } + // if (childItem.link === route.path) { + // // skip h1 header + // const headers = + // page.value.headers[0]?.level === 1 + // ? page.value.headers[0].children + // : page.value.headers + // return { + // ...childItem, + // children: headersToSidebarItemChildren(headers, sidebarDepth), + // } + // } return childItem } 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/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'` | - | 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'` | - | 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 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'] | diff --git a/packages/docs/components/alert.md b/packages/docs/components/alert.md index 7a757599..96091ca9 100644 --- a/packages/docs/components/alert.md +++ b/packages/docs/components/alert.md @@ -19,7 +19,8 @@ Vue Alert is prepared for any length of text, as well as an optional close butto A simple light alert—check it out! A simple dark alert—check it out! ::: -```markup + +```vue A simple primary alert—check it out! A simple secondary alert—check it out! A simple success alert—check it out! @@ -38,9 +39,16 @@ Click the button below to show an alert (hidden with inline styles to start), th A simple primary alert—check it out! Show live alert ::: -```markup -A simple primary alert—check it out! -Show live alert + +```vue + + ``` ### 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 +