From e579fd7d84250dc8c0379ebbfce39f95291aa3bd Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 14 Sep 2024 12:58:05 +0200 Subject: [PATCH 01/11] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @types/jest ^29.5.12 → ^29.5.13 @typescript-eslint/eslint-plugin ^8.3.0 → ^8.5.0 @typescript-eslint/parser ^8.3.0 → ^8.5.0 @vuepress/plugin-active-header-links 2.0.0-rc.42 → 2.0.0-rc.43 @vuepress/plugin-git 2.0.0-rc.42 → 2.0.0-rc.43 @vuepress/plugin-markdown-container 2.0.0-rc.42 → 2.0.0-rc.43 @vuepress/plugin-theme-data 2.0.0-rc.42 → 2.0.0-rc.43 @vuepress/plugin-toc 2.0.0-rc.42 → 2.0.0-rc.43 eslint-plugin-vue ^9.27.0 → ^9.28.0 markdown-it-anchor ^9.1.0 → ^9.2.0 rollup ^4.21.2 → ^4.21.3 sass ^1.77.8 → ^1.78.0 typescript ^5.5.4 → ^5.6.2 vue ^3.4.38 → ^3.5.5 --- package.json | 6 +++--- packages/coreui-vue/package.json | 8 ++++---- packages/docs/package.json | 14 +++++++------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 41fbecce..baa6b2a6 100644 --- a/package.json +++ b/package.json @@ -22,14 +22,14 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^8.3.0", - "@typescript-eslint/parser": "^8.3.0", + "@typescript-eslint/eslint-plugin": "^8.5.0", + "@typescript-eslint/parser": "^8.5.0", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", "eslint": "8.57.0", "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-vue": "^9.27.0", + "eslint-plugin-vue": "^9.28.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-unicorn": "^55.0.0", "lerna": "^8.1.8", diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 0bd4aee3..1a2070c6 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -48,17 +48,17 @@ "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", - "@types/jest": "^29.5.12", + "@types/jest": "^29.5.13", "@vue/test-utils": "^2.4.6", "@vue/vue3-jest": "29.2.6", "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.21.2", + "rollup": "^4.21.3", "rollup-plugin-vue": "^6.0.0", "ts-jest": "^29.2.5", - "typescript": "^5.5.4", - "vue": "^3.4.38", + "typescript": "^5.6.2", + "vue": "^3.5.5", "vue-types": "^5.1.3" }, "peerDependencies": { diff --git a/packages/docs/package.json b/packages/docs/package.json index 0495b5e1..fd51348c 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -18,18 +18,18 @@ "@docsearch/js": "^3.6.1", "@vuepress/bundler-vite": "2.0.0-rc.15", "@vuepress/bundler-webpack": "2.0.0-rc.15", - "@vuepress/plugin-active-header-links": "2.0.0-rc.42", - "@vuepress/plugin-git": "2.0.0-rc.42", - "@vuepress/plugin-markdown-container": "2.0.0-rc.42", + "@vuepress/plugin-active-header-links": "2.0.0-rc.43", + "@vuepress/plugin-git": "2.0.0-rc.43", + "@vuepress/plugin-markdown-container": "2.0.0-rc.43", "@vuepress/plugin-prismjs": "2.0.0-rc.37", - "@vuepress/plugin-theme-data": "2.0.0-rc.42", + "@vuepress/plugin-theme-data": "2.0.0-rc.43", "@vuepress/plugin-register-components": "2.0.0-rc.42", - "@vuepress/plugin-toc": "2.0.0-rc.42", + "@vuepress/plugin-toc": "2.0.0-rc.43", "@vuepress/shared": "2.0.0-rc.15", "@vuepress/utils": "2.0.0-rc.15", - "markdown-it-anchor": "^9.1.0", + "markdown-it-anchor": "^9.2.0", "markdown-it-include": "^2.0.0", - "sass": "^1.77.8", + "sass": "^1.78.0", "vue-docgen-cli": "^4.79.0", "vuepress": "2.0.0-rc.15" } From 2f96ef25cd5191c1c9ae0ebbeb31ae484dfe57e3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Sep 2024 15:10:27 +0200 Subject: [PATCH 02/11] refactor: update shared props types handling --- .../src/components/form/CFormControlWrapper.ts | 11 ++++++++++- .../coreui-vue/src/components/form/CFormInput.ts | 4 +++- .../coreui-vue/src/components/form/CFormSelect.ts | 4 +++- .../coreui-vue/src/components/form/CFormTextarea.ts | 4 +++- packages/coreui-vue/src/components/nav/CNavItem.ts | 9 +++++++-- .../coreui-vue/src/components/toast/CToastClose.ts | 8 +++++++- .../coreui-vue/src/components/toast/CToastHeader.ts | 13 ++----------- 7 files changed, 35 insertions(+), 18 deletions(-) diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts index e4aee290..6bd12e19 100644 --- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -4,6 +4,15 @@ import { CFormFloating } from './CFormFloating' import { CFormLabel } from './CFormLabel' import { CFormText } from './CFormText' +type CFormControlValidationProps = InstanceType['$props'] + +interface CFormControlWrapperProps { + floatingLabel?: string + id?: string + label?: string + text?: string +} + const CFormControlWrapper = defineComponent({ name: 'CFormControlWrapper', inheritAttrs: false, @@ -32,7 +41,7 @@ const CFormControlWrapper = defineComponent({ */ text: String, }, - setup(props, { slots }) { + setup(props: CFormControlWrapperProps & CFormControlValidationProps, { slots }) { const formControlValidation = () => h( CFormControlValidation, diff --git a/packages/coreui-vue/src/components/form/CFormInput.ts b/packages/coreui-vue/src/components/form/CFormInput.ts index 68746233..8dbe4eca 100644 --- a/packages/coreui-vue/src/components/form/CFormInput.ts +++ b/packages/coreui-vue/src/components/form/CFormInput.ts @@ -130,7 +130,9 @@ const CFormInput = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/form/CFormSelect.ts b/packages/coreui-vue/src/components/form/CFormSelect.ts index b3086b60..23bd7b1b 100644 --- a/packages/coreui-vue/src/components/form/CFormSelect.ts +++ b/packages/coreui-vue/src/components/form/CFormSelect.ts @@ -119,7 +119,9 @@ const CFormSelect = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/form/CFormTextarea.ts b/packages/coreui-vue/src/components/form/CFormTextarea.ts index a953991d..42a8a732 100644 --- a/packages/coreui-vue/src/components/form/CFormTextarea.ts +++ b/packages/coreui-vue/src/components/form/CFormTextarea.ts @@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({ h( CFormControlWrapper, { - describedby: attrs['aria-describedby'], + ...(typeof attrs['aria-describedby'] === 'string' && { + describedby: attrs['aria-describedby'], + }), feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts index 3ed139c7..3dd133a7 100644 --- a/packages/coreui-vue/src/components/nav/CNavItem.ts +++ b/packages/coreui-vue/src/components/nav/CNavItem.ts @@ -2,6 +2,12 @@ import { defineComponent, h } from 'vue' import { CNavLink } from './CNavLink' +type CNavLinkProps = Omit['$props'], 'as'> + +interface CNavItemProps { + as: string +} + const CNavItem = defineComponent({ name: 'CNavItem', props: { @@ -14,12 +20,11 @@ const CNavItem = defineComponent({ default: 'li', }, }, - setup(props, { slots }) { + setup(props: CNavLinkProps & CNavItemProps, { slots }) { return () => h( props.as, { - as: props.component, class: 'nav-item', }, props.href diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index b00e8dd1..6bdbf6a1 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -1,6 +1,12 @@ import { defineComponent, h, inject } from 'vue' import { CCloseButton } from '../close-button/CCloseButton' +type CCloseButtonProps = InstanceType['$props'] + +interface CToastCloseProps { + as: string +} + const CToastClose = defineComponent({ name: 'CToastClose', props: { @@ -16,7 +22,7 @@ const CToastClose = defineComponent({ */ 'close', ], - setup(props, { slots, emit }) { + setup(props: CToastCloseProps & CCloseButtonProps, { slots, emit }) { // eslint-disable-next-line no-unused-vars const updateVisible = inject('updateVisible') as (visible: boolean) => void const handleClose = () => { diff --git a/packages/coreui-vue/src/components/toast/CToastHeader.ts b/packages/coreui-vue/src/components/toast/CToastHeader.ts index 74fbc651..3f822da0 100644 --- a/packages/coreui-vue/src/components/toast/CToastHeader.ts +++ b/packages/coreui-vue/src/components/toast/CToastHeader.ts @@ -9,20 +9,11 @@ const CToastHeader = defineComponent({ */ closeButton: Boolean, }, - emits: [ - /** - * Event called after clicking the close button. - */ - 'close', - ], - setup(props, { slots, emit }) { + setup(props, { slots }) { return () => h('div', { class: 'toast-header' }, [ slots.default && slots.default(), - props.closeButton && - h(CToastClose, { - onClose: () => emit('close'), - }), + props.closeButton && h(CToastClose), ]) }, }) From e0239fdd8886aebc305ed33f88ce97001fc7769a Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Sep 2024 15:17:40 +0200 Subject: [PATCH 03/11] fix(CToastClose): allow passing a custom component as a prop --- packages/coreui-vue/src/components/toast/CToastClose.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index 6bdbf6a1..cd7f4360 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, inject } from 'vue' +import { defineComponent, h, inject, resolveComponent } from 'vue' import { CCloseButton } from '../close-button/CCloseButton' type CCloseButtonProps = InstanceType['$props'] @@ -32,7 +32,7 @@ const CToastClose = defineComponent({ return () => props.as ? h( - props.as, + resolveComponent(props.as), { onClick: () => { handleClose() From 69a05dd4e4aa7443aa9fdf37fa3bef6954c2c545 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 16 Sep 2024 10:05:50 +0200 Subject: [PATCH 04/11] refactor: update shared props types handling --- packages/coreui-vue/package.json | 2 +- .../src/components/form/CFormControlWrapper.ts | 11 ++++++----- packages/coreui-vue/src/components/nav/CNavItem.ts | 7 +++---- .../coreui-vue/src/components/toast/CToastClose.ts | 8 ++++---- packages/coreui-vue/src/utils/ComponentProps.ts | 6 ++++++ packages/docs/build/docgen.config.js | 3 ++- 6 files changed, 22 insertions(+), 15 deletions(-) create mode 100644 packages/coreui-vue/src/utils/ComponentProps.ts diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index 1a2070c6..c72d1a45 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -62,6 +62,6 @@ "vue-types": "^5.1.3" }, "peerDependencies": { - "vue": "^3.2.21" + "vue": "^3.5.0" } } diff --git a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts index 6bd12e19..bdecc2ff 100644 --- a/packages/coreui-vue/src/components/form/CFormControlWrapper.ts +++ b/packages/coreui-vue/src/components/form/CFormControlWrapper.ts @@ -4,9 +4,9 @@ import { CFormFloating } from './CFormFloating' import { CFormLabel } from './CFormLabel' import { CFormText } from './CFormText' -type CFormControlValidationProps = InstanceType['$props'] +import type { ComponentProps } from '../../utils/ComponentProps' -interface CFormControlWrapperProps { +interface CFormControlWrapperProps extends ComponentProps { floatingLabel?: string id?: string label?: string @@ -27,7 +27,9 @@ const CFormControlWrapper = defineComponent({ /** * @ignore */ - id: String, + id: { + type: String, + }, /** * Add a caption for a component. * @@ -41,7 +43,7 @@ const CFormControlWrapper = defineComponent({ */ text: String, }, - setup(props: CFormControlWrapperProps & CFormControlValidationProps, { slots }) { + setup(props: CFormControlWrapperProps, { slots }) { const formControlValidation = () => h( CFormControlValidation, @@ -50,7 +52,6 @@ const CFormControlWrapper = defineComponent({ feedback: props.feedback, feedbackInvalid: props.feedbackInvalid, feedbackValid: props.feedbackValid, - floatingLabel: props.floatingLabel, invalid: props.invalid, tooltipFeedback: props.tooltipFeedback, valid: props.valid, diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts index 3dd133a7..1774dcba 100644 --- a/packages/coreui-vue/src/components/nav/CNavItem.ts +++ b/packages/coreui-vue/src/components/nav/CNavItem.ts @@ -1,10 +1,9 @@ import { defineComponent, h } from 'vue' - import { CNavLink } from './CNavLink' -type CNavLinkProps = Omit['$props'], 'as'> +import type { ComponentProps } from '../../utils/ComponentProps' -interface CNavItemProps { +interface CNavItemProps extends ComponentProps { as: string } @@ -20,7 +19,7 @@ const CNavItem = defineComponent({ default: 'li', }, }, - setup(props: CNavLinkProps & CNavItemProps, { slots }) { + setup(props: CNavItemProps, { slots }) { return () => h( props.as, diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index cd7f4360..a190e323 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -1,10 +1,10 @@ import { defineComponent, h, inject, resolveComponent } from 'vue' import { CCloseButton } from '../close-button/CCloseButton' -type CCloseButtonProps = InstanceType['$props'] +import type { ComponentProps } from '../../utils/ComponentProps' -interface CToastCloseProps { - as: string +interface CCloseButtonProps extends ComponentProps { + as?: string } const CToastClose = defineComponent({ @@ -22,7 +22,7 @@ const CToastClose = defineComponent({ */ 'close', ], - setup(props: CToastCloseProps & CCloseButtonProps, { slots, emit }) { + setup(props: CCloseButtonProps, { slots, emit }) { // eslint-disable-next-line no-unused-vars const updateVisible = inject('updateVisible') as (visible: boolean) => void const handleClose = () => { diff --git a/packages/coreui-vue/src/utils/ComponentProps.ts b/packages/coreui-vue/src/utils/ComponentProps.ts new file mode 100644 index 00000000..5bd3991c --- /dev/null +++ b/packages/coreui-vue/src/utils/ComponentProps.ts @@ -0,0 +1,6 @@ +import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue' + +export type ComponentProps = + T extends DefineComponent, any, any> + ? ExtractPublicPropTypes + : never diff --git a/packages/docs/build/docgen.config.js b/packages/docs/build/docgen.config.js index e4c71f24..7d654712 100644 --- a/packages/docs/build/docgen.config.js +++ b/packages/docs/build/docgen.config.js @@ -8,7 +8,8 @@ module.exports = { components: [ '**/[A-Z]*.ts', '!**/[A-Z]*.d.ts', - '!**/[A-Z]*.spec.ts' + '!**/[A-Z]*.spec.ts', + '!**/ComponentProps.ts', ], outDir: 'api', // folder to save components docs in (relative to the current working directry) getDocFileName: (componentPath) => From cab04c286beaa5c27a6dfcb6aa4c02e088a2508a Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 16 Sep 2024 14:00:15 +0200 Subject: [PATCH 05/11] refactor(CPopover, CTabs, CTooltips): migrate from `useUniqueId` to `useId` --- .../src/components/popover/CPopover.ts | 16 ++++++---------- packages/coreui-vue/src/components/tabs/CTab.ts | 6 +++--- .../coreui-vue/src/components/tabs/CTabPanel.ts | 7 +++---- packages/coreui-vue/src/components/tabs/CTabs.ts | 8 +++----- .../src/components/tooltip/CTooltip.ts | 16 ++++++---------- .../coreui-vue/src/composables/useUniqueId.ts | 2 +- 6 files changed, 22 insertions(+), 33 deletions(-) diff --git a/packages/coreui-vue/src/components/popover/CPopover.ts b/packages/coreui-vue/src/components/popover/CPopover.ts index 03ade861..300f876a 100644 --- a/packages/coreui-vue/src/components/popover/CPopover.ts +++ b/packages/coreui-vue/src/components/popover/CPopover.ts @@ -1,8 +1,8 @@ -import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue' +import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue' import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' -import { useUniqueId, usePopper } from '../../composables' +import { usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' import { getRTLPlacement } from '../../utils' @@ -117,10 +117,10 @@ const CPopover = defineComponent({ setup(props, { attrs, slots, emit }) { const togglerRef = ref() const popoverRef = ref() - const uID = ref() const visible = ref(props.visible) - const { getUID } = useUniqueId('popover') + const { initPopper, destroyPopper } = usePopper() + const uniqueId = `popover-${useId()}` const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay @@ -149,10 +149,6 @@ const CPopover = defineComponent({ placement: getRTLPlacement(props.placement, togglerRef.value), } - onMounted(() => { - uID.value = getUID() - }) - const handleEnter = (el: RendererElement, done: () => void) => { emit('show') initPopper(togglerRef.value, popoverRef.value, popperConfig) @@ -212,7 +208,7 @@ const CPopover = defineComponent({ }, attrs.class, ], - id: uID.value, + id: uniqueId, ref: popoverRef, role: 'tooltip', }, @@ -241,7 +237,7 @@ const CPopover = defineComponent({ ), slots.toggler && slots.toggler({ - id: visible.value ? uID.value : null, + id: visible.value ? uniqueId : null, on: { click: (event: Event) => props.trigger.includes('click') && toggleVisible(event, !visible.value), diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts index 05ce3fe4..b2b178bf 100644 --- a/packages/coreui-vue/src/components/tabs/CTab.ts +++ b/packages/coreui-vue/src/components/tabs/CTab.ts @@ -13,7 +13,7 @@ const CTab = defineComponent({ }, setup(props, { slots }) { const activeItemKey = inject('activeItemKey') as Ref - const id = inject('id') as Ref + const id = inject('id') const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void const isActive = () => props.itemKey === activeItemKey.value @@ -28,11 +28,11 @@ const CTab = defineComponent({ active: isActive(), }, ], - id: `${props.itemKey}-tab-${id.value}`, + id: `${props.itemKey}-tab-${id}`, role: 'tab', tabindex: isActive() ? 0 : -1, type: 'button', - 'aria-controls': `${props.itemKey}-tab-panel-${id.value}`, + 'aria-controls': `${props.itemKey}-tab-panel-${id}`, 'aria-selected': isActive(), onClick: () => setActiveItemKey(props.itemKey), onFocus: () => setActiveItemKey(props.itemKey), diff --git a/packages/coreui-vue/src/components/tabs/CTabPanel.ts b/packages/coreui-vue/src/components/tabs/CTabPanel.ts index a4d23e7d..3182e74f 100644 --- a/packages/coreui-vue/src/components/tabs/CTabPanel.ts +++ b/packages/coreui-vue/src/components/tabs/CTabPanel.ts @@ -50,8 +50,7 @@ const CTabPanel = defineComponent({ ], setup(props, { slots, emit }) { const activeItemKey = inject('activeItemKey') as Ref - const id = inject('id') as Ref - + const id = inject('id') const tabPaneRef = ref() const firstRender = ref(true) const visible = ref() @@ -112,9 +111,9 @@ const CTabPanel = defineComponent({ show: firstRender.value && visible.value, }, ], - id: `${props.itemKey}-tab-panel-${id.value}`, + id: `${props.itemKey}-tab-panel-${id}`, role: 'tabpanel', - 'aria-labelledby': `${props.itemKey}-tab-${id.value}`, + 'aria-labelledby': `${props.itemKey}-tab-${id}`, tabindex: 0, ref: tabPaneRef, }, diff --git a/packages/coreui-vue/src/components/tabs/CTabs.ts b/packages/coreui-vue/src/components/tabs/CTabs.ts index 112decfe..b61908c2 100644 --- a/packages/coreui-vue/src/components/tabs/CTabs.ts +++ b/packages/coreui-vue/src/components/tabs/CTabs.ts @@ -1,5 +1,4 @@ -import { defineComponent, h, provide, ref, watch } from 'vue' -import { useUniqueId } from '../../composables' +import { defineComponent, h, provide, ref, useId, watch } from 'vue' const CTabs = defineComponent({ name: 'CTabs', @@ -19,9 +18,8 @@ const CTabs = defineComponent({ 'change', ], setup(props, { slots, emit }) { - const { getUID } = useUniqueId() - const uID = ref(getUID()) const activeItemKey = ref(props.activeItemKey) + const uniqueId = useId() const setActiveItemKey = (key: string | number) => { activeItemKey.value = key } @@ -35,7 +33,7 @@ const CTabs = defineComponent({ ) provide('activeItemKey', activeItemKey) - provide('id', uID) + provide('id', uniqueId) provide('setActiveItemKey', setActiveItemKey) return () => h('div', { class: 'tabs' }, slots.default && slots.default()) diff --git a/packages/coreui-vue/src/components/tooltip/CTooltip.ts b/packages/coreui-vue/src/components/tooltip/CTooltip.ts index 02ad416e..6fe15d0e 100644 --- a/packages/coreui-vue/src/components/tooltip/CTooltip.ts +++ b/packages/coreui-vue/src/components/tooltip/CTooltip.ts @@ -1,8 +1,8 @@ -import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue' +import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue' import type { Placement } from '@popperjs/core' import { CConditionalTeleport } from '../conditional-teleport' -import { useUniqueId, usePopper } from '../../composables' +import { usePopper } from '../../composables' import type { Placements, Triggers } from '../../types' import { executeAfterTransition } from '../../utils/transition' import { getRTLPlacement } from '../../utils' @@ -113,10 +113,10 @@ const CTooltip = defineComponent({ setup(props, { attrs, slots, emit }) { const togglerRef = ref() const tooltipRef = ref() - const uID = ref() const visible = ref(props.visible) - const { getUID } = useUniqueId('popover') + const { initPopper, destroyPopper } = usePopper() + const uniqueId = `tooltip-${useId()}` const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay @@ -145,10 +145,6 @@ const CTooltip = defineComponent({ placement: getRTLPlacement(props.placement, togglerRef.value), } - onMounted(() => { - uID.value = getUID() - }) - const handleEnter = (el: RendererElement, done: () => void) => { emit('show') initPopper(togglerRef.value, tooltipRef.value, popperConfig) @@ -208,7 +204,7 @@ const CTooltip = defineComponent({ }, attrs.class, ], - id: uID.value, + id: uniqueId, ref: tooltipRef, role: 'tooltip', }, @@ -229,7 +225,7 @@ const CTooltip = defineComponent({ ), slots.toggler && slots.toggler({ - id: visible.value ? uID.value : null, + id: visible.value ? uniqueId : null, on: { click: (event: Event) => props.trigger.includes('click') && toggleVisible(event, !visible.value), diff --git a/packages/coreui-vue/src/composables/useUniqueId.ts b/packages/coreui-vue/src/composables/useUniqueId.ts index 95810c31..e6f724a9 100644 --- a/packages/coreui-vue/src/composables/useUniqueId.ts +++ b/packages/coreui-vue/src/composables/useUniqueId.ts @@ -7,7 +7,7 @@ export const useUniqueId = (prefix: string = '') => { do { prefix += Math.floor(Math.random() * 1_000_000) } while (ids.value.includes(prefix)) - + ids.value.push(prefix) return prefix } From 26656bf73070e34ee705ab4de5cce132a3e7e522 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 16 Sep 2024 14:01:24 +0200 Subject: [PATCH 06/11] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit vue ^3.5.5 → ^3.5.6 --- packages/coreui-vue/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index c72d1a45..d21995b1 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -58,7 +58,7 @@ "rollup-plugin-vue": "^6.0.0", "ts-jest": "^29.2.5", "typescript": "^5.6.2", - "vue": "^3.5.5", + "vue": "^3.5.6", "vue-types": "^5.1.3" }, "peerDependencies": { From 97e58d72a5f37a0ff7fb8556b0fc2c43d89a2309 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 18 Sep 2024 21:40:54 +0200 Subject: [PATCH 07/11] fix(CTabs): add missing `disabled` prop --- packages/coreui-vue/src/components/tabs/CTab.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts index b2b178bf..1c7d8763 100644 --- a/packages/coreui-vue/src/components/tabs/CTab.ts +++ b/packages/coreui-vue/src/components/tabs/CTab.ts @@ -3,6 +3,10 @@ import { defineComponent, h, inject, Ref } from 'vue' const CTab = defineComponent({ name: 'CTab', props: { + /** + * Toggle the disabled state for the component. + */ + disabled: Boolean, /** * Item key. */ @@ -34,6 +38,7 @@ const CTab = defineComponent({ type: 'button', 'aria-controls': `${props.itemKey}-tab-panel-${id}`, 'aria-selected': isActive(), + disabled: props.disabled, onClick: () => setActiveItemKey(props.itemKey), onFocus: () => setActiveItemKey(props.itemKey), }, From 02c1c3a29fee878177563d0f41e0c5b1eff3f1e3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 18 Sep 2024 23:06:31 +0200 Subject: [PATCH 08/11] docs: update content --- packages/docs/components/tabs.md | 104 +++++++++++++++---------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/packages/docs/components/tabs.md b/packages/docs/components/tabs.md index a7c06623..fcb3dd2a 100644 --- a/packages/docs/components/tabs.md +++ b/packages/docs/components/tabs.md @@ -76,16 +76,16 @@ If you don’t provide the `variant` prop, the component will default to a basic Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -100,16 +100,16 @@ If you don’t provide the `variant` prop, the component will default to a basic Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -129,16 +129,16 @@ Take that same code, but use `variant="pills"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -153,16 +153,16 @@ Take that same code, but use `variant="pills"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -182,16 +182,16 @@ Take that same code, but use `variant="underline"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -206,16 +206,16 @@ Take that same code, but use `variant="underline"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -235,16 +235,16 @@ Take that same code, but use `variant="underline-border"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -259,16 +259,16 @@ Take that same code, but use `variant="underline-border"` instead: Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -288,16 +288,16 @@ Force your ``'s contents to extend the full available width one of two mo Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -312,16 +312,16 @@ Force your ``'s contents to extend the full available width one of two mo Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -339,16 +339,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -363,16 +363,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content @@ -404,16 +404,16 @@ Our Vue Tabs component automatically manages all `role="..."` and `aria-` attrib Disabled - + Home tab content - + Profile tab content - + Contact tab content - + Disabled tab content From 5d42d8ad1a8139b8c0bcc0250a2eeda721fc71b3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 22 Sep 2024 14:57:08 +0200 Subject: [PATCH 09/11] docs: update API documentation --- packages/coreui-icons-vue | 2 +- packages/coreui-vue-chartjs | 2 +- packages/coreui-vue/src/components/tabs/CTab.ts | 2 ++ packages/docs/api/tabs/CTab.api.md | 7 ++++--- packages/docs/api/toast/CToastHeader.api.md | 6 ------ 5 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/coreui-icons-vue b/packages/coreui-icons-vue index be8961e2..009583d5 160000 --- a/packages/coreui-icons-vue +++ b/packages/coreui-icons-vue @@ -1 +1 @@ -Subproject commit be8961e2115c0c86a1be72e4d0ea176c69ed4740 +Subproject commit 009583d58f7ea9a2a7bc7a2e62861eba48c0d911 diff --git a/packages/coreui-vue-chartjs b/packages/coreui-vue-chartjs index a3a42cab..f3b8364d 160000 --- a/packages/coreui-vue-chartjs +++ b/packages/coreui-vue-chartjs @@ -1 +1 @@ -Subproject commit a3a42cabd2b34dd1b1b78cbb72d5e6cdc41ba5cd +Subproject commit f3b8364d04dcd94c273ead1f740e1d792a5fb041 diff --git a/packages/coreui-vue/src/components/tabs/CTab.ts b/packages/coreui-vue/src/components/tabs/CTab.ts index 1c7d8763..5eb4c513 100644 --- a/packages/coreui-vue/src/components/tabs/CTab.ts +++ b/packages/coreui-vue/src/components/tabs/CTab.ts @@ -5,6 +5,8 @@ const CTab = defineComponent({ props: { /** * Toggle the disabled state for the component. + * + * @since 5.4.0 */ disabled: Boolean, /** diff --git a/packages/docs/api/tabs/CTab.api.md b/packages/docs/api/tabs/CTab.api.md index ed8dc7b0..7cdff394 100644 --- a/packages/docs/api/tabs/CTab.api.md +++ b/packages/docs/api/tabs/CTab.api.md @@ -8,6 +8,7 @@ import CTab from '@coreui/vue/src/components/tabs/CTab' #### Props -| Prop name | Description | Type | Values | Default | -| ------------ | ----------- | -------------- | ------ | ------- | -| **item-key** | Item key. | number\|string | - | - | +| Prop name | Description | Type | Values | Default | +| ----------------------------------------------------------- | -------------------------------------------- | -------------- | ------ | ------- | +| **disabled**
5.4.0+
| Toggle the disabled state for the component. | boolean | - | - | +| **item-key** | Item key. | number\|string | - | - | diff --git a/packages/docs/api/toast/CToastHeader.api.md b/packages/docs/api/toast/CToastHeader.api.md index fdd97dc8..a8ff8638 100644 --- a/packages/docs/api/toast/CToastHeader.api.md +++ b/packages/docs/api/toast/CToastHeader.api.md @@ -11,9 +11,3 @@ import CToastHeader from '@coreui/vue/src/components/toast/CToastHeader' | Prop name | Description | Type | Values | Default | | ---------------- | ----------------------------------------------- | ------- | ------ | ------- | | **close-button** | Automatically add a close button to the header. | boolean | - | - | - -#### Events - -| Event name | Description | Properties | -| ---------- | --------------------------------------------- | ---------- | -| **close** | Event called after clicking the close button. | From f9a48545538f131f0111754d74a12e688d525185 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 22 Sep 2024 15:12:08 +0200 Subject: [PATCH 10/11] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @typescript-eslint/eslint-plugin ^8.5.0 → ^8.6.0 @typescript-eslint/parser ^8.5.0 → ^8.6.0 @vuepress/plugin-active-header-links 2.0.0-rc.43 → 2.0.0-rc.47 @vuepress/plugin-git 2.0.0-rc.43 → 2.0.0-rc.44 @vuepress/plugin-register-components 2.0.0-rc.42 → 2.0.0-rc.44 @vuepress/plugin-theme-data 2.0.0-rc.43 → 2.0.0-rc.47 @vuepress/plugin-toc 2.0.0-rc.43 → 2.0.0-rc.47 sass ^1.78.0 → ^1.79.3 rollup ^4.21.3 → ^4.22.4 vue ^3.5.6 → ^3.5.8 --- package.json | 4 ++-- packages/coreui-vue/package.json | 4 ++-- packages/docs/package.json | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index baa6b2a6..a8e640de 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": "^8.5.0", - "@typescript-eslint/parser": "^8.5.0", + "@typescript-eslint/eslint-plugin": "^8.6.0", + "@typescript-eslint/parser": "^8.6.0", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/vue3-jest": "29.2.6", diff --git a/packages/coreui-vue/package.json b/packages/coreui-vue/package.json index d21995b1..ac5ee56c 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -54,11 +54,11 @@ "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.21.3", + "rollup": "^4.22.4", "rollup-plugin-vue": "^6.0.0", "ts-jest": "^29.2.5", "typescript": "^5.6.2", - "vue": "^3.5.6", + "vue": "^3.5.8", "vue-types": "^5.1.3" }, "peerDependencies": { diff --git a/packages/docs/package.json b/packages/docs/package.json index fd51348c..65e97cb8 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -18,18 +18,18 @@ "@docsearch/js": "^3.6.1", "@vuepress/bundler-vite": "2.0.0-rc.15", "@vuepress/bundler-webpack": "2.0.0-rc.15", - "@vuepress/plugin-active-header-links": "2.0.0-rc.43", - "@vuepress/plugin-git": "2.0.0-rc.43", + "@vuepress/plugin-active-header-links": "2.0.0-rc.47", + "@vuepress/plugin-git": "2.0.0-rc.44", "@vuepress/plugin-markdown-container": "2.0.0-rc.43", "@vuepress/plugin-prismjs": "2.0.0-rc.37", - "@vuepress/plugin-theme-data": "2.0.0-rc.43", - "@vuepress/plugin-register-components": "2.0.0-rc.42", - "@vuepress/plugin-toc": "2.0.0-rc.43", + "@vuepress/plugin-theme-data": "2.0.0-rc.47", + "@vuepress/plugin-register-components": "2.0.0-rc.44", + "@vuepress/plugin-toc": "2.0.0-rc.47", "@vuepress/shared": "2.0.0-rc.15", "@vuepress/utils": "2.0.0-rc.15", "markdown-it-anchor": "^9.2.0", "markdown-it-include": "^2.0.0", - "sass": "^1.78.0", + "sass": "^1.79.3", "vue-docgen-cli": "^4.79.0", "vuepress": "2.0.0-rc.15" } From 20a9dd2cca60f19d0e76ba6d00e315008f383478 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 22 Sep 2024 18:25:34 +0200 Subject: [PATCH 11/11] release: v5.4.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-vue/README.md | 2 +- packages/coreui-vue/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 31114030..8999a03d 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.3.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.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 8e4098d4..a5830df9 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.3.0", + "version": "5.4.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-vue/README.md b/packages/coreui-vue/README.md index 1ecdf9ed..32c3cc2a 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.3.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-vue/archive/v5.4.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 ac5ee56c..f6d14f23 100644 --- a/packages/coreui-vue/package.json +++ b/packages/coreui-vue/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "5.3.0", + "version": "5.4.0", "description": "UI Components Library for Vue.js", "keywords": [ "vue", diff --git a/packages/docs/package.json b/packages/docs/package.json index 65e97cb8..e164bbd8 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue-docs", - "version": "5.3.0", + "version": "5.4.0", "scripts": { "api": "vue-docgen -c build/docgen.config.js", "dev": "vuepress dev --clean-cache",