siimee/frontend/src/components/form/button-choice.vue

<template lang="pug">
.form--step.button-choice
    header
        p selections {{selected}} {{opts}}
    main(:class="{ 'f-row': opts.length > 2, 'f-col': opts.length <= 2 }")
        button(v-for="op in opts" :class="isSelected(op)" @mouseover="hoverOption(op)" @click="selectOption(op)") {{ op }}
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['selected', 'hovered'])

const props = defineProps({
    opts: {
        required: true,
        type: Array,
        default: () => ['up', 'down'],
        // default: () => ['up', 'left', 'right', 'down'],
    },
    prompt: {
        required: true,
        type: String,
    },
})

const selected = ref([])

const isSelected = val => {
    return selected.value.includes(val) ? 'selected' : ''
}

const selectOption = optionVal => {
    if (!selected.value.includes(optionVal)) {
        selected.value.push(optionVal)
    } else {
        selected.value = selected.value.filter(val => val != optionVal)
    }
    const sel = {}
    sel[props.prompt] = selected.value[0]
    emit('selected', sel)
}
const hoverOption = optionVal => {
    emit('hovered', props.prompt, optionVal)
}
</script>

<style lang="postcss">
// prettier-ignore
@import '@/sss/theme.sss'

.button-choice
    color: white
    main
        flex-wrap: wrap
        button
            padding: 1em
            border: 2px teal solid
            border-radius: 4px
            &.selected
                border: 2px teal dotted
</style>