perf: [antd] default placeholder for input and select components (#4551)

* chore: demo of customizing form layout using tailwind

* perf: default placeholder for input and select components

* chore: update ts type

* chore: extract public methods

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 = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
+    return h(component, { ...props, attrs, placeholder }, slots);
+  };
+};
+
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -73,20 +83,20 @@ setupVbenForm<FormComponentType>({
       return h(Button, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider,
-    Input,
+    Input: withDefaultPlaceholder(Input, 'input'),
-    InputNumber,
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
-    InputPassword,
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
-    Mentions,
+    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: {

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",

packages/locales/src/langs/zh-CN.json

@@ -58,6 +58,10 @@
     "required": "请输入{0}",
     "selectRequired": "请选择{0}"
   },
+  "placeholder": {
+    "input": "请输入",
+    "select": "请选择"
+  },
   "widgets": {
     "document": "文档",
     "qa": "问题 & 帮助",

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 = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+) => {
+  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+    const placeholder = props?.placeholder || $t(`placeholder.${type}`);
+    return h(component, { ...props, attrs, placeholder }, slots);
+  };
+};
+
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -73,20 +83,20 @@ setupVbenForm<FormComponentType>({
       return h(Button, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider,
-    Input,
+    Input: withDefaultPlaceholder(Input, 'input'),
-    InputNumber,
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
-    InputPassword,
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
-    Mentions,
+    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: {

playground/src/views/examples/form/basic.vue

@@ -234,62 +234,41 @@ const [CustomLayoutForm] = useVbenForm({
   layout: 'horizontal',
   schema: [
     {
-      component: 'Input',
+      component: 'Select',
-      componentProps: {
-        placeholder: '请输入',
-      },
       fieldName: 'field1',
       label: '字符串',
     },
     {
-      component: 'Input',
+      component: 'TreeSelect',
-      componentProps: {
-        placeholder: '请输入',
-      },
       fieldName: 'field2',
       label: '字符串',
     },
     {
-      component: 'Input',
+      component: 'Mentions',
-      componentProps: {
-        placeholder: '请输入',
-      },
       fieldName: 'field3',
       label: '字符串',
     },
     {
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入',
-      },
       fieldName: 'field4',
       label: '字符串',
     },
     {
-      component: 'Input',
+      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入',
-      },
       fieldName: 'field5',
       // 从第三列开始 相当于中间空了一列
       formItemClass: 'col-start-3',
       label: '前面空了一列',
     },
     {
-      component: 'Input',
+      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入',
-      },
       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',
+      component: 'InputPassword',
-      componentProps: {
-        placeholder: '请输入',
-      },
       fieldName: 'field9',
       formItemClass: 'col-start-1',
-      label: '占满2列',
+      label: '字符串',
     },
   ],
   // 一共三列
-  wrapperClass: 'lg:grid-cols-3',
+  wrapperClass: 'grid-cols-3',
 });
 
 function onSubmit(values: Record<string, any>) {