36 lines
No EOL
904 B
Vue
36 lines
No EOL
904 B
Vue
<script setup lang="ts">
|
|
import { Note } from "../models/Note";
|
|
|
|
defineProps(['note'])
|
|
defineEmits(['delete', 'edit'])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<input type="checkbox" :checked="note.checked">
|
|
<span class="title">{{ note.title }}</span>
|
|
<div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
|
|
<div class="btn" @click="$emit('delete', note)"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12);
|
|
background-color: #272727;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.title {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
input {
|
|
width: 23px;
|
|
height: 23px;
|
|
}
|
|
</style> |