138 lines
3.7 KiB
Vue
138 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
|
|
defineProps<{
|
|
collapsed?: boolean
|
|
}>()
|
|
|
|
const colorMode = useColorMode()
|
|
const appConfig = useAppConfig()
|
|
|
|
const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
|
|
const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']
|
|
|
|
const presets = [
|
|
{ label: 'Ocean Dark', primary: 'blue', neutral: 'slate', mode: 'dark', icon: 'i-lucide-waves' },
|
|
{ label: 'Forest Light', primary: 'green', neutral: 'stone', mode: 'light', icon: 'i-lucide-tree-pine' },
|
|
{ label: 'Sunset', primary: 'orange', neutral: 'zinc', mode: 'dark', icon: 'i-lucide-sunset' }
|
|
]
|
|
|
|
const applyPreset = (preset: typeof presets[0]) => {
|
|
appConfig.ui.colors.primary = preset.primary
|
|
appConfig.ui.colors.neutral = preset.neutral
|
|
colorMode.preference = preset.mode
|
|
}
|
|
|
|
const items = computed<DropdownMenuItem[][]>(() => ([[{
|
|
type: 'label',
|
|
label: 'Quick Presets',
|
|
icon: 'i-lucide-sparkles'
|
|
}], presets.map(preset => ({
|
|
label: preset.label,
|
|
icon: preset.icon,
|
|
onSelect: () => applyPreset(preset)
|
|
})), [{
|
|
label: 'Theme',
|
|
icon: 'i-lucide-palette',
|
|
children: [{
|
|
label: 'Primary',
|
|
slot: 'chip',
|
|
chip: appConfig.ui.colors.primary,
|
|
content: {
|
|
align: 'center',
|
|
collisionPadding: 16
|
|
},
|
|
children: colors.map(color => ({
|
|
label: color,
|
|
chip: color,
|
|
slot: 'chip',
|
|
checked: appConfig.ui.colors.primary === color,
|
|
type: 'checkbox',
|
|
onSelect: (e) => {
|
|
e.preventDefault()
|
|
appConfig.ui.colors.primary = color
|
|
}
|
|
}))
|
|
}, {
|
|
label: 'Neutral',
|
|
slot: 'chip',
|
|
chip: appConfig.ui.colors.neutral === 'neutral' ? 'old-neutral' : appConfig.ui.colors.neutral,
|
|
content: {
|
|
align: 'end',
|
|
collisionPadding: 16
|
|
},
|
|
children: neutrals.map(color => ({
|
|
label: color,
|
|
chip: color === 'neutral' ? 'old-neutral' : color,
|
|
slot: 'chip',
|
|
type: 'checkbox',
|
|
checked: appConfig.ui.colors.neutral === color,
|
|
onSelect: (e) => {
|
|
e.preventDefault()
|
|
appConfig.ui.colors.neutral = color
|
|
}
|
|
}))
|
|
}]
|
|
}, {
|
|
label: 'Appearance',
|
|
icon: 'i-lucide-sun-moon',
|
|
children: [{
|
|
label: 'Light',
|
|
icon: 'i-lucide-sun',
|
|
type: 'checkbox',
|
|
checked: colorMode.value === 'light',
|
|
onSelect(e: Event) {
|
|
e.preventDefault()
|
|
colorMode.preference = 'light'
|
|
}
|
|
}, {
|
|
label: 'Dark',
|
|
icon: 'i-lucide-moon',
|
|
type: 'checkbox',
|
|
checked: colorMode.value === 'dark',
|
|
onUpdateChecked(checked: boolean) {
|
|
if (checked) {
|
|
colorMode.preference = 'dark'
|
|
}
|
|
},
|
|
onSelect(e: Event) {
|
|
e.preventDefault()
|
|
}
|
|
}]
|
|
}]]))
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdownMenu
|
|
mode="hover"
|
|
:items="items"
|
|
:content="{ align: 'center', collisionPadding: 12 }"
|
|
:ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
|
|
>
|
|
<template #default="{ open }">
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="w-full rounded-none"
|
|
:class="[collapsed ? 'justify-center square' : 'justify-start']"
|
|
:aria-label="collapsed ? 'Settings' : undefined"
|
|
>
|
|
<UIcon
|
|
name="i-lucide-settings"
|
|
class="size-5 shrink-0"
|
|
:class="{ 'animate-spin-slow': open }"
|
|
/>
|
|
|
|
<span v-if="!collapsed" class="truncate">Settings</span>
|
|
|
|
<UIcon
|
|
v-if="!collapsed"
|
|
name="i-lucide-chevrons-up-down"
|
|
class="ms-auto size-5 shrink-0 transform transition-transform duration-200"
|
|
:class="[open && 'rotate-90']"
|
|
/>
|
|
</UButton>
|
|
</template>
|
|
</UDropdownMenu>
|
|
</template>
|