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", pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy