Skip to content

Commit 3efc959

Browse files
committed
feat: add support for disabling submit button
1 parent 1244b80 commit 3efc959

File tree

4 files changed

+31
-13
lines changed

4 files changed

+31
-13
lines changed

docs/content/2.customization/4.submit_button.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,19 @@ Boolean property that indicates whether at least one field is invalid.
5050
::
5151
::
5252

53+
## Disabling
54+
55+
If you want to remove the submit button completely, you can set the `submit` property to `false` in your config:
56+
57+
```ts [app.config.ts]{3-5}
58+
export default defineAppConfig({
59+
autoForm: {
60+
submit: false
61+
},
62+
})
63+
```
64+
```
65+
5366
## Examples
5467
5568
::code-collapse

src/runtime/components/AutoForm.vue

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,15 @@ function submit() {
9494
formRef.value?.submit()
9595
}
9696
97-
const submitButtonComponent = computed(() => {
98-
return appConfig.value?.submit?.component
97+
const submitButton = computed(() => {
98+
if (appConfig.value?.submit !== false)
99+
return appConfig.value.submit
100+
return undefined
99101
})
100102
101103
const submitButtonProps = computed(() => {
102104
return {
103-
...appConfig.value?.submit?.props,
105+
...submitButton.value?.props,
104106
disabled: isButtonDisabled.value,
105107
}
106108
})
@@ -144,15 +146,17 @@ const submitButtonProps = computed(() => {
144146
<slot name="after-fields" />
145147

146148
<slot name="submit" :disabled="isButtonDisabled">
147-
<template v-if="submitButtonComponent">
148-
<component :is="toRaw(submitButtonComponent)" v-bind="submitButtonProps" />
149-
</template>
150-
<UButton
151-
v-else
152-
type="submit"
153-
label="Send"
154-
v-bind="submitButtonProps"
155-
/>
149+
<div v-if="submitButton">
150+
<template v-if="submitButton?.component">
151+
<component :is="toRaw(submitButton?.component)" v-bind="submitButtonProps" />
152+
</template>
153+
<UButton
154+
v-else
155+
type="submit"
156+
label="Send"
157+
v-bind="submitButtonProps"
158+
/>
159+
</div>
156160
</slot>
157161
</UForm>
158162
</template>

src/runtime/components_map.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const COMPONENTS_MAP: ComponentsMap = {
2828
result.componentProps.multiple = true
2929
return result
3030
}
31+
return {}
3132
},
3233
default: ({ key, zodType, state, config }) => {
3334
(state as any)[key] = zodType.def.defaultValue

src/runtime/types/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface AutoFormConfig {
1616
component?: undefined
1717
/** Props to pass to the Nuxt UI `UButton` component */
1818
props?: ButtonProps
19-
}
19+
} | false
2020

2121
theme?: {
2222
/**

0 commit comments

Comments
 (0)