feat: basic ui and workflow

2026-07-06 00:22:46 +02:00
parent 56a41989f0
commit 73067f51ce
8 changed files with 125 additions and 59 deletions
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { Task } from "@/types";
+import { Copy, Trash, Check, X } from "@lucide/vue";
+
+const editMode = ref<boolean>(false);
+
+const task = defineModel<Task>({ required: true });
+</script>
+
+<template>
+    <div class="list-row text-left">
+        <div class="content-center">
+            <input type="checkbox" class="checkbox" />
+        </div>
+        <div
+            v-if="!editMode"
+            class="cursor-pointer text-lg select-none"
+            @click.prevent="editMode = true"
+        >
+            {{ task.name }}
+        </div>
+        <template v-else>
+            <div>
+                <input v-model="task.name" type="text" class="input mb-1" />
+                <br />
+                <button class="btn btn-square me-1" @click="editMode = false">
+                    <X />
+                </button>
+                <button class="btn btn-square me-1">
+                    <Check />
+                </button>
+                <button class="btn btn-square me-1">
+                    <Copy />
+                </button>
+                <button class="btn btn-square">
+                    <Trash />
+                </button>
+            </div>
+        </template>
+    </div>
+</template>