refactor(CPopover, CTabs, CTooltips): migrate from useUniqueId to useId

Author: mrholek

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),

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

@@ -13,7 +13,7 @@ const CTab = defineComponent({
   },
   setup(props, { slots }) {
     const activeItemKey = inject('activeItemKey') as Ref<number | string>
-    const id = inject('id') as Ref<number | string>
+    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),

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<number | string>
-    const id = inject('id') as Ref<number | string>
-
+    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,
               },

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

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),

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
   }