refactor(CPopover, CTabs, CTooltips): change to an SSR-friendly unique ID generator

Author: mrholek

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

@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -119,6 +119,7 @@ const CPopover = defineComponent({
     const popoverRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -149,7 +150,7 @@ const CPopover = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('popover')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {

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

@@ -28,11 +28,11 @@ const CTab = defineComponent({
               active: isActive(),
             },
           ],
-          id: `${id.value}${props.itemKey}-tab`,
+          id: `${props.itemKey}-tab-${id.value}`,
           role: 'tab',
           tabindex: isActive() ? 0 : -1,
           type: 'button',
-          'aria-controls': `${id.value}${props.itemKey}-tab-pane`,
+          'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
           'aria-selected': isActive(),
           onClick: () => setActiveItemKey(props.itemKey),
           onFocus: () => setActiveItemKey(props.itemKey),

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

@@ -112,9 +112,9 @@ const CTabPanel = defineComponent({
                     show: firstRender.value && visible.value,
                   },
                 ],
-                id: `${id.value}${props.itemKey}-tab-pane`,
+                id: `${props.itemKey}-tab-panel-${id.value}`,
                 role: 'tabpanel',
-                'aria-labelledby': `${id.value}${props.itemKey}-tab`,
+                'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
                 tabindex: 0,
                 ref: tabPaneRef,
               },

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

@@ -1,5 +1,5 @@
 import { defineComponent, h, provide, ref, watch } from 'vue'
-import { getUID } from '../../utils'
+import { useUniqueId } from '../../composables'
 
 const CTabs = defineComponent({
   name: 'CTabs',
@@ -19,7 +19,8 @@ const CTabs = defineComponent({
     'change',
   ],
   setup(props, { slots, emit }) {
-    const uID = ref(getUID('t'))
+    const { getUID } = useUniqueId()
+    const uID = ref(getUID())
     const activeItemKey = ref(props.activeItemKey)
     const setActiveItemKey = (key: string | number) => {
       activeItemKey.value = key

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

@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { usePopper } from '../../composables'
+import { useUniqueId, usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement, getUID } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
@@ -115,6 +115,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const uID = ref()
     const visible = ref(props.visible)
+    const { getUID } = useUniqueId('popover')
     const { initPopper, destroyPopper } = usePopper()
 
     const delay =
@@ -145,7 +146,7 @@ const CTooltip = defineComponent({
     }
 
     onMounted(() => {
-      uID.value = getUID('tooltip')
+      uID.value = getUID()
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {

packages/coreui-vue/src/composables/index.ts

@@ -1,4 +1,5 @@
 import { useColorModes } from './useColorModes'
+import { useUniqueId } from './useUniqueId'
 import { usePopper } from './usePopper'
 
-export { useColorModes, usePopper }
+export { useColorModes, useUniqueId, usePopper }

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

@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+export const useUniqueId = (prefix: string = '') => {
+  const ids = ref<string[]>([])
+
+  const getUID = () => {
+    do {
+      prefix += Math.floor(Math.random() * 1_000_000)
+    } while (ids.value.includes(prefix))
+    
+    ids.value.push(prefix)
+    return prefix
+  }
+
+  return {
+    getUID,
+  }
+}

packages/coreui-vue/src/directives/v-c-popover.ts

@@ -1,9 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
-
 import type { Options } from '@popperjs/core'
 
-import { getUID } from '../utils'
+import { useUniqueId } from '../composables'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
   const popover = document.createElement('div')
@@ -56,6 +55,7 @@ export default {
   name: 'c-popover',
   uid: '',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const { getUID } = useUniqueId('popover')
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''
     const header = value.header ?? ''
@@ -77,7 +77,7 @@ export default {
       ],
     }
 
-    const uID = getUID('popover')
+    const uID = getUID()
     binding.arg = uID
     const popover = createPopoverElement(uID, header, content)
 

packages/coreui-vue/src/directives/v-c-tooltip.ts

@@ -1,9 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
-
 import type { Options } from '@popperjs/core'
 
-import { getUID } from '../utils'
+import { useUniqueId } from '../composables'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   const tooltip = document.createElement('div')
@@ -54,6 +53,7 @@ const toggleTooltipElement = (
 export default {
   name: 'c-tooltip',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const { getUID } = useUniqueId('tooltip')
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''
     const trigger = value.trigger ?? 'hover'
@@ -74,7 +74,7 @@ export default {
       ],
     }
 
-    const uID = getUID('tooltip')
+    const uID = getUID()
     binding.arg = uID
     const tooltip = createTooltipElement(uID, content)
 

packages/docs/.vuepress/config.ts

@@ -1,7 +1,6 @@
 import { defineUserConfig } from 'vuepress'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
 import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
 import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -11,7 +10,6 @@ import anchor from 'markdown-it-anchor'
 import include_plugin from 'markdown-it-include'
 import { defaultTheme } from './src/node'
 
-import { fileURLToPath, URL } from 'url'
 const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({