Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit cab04c2

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

File tree

6 files changed

+22
-33
lines changed
Filter options

6 files changed

+22
-33
lines changed

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/popover/CPopover.ts
+6-10Lines 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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tabs/CTab.ts
+3-3Lines 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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tabs/CTabPanel.ts
+3-4Lines 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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tabs/CTabs.ts
+3-5Lines 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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tooltip/CTooltip.ts
+6-10Lines 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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/composables/useUniqueId.ts
+1-1Lines 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)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.