zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve dropdowns a small bit

Browse Source
This commit is contained in:
Zoe
2026-03-02 00:12:28 -06:00
parent 71985c325b
commit d40e5a7404
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ModelSelector.vue
+5 -5
View File
@@ -217,10 +217,11 @@ onUnmounted(() => {
leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1">
<KeepAlive>
<div v-if="isOpen" ref="dropdownContent" role="listbox" aria-label="Select model"
<div v-if="isOpen" v-click-outside="closeDropdown" ref="dropdownContent" role="listbox"
aria-label="Select model"
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined"
:style="floatingStyles"
class="fixed z-50 max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
class="fixed z-30 w-full max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
:class="transformOrigin">
<div class="relative">
@@ -231,8 +232,7 @@ onUnmounted(() => {
class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
</div>
<div v-click-outside="closeDropdown"
class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none">
<div class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none">
<div v-if="filteredProviders.length === 0"
class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]">
No models found
@@ -243,7 +243,7 @@ onUnmounted(() => {
class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
{{ provider.name }}
<button
@click="openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
@click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-cog-four text-4"></span>
</button>