diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts index b55b9b0a..b52a8840 100644 --- a/apps/web-antd/src/adapter/form.ts +++ b/apps/web-antd/src/adapter/form.ts @@ -4,7 +4,7 @@ import type { VbenFormProps, } from '@vben/common-ui'; -import { h } from 'vue'; +import { type Component, h, type SetupContext } from 'vue'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -57,6 +57,16 @@ export type FormComponentType = | 'Upload' | BaseFormComponentType; +const withDefaultPlaceholder = ( + component: T, + type: 'input' | 'select', +) => { + return (props: any, { attrs, slots }: Omit) => { + const placeholder = props?.placeholder || $t(`placeholder.${type}`); + return h(component, { ...props, attrs, placeholder }, slots); + }; +}; + // 初始化表单组件,并注册到form组件内部 setupVbenForm({ components: { @@ -73,20 +83,20 @@ setupVbenForm({ return h(Button, { ...props, attrs, type: 'primary' }, slots); }, Divider, - Input, - InputNumber, - InputPassword, - Mentions, + Input: withDefaultPlaceholder(Input, 'input'), + InputNumber: withDefaultPlaceholder(InputNumber, 'input'), + InputPassword: withDefaultPlaceholder(InputPassword, 'input'), + Mentions: withDefaultPlaceholder(Mentions, 'input'), Radio, RadioGroup, RangePicker, Rate, - Select, + Select: withDefaultPlaceholder(Select, 'select'), Space, Switch, - Textarea, + Textarea: withDefaultPlaceholder(Textarea, 'input'), TimePicker, - TreeSelect, + TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'), Upload, }, config: { diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json index e9503cf4..6b42d848 100644 --- a/packages/locales/src/langs/en-US.json +++ b/packages/locales/src/langs/en-US.json @@ -58,6 +58,10 @@ "required": "Please enter {0}", "selectRequired": "Please select {0}" }, + "placeholder": { + "input": "Please enter", + "select": "Please select" + }, "widgets": { "document": "Document", "qa": "Q&A", diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json index ef71a554..b5a24d7c 100644 --- a/packages/locales/src/langs/zh-CN.json +++ b/packages/locales/src/langs/zh-CN.json @@ -58,6 +58,10 @@ "required": "请输入{0}", "selectRequired": "请选择{0}" }, + "placeholder": { + "input": "请输入", + "select": "请选择" + }, "widgets": { "document": "文档", "qa": "问题 & 帮助", diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts index b55b9b0a..b52a8840 100644 --- a/playground/src/adapter/form.ts +++ b/playground/src/adapter/form.ts @@ -4,7 +4,7 @@ import type { VbenFormProps, } from '@vben/common-ui'; -import { h } from 'vue'; +import { type Component, h, type SetupContext } from 'vue'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; @@ -57,6 +57,16 @@ export type FormComponentType = | 'Upload' | BaseFormComponentType; +const withDefaultPlaceholder = ( + component: T, + type: 'input' | 'select', +) => { + return (props: any, { attrs, slots }: Omit) => { + const placeholder = props?.placeholder || $t(`placeholder.${type}`); + return h(component, { ...props, attrs, placeholder }, slots); + }; +}; + // 初始化表单组件,并注册到form组件内部 setupVbenForm({ components: { @@ -73,20 +83,20 @@ setupVbenForm({ return h(Button, { ...props, attrs, type: 'primary' }, slots); }, Divider, - Input, - InputNumber, - InputPassword, - Mentions, + Input: withDefaultPlaceholder(Input, 'input'), + InputNumber: withDefaultPlaceholder(InputNumber, 'input'), + InputPassword: withDefaultPlaceholder(InputPassword, 'input'), + Mentions: withDefaultPlaceholder(Mentions, 'input'), Radio, RadioGroup, RangePicker, Rate, - Select, + Select: withDefaultPlaceholder(Select, 'select'), Space, Switch, - Textarea, + Textarea: withDefaultPlaceholder(Textarea, 'input'), TimePicker, - TreeSelect, + TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'), Upload, }, config: { diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 50a3caae..ac10e446 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -234,62 +234,41 @@ const [CustomLayoutForm] = useVbenForm({ layout: 'horizontal', schema: [ { - component: 'Input', - componentProps: { - placeholder: '请输入', - }, + component: 'Select', fieldName: 'field1', label: '字符串', }, { - component: 'Input', - componentProps: { - placeholder: '请输入', - }, + component: 'TreeSelect', fieldName: 'field2', label: '字符串', }, { - component: 'Input', - componentProps: { - placeholder: '请输入', - }, + component: 'Mentions', fieldName: 'field3', label: '字符串', }, { component: 'Input', - componentProps: { - placeholder: '请输入', - }, fieldName: 'field4', label: '字符串', }, { - component: 'Input', - componentProps: { - placeholder: '请输入', - }, + component: 'InputNumber', fieldName: 'field5', // 从第三列开始 相当于中间空了一列 formItemClass: 'col-start-3', label: '前面空了一列', }, { - component: 'Input', - componentProps: { - placeholder: '请输入', - }, + component: 'Textarea', fieldName: 'field6', - // 占满三列空间 - formItemClass: 'col-span-3', + // 占满三列空间 基线对齐 + formItemClass: 'col-span-3 items-baseline', label: '占满三列', }, { component: 'Input', - componentProps: { - placeholder: '请输入', - }, fieldName: 'field7', // 占满2列空间 从第二列开始 相当于前面空了一列 formItemClass: 'col-span-2 col-start-2', @@ -297,26 +276,20 @@ const [CustomLayoutForm] = useVbenForm({ }, { component: 'Input', - componentProps: { - placeholder: '请输入', - }, fieldName: 'field8', // 左右留空 formItemClass: 'col-start-2', label: '左右留空', }, { - component: 'Input', - componentProps: { - placeholder: '请输入', - }, + component: 'InputPassword', fieldName: 'field9', formItemClass: 'col-start-1', - label: '占满2列', + label: '字符串', }, ], // 一共三列 - wrapperClass: 'lg:grid-cols-3', + wrapperClass: 'grid-cols-3', }); function onSubmit(values: Record) {