28 lines
No EOL
766 B
Vue
28 lines
No EOL
766 B
Vue
<template>
|
|
<aside class="MoodDropdown">
|
|
<button
|
|
v-for="[moodName, mood] in availableMoods"
|
|
:key="mood.label"
|
|
:style="{
|
|
'--background': `var(--clr-${mood.color}-light)`,
|
|
'--color': `var(--clr-${mood.color}-dark)`,
|
|
}"
|
|
@click="changeMood(moodName)"
|
|
>
|
|
<Icon class="icon" :name="`mingcute:${mood.icon}`" mode="svg" />
|
|
<span>{{ mood.label }}</span>
|
|
</button>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type Mood, moods, type PossibleMood } from '../../shared/moods'
|
|
|
|
const availableMoods = computed<[PossibleMood, Mood][]>(() => Object.entries(moods))
|
|
|
|
const emit = defineEmits(['changeMood'])
|
|
|
|
const changeMood = (newMood : PossibleMood) => {
|
|
emit('changeMood', newMood)
|
|
}
|
|
</script> |