84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
uuid: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'delete', uuid: string): void
|
|
(e: 'share', uuid: string): void
|
|
(e: 'update', uuid: string, name: string): void
|
|
}>()
|
|
|
|
const isEditing = ref<boolean>(false);
|
|
const editingName = ref<string>("");
|
|
|
|
const editItem = () => {
|
|
isEditing.value = true;
|
|
editingName.value = props.name;
|
|
}
|
|
|
|
const shareItem = () => {
|
|
emit('share', props.uuid);
|
|
}
|
|
|
|
const deleteItem = () => {
|
|
emit('delete', props.uuid);
|
|
}
|
|
|
|
const updateItem = () => {
|
|
const new_name = editingName.value;
|
|
editingName.value = "";
|
|
isEditing.value = false;
|
|
emit('update', props.uuid, new_name);
|
|
}
|
|
|
|
const cancelUpdateItem = () => {
|
|
editingName.value = "";
|
|
isEditing.value = false;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="paperbox-item card">
|
|
<div class="paperbox-item-words">
|
|
<p v-show="!isEditing">{{ name }}</p>
|
|
<div v-show="isEditing" class="control">
|
|
<input v-model="editingName" class="input" type="text" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="paperbox-item-icon control" v-show="!isEditing" @click="editItem">
|
|
<a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
|
|
</div>
|
|
<div class="paperbox-item-icon control" v-show="!isEditing" @click="shareItem">
|
|
<a class="button"><span class="icon is-small"><font-awesome-icon
|
|
icon="fas fa-share"></font-awesome-icon></span></a>
|
|
</div>
|
|
<div class="paperbox-item-icon control" v-show="!isEditing" @click="deleteItem">
|
|
<a class="button"><span class="icon is-small"><font-awesome-icon
|
|
icon="fas fa-trash"></font-awesome-icon></span></a>
|
|
</div>
|
|
|
|
<div class="paperbox-item-icon control" v-show="isEditing" @click="updateItem">
|
|
<button class="button"><span class="icon is-small"><font-awesome-icon
|
|
icon="fas fa-check"></font-awesome-icon></span></button>
|
|
</div>
|
|
<div class="paperbox-item-icon control" v-show="isEditing" @click="cancelUpdateItem">
|
|
<button class="button"><span class="icon is-small"><font-awesome-icon
|
|
icon="fas fa-times"></font-awesome-icon></span></button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|