perf: [antd] default placeholder for input and select components

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 } from 'vue';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -57,6 +57,20 @@ export type FormComponentType =
   | 'Upload'
   | BaseFormComponentType;
 
+const withInputPlaceholder = (component: Component) => {
+  return (props: any, { attrs, slots }: any) => {
+    const placeholder = props?.placeholder || $t('placeholder.input');
+    return h(component, { ...props, attrs, placeholder }, slots);
+  };
+};
+
+const withSelectPlaceholder = (component: Component) => {
+  return (props: any, { attrs, slots }: any) => {
+    const placeholder = props?.placeholder || $t('placeholder.select');
+    return h(component, { ...props, attrs, placeholder }, slots);
+  };
+};
+
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -73,20 +87,20 @@ setupVbenForm<FormComponentType>({
       return h(Button, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider,
-    Input,
-    InputNumber,
-    InputPassword,
-    Mentions,
+    Input: withInputPlaceholder(Input),
+    InputNumber: withInputPlaceholder(InputNumber),
+    InputPassword: withInputPlaceholder(InputPassword),
+    Mentions: withInputPlaceholder(Mentions),
     Radio,
     RadioGroup,
     RangePicker,
     Rate,
-    Select,
+    Select: withSelectPlaceholder(Select),
     Space,
     Switch,
-    Textarea,
+    Textarea: withInputPlaceholder(Textarea),
     TimePicker,
-    TreeSelect,
+    TreeSelect: withSelectPlaceholder(TreeSelect),
     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 } from 'vue';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -57,6 +57,20 @@ export type FormComponentType =
   | 'Upload'
   | BaseFormComponentType;
 
+const withInputPlaceholder = (component: Component) => {
+  return (props: any, { attrs, slots }: any) => {
+    const placeholder = props?.placeholder || $t('placeholder.input');
+    return h(component, { ...props, attrs, placeholder }, slots);
+  };
+};
+
+const withSelectPlaceholder = (component: Component) => {
+  return (props: any, { attrs, slots }: any) => {
+    const placeholder = props?.placeholder || $t('placeholder.select');
+    return h(component, { ...props, attrs, placeholder }, slots);
+  };
+};
+
 // 初始化表单组件，并注册到form组件内部
 setupVbenForm<FormComponentType>({
   components: {
@@ -73,20 +87,20 @@ setupVbenForm<FormComponentType>({
       return h(Button, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider,
-    Input,
-    InputNumber,
-    InputPassword,
-    Mentions,
+    Input: withInputPlaceholder(Input),
+    InputNumber: withInputPlaceholder(InputNumber),
+    InputPassword: withInputPlaceholder(InputPassword),
+    Mentions: withInputPlaceholder(Mentions),
     Radio,
     RadioGroup,
     RangePicker,
     Rate,
-    Select,
+    Select: withSelectPlaceholder(Select),
     Space,
     Switch,
-    Textarea,
+    Textarea: withInputPlaceholder(Textarea),
     TimePicker,
-    TreeSelect,
+    TreeSelect: withSelectPlaceholder(TreeSelect),
     Upload,
   },
   config: {

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

@@ -223,6 +223,75 @@ const [BaseForm, baseFormApi] = useVbenForm({
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
 });
 
+const [CustomLayoutForm] = useVbenForm({
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Select',
+      fieldName: 'field1',
+      label: '字符串',
+    },
+    {
+      component: 'TreeSelect',
+      fieldName: 'field2',
+      label: '字符串',
+    },
+    {
+      component: 'Mentions',
+      fieldName: 'field3',
+      label: '字符串',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field4',
+      label: '字符串',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'field5',
+      // 从第三列开始 相当于中间空了一列
+      formItemClass: 'col-start-3',
+      label: '前面空了一列',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'field6',
+      // 占满三列空间 基线对齐
+      formItemClass: 'col-span-3 items-baseline',
+      label: '占满三列',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field7',
+      // 占满2列空间 从第二列开始 相当于前面空了一列
+      formItemClass: 'col-span-2 col-start-2',
+      label: '占满2列',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field8',
+      // 左右留空
+      formItemClass: 'col-start-2',
+      label: '左右留空',
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'field9',
+      formItemClass: 'col-start-1',
+      label: '字符串',
+    },
+  ],
+  // 一共三列
+  wrapperClass: 'grid-cols-3',
+});
+
 function onSubmit(values: Record<string, any>) {
   message.success({
     content: `form values: ${JSON.stringify(values)}`,
@@ -256,6 +325,7 @@ function handleSetFormValue() {
 
 <template>
   <Page
+    content-class="flex flex-col gap-4"
     description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
     title="表单组件"
   >
@@ -265,5 +335,8 @@ function handleSetFormValue() {
       </template>
       <BaseForm />
     </Card>
+    <Card title="使用tailwind自定义布局">
+      <CustomLayoutForm />
+    </Card>
   </Page>
 </template>