EditValue - Support horizontal and Vertical layout

This commit is contained in:
Matthias 2023-05-07 15:38:24 +02:00
parent 96b4385bd1
commit f1c20268da

View File

@ -4,11 +4,13 @@
<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 mt-auto"> <div
class="flex-grow-2 mt-auto d-flex gap-1 ms-1"
:class="alignVertical ? 'flex-column' : 'flex-row'"
>
<template v-if="allowEdit && !(addNew || editing)"> <template v-if="allowEdit && !(addNew || editing)">
<b-button <b-button
size="sm" size="sm"
class="ms-1"
variant="secondary" variant="secondary"
:title="`Edit this ${editableName}.`" :title="`Edit this ${editableName}.`"
@click="editing = true" @click="editing = true"
@ -17,7 +19,6 @@
</b-button> </b-button>
<b-button <b-button
size="sm" size="sm"
class="ms-1"
variant="secondary" variant="secondary"
:title="`Delete this ${editableName}.`" :title="`Delete this ${editableName}.`"
@click="$emit('delete', modelValue)" @click="$emit('delete', modelValue)"
@ -29,7 +30,6 @@
v-if="allowAdd && !(addNew || editing)" v-if="allowAdd && !(addNew || editing)"
size="sm" size="sm"
:title="`Add new ${editableName}.`" :title="`Add new ${editableName}.`"
class="ms-1"
variant="primary" variant="primary"
@click="addNewClick" @click="addNewClick"
><AddIcon :size="16" /> ><AddIcon :size="16" />
@ -38,7 +38,6 @@
<b-button <b-button
size="sm" size="sm"
:title="`Add new '${editableName}`" :title="`Add new '${editableName}`"
class="ms-1"
variant="primary" variant="primary"
@click="saveNewName" @click="saveNewName"
> >
@ -78,6 +77,10 @@ const props = defineProps({
type: String, type: String,
required: true, required: true,
}, },
alignVertical: {
type: Boolean,
default: false,
},
}); });
const emit = defineEmits<{ const emit = defineEmits<{