by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: component Input is not registered when initialize page (#6246)

Browse Source 
* fix: Component Input is not registered when initialize page

* fix: Component Input is not registered when initialize page
This commit is contained in:
zhang 2025-05-23 15:21:09 +08:00 committed by GitHub
parent a2bdcd6e49
commit 9f9be21e2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 128 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web-antd/src/adapter/form.ts
View File

@ -8,40 +8,42 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ async function initSetupVbenForm() {
config: { setupVbenForm<ComponentType>({
// ant design vue组件库默认都是 v-model:value config: {
baseModelPropName: 'value', // ant design vue组件库默认都是 v-model:value
baseModelPropName: 'value',
// 一些组件是 v-model:checked 或者 v-model:fileList // 一些组件是 v-model:checked 或者 v-model:fileList
modelPropNameMap: { modelPropNameMap: {
Checkbox: 'checked', Checkbox: 'checked',
Radio: 'checked', Radio: 'checked',
Switch: 'checked', Switch: 'checked',
Upload: 'fileList', Upload: 'fileList',
},
}, },
}, defineRules: {
defineRules: { // 输入项目必填国际化适配
// 输入项目必填国际化适配 required: (value, _params, ctx) => {
required: (value, _params, ctx) => { if (value === undefined || value === null || value.length === 0) {
if (value === undefined || value === null || value.length === 0) { return $t('ui.formRules.required', [ctx.label]);
return $t('ui.formRules.required', [ctx.label]); }
} return true;
return true; },
// 选择项目必填国际化适配
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
}, },
// 选择项目必填国际化适配 });
selectRequired: (value, _params, ctx) => { }
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
},
});
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z }; export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

4
apps/web-antd/src/bootstrap.ts
View File

@ -12,6 +12,7 @@ import { useTitle } from '@vueuse/core';
import { $t, setupI18n } from '#/locales'; import { $t, setupI18n } from '#/locales';
import { initComponentAdapter } from './adapter/component'; import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue'; import App from './app.vue';
import { router } from './router'; import { router } from './router';
@ -19,6 +20,9 @@ async function bootstrap(namespace: string) {
// 初始化组件适配器 // 初始化组件适配器
await initComponentAdapter(); await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// // 设置弹窗的默认配置 // // 设置弹窗的默认配置
// setDefaultModalProps({ // setDefaultModalProps({
// fullscreenButton: false, // fullscreenButton: false,

44
apps/web-ele/src/adapter/form.ts
View File

@ -8,32 +8,34 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ async function initSetupVbenForm() {
config: { setupVbenForm<ComponentType>({
modelPropNameMap: { config: {
Upload: 'fileList', modelPropNameMap: {
CheckboxGroup: 'model-value', Upload: 'fileList',
CheckboxGroup: 'model-value',
},
}, },
}, defineRules: {
defineRules: { required: (value, _params, ctx) => {
required: (value, _params, ctx) => { if (value === undefined || value === null || value.length === 0) {
if (value === undefined || value === null || value.length === 0) { return $t('ui.formRules.required', [ctx.label]);
return $t('ui.formRules.required', [ctx.label]); }
} return true;
return true; },
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
}, },
selectRequired: (value, _params, ctx) => { });
if (value === undefined || value === null) { }
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
},
});
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z }; export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

5
apps/web-ele/src/bootstrap.ts
View File

@ -13,12 +13,17 @@ import { ElLoading } from 'element-plus';
import { $t, setupI18n } from '#/locales'; import { $t, setupI18n } from '#/locales';
import { initComponentAdapter } from './adapter/component'; import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue'; import App from './app.vue';
import { router } from './router'; import { router } from './router';
async function bootstrap(namespace: string) { async function bootstrap(namespace: string) {
// 初始化组件适配器 // 初始化组件适配器
await initComponentAdapter(); await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// // 设置弹窗的默认配置 // // 设置弹窗的默认配置
// setDefaultModalProps({ // setDefaultModalProps({
// fullscreenButton: false, // fullscreenButton: false,

52
apps/web-naive/src/adapter/form.ts
View File

@ -8,36 +8,38 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ async function initSetupVbenForm() {
config: { setupVbenForm<ComponentType>({
// naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效 config: {
emptyStateValue: null, // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
baseModelPropName: 'value', emptyStateValue: null,
modelPropNameMap: { baseModelPropName: 'value',
Checkbox: 'checked', modelPropNameMap: {
Radio: 'checked', Checkbox: 'checked',
Upload: 'fileList', Radio: 'checked',
Upload: 'fileList',
},
}, },
}, defineRules: {
defineRules: { required: (value, _params, ctx) => {
required: (value, _params, ctx) => { if (value === undefined || value === null || value.length === 0) {
if (value === undefined || value === null || value.length === 0) { return $t('ui.formRules.required', [ctx.label]);
return $t('ui.formRules.required', [ctx.label]); }
} return true;
return true; },
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
}, },
selectRequired: (value, _params, ctx) => { });
if (value === undefined || value === null) { }
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
},
});
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z }; export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

6
apps/web-naive/src/bootstrap.ts
View File

@ -12,12 +12,16 @@ import { useTitle } from '@vueuse/core';
import { $t, setupI18n } from '#/locales'; import { $t, setupI18n } from '#/locales';
import { initComponentAdapter } from './adapter/component'; import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue'; import App from './app.vue';
import { router } from './router'; import { router } from './router';
async function bootstrap(namespace: string) { async function bootstrap(namespace: string) {
// 初始化组件适配器 // 初始化组件适配器
initComponentAdapter(); await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// // 设置弹窗的默认配置 // // 设置弹窗的默认配置
// setDefaultModalProps({ // setDefaultModalProps({

58
playground/src/adapter/form.ts
View File

@ -8,38 +8,40 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({ async function initSetupVbenForm() {
config: { setupVbenForm<ComponentType>({
// ant design vue组件库默认都是 v-model:value config: {
baseModelPropName: 'value', // ant design vue组件库默认都是 v-model:value
// 一些组件是 v-model:checked 或者 v-model:fileList baseModelPropName: 'value',
modelPropNameMap: { // 一些组件是 v-model:checked 或者 v-model:fileList
Checkbox: 'checked', modelPropNameMap: {
Radio: 'checked', Checkbox: 'checked',
Switch: 'checked', Radio: 'checked',
Upload: 'fileList', Switch: 'checked',
Upload: 'fileList',
},
}, },
}, defineRules: {
defineRules: { // 输入项目必填国际化适配
// 输入项目必填国际化适配 required: (value, _params, ctx) => {
required: (value, _params, ctx) => { if (value === undefined || value === null || value.length === 0) {
if (value === undefined || value === null || value.length === 0) { return $t('ui.formRules.required', [ctx.label]);
return $t('ui.formRules.required', [ctx.label]); }
} return true;
return true; },
// 选择项目必填国际化适配
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
}, },
// 选择项目必填国际化适配 });
selectRequired: (value, _params, ctx) => { }
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
},
});
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z }; export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>; export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps }; export type { VbenFormProps };

4
playground/src/bootstrap.ts
View File

@ -13,12 +13,16 @@ import { $t, setupI18n } from '#/locales';
import { router } from '#/router'; import { router } from '#/router';
import { initComponentAdapter } from './adapter/component'; import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue'; import App from './app.vue';
async function bootstrap(namespace: string) { async function bootstrap(namespace: string) {
// 初始化组件适配器 // 初始化组件适配器
await initComponentAdapter(); await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// 设置弹窗的默认配置 // 设置弹窗的默认配置
// setDefaultModalProps({ // setDefaultModalProps({
// fullscreenButton: false, // fullscreenButton: false,