Convert footer editing to EditableField

This commit is contained in:
Girish Ramakrishnan
2025-09-11 14:54:39 +02:00
parent 817b0f8167
commit 60d3eba712
2 changed files with 17 additions and 37 deletions

View File

@@ -5,9 +5,11 @@ import { Button, FormGroup, TextInput } from '@cloudron/pankow';
const props = defineProps({
label: { type: String, required: true },
helpUrl: { type: String, required: false },
value: { type: String, required: true },
disabled: { type: Boolean, default: false },
saving: { type: Boolean, default: false }
saving: { type: Boolean, default: false },
multiline: { type: Boolean, default: false },
});
const emit = defineEmits(['save']);
@@ -47,9 +49,10 @@ function cancel() {
<template>
<FormGroup>
<label>{{ label }}</label>
<div v-if="editing" style="display: flex; gap: 6px">
<TextInput ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving"/>
<label>{{ label }} <sup v-if="helpUrl"><a :href="helpUrl" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div v-if="editing" style="display: flex; align-items: center; gap: 6px">
<TextInput v-if="!multiline" ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving"/>
<textarea v-else ref="textInput" rows="2" cols="80" v-model="draftValue" @keydown.enter="save()" :disabled="saving"></textarea>
<Button tool @click="save" :disabled="saving">{{ $t('main.dialog.save') }}</Button>
<Button tool plain secondary @click="cancel" :disabled="saving">{{ $t('main.dialog.cancel') }}</Button>
</div>