93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import CircleCheckIcon from '@/assets/icons/CircleCheckIcon.vue'
|
|
import CircleIcon from '@/assets/icons/CircleIcon.vue'
|
|
|
|
interface LocaleOption {
|
|
code: string
|
|
name: string
|
|
flag: string
|
|
}
|
|
|
|
interface Props {
|
|
modelValue: string
|
|
id: string
|
|
locales: LocaleOption[]
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: string): void
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const selectModel = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="localeselect">
|
|
<div v-for="locale in locales" class="localeselect__locale" :key="`locale-${locale.code}`">
|
|
<input
|
|
type="radio"
|
|
name="lang"
|
|
class="localeselect__input"
|
|
:id="`lang-${locale.code}`"
|
|
:value="locale.code"
|
|
v-model="selectModel"
|
|
/>
|
|
<label class="localeselect__label" :for="`lang-${locale.code}`">
|
|
<CircleCheckIcon v-if="$i18n.locale === locale.code" />
|
|
<CircleIcon v-else />
|
|
<span>{{ locale.name }} {{ locale.flag }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.localeselect {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
|
|
margin: var(--paragraph-margin) 0;
|
|
|
|
&__locale {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
&__input {
|
|
display: none;
|
|
}
|
|
|
|
&__label {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
svg {
|
|
flex: 1 0 1.25rem;
|
|
fill: var(--color-text);
|
|
transition: 0.4s;
|
|
}
|
|
|
|
span {
|
|
flex: 1 0 auto;
|
|
margin: 0 0 0 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|