Skip to content

Commit 5845b42

Browse files
webfansplzwebfansplz
committed
fix(rolldown): plugin details virtual list scrolling
1 parent 6d1e13d commit 5845b42

3 files changed

Lines changed: 121 additions & 111 deletions

File tree

‎packages/rolldown/src/app/components/data/PluginDetailsTable.vue‎

Lines changed: 97 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -82,107 +82,109 @@ function toggleDurationSortType() {
8282
</script>
8383

8484
<template>
85-
<div role="table" min-w-max>
86-
<div role="row" class="sticky top-0 z10 border-b border-base" flex="~ row">
87-
<div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
88-
Hook name
89-
</div>
90-
<div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
91-
<button flex="~ row gap1 items-center" w-full>
92-
Module
93-
<VMenu>
85+
<DataVirtualList
86+
v-if="filtered.length && selectedFields.length"
87+
role="table"
88+
min-w-max h-full min-h-0
89+
:items="filtered"
90+
key-prop="id"
91+
:page-mode="false"
92+
>
93+
<template #before>
94+
<div role="row" class="sticky top-0 z10 border-b border-base bg-base" flex="~ row">
95+
<div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
96+
Hook name
97+
</div>
98+
<div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
99+
<button flex="~ row gap1 items-center" w-full>
100+
Module
101+
<VMenu>
102+
<span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
103+
<i text-xs class="i-ph-funnel-duotone" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
104+
</span>
105+
<template #popper>
106+
<div class="p2" flex="~ col gap2">
107+
<label
108+
v-for="rule of searchFilterTypes"
109+
:key="rule.name"
110+
border="~ base rounded-md" px2 py1
111+
flex="~ items-center gap-1"
112+
select-none
113+
:title="rule.description"
114+
class="cursor-pointer module-type-filter"
115+
>
116+
<input
117+
type="checkbox"
118+
mr1
119+
:checked="filterModuleTypes?.includes(rule.name)"
120+
@change="toggleModuleType(rule)"
121+
>
122+
<div :class="rule.icon" icon-catppuccin />
123+
<div text-sm>{{ rule.description || rule.name }}</div>
124+
</label>
125+
</div>
126+
</template>
127+
</VMenu>
128+
</button>
129+
</div>
130+
<div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
131+
<button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
132+
Duration
94133
<span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
95-
<i text-xs class="i-ph-funnel-duotone" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
134+
<i text-xs :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
96135
</span>
97-
<template #popper>
98-
<div class="p2" flex="~ col gap2">
99-
<label
100-
v-for="rule of searchFilterTypes"
101-
:key="rule.name"
102-
border="~ base rounded-md" px2 py1
103-
flex="~ items-center gap-1"
104-
select-none
105-
:title="rule.description"
106-
class="cursor-pointer module-type-filter"
107-
>
108-
<input
109-
type="checkbox"
110-
mr1
111-
:checked="filterModuleTypes?.includes(rule.name)"
112-
@change="toggleModuleType(rule)"
113-
>
114-
<div :class="rule.icon" icon-catppuccin />
115-
<div text-sm>{{ rule.description || rule.name }}</div>
116-
</label>
117-
</div>
118-
</template>
119-
</VMenu>
120-
</button>
121-
</div>
122-
<div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
123-
<button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
124-
Duration
125-
<span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
126-
<i text-xs :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
127-
</span>
128-
</button>
129-
</div>
130-
<div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
131-
Start Time
132-
</div>
133-
<div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
134-
End Time
136+
</button>
137+
</div>
138+
<div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
139+
Start Time
140+
</div>
141+
<div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
142+
End Time
143+
</div>
135144
</div>
136-
</div>
145+
</template>
137146

138-
<DataVirtualList
139-
v-if="filtered.length && selectedFields.length"
140-
role="rowgroup"
141-
:items="filtered"
142-
key-prop="id"
143-
>
144-
<template #default="{ item, index }">
145-
<div
146-
role="row"
147-
flex="~ row"
148-
class="border-base border-b border-dashed"
149-
:class="[index === filtered.length - 1 ? 'border-b-0' : '']"
150-
>
151-
<div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap op80>
152-
<DisplayBadge :text="HOOK_NAME_MAP[item.type]" />
153-
</div>
154-
<div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
155-
<DisplayModuleId
156-
:id="item.module"
157-
w-full border-none ws-nowrap
158-
:session="session"
159-
:link="`/session/${session.id}/graph?module=${item.module}`"
160-
hover="bg-active"
161-
border="~ base rounded" block px2 py1
162-
/>
163-
</div>
164-
<div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
165-
<DisplayDuration :duration="item.duration" />
166-
</div>
167-
<div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
168-
{{ normalizeTimestamp(item.timestamp_start) }}
169-
</div>
170-
<div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
171-
{{ normalizeTimestamp(item.timestamp_end) }}
172-
</div>
147+
<template #default="{ item, index }">
148+
<div
149+
role="row"
150+
flex="~ row"
151+
class="border-base border-b border-dashed"
152+
:class="[index === filtered.length - 1 ? 'border-b-0' : '']"
153+
>
154+
<div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap op80>
155+
<DisplayBadge :text="HOOK_NAME_MAP[item.type]" />
173156
</div>
174-
</template>
175-
</DataVirtualList>
176-
<div v-else>
177-
<div p4>
178-
<div w-full h-48 flex="~ items-center justify-center" op50 italic>
179-
<p v-if="!selectedFields.length">
180-
No columns selected
181-
</p>
182-
<p v-else>
183-
No data
184-
</p>
157+
<div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
158+
<DisplayModuleId
159+
:id="item.module"
160+
w-full border-none ws-nowrap
161+
:session="session"
162+
:link="`/session/${session.id}/graph?module=${item.module}`"
163+
hover="bg-active"
164+
border="~ base rounded" block px2 py1
165+
/>
185166
</div>
167+
<div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
168+
<DisplayDuration :duration="item.duration" />
169+
</div>
170+
<div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
171+
{{ normalizeTimestamp(item.timestamp_start) }}
172+
</div>
173+
<div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
174+
{{ normalizeTimestamp(item.timestamp_end) }}
175+
</div>
176+
</div>
177+
</template>
178+
</DataVirtualList>
179+
<div v-else role="table" min-w-max h-full>
180+
<div p4>
181+
<div w-full h-48 flex="~ items-center justify-center" op50 italic>
182+
<p v-if="!selectedFields.length">
183+
No columns selected
184+
</p>
185+
<p v-else>
186+
No data
187+
</p>
186188
</div>
187189
</div>
188190
</div>

‎packages/rolldown/src/app/components/flowmap/PluginFlow.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ function toggleShowType() {
113113
</template>
114114
</FlowmapPluginFlowTimeline>
115115
</div>
116-
<div flex-1 of-y-auto h-full flex="~ col">
116+
<div flex-1 h-full min-h-0 flex="~ col">
117117
<div flex="~ items-center justify-between" border="b base" px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap>
118118
<div flex="~ items-center" h-full>
119119
<button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
@@ -137,7 +137,7 @@ function toggleShowType() {
137137
</button>
138138
</div>
139139
</div>
140-
<div flex-1 of-y-auto overscroll-contain>
140+
<div flex-1 min-h-0 overscroll-contain>
141141
<DataPluginDetailsTable
142142
:session="session"
143143
:build-metrics="buildMetrics"

‎packages/ui/src/components/DataVirtualList.vue‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@
22
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
33
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
44
5-
defineProps<{
5+
withDefaults(defineProps<{
66
items: T[]
77
keyProp: keyof T
8-
}>()
8+
pageMode?: boolean
9+
}>(), {
10+
pageMode: true,
11+
})
912
1013
defineSlots<{
14+
before?: () => void
1115
default: (props: {
1216
item: T
1317
index: number
@@ -18,23 +22,27 @@ defineSlots<{
1822

1923
<template>
2024
<DynamicScroller
21-
v-slot="{ item, active, index }"
2225
:items="items"
2326
:min-item-size="30"
2427
:key-field="(keyProp as string)"
25-
page-mode
28+
:page-mode="pageMode"
2629
>
27-
<DynamicScrollerItem
28-
:item="(item as T)"
29-
:active="active"
30-
:data-index="index"
31-
>
32-
<slot
33-
v-bind="{ key: (item as T)[keyProp] }"
30+
<template #before>
31+
<slot name="before" />
32+
</template>
33+
<template #default="{ item, active, index }">
34+
<DynamicScrollerItem
3435
:item="(item as T)"
35-
:index="index"
3636
:active="active"
37-
/>
38-
</DynamicScrollerItem>
37+
:data-index="index"
38+
>
39+
<slot
40+
v-bind="{ key: (item as T)[keyProp] }"
41+
:item="(item as T)"
42+
:index="index"
43+
:active="active"
44+
/>
45+
</DynamicScrollerItem>
46+
</template>
3947
</DynamicScroller>
4048
</template>

0 commit comments

Comments
 (0)