AI
87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<div class="shell">
|
|
<header class="shell__header">
|
|
<div class="shell__brand">
|
|
<UBadge color="neutral" variant="subtle" class="shell__badge">
|
|
{{ t('app.badge') }}
|
|
</UBadge>
|
|
<h1 class="shell__title">{{ t('app.title') }}</h1>
|
|
<p class="shell__subtitle">{{ t('app.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="shell__actions">
|
|
<USelect
|
|
v-model="currentLocale"
|
|
:items="localeOptions"
|
|
size="sm"
|
|
value-key="value"
|
|
label-key="label"
|
|
class="shell__select"
|
|
/>
|
|
<ClientOnly>
|
|
<USelect
|
|
v-model="themePreference"
|
|
:items="themeOptions"
|
|
size="sm"
|
|
value-key="value"
|
|
label-key="label"
|
|
class="shell__select"
|
|
/>
|
|
<template #fallback>
|
|
<USelect
|
|
:model-value="defaultThemePreference"
|
|
:items="themeOptions"
|
|
size="sm"
|
|
value-key="value"
|
|
label-key="label"
|
|
class="shell__select"
|
|
disabled
|
|
/>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="shell__main">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type LocaleCode = 'sk' | 'en'
|
|
type ThemePreference = 'light' | 'dark' | 'system'
|
|
|
|
const { locale, setLocale, t } = useI18n()
|
|
const colorMode = useColorMode()
|
|
|
|
const localeOptions = computed(() => [
|
|
{ label: 'SK', value: 'sk' },
|
|
{ label: 'EN', value: 'en' }
|
|
])
|
|
|
|
const themeOptions = computed(() => [
|
|
{ label: `${t('theme.toggle')}: ${t('theme.preference.light')}`, value: 'light' },
|
|
{ label: `${t('theme.toggle')}: ${t('theme.preference.dark')}`, value: 'dark' },
|
|
{ label: `${t('theme.toggle')}: ${t('theme.preference.system')}`, value: 'system' }
|
|
])
|
|
|
|
const defaultThemePreference: ThemePreference = 'system'
|
|
|
|
const currentLocale = computed({
|
|
get: () => locale.value as LocaleCode,
|
|
set: (value: LocaleCode) => {
|
|
if (value && value !== locale.value) {
|
|
setLocale(value)
|
|
}
|
|
}
|
|
})
|
|
|
|
const themePreference = computed({
|
|
get: () => colorMode.preference as ThemePreference,
|
|
set: (value: ThemePreference) => {
|
|
colorMode.preference = value
|
|
}
|
|
})
|
|
</script>
|