feat: allow form group trigger an edit mode

src/components/generic/FormGroup.vue

 <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>