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

refactor: use floating ui for dropdowns

Browse Source
This commit is contained in:
Zoe
2026-02-28 22:22:55 -06:00
parent 82ab72dae3
commit e0914b684a
17 changed files with 437 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ThemeSwitcher.vue
+25 -21
View File
@@ -8,7 +8,6 @@ const props = defineProps<{
type Theme = 'light' | 'dark' | 'system';
const { updateSettings, settings } = await useUserSettings();
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
const selectTheme = (colorScheme: Theme) => {
updateSettings({ appearance: { colorScheme } });
@@ -23,27 +22,32 @@ const themeOptions: DropdownItem[] = [
const currentOption = computed(
() => themeOptions.find((option) => option.id === settings.value.appearance.colorScheme) || themeOptions[2],
);
const toggleDropdown = (e: MouseEvent) => {
e.stopPropagation();
if (dropdownState.open) {
closeDropdown();
return;
}
openDropdown(e, () => themeOptions, { verticality: 'ascending', placement: 'right' });
}
</script>
<template>
<button aria-label="Open theme switcher" @click="toggleDropdown"
class="flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
:class="{
'h-7 w-7 text-5': size === 'small',
'h-9 w-9 text-6': size === 'medium',
'h-11 w-11 text-7': size === 'large',
}">
<span :class="['pointer-events-none', currentOption!.icon]"></span>
</button>
<Dropdown placement="top-end" dropdown-class="min-w-35">
<template #default="{ toggle, setRef }">
<button :ref="setRef" @click="toggle"
class="flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
:class="{
'h-7 w-7 text-5': size === 'small',
'h-9 w-9 text-6': size === 'medium',
'h-11 w-11 text-7': size === 'large',
}">
<span :class="['pointer-events-none', currentOption!.icon]"></span>
</button>
</template>
<template #dropdown="{ close }">
<button v-for="option in themeOptions" :key="option.id" @click="option.onClick!(); close()"
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
:class="{
'bg-[var(--color-hover)]': option.id === currentOption?.id,
}">
<span class="text-4.5" :class="option.icon"></span>
<span class="text-sm whitespace-nowrap text-ellipsis max-w-full overflow-hidden">{{ option.label
}}</span>
</button>
</template>
</Dropdown>
</template>