diff --git a/docs/content/2.customization/1.config.md b/docs/content/2.customization/1.config.md
index 32b7eee..854a5df 100644
--- a/docs/content/2.customization/1.config.md
+++ b/docs/content/2.customization/1.config.md
@@ -104,6 +104,30 @@ Consult the [Submit Button](./submit_button) documentation for more information.
}
```
+### `modal`
+
+Set default button labels for ``. This is useful for i18n or ensuring consistent wording across all modal forms.
+
+```ts-type
+{
+ /** Default label for the submit button. @default 'Submit' */
+ submitLabel?: string
+ /** Default label for the cancel/close button. @default 'Cancel' */
+ closeLabel?: string
+}
+```
+
+```ts [app.config.ts]
+export default defineAppConfig({
+ autoForm: {
+ modal: {
+ submitLabel: 'Confirm',
+ closeLabel: 'Dismiss',
+ },
+ },
+})
+```
+
### `theme`
This option allows you to customize default form themes.
diff --git a/docs/content/3.components/3.form-modal.md b/docs/content/3.components/3.form-modal.md
index 265d942..b3ce19e 100644
--- a/docs/content/3.components/3.form-modal.md
+++ b/docs/content/3.components/3.form-modal.md
@@ -59,14 +59,6 @@ Modal title displayed in the header.
Modal description displayed below the title.
-### `submitLabel`
-
-Label for the submit button. Defaults to `"Submit"`.
-
-### `closeLabel`
-
-Label for the close/cancel button. Defaults to `"Cancel"`.
-
### `modalProps`
Additional props to pass to the underlying `UModal` component.
diff --git a/playground/app/pages/modal.vue b/playground/app/pages/modal.vue
index 92a198b..7285bfb 100644
--- a/playground/app/pages/modal.vue
+++ b/playground/app/pages/modal.vue
@@ -59,8 +59,7 @@ function _triggerExternalSubmit() {
title="Test Form Modal"
description="Fill in the form below"
:schema="basicSchema"
- submit-label="Save"
- close-label="Cancel"
+ :config="{ modal: { submitLabel: 'Save', closeLabel: 'Cancel' } }"
@submit="onSubmit"
/>
@@ -71,7 +70,7 @@ function _triggerExternalSubmit() {
description="Edit the existing data"
:schema="advancedSchema"
:initial-state="initialData"
- submit-label="Update"
+ :config="{ modal: { submitLabel: 'Update' } }"
data-testid="initial-modal"
@submit="onSubmit"
/>
diff --git a/src/runtime/components/AutoFormModal.vue b/src/runtime/components/AutoFormModal.vue
index cf2d487..faec420 100644
--- a/src/runtime/components/AutoFormModal.vue
+++ b/src/runtime/components/AutoFormModal.vue
@@ -2,8 +2,10 @@
import type { FormSubmitEvent, InferOutput, ModalProps } from '@nuxt/ui'
import type * as z from 'zod'
import type { AutoFormConfig, AutoFormState } from '../types'
+import { useAppConfig } from '#app'
import UButton from '@nuxt/ui/components/Button.vue'
import UModal from '@nuxt/ui/components/Modal.vue'
+import defu from 'defu'
import { computed, reactive, toRaw, useTemplateRef } from 'vue'
import AutoFormPrimitive from './AutoFormPrimitive.vue'
@@ -11,19 +13,15 @@ export interface AutoFormModalProps> {
open?: boolean
schema: TSchema
initialState?: AutoFormState
- config?: AutoFormConfig
title?: string
description?: string
- submitLabel?: string
- closeLabel?: string
+ config?: AutoFormConfig
modalProps?: Partial
}
const props = withDefaults(defineProps>(), {
open: false,
initialState: () => ({}),
- submitLabel: 'Submit',
- closeLabel: 'Cancel',
modalProps: () => ({}),
})
@@ -32,6 +30,18 @@ const emit = defineEmits<{
'update:open': [value: boolean]
}>()
+const defaults: Partial = {
+ modal: { submitLabel: 'Submit', closeLabel: 'Cancel' },
+}
+
+const appConfig = computed(() => {
+ return defu(
+ props.config,
+ useAppConfig().autoForm,
+ defaults,
+ )
+})
+
const state = reactive>({ ...props.initialState })
const formRef = useTemplateRef('form')
@@ -82,13 +92,13 @@ function close() {
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 5714fa3..e1171f7 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -20,6 +20,14 @@ export interface AutoFormConfig {
props?: ButtonProps
} | false
+ /** AutoFormModal default button labels */
+ modal?: {
+ /** Default label for the submit button. @default 'Submit' */
+ submitLabel?: string
+ /** Default label for the cancel/close button. @default 'Cancel' */
+ closeLabel?: string
+ }
+
/**
* Customize default form styles
*/