43 lines
No EOL
1.1 KiB
Vue
43 lines
No EOL
1.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{ note: any }>()
|
|
const emit = defineEmits<{
|
|
(e: 'delete', note: any): void
|
|
(e: 'edit', note: any): void
|
|
(e: 'updateChecked', checked: boolean): void
|
|
}>()
|
|
|
|
function handleChecked(event) {
|
|
emit('updateChecked', (event.target as HTMLInputElement).checked)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<input type="checkbox" :checked="note.checked" @change="handleChecked">
|
|
<span class="title">{{ note.title }}</span>
|
|
<div class="btn" @click="$emit('edit', note)"><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> |