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

Commitcab04c2

Browse files
committed
refactor(CPopover, CTabs, CTooltips): migrate fromuseUniqueId touseId
1 parent69a05dd commitcab04c2

File tree

6 files changed

+22
-33
lines changed

6 files changed

+22
-33
lines changed

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

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

44
import{CConditionalTeleport}from'../conditional-teleport'
5-
import{useUniqueId,usePopper}from'../../composables'
5+
import{usePopper}from'../../composables'
66
importtype{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
consttogglerRef=ref()
119119
constpopoverRef=ref()
120-
constuID=ref()
121120
constvisible=ref(props.visible)
122-
const{ getUID}=useUniqueId('popover')
121+
123122
const{ initPopper, destroyPopper}=usePopper()
123+
constuniqueId=`popover-${useId()}`
124124

125125
constdelay=
126126
typeofprops.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
consthandleEnter=(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‎

Lines 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
constactiveItemKey=inject('activeItemKey')asRef<number|string>
16-
constid=inject('id')asRef<number|string>
16+
constid=inject('id')
1717
constsetActiveItemKey=inject('setActiveItemKey')as(key:number|string)=>void
1818

1919
constisActive=()=>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‎

Lines 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
constactiveItemKey=inject('activeItemKey')asRef<number|string>
53-
constid=inject('id')asRef<number|string>
54-
53+
constid=inject('id')
5554
consttabPaneRef=ref()
5655
constfirstRender=ref(true)
5756
constvisible=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‎

Lines 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
constCTabs=defineComponent({
54
name:'CTabs',
@@ -19,9 +18,8 @@ const CTabs = defineComponent({
1918
'change',
2019
],
2120
setup(props,{ slots, emit}){
22-
const{ getUID}=useUniqueId()
23-
constuID=ref(getUID())
2421
constactiveItemKey=ref(props.activeItemKey)
22+
constuniqueId=useId()
2523
constsetActiveItemKey=(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‎

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

44
import{CConditionalTeleport}from'../conditional-teleport'
5-
import{useUniqueId,usePopper}from'../../composables'
5+
import{usePopper}from'../../composables'
66
importtype{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
consttogglerRef=ref()
115115
consttooltipRef=ref()
116-
constuID=ref()
117116
constvisible=ref(props.visible)
118-
const{ getUID}=useUniqueId('popover')
117+
119118
const{ initPopper, destroyPopper}=usePopper()
119+
constuniqueId=`tooltip-${useId()}`
120120

121121
constdelay=
122122
typeofprops.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
consthandleEnter=(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‎

Lines 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
returnprefix
1313
}

0 commit comments

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