refactor: Select Text Password

sunshineLixun · sendya · commit 14f8d986c1a9 · 2022-09-21T15:23:10.000+08:00
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 shamefully-hoist=true
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+shared-workspace-lockfile=true
diff --git a/packages/pro-field/package.json b/packages/pro-field/package.json
@@ -29,26 +29,26 @@
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "@types/lodash-es": "^4.17.6",
-    "ant-design-vue": "^3.2.11",
+    "ant-design-vue": "^3.2.12",
     "dayjs": "^1.11.5",
-    "vue": "^3.2.38",
+    "vue": "^3.2.39",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@ant-design-vue/pro-utils": "workspace:^0.0.0",
     "@shared/vite-plugin-less-copy": "workspace:^0.0.0",
-    "@rollup/plugin-typescript": "^8.4.0",
-    "@rushstack/eslint-patch": "^1.1.4",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@types/jsdom": "^16.2.15",
-    "@types/node": "^16.11.56",
+    "@types/node": "^16.11.59",
     "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.1.3",
     "consola": "^2.15.3",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.7.1",
     "jsdom": "^19.0.0",
diff --git a/packages/pro-form/package.json b/packages/pro-form/package.json
@@ -28,29 +28,29 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "@types/lodash": "^4.14.184",
+    "@types/lodash": "^4.14.185",
     "ant-design-vue": "^3.2.12",
     "dayjs": "^1.11.5",
-    "vue": "^3.2.38",
+    "vue": "^3.2.39",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@ant-design-vue/pro-field": "workspace:^0.0.0",
     "@ant-design-vue/pro-layout": "workspace:^3.2.3",
     "@ant-design-vue/pro-utils": "workspace:^0.0.0",
     "@rollup/plugin-typescript": "^8.5.0",
-    "@rushstack/eslint-patch": "^1.1.4",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@shared/vite-plugin-less-copy": "workspace:^0.0.0",
     "@types/jsdom": "^16.2.15",
-    "@types/node": "^16.11.57",
+    "@types/node": "^16.11.59",
     "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.1.3",
     "consola": "^2.15.3",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.7.1",
     "jsdom": "^19.0.0",
diff --git a/packages/pro-form/src/components/Field/index.tsx b/packages/pro-form/src/components/Field/index.tsx
@@ -1,20 +1,32 @@
-import { unref, defineComponent, FunctionalComponent } from 'vue';
-import ProField, { type ProFieldPropsType } from '@ant-design-vue/pro-field';
+import { unref, defineComponent, FunctionalComponent, type PropType, ExtractPropTypes } from 'vue';
+import ProField from '@ant-design-vue/pro-field';
 import ProFormItem from '../FormItem';
-import type { ProFormFieldItemProps } from '../../typings';
 import { useGridHelpers } from '../../helpers';
 import { useFormInstance } from '../../BaseForm/hooks/useFormInstance';
+import { pick } from 'lodash-es';
+import { proFieldProps } from '@ant-design-vue/pro-field';
+import { proFormGridConfig, extendsProps, type FieldProps } from '../../typings';
+import { proFormItemProps } from '../FormItem';
 
 type NameType = string | number;
 
-export type ProFormFieldProps<FiledProps = Record<string, any>> = ProFormFieldItemProps<FiledProps> &
-  Pick<ProFieldPropsType, 'valueType'>;
+export const proFormFieldProps = {
+  ...proFieldProps,
+  ...pick(proFormGridConfig, 'colProps'),
+  ...proFormItemProps,
+  ...extendsProps,
+  fieldProps: {
+    type: Object as PropType<FieldProps & Record<string, any>>,
+  },
+};
+
+export type ProFormFieldProps = Partial<ExtractPropTypes<typeof proFormFieldProps>>;
 
-const ProFormField = defineComponent<ProFormFieldProps>({
+const ProFormField = defineComponent({
   name: 'BaseProFormField',
   inheritAttrs: false,
-  props: ['valueType', 'fieldProps', 'filedConfig', 'formItemProps', 'colProps'] as any,
-  setup(props, { attrs }) {
+  props: proFormFieldProps,
+  setup(props) {
     const formContext = useFormInstance();
     return () => {
       const valueType = props.valueType || 'text';
@@ -25,7 +37,6 @@ const ProFormField = defineComponent<ProFormFieldProps>({
               default: () => (
                 <ProField
                   {...props}
-                  {...attrs}
                   valueType={valueType}
                   mode={formContext.getFormProps.value.readonly ? 'read' : 'edit'}
                   fieldProps={{
@@ -42,7 +53,7 @@ const ProFormField = defineComponent<ProFormFieldProps>({
                 />
               ),
             }}
-            {...attrs}
+            {...props.formItemProps}
           />
         );
       };
diff --git a/packages/pro-form/src/components/Password/index.tsx b/packages/pro-form/src/components/Password/index.tsx
@@ -1,18 +1,26 @@
-import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
+import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
+import { pick } from 'lodash-es';
 import type { InputProps } from 'ant-design-vue/es/input/inputProps';
-import ProFormField from '../Field';
-import type { ProFormFieldItemProps } from '../../typings';
+import ProFormField, { proFormFieldProps } from '../Field';
+import { proFormItemProps } from '../FormItem';
 
-export type ProFieldPasswordPropsType = ProFormFieldItemProps<Omit<InputProps, 'value'>>;
+export const proFormPasswordProps = {
+  ...proFormFieldProps,
+  fieldProps: {
+    type: Object as PropType<Omit<InputProps, 'value'>>,
+  },
+};
+
+export type ProFieldPasswordPropsType = Partial<ExtractPropTypes<typeof proFormPasswordProps>>;
 
-const ProFormPassword = defineComponent<ProFieldPasswordPropsType>({
+const ProFormPassword = defineComponent({
   name: 'ProFormPassword',
   inheritAttrs: false,
-  props: ['fieldProps', 'colProps', 'name'] as any,
-  setup(props, { attrs }) {
+  props: proFormPasswordProps,
+  setup(props) {
     const formItemProps = {
-      ...attrs,
-      name: props.name,
+      ...props.formItemProps,
+      ...pick(props, Object.keys(proFormItemProps)),
     };
     return () => {
       return (
diff --git a/packages/pro-form/src/components/Select/index.tsx b/packages/pro-form/src/components/Select/index.tsx
@@ -1,17 +1,12 @@
 import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
 import type { VueNode } from '@ant-design-vue/pro-utils';
-import { omit, pick } from 'lodash-es';
-import { proFieldProps } from '@ant-design-vue/pro-field';
+import { pick } from 'lodash-es';
 import type { SelectProps, DefaultOptionType } from 'ant-design-vue/es/select';
-import ProFormField from '../Field';
-import { proFormGridConfig, extendsProps } from '../../typings';
+import ProFormField, { proFormFieldProps } from '../Field';
 import { proFormItemProps } from '../FormItem';
 
 const props = {
-  ...omit(proFieldProps, 'valueType'),
-  ...pick(proFormGridConfig, 'colProps'),
-  ...proFormItemProps,
-  ...extendsProps,
+  ...proFormFieldProps,
   fieldProps: {
     type: Object as PropType<Omit<SelectProps, 'value' | 'options'>>,
   },
diff --git a/packages/pro-form/src/components/Text/index.tsx b/packages/pro-form/src/components/Text/index.tsx
@@ -1,18 +1,25 @@
-import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
+import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
+import { pick } from 'lodash-es';
 import type { InputProps } from 'ant-design-vue/es/input/inputProps';
-import ProFormField from '../Field';
-import type { ProFormFieldItemProps } from '../../typings';
+import ProFormField, { proFormFieldProps } from '../Field';
+import { proFormItemProps } from '../FormItem';
 
-export type ProFieldPropsType = ProFormFieldItemProps<Omit<InputProps, 'value'>>;
+export const proFormTextProps = {
+  ...proFormFieldProps,
+  fieldProps: {
+    type: Object as PropType<Omit<InputProps, 'value'>>,
+  },
+};
+export type ProFieldPropsType = Partial<ExtractPropTypes<typeof proFormTextProps>>;
 
-const ProFormText = defineComponent<ProFieldPropsType>({
+const ProFormText = defineComponent({
   name: 'ProFormText',
   inheritAttrs: false,
-  props: ['fieldProps', 'colProps', 'name'] as any,
-  setup(props, { attrs }) {
+  props: proFormTextProps,
+  setup(props) {
     const formItemProps = {
-      ...attrs,
-      name: props.name,
+      ...props.formItemProps,
+      ...pick(props, Object.keys(proFormItemProps)),
     };
     return () => {
       return (
diff --git a/packages/pro-form/src/typings.ts b/packages/pro-form/src/typings.ts
@@ -107,11 +107,17 @@ export interface ProFieldProps {
   readonly?: boolean;
 }
 
-export type FieldProps = {
-  style?: CSSProperties;
-  width?: string;
+export const fieldProps = {
+  style: {
+    type: Object as PropType<CSSProperties>,
+  },
+  width: {
+    type: String,
+  },
 };
 
+export type FieldProps = Partial<ExtractPropTypes<typeof fieldProps>>;
+
 export type ProFormItemCreateConfig = {
   valueType?: ProFieldValueType;
 } & ProFormItemProps;
diff --git a/packages/pro-form/tsconfig.vitest.json b/packages/pro-form/tsconfig.vitest.json
@@ -2,6 +2,7 @@
   "extends": "./tsconfig.app.json",
   "exclude": [],
   "compilerOptions": {
+    "jsx": "react",
     "composite": true,
     "lib": [],
     "types": ["node", "jsdom"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
