fix(components): [schema-form-item] style

buqiyuan · Feb 7, 2024 · 8013d3e · 8013d3e
1 parent 25ed2a2
commit 8013d3e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 54 deletions.
diff --git a/src/components/core/schema-form/src/componentMap.ts b/src/components/core/schema-form/src/componentMap.ts
@@ -19,6 +19,7 @@ import {
   Divider,
   Upload,
 } from 'ant-design-vue';
+import type { Component, VNodeProps } from 'vue';
 
 const componentMap = {
   Input,
@@ -48,6 +49,18 @@ const componentMap = {
   Divider,
 };
 
-export type ComponentMapType = keyof typeof componentMap;
+type ExtractPropTypes<T extends Component> = T extends new (...args: any) => any
+  ? Writable<Omit<InstanceType<T>['$props'], keyof VNodeProps>>
+  : never;
+
+export type D = ExtractPropTypes<typeof Input>;
+
+export type ComponentType = keyof typeof componentMap;
+
+export type ComponentMapProps = {
+  [K in ComponentType]: ExtractPropTypes<(typeof componentMap)[K]>;
+};
+
+export type AllComponentProps = ComponentMapProps[ComponentType];
 
 export { componentMap };
diff --git a/src/components/core/schema-form/src/helper.ts b/src/components/core/schema-form/src/helper.ts
@@ -1,19 +1,19 @@
 import dayjs from 'dayjs';
 import type { RuleObject } from 'ant-design-vue/es/form/';
-import type { ComponentMapType } from './types/component';
+import type { ComponentType } from './types/component';
 import { isNumber } from '@/utils/is';
 import { useI18n } from '@/hooks/useI18n';
 
 /**
  * @description: 生成placeholder
  */
-export function createPlaceholderMessage(component: ComponentMapType, label = '') {
+export function createPlaceholderMessage(component: ComponentType, label = '') {
   const { t } = useI18n();
 
   if (component.includes('Input') || component.includes('Complete')) {
     return `${t('common.inputText')}${label}`;
   }
-  const chooseTypes: ComponentMapType[] = [
+  const chooseTypes: ComponentType[] = [
     'Select',
     'Cascader',
     'Checkbox',
@@ -35,7 +35,7 @@ function genType() {
 
 export function setComponentRuleType(
   rule: RuleObject,
-  component: ComponentMapType,
+  component: ComponentType,
   valueFormat: string,
 ) {
   if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
@@ -56,7 +56,7 @@ export function processDateValue(attr: Recordable, component: string) {
   }
 }
 
-export function handleInputNumberValue(component?: ComponentMapType, val?: any) {
+export function handleInputNumberValue(component?: ComponentType, val?: any) {
   if (!component) return val;
   if (['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(component)) {
     return val && isNumber(val) ? `${val}` : val;

diff --git a/src/components/core/schema-form/src/schema-form-item.vue b/src/components/core/schema-form/src/schema-form-item.vue
@@ -69,7 +69,7 @@
   import { createPlaceholderMessage } from './helper';
   import { useFormContext } from './hooks/useFormContext';
   import { schemaFormItemProps } from './schema-form-item';
-  import type { ComponentMapType } from './componentMap';
+  import type { ComponentType } from './componentMap';
   import type { CustomRenderFn, FormSchema, RenderCallbackParams, ComponentProps } from './types/';
   import type { RuleObject } from 'ant-design-vue/es/form/';
   import { isBoolean, isNull, isObject, isString, isFunction, isArray } from '@/utils/is';
@@ -298,11 +298,7 @@
     );
   });
 
-  function setComponentRuleType(
-    rule: RuleObject,
-    component: ComponentMapType,
-    valueFormat: string,
-  ) {
+  function setComponentRuleType(rule: RuleObject, component: ComponentType, valueFormat: string) {
     if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
       rule.type = valueFormat ? 'string' : 'object';
     } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
@@ -465,5 +461,9 @@
   :deep(.ant-form-item-control-input-content) {
     display: flex;
     align-items: center;
+
+    > div {
+      flex: auto;
+    }
   }
 </style>
diff --git a/src/components/core/schema-form/src/types/component.ts b/src/components/core/schema-form/src/types/component.ts
@@ -1,25 +1,8 @@
 import type { CSSProperties, WatchOptions } from 'vue';
-import type {
-  InputNumberProps,
-  InputProps,
-  SliderProps,
-  SelectProps,
-  CascaderProps,
-  SwitchProps,
-  RateProps,
-  DividerProps,
-  TimePickerProps,
-  TreeProps,
-  TreeSelectProps,
-  RadioGroupProps,
-  RadioProps,
-  UploadProps,
-  DatePickerProps,
-  CheckboxProps,
-} from 'ant-design-vue';
 import type { RenderCallbackParams } from './form';
+import type { ComponentMapProps, ComponentType } from '../componentMap';
 
-export type { ComponentMapType } from '../componentMap';
+export type { ComponentType };
 
 type ColSpanType = number | string;
 
@@ -36,24 +19,7 @@ type RequestConfig =
     };
 
 /** 组件属性 */
-export type ComponentProps = (
-  | InputProps
-  | InputNumberProps
-  | SelectProps
-  | CascaderProps
-  | SwitchProps
-  | RateProps
-  | DividerProps
-  | TimePickerProps
-  | TreeProps
-  | TreeSelectProps
-  | RadioGroupProps
-  | RadioProps
-  | UploadProps
-  | DatePickerProps
-  | CheckboxProps
-  | SliderProps
-) & {
+export type ComponentProps<T extends ComponentType = ComponentType> = ComponentMapProps[T] & {
   /** 组件异步请求数据 */
   request?: RequestConfig;
   /** 组件异步请求数据结果 */
@@ -64,9 +30,6 @@ export type ComponentProps = (
   [key: string]: any;
 };
 
-/** 所有组件属性集合 */
-export type AllComponentProps = UnionToIntersection<ComponentProps>;
-
 export interface ColEx {
   style?: any;
   /**

diff --git a/src/components/core/schema-form/src/types/form.ts b/src/components/core/schema-form/src/types/form.ts
@@ -3,7 +3,7 @@ import type { RuleObject } from 'ant-design-vue/es/form/interface';
 import type { FormItemProps } from 'ant-design-vue/es/form/FormItem';
 import type { Component, UnwrapRef, VNode } from 'vue';
 import type { ButtonProps as AntdButtonProps } from '@/components/basic/button';
-import type { ColEx, ComponentMapType, ComponentProps } from './component';
+import type { ColEx, ComponentType, ComponentProps } from './component';
 // import type { TableActionType } from '/@/components/Table/src/types/table'
 import type { SchemaFormInstance } from '../schema-form';
 import type { SchemaFormType } from '../hooks';
@@ -75,7 +75,7 @@ export type FormSchema<T extends object = Recordable> = {
   // Disable the adjustment of labelWidth with global settings of formModel, and manually set labelCol and wrapperCol by yourself
   disabledLabelWidth?: boolean;
   /** 表单项对应的组件，eg: Input */
-  component?: ComponentMapType | CustomRenderFn<T> | ((opt: RenderCallbackParams<T>) => Component);
+  component?: ComponentType | CustomRenderFn<T> | ((opt: RenderCallbackParams<T>) => Component);
   /** 表单组件属性 */
   componentProps?:
     | ComponentProps