fix: misc form related issues

This commit is contained in:
axolotle 2024-08-21 18:30:26 +02:00
parent 7f79fc812c
commit 008c2c53ab
5 changed files with 9 additions and 10 deletions

View file

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

View file

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

View file

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

View file

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

View file

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