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 78f7c60

Browse filesBrowse files
mrholekmrholek
committed
refactor(CPopover, CTabs, CTooltips): change to an SSR-friendly unique ID generator
1 parent a2767fb commit 78f7c60
Copy full SHA for 78f7c60

File tree

10 files changed

+41
-21
lines changed
Filter options

10 files changed

+41
-21
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
+4-3Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
22
import type { Placement } from '@popperjs/core'
33

44
import { CConditionalTeleport } from '../conditional-teleport'
5-
import { usePopper } from '../../composables'
5+
import { useUniqueId, usePopper } from '../../composables'
66
import type { Placements, Triggers } from '../../types'
77
import { executeAfterTransition } from '../../utils/transition'
8-
import { getRTLPlacement, getUID } from '../../utils'
8+
import { getRTLPlacement } from '../../utils'
99

1010
const CPopover = defineComponent({
1111
name: 'CPopover',
@@ -119,6 +119,7 @@ const CPopover = defineComponent({
119119
const popoverRef = ref()
120120
const uID = ref()
121121
const visible = ref(props.visible)
122+
const { getUID } = useUniqueId('popover')
122123
const { initPopper, destroyPopper } = usePopper()
123124

124125
const delay =
@@ -149,7 +150,7 @@ const CPopover = defineComponent({
149150
}
150151

151152
onMounted(() => {
152-
uID.value = getUID('popover')
153+
uID.value = getUID()
153154
})
154155

155156
const handleEnter = (el: RendererElement, done: () => void) => {

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tabs/CTab.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ const CTab = defineComponent({
2828
active: isActive(),
2929
},
3030
],
31-
id: `${id.value}${props.itemKey}-tab`,
31+
id: `${props.itemKey}-tab-${id.value}`,
3232
role: 'tab',
3333
tabindex: isActive() ? 0 : -1,
3434
type: 'button',
35-
'aria-controls': `${id.value}${props.itemKey}-tab-pane`,
35+
'aria-controls': `${props.itemKey}-tab-panel-${id.value}`,
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
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,9 @@ const CTabPanel = defineComponent({
112112
show: firstRender.value && visible.value,
113113
},
114114
],
115-
id: `${id.value}${props.itemKey}-tab-pane`,
115+
id: `${props.itemKey}-tab-panel-${id.value}`,
116116
role: 'tabpanel',
117-
'aria-labelledby': `${id.value}${props.itemKey}-tab`,
117+
'aria-labelledby': `${props.itemKey}-tab-${id.value}`,
118118
tabindex: 0,
119119
ref: tabPaneRef,
120120
},

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tabs/CTabs.ts
+3-2Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { defineComponent, h, provide, ref, watch } from 'vue'
2-
import { getUID } from '../../utils'
2+
import { useUniqueId } from '../../composables'
33

44
const CTabs = defineComponent({
55
name: 'CTabs',
@@ -19,7 +19,8 @@ const CTabs = defineComponent({
1919
'change',
2020
],
2121
setup(props, { slots, emit }) {
22-
const uID = ref(getUID('t'))
22+
const { getUID } = useUniqueId()
23+
const uID = ref(getUID())
2324
const activeItemKey = ref(props.activeItemKey)
2425
const setActiveItemKey = (key: string | number) => {
2526
activeItemKey.value = key

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tooltip/CTooltip.ts
+4-3Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transiti
22
import type { Placement } from '@popperjs/core'
33

44
import { CConditionalTeleport } from '../conditional-teleport'
5-
import { usePopper } from '../../composables'
5+
import { useUniqueId, usePopper } from '../../composables'
66
import type { Placements, Triggers } from '../../types'
77
import { executeAfterTransition } from '../../utils/transition'
8-
import { getRTLPlacement, getUID } from '../../utils'
8+
import { getRTLPlacement } from '../../utils'
99

1010
const CTooltip = defineComponent({
1111
name: 'CTooltip',
@@ -115,6 +115,7 @@ const CTooltip = defineComponent({
115115
const tooltipRef = ref()
116116
const uID = ref()
117117
const visible = ref(props.visible)
118+
const { getUID } = useUniqueId('popover')
118119
const { initPopper, destroyPopper } = usePopper()
119120

120121
const delay =
@@ -145,7 +146,7 @@ const CTooltip = defineComponent({
145146
}
146147

147148
onMounted(() => {
148-
uID.value = getUID('tooltip')
149+
uID.value = getUID()
149150
})
150151

151152
const handleEnter = (el: RendererElement, done: () => void) => {

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

Copy file name to clipboard
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useColorModes } from './useColorModes'
2+
import { useUniqueId } from './useUniqueId'
23
import { usePopper } from './usePopper'
34

4-
export { useColorModes, usePopper }
5+
export { useColorModes, useUniqueId, usePopper }

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

Copy file name to clipboard
+18Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ref } from 'vue'
2+
3+
export const useUniqueId = (prefix: string = '') => {
4+
const ids = ref<string[]>([])
5+
6+
const getUID = () => {
7+
do {
8+
prefix += Math.floor(Math.random() * 1_000_000)
9+
} while (ids.value.includes(prefix))
10+
11+
ids.value.push(prefix)
12+
return prefix
13+
}
14+
15+
return {
16+
getUID,
17+
}
18+
}

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/directives/v-c-popover.ts
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { DirectiveBinding } from 'vue'
22
import { createPopper } from '@popperjs/core'
3-
43
import type { Options } from '@popperjs/core'
54

6-
import { getUID } from '../utils'
5+
import { useUniqueId } from '../composables'
76

87
const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
98
const popover = document.createElement('div')
@@ -56,6 +55,7 @@ export default {
5655
name: 'c-popover',
5756
uid: '',
5857
mounted(el: HTMLElement, binding: DirectiveBinding): void {
58+
const { getUID } = useUniqueId('popover')
5959
const value = binding.value
6060
const content = typeof value === 'string' ? value : value.content ?? ''
6161
const header = value.header ?? ''
@@ -77,7 +77,7 @@ export default {
7777
],
7878
}
7979

80-
const uID = getUID('popover')
80+
const uID = getUID()
8181
binding.arg = uID
8282
const popover = createPopoverElement(uID, header, content)
8383

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

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/directives/v-c-tooltip.ts
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { DirectiveBinding } from 'vue'
22
import { createPopper } from '@popperjs/core'
3-
43
import type { Options } from '@popperjs/core'
54

6-
import { getUID } from '../utils'
5+
import { useUniqueId } from '../composables'
76

87
const createTooltipElement = (id: string, content: string): HTMLDivElement => {
98
const tooltip = document.createElement('div')
@@ -54,6 +53,7 @@ const toggleTooltipElement = (
5453
export default {
5554
name: 'c-tooltip',
5655
mounted(el: HTMLElement, binding: DirectiveBinding): void {
56+
const { getUID } = useUniqueId('tooltip')
5757
const value = binding.value
5858
const content = typeof value === 'string' ? value : value.content ?? ''
5959
const trigger = value.trigger ?? 'hover'
@@ -74,7 +74,7 @@ export default {
7474
],
7575
}
7676

77-
const uID = getUID('tooltip')
77+
const uID = getUID()
7878
binding.arg = uID
7979
const tooltip = createTooltipElement(uID, content)
8080

‎packages/docs/.vuepress/config.ts

Copy file name to clipboardExpand all lines: packages/docs/.vuepress/config.ts
-2Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { defineUserConfig } from 'vuepress'
22
import { viteBundler } from '@vuepress/bundler-vite'
33
import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
4-
import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
54
import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
65
import { prismjsPlugin } from '@vuepress/plugin-prismjs'
76
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -11,7 +10,6 @@ import anchor from 'markdown-it-anchor'
1110
import include_plugin from 'markdown-it-include'
1211
import { defaultTheme } from './src/node'
1312

14-
import { fileURLToPath, URL } from 'url'
1513
const __dirname = getDirname(import.meta.url)
1614

1715
export default defineUserConfig({

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.