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() {