diff --git a/src/components/generic/FormGroup.vue b/src/components/generic/FormGroup.vue index f27913c0ad24000b41544f18216472a84616b71c..c75104e8cfdaeaec17a1accc9fa3cc017d81aec0 100644 --- a/src/components/generic/FormGroup.vue +++ b/src/components/generic/FormGroup.vue @@ -1,6 +1,14 @@ <template> <div class="form-group tw-block" :class="formGroupClass"> - <label :for="id" class="tw-text-gray-500 tw-font-medium tw-pt-1">{{ label }}</label> + <label + :for="id" + class="tw-text-gray-500 tw-font-medium tw-pt-1 tw-flex tw-gap-2 tw-items-center" + > + <span>{{ label }}</span> + <button v-if="withEditButton" type="button" class="btn btn-sm tw-p-0" @click="emit('edit')"> + <icon-system-uicons-pen /> + </button> + </label> <div class="tw-flex tw-flex-col"> <slot v-bind="controlAttributes" /> <div v-if="hasErrors" :id="errorsId" class="invalid-feedback tw-order-first"> @@ -25,6 +33,8 @@ import { computed, inject } from 'vue' import { useId } from '@/util' import { useI18n } from '@/i18n' +defineOptions({ compatConfig: { MODE: 3 } }) + type Error = { code: string message?: string @@ -34,6 +44,10 @@ const props = defineProps<{ label: string customControl?: boolean errors?: undefined | Error[] + withEditButton?: boolean +}>() +const emit = defineEmits<{ + edit: [] }>() const { t } = useI18n() @@ -51,11 +65,3 @@ const controlAttributes = computed(() => ({ id: id.value, })) </script> - -<script lang="ts"> -export default { - compatConfig: { - MODE: 3, - }, -} -</script>