generated from Nodarx/template
43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import { useL10n } from '@KTXC'
|
|
import type { ThemerMode } from '@/types'
|
|
|
|
defineProps<{
|
|
modelValue: ThemerMode
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: ThemerMode): void
|
|
}>()
|
|
|
|
const { t } = useL10n('themer')
|
|
|
|
const modes: Array<{ value: ThemerMode; icon: string; l10n: string; label: string }> = [
|
|
{ value: 'light', icon: 'mdi-weather-sunny', l10n: 'mode.light', label: 'Light' },
|
|
{ value: 'dark', icon: 'mdi-weather-night', l10n: 'mode.dark', label: 'Dark' },
|
|
{ value: 'system', icon: 'mdi-theme-light-dark', l10n: 'mode.system', label: 'System' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VBtnToggle
|
|
:model-value="modelValue"
|
|
:disabled="disabled"
|
|
mandatory
|
|
divided
|
|
variant="outlined"
|
|
color="primary"
|
|
@update:model-value="emit('update:modelValue', $event as ThemerMode)"
|
|
>
|
|
<VBtn
|
|
v-for="mode in modes"
|
|
:key="mode.value"
|
|
:value="mode.value"
|
|
:prepend-icon="mode.icon"
|
|
>
|
|
{{ t(mode.l10n, mode.label) }}
|
|
</VBtn>
|
|
</VBtnToggle>
|
|
</template>
|