refactor: use floating ui for dropdowns
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import { useFloating, offset, flip, shift, autoUpdate, size } from '@floating-ui/vue';
|
||||
import type { Entity } from '@triplit/client';
|
||||
import type schema from '#triplit/schema';
|
||||
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
||||
@@ -13,73 +14,43 @@ const props = defineProps<{
|
||||
providers: ProviderWithModels[];
|
||||
}>();
|
||||
|
||||
const modelSelectorState = reactive({
|
||||
open: false,
|
||||
direction: 'up',
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
const selectedModel = defineModel<ModelWithProvider | null>();
|
||||
|
||||
const dropdownButton = ref<HTMLButtonElement | null>(null);
|
||||
const isOpen = ref(false);
|
||||
const dropdownButton = ref<HTMLElement | null>(null);
|
||||
const dropdownContent = ref<HTMLElement | null>(null);
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null);
|
||||
const dropdownMaxHeight = ref<number | undefined>(undefined);
|
||||
|
||||
const navigatingWithKeyboard = ref(false);
|
||||
const focusedOptionId = ref<string | null>(null);
|
||||
|
||||
const { floatingStyles, placement } = useFloating(dropdownButton, dropdownContent, {
|
||||
placement: 'bottom-start',
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [
|
||||
offset(6),
|
||||
flip(),
|
||||
shift({ padding: 10 }),
|
||||
size({
|
||||
apply({ availableHeight, elements }) {
|
||||
Object.assign(elements.floating.style, {
|
||||
maxHeight: `${Math.min(availableHeight - 20, 460)}px`,
|
||||
});
|
||||
},
|
||||
padding: 10,
|
||||
}),
|
||||
],
|
||||
transform: false,
|
||||
});
|
||||
|
||||
const transformOrigin = computed(() =>
|
||||
placement.value.startsWith('top')
|
||||
? 'transform-origin-bottom-center'
|
||||
: 'transform-origin-top-center'
|
||||
);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (modelSelectorState.open) {
|
||||
closeDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(modelSelectorState);
|
||||
modelSelectorState.open = true;
|
||||
|
||||
setTimeout(() => {
|
||||
document.body.addEventListener('click', closeDropdown);
|
||||
});
|
||||
}
|
||||
|
||||
const findContainer = (startingElement: HTMLElement): HTMLElement | null => {
|
||||
let container: HTMLElement | null = startingElement;
|
||||
while (container) {
|
||||
const computedStyle = getComputedStyle(container);
|
||||
if (computedStyle.overflow !== 'visible') {
|
||||
return container;
|
||||
}
|
||||
container = container.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const calculateDropdownPosition = () => {
|
||||
if (!dropdownButton.value) return;
|
||||
|
||||
const buttonRect = dropdownButton.value.getBoundingClientRect();
|
||||
const container = findContainer(dropdownButton.value) || document.body;
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
|
||||
const spaceAbove = buttonRect.top - containerRect.top;
|
||||
const spaceBelow = containerRect.bottom - buttonRect.bottom;
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
modelSelectorState.direction = 'up';
|
||||
dropdownMaxHeight.value = Math.min(spaceAbove - 20, 460);
|
||||
} else {
|
||||
modelSelectorState.direction = 'down';
|
||||
dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460);
|
||||
}
|
||||
|
||||
modelSelectorState.x = buttonRect.left;
|
||||
if (modelSelectorState.direction === 'up') {
|
||||
const pageHeight = document.body.scrollHeight;
|
||||
modelSelectorState.y = (pageHeight - buttonRect.top) + 6;
|
||||
} else {
|
||||
modelSelectorState.y = buttonRect.bottom + 6;
|
||||
}
|
||||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
|
||||
const searchQuery = ref('');
|
||||
@@ -143,11 +114,10 @@ watch(() => props.providers, () => {
|
||||
selectedModel.value = firstEnabled;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
watch(() => modelSelectorState.open, (open) => {
|
||||
watch(isOpen, (open) => {
|
||||
if (open) {
|
||||
calculateDropdownPosition();
|
||||
nextTick(() => {
|
||||
searchInputRef.value?.focus();
|
||||
});
|
||||
@@ -158,9 +128,7 @@ watch(() => modelSelectorState.open, (open) => {
|
||||
});
|
||||
|
||||
const closeDropdown = () => {
|
||||
document.body.removeEventListener('click', closeDropdown);
|
||||
|
||||
modelSelectorState.open = false;
|
||||
isOpen.value = false;
|
||||
navigatingWithKeyboard.value = false;
|
||||
};
|
||||
|
||||
@@ -198,7 +166,6 @@ const handleSearchKeyDown = (event: KeyboardEvent) => {
|
||||
break;
|
||||
case 'Enter':
|
||||
event.preventDefault();
|
||||
console.log("enter", focusedOptionId.value, flatOptions.value[0]);
|
||||
if (focusedOptionId.value) {
|
||||
const option = flatOptions.value.find(o => o.id === focusedOptionId.value);
|
||||
if (option) {
|
||||
@@ -223,56 +190,49 @@ const unbindShortcut = addShortcut(['ctrl', 'shift', 'm'], (event) => {
|
||||
|
||||
onUnmounted(() => {
|
||||
unbindShortcut();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div role="button" @click="toggleDropdown()" ref="dropdownButton"
|
||||
class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
|
||||
:class="[
|
||||
modelSelectorState.open
|
||||
isOpen
|
||||
? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
|
||||
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
|
||||
]">
|
||||
<ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
|
||||
:model-id="selectedModel.externalId" size="22" />
|
||||
<span class="max-w-fulltruncate">
|
||||
<span class="max-w-full truncate">
|
||||
{{ selectedModel ? selectedModel.name : 'Select a model' }}
|
||||
</span>
|
||||
<span class="i-mynaui-chevron-down text-3.5 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': modelSelectorState.open }"></span>
|
||||
:class="{ 'rotate-180': isOpen }"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
<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 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
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="modelSelectorState.open" ref="dropdownContentRef" role="listbox" aria-label="Select model"
|
||||
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :style="{
|
||||
position: 'absolute',
|
||||
top: modelSelectorState.direction === 'down' ? `${modelSelectorState.y}px` : '',
|
||||
bottom: modelSelectorState.direction === 'up' ? `${modelSelectorState.y}px` : '',
|
||||
left: `${modelSelectorState.x}px`,
|
||||
maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px',
|
||||
height: 'auto'
|
||||
}"
|
||||
class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden z-50"
|
||||
:class="modelSelectorState.direction === 'up' ? 'transform-origin-bottom-center' : 'transform-origin-top-center'">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<span
|
||||
class="i-mynaui-search absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]"></span>
|
||||
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
|
||||
@keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
|
||||
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-if="isOpen" 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="transformOrigin">
|
||||
|
||||
<div class="relative">
|
||||
<span
|
||||
class="i-mynaui-search absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]"></span>
|
||||
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
|
||||
@keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
|
||||
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
|
||||
class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden">
|
||||
<div v-click-outside="closeDropdown"
|
||||
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
|
||||
@@ -283,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="modelSelectorState.open = true; openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
|
||||
@click="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>
|
||||
@@ -291,8 +251,7 @@ onUnmounted(() => {
|
||||
|
||||
<button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)"
|
||||
:key="model.id" :id="`model-option-${model.id}`" role="option"
|
||||
:aria-selected="focusedOptionId === model.id"
|
||||
@click="selectModel(model, provider); modelSelectorState.open = false"
|
||||
:aria-selected="focusedOptionId === model.id" @click="selectModel(model, provider)"
|
||||
class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150"
|
||||
:class="{
|
||||
'bg-[var(--color-hover)]': selectedModel?.id === model.id,
|
||||
@@ -306,7 +265,7 @@ onUnmounted(() => {
|
||||
<div class="p-1 border-t border-[var(--color-border)]">
|
||||
<button
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
|
||||
@click="modelSelectorState.open = false; openDialog(DialogType.Settings, undefined, { page: 'providers' });">
|
||||
@click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers' });">
|
||||
<span class="i-mynaui-cog-four text-4.5"></span>
|
||||
<span>Manage Providers</span>
|
||||
<span class="i-mynaui-arrow-right text-4 ml-auto"></span>
|
||||
|
||||
Reference in New Issue
Block a user