Skip to content

Commit 247c447

Browse files
webfansplzwebfansplz
committed
refactor: component
1 parent 30b54dc commit 247c447

File tree

3 files changed

+98
-73
lines changed

3 files changed

+98
-73
lines changed

‎packages/vite/src/app/components/modules/PathSelector.vue‎

Lines changed: 23 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import type { ModuleListItem, SessionContext } from '~~/shared/types'
3-
import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
43
import { computed, watch } from 'vue'
54
import { useModulePathSelector } from '~/composables/moduleGraph'
65
@@ -88,80 +87,32 @@ watch([() => startSelector.state.value.selected, () => endSelector.state.value.s
8887
<template>
8988
<div h12 px4 p2 relative flex="~ gap2 items-center">
9089
<div flex="~ items-center gap2" class="flex-1" min-w-0>
91-
<div flex-1 w-0>
92-
<div v-if="startSelector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
93-
<div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
94-
<DisplayModuleId
95-
:id="startSelector.state.value.selected"
96-
:session="session"
97-
block text-nowrap
98-
:link="false"
99-
:disable-tooltip="true"
100-
/>
101-
</div>
102-
<button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="startSelector.clear" />
103-
</div>
104-
<VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
105-
<input
106-
v-model="startSelector.state.value.search"
107-
p1 px4 w-full border="~ base rounded-1" style="outline: none"
108-
placeholder="Start"
109-
@blur="hideAllPoppers"
110-
>
111-
<template #popper>
112-
<div class="p2 w100" flex="~ col gap2">
113-
<ModulesFlatList
114-
:session="session"
115-
:modules="startSelector.modules.value"
116-
disable-tooltip
117-
:link="false"
118-
@select="startSelector.select"
119-
/>
120-
</div>
121-
</template>
122-
</VMenu>
123-
</div>
90+
<ModulesPathSelectorItem
91+
v-model:search="startSelector.state.value.search"
92+
placeholder="Start"
93+
:selector="startSelector"
94+
:session="session"
95+
:modules="startSelector.modules.value"
96+
@clear="() => { startSelector.clear(); endSelector.clear() }"
97+
/>
12498
<div class="i-carbon-arrow-right op50" flex-shrink-0 />
12599

126-
<div flex-1 w-0>
127-
<div v-if="endSelector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
128-
<div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
129-
<DisplayModuleId
130-
:id="endSelector.state.value.selected"
131-
:session="session"
132-
block text-nowrap
133-
:link="false"
134-
:disable-tooltip="true"
135-
/>
100+
<ModulesPathSelectorItem
101+
v-model:search="endSelector.state.value.search"
102+
placeholder="End"
103+
:selector="endSelector"
104+
:session="session"
105+
:modules="filteredEndModules"
106+
@clear="endSelector.clear"
107+
>
108+
<template #empty>
109+
<div flex="~ items-center justify-center" w-full h-20>
110+
<span italic op50>
111+
{{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
112+
</span>
136113
</div>
137-
<button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="() => { startSelector.clear() ; endSelector.clear() }" />
138-
</div>
139-
<VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
140-
<input
141-
v-model="endSelector.state.value.search"
142-
p1 px4 w-full border="~ base rounded-1" style="outline: none"
143-
placeholder="End"
144-
@blur="hideAllPoppers"
145-
>
146-
<template #popper>
147-
<div class="p2 w100" flex="~ col gap2">
148-
<ModulesFlatList
149-
v-if="filteredEndModules.length"
150-
:session="session"
151-
:modules="filteredEndModules"
152-
disable-tooltip
153-
:link="false"
154-
@select="endSelector.select"
155-
/>
156-
<div v-else flex="~ items-center justify-center" w-full h-20>
157-
<span italic op50>
158-
{{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
159-
</span>
160-
</div>
161-
</div>
162-
</template>
163-
</VMenu>
164-
</div>
114+
</template>
115+
</ModulesPathSelectorItem>
165116
</div>
166117

167118
<DisplayCloseButton class="mr--2" @click="emit('close')" />

‎packages/vite/src/app/components/modules/PathSelectorItem.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script setup lang="ts">
2+
import type { ModuleListItem, SessionContext } from '~~/shared/types'
3+
import type { ModulePathSelector } from '~/composables/moduleGraph'
4+
import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
5+
6+
withDefaults(
7+
defineProps<{
8+
selector: ModulePathSelector
9+
placeholder: string
10+
session: SessionContext
11+
modules?: ModuleListItem[]
12+
emptyStateText?: string
13+
onClear?: () => void
14+
}>(),
15+
{
16+
modules: undefined,
17+
emptyStateText: undefined,
18+
onClear: undefined,
19+
},
20+
)
21+
22+
const emit = defineEmits<{
23+
(e: 'clear'): void
24+
}>()
25+
26+
const search = defineModel<string>('search', { required: true })
27+
</script>
28+
29+
<template>
30+
<div flex-1 w-0>
31+
<div v-if="selector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
32+
<div overflow-hidden text-ellipsis pr6 py0.5 w-0 flex-1>
33+
<DisplayModuleId
34+
:id="selector.state.value.selected"
35+
:session="session"
36+
block text-nowrap
37+
:link="false"
38+
:disable-tooltip="true"
39+
/>
40+
</div>
41+
<button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="emit('clear')" />
42+
</div>
43+
<VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }">
44+
<input
45+
v-model="search"
46+
p1
47+
px4 w-full border="~ base rounded-1" style="outline: none" :placeholder="placeholder"
48+
@blur="hideAllPoppers"
49+
>
50+
<template #popper>
51+
<div class="p2 w100" flex="~ col gap2">
52+
<ModulesFlatList
53+
v-if="modules?.length"
54+
:session="session"
55+
:modules="modules"
56+
disable-tooltip
57+
:link="false"
58+
@select="selector.select"
59+
/>
60+
<slot v-else name="empty" />
61+
</div>
62+
</template>
63+
</VMenu>
64+
</div>
65+
</template>

‎packages/vite/src/app/composables/moduleGraph.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,9 +356,18 @@ export function useGraphDraggingScroll() {
356356
}
357357
}
358358

359+
export interface ModulePathSelector {
360+
state: { value: { search: string, selected: string | null } }
361+
modules: ComputedRef<ModuleListItem[]>
362+
fuse: Ref<ComputedRefWithControl<Fuse<ModuleListItem>> | undefined>
363+
initSelector: (modules: ComputedRef<ModuleListItem[]>) => void
364+
select: (module: ModuleListItem) => void
365+
clear: () => void
366+
}
367+
359368
export function useModulePathSelector(options: {
360369
getModules: () => ModuleListItem[]
361-
}) {
370+
}): ModulePathSelector {
362371
const state = ref<{
363372
search: string
364373
selected: string | null

0 commit comments

Comments
 (0)