Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add submitOnEnter configuration to form #4670

Merged
merged 1 commit into from
Oct 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/src/components/common-ui/vben-form.md
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ useVbenForm 返回的第二个参数,是一个对象,包含了一些表单
| collapsedRows | 折叠时保持的行数 | `number` | `1` |
| commonConfig | 表单项的通用配置,每个配置都会传递到每个表单项,表单项可覆盖 | `FormCommonConfig` | - |
| schema | 表单项的每一项配置 | `FormSchema` | - |
| submitOnEnter | 按下回车健时提交表单 | `boolean` | false |

### TS 类型说明

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,11 @@ watch(
}
},
);

defineExpose({
handleReset,
handleSubmit,
});
</script>
<template>
<div
Expand Down
1 change: 1 addition & 0 deletions packages/@core/ui-kit/form-ui/src/form-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function getDefaultState(): VbenFormProps {
showCollapseButton: false,
showDefaultActions: true,
submitButtonOptions: {},
submitOnEnter: false,
wrapperClass: 'grid-cols-1',
};
}
Expand Down
7 changes: 6 additions & 1 deletion packages/@core/ui-kit/form-ui/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,6 @@ export interface VbenFormProps<
* 重置按钮参数
*/
resetButtonOptions?: ActionButtonOptions;

/**
* 是否显示默认操作按钮
* @default true
Expand All @@ -330,6 +329,12 @@ export interface VbenFormProps<
* 提交按钮参数
*/
submitButtonOptions?: ActionButtonOptions;

/**
* 是否在回车时提交表单
* @default false
*/
submitOnEnter?: boolean;
}

export type ExtendedFormApi = {
Expand Down
13 changes: 13 additions & 0 deletions packages/@core/ui-kit/form-ui/src/vben-use-form.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
import { useForwardPriorityValues } from '@vben-core/composables';
// import { isFunction } from '@vben-core/shared/utils';

import { useTemplateRef } from 'vue';

import FormActions from './components/form-actions.vue';
import {
COMPONENT_BIND_EVENT_MAP,
Expand All @@ -21,6 +23,8 @@ interface Props extends VbenFormProps {

const props = defineProps<Props>();

const formActionsRef = useTemplateRef<typeof FormActions>('formActionsRef');

const state = props.formApi?.useStore?.();

const forward = useForwardPriorityValues(props, state);
Expand All @@ -34,10 +38,18 @@ props.formApi?.mount?.(form);
const handleUpdateCollapsed = (value: boolean) => {
props.formApi?.setState({ collapsed: !!value });
};

function handleKeyDownEnter() {
if (!state.value.submitOnEnter || !formActionsRef.value) {
return;
}
formActionsRef.value?.handleSubmit?.();
}
</script>

<template>
<Form
@keydown.enter.prevent="handleKeyDownEnter"
v-bind="forward"
:collapsed="state.collapsed"
:component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
Expand All @@ -56,6 +68,7 @@ const handleUpdateCollapsed = (value: boolean) => {
<slot v-bind="slotProps">
<FormActions
v-if="forward.showDefaultActions"
ref="formActionsRef"
:model-value="state.collapsed"
@update:model-value="handleUpdateCollapsed"
>
Expand Down
1 change: 1 addition & 0 deletions playground/src/views/examples/form/basic.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
class: 'w-full',
},
},

anncwb marked this conversation as resolved.
Show resolved Hide resolved
// 提交函数
handleSubmit: onSubmit,
// 垂直布局,label和input在不同行,值为vertical
Expand Down
2 changes: 2 additions & 0 deletions playground/src/views/examples/vxe-table/form.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ const formOptions: VbenFormProps = {
],
// 控制表单是否显示折叠按钮
showCollapseButton: true,
// 按下回车时是否提交表单
submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
Expand Down