siimee/frontend/src/components/form/input-string.vue

<template lang="pug">
.form--step.input-string
    header
        p input {{input}}
    main.f-col
        input(v-if="!multiline" v-model="input")
        textarea(v-else cols="50" rows="8" v-model="input")
        button(@click="selectOption").w-full next
</template>

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

const emit = defineEmits(['onButtonSelect'])

const props = defineProps({
    default: {
        required: true,
        type: String,
        default: () => 'start',
    },
    multiline: {
        required: false,
        type: Boolean,
        default: true,
    },
    prompt: {
        required: true,
        type: String
    },
})

const input = ref(props.default)

const selectOption = () => {
    const sel = {}
    sel[props.prompt] = input.value
    emit('selected', sel)
}
</script>

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

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