43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<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>
|