55 lines
No EOL
1.1 KiB
Vue
55 lines
No EOL
1.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{ note: any }>()
|
|
const emit = defineEmits<{
|
|
(e: 'done', note: any): void,
|
|
(e: 'updateTitle', title: string): void
|
|
}>()
|
|
|
|
function processNote(note: any) {
|
|
if (note.title === '') {
|
|
return
|
|
}
|
|
emit('done', note)
|
|
}
|
|
|
|
function handleChange(event) {
|
|
emit('updateTitle', (event.target as HTMLInputElement).value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<input type="text"
|
|
:value="note.title"
|
|
@input="handleChange">
|
|
|
|
<div class="btn" @click="processNote(note)">
|
|
<span><font-awesome-icon icon="fa-solid fa-check" /> Add</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;
|
|
}
|
|
|
|
input {
|
|
background-color: #242424;
|
|
border: 1px solid #ccc;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
</style> |