fix: misc form related issues

app/src/components/ConfigPanels.vue

@@ -53,7 +53,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
     </BCardHeader>
 
     <CardForm
-      v-model="modelValue.value"
+      v-model="modelValue"
       :fields="panel.fields"
       :no-footer="!panel.hasApplyButton"
       :sections="panel.sections"

app/src/components/globals/FormField.vue

@@ -171,7 +171,6 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
           {{ asInputGroup ? label : prepend }}
         </BInputGroupText>
         <ReuseTemplate v-bind="{ ariaDescribedby }" />
-        <BInputGroupText v-if="append">{{ append }}</BInputGroupText>
       </BInputGroup>
       <ReuseTemplate v-else v-bind="{ ariaDescribedby }" />
     </template>

app/src/composables/form.ts

@@ -113,7 +113,7 @@ export function useForm<
     // FIXME add option to ask confirmation (with param text confirm)
     return async (e: SubmitEvent) => {
       e.preventDefault()
-      if (!(await v.value.$validate())) return
+      if (!(await v.value.form.$validate())) return
       fn(onErrorFn, serverErrors)
     }
   }

app/src/views/domain/DomainInfo.vue

@@ -219,7 +219,7 @@ async function setAsDefaultDomain() {
     </YCard>
 
     <ConfigPanelsComponent
-      v-model="config.form"
+      v-model="config.form.value"
       :panel="config.panel.value"
       :validations="config.v.value"
       :routes="config.routes"

app/src/views/tool/ToolWebadmin.vue

@@ -16,14 +16,14 @@ const fields = {
   locale: reactive({
     component: 'SelectItem',
     label: ct('tools_webadmin.language'),
-    props: { id: 'locale', choices: settings.availableLocales },
+    cProps: { id: 'locale', choices: settings.availableLocales },
   }) as FormField<'SelectItem', string>,
 
   fallbackLocale: reactive({
     component: 'SelectItem',
     label: ct('tools_webadmin.fallback_language'),
     description: ct('tools_webadmin.fallback_language_description'),
-    props: {
+    cProps: {
       id: 'fallback-locale',
       choices: settings.availableLocales,
     },
@@ -34,21 +34,21 @@ const fields = {
     id: 'cache',
     label: ct('tools_webadmin.cache'),
     description: ct('tools_webadmin.cache_description'),
-    props: { labels: { true: 'enabled', false: 'disabled' } },
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
   }) as FormField<'CheckboxItem', boolean>,
 
   transitions: reactive({
     component: 'CheckboxItem',
     id: 'transitions',
     label: ct('tools_webadmin.transitions'),
-    props: { labels: { true: 'enabled', false: 'disabled' } },
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
   }) as FormField<'CheckboxItem', boolean>,
 
   dark: reactive({
     component: 'CheckboxItem',
     id: 'theme',
     label: ct('tools_webadmin.theme'),
-    props: { labels: { true: '🌙', false: '☀️' } },
+    cProps: { labels: { true: '🌙', false: '☀️' } },
   }) as FormField<'CheckboxItem', boolean>,
 
   experimental: reactive({
@@ -58,7 +58,7 @@ const fields = {
     description: ct('tools_webadmin.experimental_description'),
     // Available in dev mode only
     visible: import.meta.env.DEV,
-    props: { labels: { true: 'enabled', false: 'disabled' } },
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
   }) as FormField<'CheckboxItem', boolean>,
 }
 const form = ref(pick(settings, getKeys(fields)))