manifest/nuxt/components/IzborJezika.vue

58 lines
1.2 KiB
Vue

<script setup="setup">
const store = useNastavitveStore()
const izbraniJezik = computed(() => store.izbraniJezik)
const kodeJezikov = computed(() => Object.keys(store.mozniJeziki))
const kodeDrugihJezikov = computed(() => kodeJezikov.value.filter(
(jezik) => jezik !== store.izbraniJezik
))
const slikaJezika = (jezik) => `/images/jezik_${jezik}.png`
// console.log('izbrani jezik!', izbraniJezik.value)
const izbor = ref(false)
</script>
<template>
<div class="izbor">
<div class="jezik" @click="izbor = !izbor">
<img :src="slikaJezika(izbraniJezik)" /> {{ store.mozniJeziki[izbraniJezik] }}
</div>
<div class="drugiJeziki" v-if="izbor">
<div class="jezik" :class="`jezik-${jezik}`" v-for="jezik in kodeDrugihJezikov" @click="() => { store.izberiJezik(jezik); izbor = false }">
<img :src="slikaJezika(jezik)" /> {{ store.mozniJeziki[jezik] }}
</div>
</div>
</div>
</template>
<style>
.izbor {
width: 10rem;
cursor: pointer;
}
.jezik {
display: flex;
align-items: center;
}
.jezik-de img,
.jezik-hr img {
transform: scaleX(-1);
}
.drugiJeziki > div {
margin-top: 5px;
}
img {
margin-right: 5px;
}
</style>