46 lines
990 B
Vue
46 lines
990 B
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import {
|
|
adaptStepsToTextarea,
|
|
adaptTextareaToSteps
|
|
} from '../infra/adaptStepsToTextarea'
|
|
import type { Stepable } from '../interfaces/stepable'
|
|
|
|
const props = defineProps<{
|
|
modelValue: Stepable[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', payload: Stepable[]): void
|
|
}>()
|
|
|
|
const rawSteps = ref(adaptStepsToTextarea(props.modelValue))
|
|
|
|
const stepsTextarea = computed({
|
|
get() {
|
|
return rawSteps.value
|
|
},
|
|
set(value) {
|
|
rawSteps.value = value
|
|
|
|
emit('update:modelValue', adaptTextareaToSteps(value))
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="step-input field">
|
|
<label class="label" for="steps">Steps</label>
|
|
<div class="control">
|
|
<textarea
|
|
id="steps"
|
|
name="steps"
|
|
v-model="stepsTextarea"
|
|
rows="15"
|
|
class="textarea"
|
|
placeholder="- [step] | <minutes you estimate it will take>"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</template>
|