104 lines
2.5 KiB
Vue
104 lines
2.5 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 = () => {
|
||
|
|
let 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="item card">
|
||
|
|
<div class="item-words">
|
||
|
|
<p v-show="!isEditing">{{ name }}</p>
|
||
|
|
<div v-show="isEditing" class="control">
|
||
|
|
<input v-model="editingName" class="input" type="text"></input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="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="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="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="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="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>
|
||
|
|
div.item {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
padding: 1.25rem;
|
||
|
|
margin-bottom: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.item-words {
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-basis: 0;
|
||
|
|
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.item-icon {
|
||
|
|
margin-left: 0.75rem;
|
||
|
|
}
|
||
|
|
</style>
|