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

fix: naive ui form reset does not meet expectations #4569

Merged
merged 2 commits into from
Oct 5, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
3 changes: 3 additions & 0 deletions apps/web-naive/src/adapter/form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,10 @@ setupVbenForm<FormComponentType>({
Upload: NUpload,
},
config: {
// naive-ui组件不接受onChang事件,所以需要禁用
disabledOnChangeListener: true,
// naive-ui组件的空值为null,不能是undefined,否则重置表单时不生效
emptyStateValue: null,
baseModelPropName: 'value',
modelPropNameMap: {
Checkbox: 'checked',
Expand Down
9 changes: 7 additions & 2 deletions packages/@core/ui-kit/form-ui/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,13 @@ export function setupVbenForm<
>(options: VbenFormAdapterOptions<T>) {
const { components, config, defineRules } = options;

DEFAULT_FORM_COMMON_CONFIG.disabledOnChangeListener =
config?.disabledOnChangeListener ?? false;
const { disabledOnChangeListener = false, emptyStateValue = undefined } =
(config || {}) as FormCommonConfig;

Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
disabledOnChangeListener,
emptyStateValue,
});

if (defineRules) {
for (const key of Object.keys(defineRules)) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const {
description,
disabled,
disabledOnChangeListener,
emptyStateValue,
fieldName,
formFieldProps,
label,
Expand All @@ -55,7 +56,7 @@ const formApi = formRenderProps.form;

const isInValid = computed(() => errors.value?.length > 0);

const fieldComponent = computed(() => {
const FieldComponent = computed(() => {
const finalComponent = isString(component)
? componentMap.value[component]
: component;
Expand Down Expand Up @@ -213,7 +214,7 @@ function fieldBindEvent(slotProps: Record<string, any>) {
if (bindEventField) {
return {
[`onUpdate:${bindEventField}`]: handler,
[bindEventField]: value,
[bindEventField]: value === undefined ? emptyStateValue : value,
onChange: disabledOnChangeListener
? undefined
: (e: Record<string, any>) => {
Expand Down Expand Up @@ -300,7 +301,7 @@ function autofocus() {
}"
>
<component
:is="fieldComponent"
:is="FieldComponent"
ref="fieldComponentRef"
:class="{
'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
Expand Down
2 changes: 2 additions & 0 deletions packages/@core/ui-kit/form-ui/src/form-render/form.vue
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ const computedSchema = computed(
controlClass = '',
disabled,
disabledOnChangeListener = false,
emptyStateValue = undefined,
formFieldProps = {},
formItemClass = '',
hideLabel = false,
Expand All @@ -107,6 +108,7 @@ const computedSchema = computed(
return {
disabled,
disabledOnChangeListener,
emptyStateValue,
hideLabel,
hideRequiredMark,
labelWidth,
Expand Down
5 changes: 5 additions & 0 deletions packages/@core/ui-kit/form-ui/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ export interface FormCommonConfig {
* @default false
*/
disabledOnChangeListener?: boolean;
/**
* 所有表单项的空状态值,默认都是undefined,naive-ui的空状态值是null
*/
emptyStateValue?: null | undefined;
/**
* 所有表单项的控件样式
* @default {}
Expand Down Expand Up @@ -341,6 +345,7 @@ export interface VbenFormAdapterOptions<
config?: {
baseModelPropName?: string;
disabledOnChangeListener?: boolean;
emptyStateValue?: null | undefined;
modelPropNameMap?: Partial<Record<T, string>>;
};
defineRules?: {
Expand Down
5 changes: 1 addition & 4 deletions packages/effects/common-ui/src/ui/authentication/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,7 @@ interface AuthenticationProps {
submitButtonText?: string;
}

interface LoginAndRegisterParams {
password: string;
username: string;
}
type LoginAndRegisterParams = Record<string, any>;
anncwb marked this conversation as resolved.
Show resolved Hide resolved

interface LoginCodeParams {
code: string;
Expand Down
4 changes: 2 additions & 2 deletions packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,8 @@ async function init() {
}

// form 由 vben-form代替,所以不适配formConfig,这里给出警告
const formConfig = defaultGridOptions.formConfig;
if (formConfig?.enabled) {
const formConfig = options.value.formConfig;
if (formConfig) {
anncwb marked this conversation as resolved.
Show resolved Hide resolved
console.warn(
'[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
);
Expand Down
1 change: 1 addition & 0 deletions packages/stores/src/modules/user.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { acceptHMRUpdate, defineStore } from 'pinia';

interface BasicUserInfo {
[key: string]: any;
/**
* 头像
*/
Expand Down
1 change: 1 addition & 0 deletions packages/utils/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './helpers';
export * from '@vben-core/shared/cache';
export * from '@vben-core/shared/color';
export * from '@vben-core/shared/utils';
Loading