diff --git a/src/assets/main.css b/src/assets/main.css index 46aa3d1..eb90575 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -25,6 +25,18 @@ body { flex: 1; } +span.myinput { + position: relative; + cursor: pointer; +} + +.icon-edit { + position: absolute; + transform: translateY(-50%); + top: 55%; + right: 10px; +} + .mybtn { padding: 8px 15px; color: #fff; diff --git a/src/components/icons/IconEdit.vue b/src/components/icons/IconEdit.vue new file mode 100644 index 0000000..ed11ebd --- /dev/null +++ b/src/components/icons/IconEdit.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/views/TasksView.vue b/src/views/TasksView.vue index d3401b9..3e7139b 100644 --- a/src/views/TasksView.vue +++ b/src/views/TasksView.vue @@ -2,6 +2,7 @@ import { useTaskStore, type Task } from '@/stores/tasks' import TaskForm from '@/components/TaskForm.vue' import { ref } from 'vue' +import IconEdit from '@/components/icons/IconEdit.vue' const store = useTaskStore() const form = ref({ show: false, id: '' }) @@ -32,7 +33,12 @@ function openForm(id: string) { :taskId="task.id" @close="form.show = false" /> - {{ task.title }} + + {{ task.title }} +
+ +
+