✨ (step) add step input to beautifully handle all the magic inside

src/use-cases/task/components/NewTaskForm.vue

@@ -3,6 +3,7 @@ import { createUuid } from '@/shared/create-uuid'
 import { reactive, ref } from 'vue'
 import type { Step } from '../models/step'
 import { Task } from '../models/task'
+import StepInput from './StepInput.vue'
 
 const id = createUuid()
 
@@ -25,8 +26,11 @@ const saveTask = () => {
   <div>
     <h1>New Task Form</h1>
     <form @submit.prevent="saveTask">
-      <label for="title">Title</label>
+      <div>
-      <input type="text" id="title" v-model="title" />
+        <label for="title">Title</label>
+        <input type="text" id="title" v-model="title" />
+      </div>
+      <StepInput v-model="steps" />
     </form>
   </div>
 </template>

src/use-cases/task/components/StepInput.test.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import StepInput from './StepInput.vue'
+
+describe('Step input', () => {
+  it('displays a text area with steps inside', () => {
+    const wrapper = mount(StepInput, {
+      props: {
+        modelValue: []
+      }
+    })
+
+    expect(wrapper.text()).toContain('textarea')
+  })
+})

src/use-cases/task/components/StepInput.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Step } from '../models/step'
+
+defineProps<{
+  modelValue: Step[]
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: Step[]): void
+}>()
+</script>
+
+<template>
+  <div class="step-input">
+    <div>textarea</div>
+    <div>beautiful data</div>
+  </div>
+</template>
+
+<style scoped>
+.step-input {
+  display: flex;
+  justify-content: space-between;
+}
+</style>