8000 refactor(CPopover, CTabs, CTooltips): migrate from `useUniqueId` to `… · coreui/coreui-vue@cab04c2 · GitHub
[go: up one dir, main page]
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)
0