Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit78f7c60

Browse files
committed
refactor(CPopover, CTabs, CTooltips): change to an SSR-friendly unique ID generator
1 parenta2767fb commit78f7c60

File tree

10 files changed

+41
-21
lines changed

10 files changed

+41
-21
lines changed

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

Lines 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
importtype{Placement}from'@popperjs/core'
33

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

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

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

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

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

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

Lines 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‎

Lines 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‎

Lines 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
constCTabs=defineComponent({
55
name:'CTabs',
@@ -19,7 +19,8 @@ const CTabs = defineComponent({
1919
'change',
2020
],
2121
setup(props,{ slots, emit}){
22-
constuID=ref(getUID('t'))
22+
const{ getUID}=useUniqueId()
23+
constuID=ref(getUID())
2324
constactiveItemKey=ref(props.activeItemKey)
2425
constsetActiveItemKey=(key:string|number)=>{
2526
activeItemKey.value=key

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

Lines 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
importtype{Placement}from'@popperjs/core'
33

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

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

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

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

151152
consthandleEnter=(el:RendererElement,done:()=>void)=>{
Lines 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}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import{ref}from'vue'
2+
3+
exportconstuseUniqueId=(prefix:string='')=>{
4+
constids=ref<string[]>([])
5+
6+
constgetUID=()=>{
7+
do{
8+
prefix+=Math.floor(Math.random()*1_000_000)
9+
}while(ids.value.includes(prefix))
10+
11+
ids.value.push(prefix)
12+
returnprefix
13+
}
14+
15+
return{
16+
getUID,
17+
}
18+
}

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

Lines 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
importtype{Options}from'@popperjs/core'
54

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

87
constcreatePopoverElement=(id:string,header:string,content:string):HTMLDivElement=>{
98
constpopover=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
constvalue=binding.value
6060
constcontent=typeofvalue==='string' ?value :value.content??''
6161
constheader=value.header??''
@@ -77,7 +77,7 @@ export default {
7777
],
7878
}
7979

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

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

Lines 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
importtype{Options}from'@popperjs/core'
54

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

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

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

‎packages/docs/.vuepress/config.ts‎

Lines 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
importinclude_pluginfrom'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
exportdefaultdefineUserConfig({

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp