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

<template lang="pug">
.form--step.button-multi
    header.f-row
        p {{selected.length}} | {{selected.length == opts.length}}
        p
            span(v-for="sel in selected") {{ sel }}&nbsp;

    main.f-col(v-for="(op, i) in opts" :class="[{ 'selected': selected.length == i }, `step-${i}`, 'step']")
        button(v-for="val in op" @click="selectOption(i, val)") {{ val }}
    main(v-if="opts.length == selected.length").selected
        button(@click="next") next
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'

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

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

const selected = ref([])

const selectOption = (step, optionVal) => {
    selected.value[step] = optionVal
    emit('selected', selected.value)
}

const next = () => {
    emit('next', selected.value)
    selected.value = []
}
</script>

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

.button-multi
    color: white
.step
    flex-wrap: wrap
    display: none
    &.selected
        display: block
    button
        padding: 1em
        border: 2px teal solid
        border-radius: 4px
        &.selected
            border: 2px teal dotted
</style>