Skip to content

Commit cab04c2

Browse files
mrholekmrholek
committed
refactor(CPopover, CTabs, CTooltips): migrate from useUniqueId to useId 
1 parent 69a05dd commit cab04c2

File tree

6 files changed

+22
-33
lines changed

6 files changed

+22
-33
lines changed

‎packages/coreui-vue/src/components/popover/CPopover.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
1+
import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
22
import type { Placement } from '@popperjs/core'
33

44
import { CConditionalTeleport } from '../conditional-teleport'
5-
import { useUniqueId, usePopper } from '../../composables'
5+
import { usePopper } from '../../composables'
66
import type { Placements, Triggers } from '../../types'
77
import { executeAfterTransition } from '../../utils/transition'
88
import { getRTLPlacement } from '../../utils'
@@ -117,10 +117,10 @@ const CPopover = defineComponent({
117117
setup(props, { attrs, slots, emit }) {
118118
const togglerRef = ref()
119119
const popoverRef = ref()
120-
const uID = ref()
121120
const visible = ref(props.visible)
122-
const { getUID } = useUniqueId('popover')
121+
123122
const { initPopper, destroyPopper } = usePopper()
123+
const uniqueId = `popover-${useId()}`
124124

125125
const delay =
126126
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
@@ -149,10 +149,6 @@ const CPopover = defineComponent({
149149
placement: getRTLPlacement(props.placement, togglerRef.value),
150150
}
151151

152-
onMounted(() => {
153-
uID.value = getUID()
154-
})
155-
156152
const handleEnter = (el: RendererElement, done: () => void) => {
157153
emit('show')
158154
initPopper(togglerRef.value, popoverRef.value, popperConfig)
@@ -212,7 +208,7 @@ const CPopover = defineComponent({
212208
},
213209
attrs.class,
214210
],
215-
id: uID.value,
211+
id: uniqueId,
216212
ref: popoverRef,
217213
role: 'tooltip',
218214
},
@@ -241,7 +237,7 @@ const CPopover = defineComponent({
241237
),
242238
slots.toggler &&
243239
slots.toggler({
244-
id: visible.value ? uID.value : null,
240+
id: visible.value ? uniqueId : null,
245241
on: {
246242
click: (event: Event) =>
247243
props.trigger.includes('click') && toggleVisible(event, !visible.value),

‎packages/coreui-vue/src/components/tabs/CTab.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const CTab = defineComponent({
1313
},
1414
setup(props, { slots }) {
1515
const activeItemKey = inject('activeItemKey') as Ref<number | string>
16-
const id = inject('id') as Ref<number | string>
16+
const id = inject('id')
1717
const setActiveItemKey = inject('setActiveItemKey') as (key: number | string) => void
1818

1919
const isActive = () => props.itemKey === activeItemKey.value
@@ -28,11 +28,11 @@ const CTab = defineComponent({
2828
active: isActive(),
2929
},
3030
],
31-
id: `${props.itemKey}-tab-${id.value}`,
31+
id: `${props.itemKey}-tab-${id}`,
3232
role: 'tab',
3333
tabindex: isActive() ? 0 : -1,
3434
type: 'button',
35-
'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
35+
'aria-controls': `${props.itemKey}-tab-panel-${id}`,
3636
'aria-selected': isActive(),
3737
onClick: () => setActiveItemKey(props.itemKey),
3838
onFocus: () => setActiveItemKey(props.itemKey),

‎packages/coreui-vue/src/components/tabs/CTabPanel.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@ const CTabPanel = defineComponent({
5050
],
5151
setup(props, { slots, emit }) {
5252
const activeItemKey = inject('activeItemKey') as Ref<number | string>
53-
const id = inject('id') as Ref<number | string>
54-
53+
const id = inject('id')
5554
const tabPaneRef = ref()
5655
const firstRender = ref(true)
5756
const visible = ref()
@@ -112,9 +111,9 @@ const CTabPanel = defineComponent({
112111
show: firstRender.value && visible.value,
113112
},
114113
],
115-
id: `${props.itemKey}-tab-panel-${id.value}`,
114+
id: `${props.itemKey}-tab-panel-${id}`,
116115
role: 'tabpanel',
117-
'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
116+
'aria-labelledby': `${props.itemKey}-tab-${id}`,
118117
tabindex: 0,
119118
ref: tabPaneRef,
120119
},

‎packages/coreui-vue/src/components/tabs/CTabs.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { defineComponent, h, provide, ref, watch } from 'vue'
2-
import { useUniqueId } from '../../composables'
1+
import { defineComponent, h, provide, ref, useId, watch } from 'vue'
32

43
const CTabs = defineComponent({
54
name: 'CTabs',
@@ -19,9 +18,8 @@ const CTabs = defineComponent({
1918
'change',
2019
],
2120
setup(props, { slots, emit }) {
22-
const { getUID } = useUniqueId()
23-
const uID = ref(getUID())
2421
const activeItemKey = ref(props.activeItemKey)
22+
const uniqueId = useId()
2523
const setActiveItemKey = (key: string | number) => {
2624
activeItemKey.value = key
2725
}
@@ -35,7 +33,7 @@ const CTabs = defineComponent({
3533
)
3634

3735
provide('activeItemKey', activeItemKey)
38-
provide('id', uID)
36+
provide('id', uniqueId)
3937
provide('setActiveItemKey', setActiveItemKey)
4038

4139
return () => h('div', { class: 'tabs' }, slots.default && slots.default())

‎packages/coreui-vue/src/components/tooltip/CTooltip.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
1+
import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
22
import type { Placement } from '@popperjs/core'
33

44
import { CConditionalTeleport } from '../conditional-teleport'
5-
import { useUniqueId, usePopper } from '../../composables'
5+
import { usePopper } from '../../composables'
66
import type { Placements, Triggers } from '../../types'
77
import { executeAfterTransition } from '../../utils/transition'
88
import { getRTLPlacement } from '../../utils'
@@ -113,10 +113,10 @@ const CTooltip = defineComponent({
113113
setup(props, { attrs, slots, emit }) {
114114
const togglerRef = ref()
115115
const tooltipRef = ref()
116-
const uID = ref()
117116
const visible = ref(props.visible)
118-
const { getUID } = useUniqueId('popover')
117+
119118
const { initPopper, destroyPopper } = usePopper()
119+
const uniqueId = `tooltip-${useId()}`
120120

121121
const delay =
122122
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
@@ -145,10 +145,6 @@ const CTooltip = defineComponent({
145145
placement: getRTLPlacement(props.placement, togglerRef.value),
146146
}
147147

148-
onMounted(() => {
149-
uID.value = getUID()
150-
})
151-
152148
const handleEnter = (el: RendererElement, done: () => void) => {
153149
emit('show')
154150
initPopper(togglerRef.value, tooltipRef.value, popperConfig)
@@ -208,7 +204,7 @@ const CTooltip = defineComponent({
208204
},
209205
attrs.class,
210206
],
211-
id: uID.value,
207+
id: uniqueId,
212208
ref: tooltipRef,
213209
role: 'tooltip',
214210
},
@@ -229,7 +225,7 @@ const CTooltip = defineComponent({
229225
),
230226
slots.toggler &&
231227
slots.toggler({
232-
id: visible.value ? uID.value : null,
228+
id: visible.value ? uniqueId : null,
233229
on: {
234230
click: (event: Event) =>
235231
props.trigger.includes('click') && toggleVisible(event, !visible.value),

‎packages/coreui-vue/src/composables/useUniqueId.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const useUniqueId = (prefix: string = '') => {
77
do {
88
prefix += Math.floor(Math.random() * 1_000_000)
99
} while (ids.value.includes(prefix))
10-
10+
1111
ids.value.push(prefix)
1212
return prefix
1313
}

0 commit comments

Comments
 (0)
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