feat: add global config for AutoFormModal button labels

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 `<AutoFormModal/>`. 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.

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.

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

src/runtime/components/AutoFormModal.vue

@@ -2,28 +2,26 @@
 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'
 
 export interface AutoFormModalProps<TSchema extends z.ZodObject<any>> {
   open?: boolean
   schema: TSchema
   initialState?: AutoFormState<TSchema>
-  config?: AutoFormConfig
   title?: string
   description?: string
-  submitLabel?: string
-  closeLabel?: string
+  config?: AutoFormConfig
   modalProps?: Partial<ModalProps>
 }
 
 const props = withDefaults(defineProps<AutoFormModalProps<T>>(), {
   open: false,
   initialState: () => ({}),
-  submitLabel: 'Submit',
-  closeLabel: 'Cancel',
   modalProps: () => ({}),
 })
 
@@ -32,6 +30,18 @@ const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
+const defaults: Partial<AutoFormConfig> = {
+  modal: { submitLabel: 'Submit', closeLabel: 'Cancel' },
+}
+
+const appConfig = computed<AutoFormConfig>(() => {
+  return defu(
+    props.config,
+    useAppConfig().autoForm,
+    defaults,
+  )
+})
+
 const state = reactive<AutoFormState<T>>({ ...props.initialState })
 const formRef = useTemplateRef('form')
 
@@ -82,13 +92,13 @@ function close() {
     <template #footer>
       <slot name="footer" :disabled="isButtonDisabled" :submit="() => formRef?.form?.submit()" :close="close">
         <UButton
-          :label="closeLabel"
+          :label="appConfig.modal?.closeLabel"
           color="neutral"
           variant="outline"
           @click="close"
         />
         <UButton
-          :label="submitLabel"
+          :label="appConfig.modal?.submitLabel"
           :disabled="isButtonDisabled"
           @click="formRef?.form?.submit()"
         />

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