EditValue layout

This commit is contained in:
Matthias 2023-05-07 12:45:02 +02:00
parent 66a3222cd3
commit e1c96c4631

View File

@ -4,7 +4,7 @@
<slot v-if="!editing"> </slot> <slot v-if="!editing"> </slot>
<b-form-input v-else v-model="localName" size="sm"> </b-form-input> <b-form-input v-else v-model="localName" size="sm"> </b-form-input>
</div> </div>
<div class="flex-grow-2"> <div class="flex-grow-2 mt-auto">
<template v-if="allowEdit && !(addNew || editing)"> <template v-if="allowEdit && !(addNew || editing)">
<b-button <b-button
size="sm" size="sm"
@ -34,7 +34,7 @@
@click="addNewClick" @click="addNewClick"
><AddIcon :size="16" /> ><AddIcon :size="16" />
</b-button> </b-button>
<template v-if="allowEdit && (addNew || editing)"> <template v-if="addNew || editing">
<b-button <b-button
size="sm" size="sm"
:title="`Add new '${editableName}`" :title="`Add new '${editableName}`"
@ -59,7 +59,7 @@ import DeleteIcon from 'vue-material-design-icons/Delete.vue';
import EditIcon from 'vue-material-design-icons/Pencil.vue'; import EditIcon from 'vue-material-design-icons/Pencil.vue';
import AddIcon from 'vue-material-design-icons/PlusBoxOutline.vue'; import AddIcon from 'vue-material-design-icons/PlusBoxOutline.vue';
import { ref } from 'vue'; import { ref, watch } from 'vue';
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -101,6 +101,12 @@ function addNewClick() {
addNew.value = true; addNew.value = true;
editing.value = true; editing.value = true;
} }
watch(
() => props.modelValue,
() => {
localName.value = props.modelValue;
},
);
function saveNewName() { function saveNewName() {
editing.value = false; editing.value = false;