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/Dropdown.vue
+21 -4
View File
@@ -18,13 +18,28 @@ const setTriggerRef = (el: any) => {
}
};
const { floatingStyles } = useFloating(triggerRef, dropdownRef, {
const { floatingStyles, placement } = useFloating(triggerRef, dropdownRef, {
placement: props.placement ?? 'bottom-start',
whileElementsMounted: autoUpdate,
middleware: [offset(6), flip(), shift({ padding: 10 })],
transform: false,
});
const transformOrigin = computed(() => {
switch (placement.value.split('-')[0]) {
case 'top':
return 'transform-origin-bottom-center';
case 'bottom':
return 'transform-origin-top-center';
case 'left':
return 'transform-origin-right-center';
case 'right':
return 'transform-origin-left-center';
default:
return 'transform-origin-bottom-center';
}
});
const toggle = () => (isOpen.value = !isOpen.value);
const close = () => (isOpen.value = false);
@@ -35,11 +50,13 @@ defineExpose({ close });
<slot :setRef="setTriggerRef" :isOpen="isOpen" :toggle="toggle" />
<Teleport to="body">
<Transition enter-active-class="transition-[opacity,transform] duration-150 ease-out"
<Transition
enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
leave-active-class="transition-[opacity,transform] duration-100 ease-in"
leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
<div v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999" :class="dropdownClass">
<div v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999"
:class="[dropdownClass, transformOrigin]">
<div v-click-outside="close"
class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1">
<slot name="dropdown" :close="close" />
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>