@qin-ui/antd-vue-pro 2.0.22 → 2.1.0

package/es/component-provider/index.js

@@ -1,6 +1,7 @@
 import { defineComponent, provide, renderSlot } from "vue";
 import { g as getObject } from "../core/index-BrBzu6aj.js";
 const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
+const INJECT_COMPONENTS = Symbol("INJECT_COMPONENTS");
 const INJECT_CONFIG = {
   "pro-table": {
     injectionKey: Symbol(""),
@@ -110,7 +111,7 @@ const INJECT_CONFIG = {
   },
   switch: {
     injectionKey: Symbol(""),
-    default: { modelName: "checked" }
+    default: { modelProp: "checked" }
   },
   slider: {
     injectionKey: Symbol(""),
@@ -131,10 +132,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "index",
   props: {
-    componentVars: {}
+    componentVars: {},
+    componentMap: {}
   },
   setup(__props) {
     const props = __props;
+    if (props.componentMap) {
+      provide(INJECT_COMPONENTS, props.componentMap);
+    }
     if (props.componentVars) {
       Object.entries(props.componentVars).forEach(([key, val]) => {
         const config = INJECT_CONFIG[key];
@@ -148,6 +153,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
+  INJECT_COMPONENTS,
   INJECT_CONFIG,
   _sfc_main as default
 };

package/es/form/index.js

@@ -1,11 +1,11 @@
-import { Form, Input, Textarea, InputSearch, InputPassword, InputNumber, Select, Cascader, DatePicker, RangePicker, TimePicker, CheckboxGroup, RadioGroup, Switch, Slider, TreeSelect, Transfer, Row, Col, FormItem } from "ant-design-vue";
+import { Form, Transfer, TreeSelect, Slider, Switch, RadioGroup, CheckboxGroup, TimePicker, RangePicker, DatePicker, Cascader, Select, InputNumber, InputPassword, InputSearch, Textarea, Input, Row, Col, FormItem } from "ant-design-vue";
 import "ant-design-vue/es/table";
 import "ant-design-vue/es/config-provider/context";
 import { useProviderDisabled, useInjectDisabled } from "ant-design-vue/es/config-provider/DisabledContext";
 import { colProps } from "ant-design-vue/es/grid/Col";
 import { formItemProps, useInjectFormItemContext } from "ant-design-vue/es/form";
 import { defineComponent, provide, inject, useSlots, watchEffect, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, renderSlot, computed, toValue, normalizeProps, guardReactiveProps, resolveComponent, createElementBlock, Fragment, renderList, createSlots, ref, useAttrs, createCommentVNode, resolveDynamicComponent, isVNode, createTextVNode, toDisplayString } from "vue";
-import { INJECT_CONFIG } from "../component-provider/index.js";
+import { INJECT_CONFIG, INJECT_COMPONENTS } from "../component-provider/index.js";
 import { I as InjectionFormKey, c as camelizeProperties, a as InjectionPathKey, g as getObject, u as useForm$1, b as useFields$1, d as useFormRef$1 } from "../core/index-BrBzu6aj.js";
 import { e } from "../core/index-BrBzu6aj.js";
 import { i as isPlainObject, t as toPath, o as omit, c as cloneDeep } from "../vendor/utils/lodash-es-p6jau26B.js";
@@ -51,25 +51,30 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FORM_ITEM_SLOT_KEYS = ["label", "extra", "help", "tooltip"];
-const COMPONENT_MAP = /* @__PURE__ */ new Map([
-  ["input", Input],
-  ["textarea", Textarea],
-  ["input-search", InputSearch],
-  ["input-password", InputPassword],
-  ["input-number", InputNumber],
-  ["select", Select],
-  ["cascader", Cascader],
-  ["date-picker", DatePicker],
-  ["range-picker", RangePicker],
-  ["time-picker", TimePicker],
-  ["checkbox-group", CheckboxGroup],
-  ["radio-group", RadioGroup],
-  ["switch", Switch],
-  ["slider", Slider],
-  ["tree-select", TreeSelect],
-  ["transfer", Transfer]
-]);
+const FORM_ITEM_SLOT_KEYS = [
+  "label",
+  "extra",
+  "help",
+  "tooltip"
+];
+const componentMap = {
+  "input": Input,
+  "textarea": Textarea,
+  "input-search": InputSearch,
+  "input-password": InputPassword,
+  "input-number": InputNumber,
+  "select": Select,
+  "cascader": Cascader,
+  "date-picker": DatePicker,
+  "range-picker": RangePicker,
+  "time-picker": TimePicker,
+  "checkbox-group": CheckboxGroup,
+  "radio-group": RadioGroup,
+  "switch": Switch,
+  "slider": Slider,
+  "tree-select": TreeSelect,
+  "transfer": Transfer
+};
 const TeleportComponentNamePrefix = "TeleportComponent_";
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -93,7 +98,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     field: {}
   },
   setup(__props) {
-    const formItemPropKeys = Object.keys(formItemProps()).concat(["container"]);
+    const formItemPropKeys = Object.keys(formItemProps()).concat([
+      "formItemContainer"
+    ]);
     const gridItemPropKeys = Object.keys(colProps());
     const props = __props;
     const config = INJECT_CONFIG["pro-form-item"];
@@ -104,7 +111,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const componentProps = { slots: {} };
       const formItemSlots = {};
       if (isPlainObject(props.field)) {
-        const { path, name, fields, className, style, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, ...rest } = props.field;
+        const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, ...rest } = props.field;
         const {
           class: injectClassName,
           style: injectStyle,
@@ -122,17 +129,19 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         formItemProps2 = mergeProps(
           injectRest,
           { class: injectClassName, style: injectStyle },
-          { class: toValue(className), style: toValue(style) }
+          { class: toValue(formItemClass), style: toValue(formItemStyle) },
+          formItemDataAttrs
         );
         Object.keys(rest).forEach((k) => {
           if (gridItemPropKeys.includes(k)) {
             gridItemProps2[k] = rest[k];
-          } else if (formItemPropKeys.includes(k) || k.startsWith("data-form-item")) {
+          } else if (formItemPropKeys.includes(k)) {
             formItemProps2[k] = rest[k];
           } else {
             componentProps[k] = rest[k];
           }
         });
+        Object.assign(componentProps, componentDataAttrs);
         Object.keys(slots).forEach((k) => {
           if (FORM_ITEM_SLOT_KEYS.includes(k)) {
             formItemSlots[k] = slots[k];
@@ -207,7 +216,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 createVNode(_sfc_main$4, { field }, {
                   default: withCtx(({
                     gridItemProps,
-                    formItemProps: { container, ...formItemProps2 },
+                    formItemProps: { formItemContainer, ...formItemProps2 },
                     componentProps,
                     formItemSlots
                   }) => [
@@ -216,7 +225,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                     }, { ref_for: true }, gridItemProps), {
                       default: withCtx(() => [
                         createVNode(unref(_sfc_main$1), {
-                          component: container,
+                          component: formItemContainer,
                           path
                         }, {
                           default: withCtx(() => [
@@ -278,9 +287,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 const useForm = useForm$1;
 const getInitProps = (field) => {
   const { component } = field;
-  const type = component === "input" ? "" : field.type;
-  if (COMPONENT_MAP.has(component)) {
-    const k = [component, type].filter(Boolean).join(".");
+  const picker = component === "date-picker" ? "" : field.picker;
+  if (typeof component === "string" && component in componentMap) {
+    const k = [component, picker].filter(Boolean).join(".");
     if (INJECT_CONFIG[k]) {
       const config = INJECT_CONFIG[k];
       const injectProps = inject(config.injectionKey, config.default);
@@ -340,18 +349,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const mergedProps = mergeProps(
         initProps,
         attrs,
-        { class: attrs.componentClassName, style: attrs.componentStyle },
-        { class: initProps.componentClassName, style: initProps.componentStyle },
+        { class: attrs.componentClass, style: attrs.componentStyle },
+        { class: initProps.componentClass, style: initProps.componentStyle },
         { disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
-        { modelName: attrs.modelName ?? initProps.modelName ?? "value" }
+        { modelProp: attrs.modelProp ?? initProps.modelProp ?? "value" }
       );
-      const { valueFormatter, modelName, slots, componentClassName, componentStyle, componentContainer, ...rest } = mergedProps;
-      const bindAttrs = omit(rest, [modelName, `onUpdate:${modelName}`]);
+      const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps;
+      const bindAttrs = omit(rest, [modelProp, `onUpdate:${modelProp}`]);
       return {
         attrs: bindAttrs,
         slots,
         componentContainer,
-        modelName,
+        modelProp,
         valueFormatter
       };
     });
@@ -359,8 +368,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       `${TeleportComponentNamePrefix}${__props.path}`,
       void 0
     );
+    const customComponents = inject(INJECT_COMPONENTS, {});
     const is = computed(() => {
-      return teleportComponent ?? COMPONENT_MAP.get(__props.component) ?? __props.component;
+      if (teleportComponent) return teleportComponent;
+      if (typeof __props.component === "string") {
+        return customComponents[__props.component] || componentMap[__props.component] || __props.component;
+      }
+      return __props.component;
     });
     __expose({
       getComponentRef: () => componentRef.value,
@@ -375,8 +389,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           is.value ? (openBlock(), createBlock(resolveDynamicComponent(is.value), mergeProps({ key: 0 }, groupedAttrs.value.attrs, {
             ref_key: "componentRef",
             ref: componentRef,
-            [`${groupedAttrs.value.modelName}`]: value.value,
-            [`onUpdate:${groupedAttrs.value.modelName}`]: _cache[0] || (_cache[0] = ($event) => value.value = $event),
+            [`${groupedAttrs.value.modelProp}`]: value.value,
+            [`onUpdate:${groupedAttrs.value.modelProp}`]: _cache[0] || (_cache[0] = ($event) => value.value = $event),
             path: __props.path
           }), createSlots({ _: 2 }, [
             renderList(groupedAttrs.value.slots, (slot, name) => {
@@ -431,13 +445,13 @@ export {
   _sfc_main$2 as BaseField,
   _sfc_main$6 as BaseForm,
   _sfc_main$3 as BaseFormItem,
-  COMPONENT_MAP,
   _sfc_main$1 as ContainerFragment,
   FORM_ITEM_SLOT_KEYS,
   InjectionFormKey,
   InjectionPathKey,
   _sfc_main as SlotComponent,
   TeleportComponentNamePrefix,
+  componentMap,
   _sfc_main$6 as default,
   getInitProps,
   useFields,

package/es/index.d.ts

@@ -1,8 +1,8 @@
 import { AllowedComponentProps } from 'vue';
 import { App } from 'vue';
 import { ButtonSize } from 'ant-design-vue/es/button';
-import { CascaderProps } from 'ant-design-vue';
-import { CheckboxGroupProps } from 'ant-design-vue';
+import { Cascader } from 'ant-design-vue';
+import { CheckboxGroup } from 'ant-design-vue';
 import { ColProps } from 'ant-design-vue';
 import { ColSize } from 'ant-design-vue/es/grid';
 import { ColumnType } from 'ant-design-vue/es/table';
@@ -14,14 +14,16 @@ import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProps } from 'vue-component-type-helpers';
 import { ComponentProvideOptions } from 'vue';
+import { ComponentSlots } from 'vue-component-type-helpers';
 import { ComputedRef } from 'vue';
 import { CreateComponentPublicInstanceWithMixins } from 'vue';
 import { CSSProperties } from 'vue';
-import { DatePickerProps } from 'ant-design-vue';
+import { DatePicker } from 'ant-design-vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { FieldData } from 'ant-design-vue/es/form/interface';
 import { FormInstance } from 'ant-design-vue';
+import { FormItem } from 'ant-design-vue';
 import { FormItemInstance } from 'ant-design-vue';
 import { FormItemProps } from 'ant-design-vue';
 import { FormLabelAlign } from 'ant-design-vue/es/form/interface';
@@ -30,15 +32,17 @@ import { GlobalComponents } from 'vue';
 import { GlobalDirectives } from 'vue';
 import { HTMLAttributes } from 'vue';
 import { InjectionKey } from 'vue';
-import { InputNumberProps } from 'ant-design-vue';
-import { InputProps } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
+import { InputNumber } from 'ant-design-vue';
+import { InputPassword } from 'ant-design-vue';
+import { InputSearch } from 'ant-design-vue';
 import { MaybeRef } from 'vue';
 import { Options as Options_2 } from 'scroll-into-view-if-needed';
 import { Plugin as Plugin_2 } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import { RadioGroupProps } from 'ant-design-vue';
-import { RangePickerProps } from 'ant-design-vue/es/date-picker';
+import { RadioGroup } from 'ant-design-vue';
+import { RangePicker } from 'ant-design-vue';
 import { Raw } from 'vue';
 import { Reactive } from 'vue';
 import { Ref } from 'vue';
@@ -47,16 +51,15 @@ import { RequiredMark } from 'ant-design-vue/es/form/Form';
 import { RowProps } from 'ant-design-vue';
 import { RuleObject } from 'ant-design-vue/es/form';
 import { Select } from 'ant-design-vue';
-import { SelectProps } from 'ant-design-vue';
 import { ShallowUnwrapRef } from 'vue';
-import { SliderProps } from 'ant-design-vue';
+import { Slider } from 'ant-design-vue';
 import { Slot } from 'vue';
-import { SwitchProps } from 'ant-design-vue';
+import { Switch } from 'ant-design-vue';
 import { TableProps } from 'ant-design-vue';
-import { TextAreaProps } from 'ant-design-vue';
-import { TimePickerProps } from 'ant-design-vue';
-import { TransferProps } from 'ant-design-vue';
-import { TreeSelectProps } from 'ant-design-vue';
+import { Textarea } from 'ant-design-vue';
+import { TimePicker } from 'ant-design-vue';
+import { Transfer } from 'ant-design-vue';
+import { TreeSelect } from 'ant-design-vue';
 import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
 import { ValidateMessages } from 'ant-design-vue/es/form/interface';
 import { VNode } from 'vue';
@@ -123,17 +126,17 @@ export declare interface Base<D extends Data = Data> {
      * }
      * ```
      */
-    slots?: Partial<Record<(typeof FORM_ITEM_SLOT_KEYS)[number], SlotComponentType>>;
+    slots?: Partial<ComponentSlots<typeof FormItem>>;
     /**
      * @description 字段formItem样式属性
      * @example { marginBottom: '8px', padding: '12px' }
      */
-    style?: CSSProperties;
+    formItemStyle?: CSSProperties;
     /**
      * @description 字段formItem样式类名
      * @example 'custom-form-item' | 'required-field'
      */
-    className?: string;
+    formItemClass?: string;
     /**
      * @description 嵌套子字段配置
      * @example [{ key: 'firstName', label: '名' }, { key: 'lastName', label: '姓' }]
@@ -148,7 +151,12 @@ export declare interface Base<D extends Data = Data> {
      * @description 字段formItem容器包裹组件
      * @example (props, ctx) => h('div', { class: 'custom-container' }, ctx.slots.default?.())
      */
-    container?: ContainerComponent;
+    formItemContainer?: ContainerComponent;
+    /**
+     * @description 将属性附加到 FormItem 的 DOM 节点
+     * @example { 'data-form-item-test': 'test-value', 'aria-label': 'name' }
+     */
+    formItemDataAttrs?: Record<string, string>;
     /**
      * @description 字段component样式属性
      * @example { width: '100%', borderColor: '#d9d9d9' }
@@ -158,7 +166,7 @@ export declare interface Base<D extends Data = Data> {
      * @description 字段component样式类名
      * @example 'custom-input' | 'error-input'
      */
-    componentClassName?: string;
+    componentClass?: string;
     /**
      * @description 字段component容器包裹组件
      * @example (props, ctx) => h('div', { class: 'input-wrapper' }, ctx.slots.default?.())
@@ -172,17 +180,12 @@ export declare interface Base<D extends Data = Data> {
     /**
      * @description 组件v-model双向绑定更新属性名，默认'value'
      */
-    modelName?: string;
+    modelProp?: string;
     /**
-     * @description 以data-form-item-开始的属性名将会被渲染至formItem的dom节点
-     * @example { 'data-form-item-test': 'test-value' }
+     * @description 将属性附加到表单组件的 DOM 节点
+     * @example { 'data-test': 'input-value', 'aria-label': 'name' }
      */
-    [key: `data-form-item-${string}`]: string;
-    /**
-     * @description 以data-component-开始的属性名将会被渲染至component的dom节点
-     * @example { 'data-component-test': 'test-value' }
-     */
-    [key: `data-component-${string}`]: string;
+    componentDataAttrs?: Record<string, string>;
 }
 
 declare interface BaseColumn<D extends Data = Data> {
@@ -192,10 +195,24 @@ declare interface BaseColumn<D extends Data = Data> {
     [key: string]: any;
 }
 
-/**
- * @description 基础组件字符串名称类型
- */
-export declare type BaseComponentStringName = Exclude<Field['component'], RenderComponentType | undefined>;
+export declare type BaseComponentMap = {
+    'input': typeof Input;
+    'textarea': typeof Textarea;
+    'input-search': typeof InputSearch;
+    'input-password': typeof InputPassword;
+    'input-number': typeof InputNumber;
+    'select': typeof Select;
+    'cascader': typeof Cascader;
+    'date-picker': typeof DatePicker;
+    'range-picker': typeof RangePicker;
+    'time-picker': typeof TimePicker;
+    'checkbox-group': typeof CheckboxGroup;
+    'radio-group': typeof RadioGroup;
+    'switch': typeof Switch;
+    'slider': typeof Slider;
+    'tree-select': typeof TreeSelect;
+    'transfer': typeof Transfer;
+};
 
 export declare const BaseField: DefineComponent<Props, {
 getComponentRef: () => any;
@@ -244,8 +261,6 @@ declare type ButtonProps = {
     onClick: () => void;
 };
 
-declare type CascaderSlots = CompSlot<'clearIcon' | 'expandIcon' | 'maxTagPlaceholder' | 'notFoundContent' | 'removeIcon' | 'suffixIcon' | 'tagRender'>;
-
 export declare type Column<D extends Data = Data> = Omit<ColumnType, 'dataIndex' | 'key'> & {
     dataIndex?: KeyExpandString<Extract<keyof D, string>> | Paths<D>;
     key?: Path<D>;
@@ -258,15 +273,25 @@ export declare type Columns<D extends Data = Data> = Array<Column<D>>;
 
 declare type Columns_2<D extends Data = Data, C extends BaseColumn<D> = BaseColumn<D>> = Array<C>;
 
-export declare const COMPONENT_MAP: Map<BaseComponentStringName, Component>;
-
-export declare type ComponentVars = Partial<RequiredComponentVars>;
-
 /**
- * @description 字段插槽类型
- * @template T - 插槽名称联合类型
+ * @description 暴露给外部扩充自定义组件类型的接口
+ * @example
+ * ```ts
+ * declare module 'antd-vue-pro' {
+ *   interface ComponentMap {
+ *     'my-custom-input': typeof MyCustomInput;
+ *   }
+ * }
+ * ```
  */
-declare type CompSlot<T extends string> = Partial<Record<KeyExpandString<T>, SlotComponentType>>;
+export declare interface ComponentMap {
+}
+
+export declare const componentMap: BaseComponentMap;
+
+export declare type ComponentName = keyof BaseComponentMap | keyof ComponentMap;
+
+export declare type ComponentVars = Partial<RequiredComponentVars>;
 
 /**
  * @description 容器组件类型
@@ -277,8 +302,6 @@ export declare const ContainerFragment: __VLS_WithTemplateSlots<typeof __VLS_com
 
 declare type Data = Record<string, any>;
 
-declare type DatePickerSlots = CompSlot<'dateRender' | 'renderExtraFooter' | 'separator' | 'monthCellRender'>;
-
 declare type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
@@ -395,11 +418,11 @@ declare type ExtendWithAny<D> = {
  * @description 字段配置类型，包含所有字段属性和响应式支持
  * @template D - 数据对象类型
  */
-export declare type Field<D extends Data = Data> = {
+export declare type Field<D extends Data = Data> = WithAdditionalMethodsGetter<{
     [K in keyof FieldTypeMap]: {
         component?: K extends 'custom' ? FieldTypeMap<D>[K]['component'] : K;
     } & FieldTypeMap<D>[K];
-}[keyof FieldTypeMap];
+}[keyof FieldTypeMap]>;
 
 declare type FieldFindBy<D extends Data, F extends BaseField_2<D> = BaseField_2<D>> = (field: Readonly<F>) => boolean;
 
@@ -415,72 +438,14 @@ declare type Fields_2<D extends Data = Data, F extends BaseField_2<D> = BaseFiel
  * @type {FieldTypeMap} 字段类型集合
  */
 export declare type FieldTypeMap<D extends Data = Data> = {
-    /** 文本框 */
-    'input': WithCommon<{
-        slots?: InputSlots;
-    } & InputProps, D>;
-    /** 文本域 */
-    'textarea': WithCommon<{
-        slots?: InputSlots;
-    } & TextAreaProps, D>;
-    /** 文本框-密码 */
-    'input-password': WithCommon<{
-        slots?: InputSlots;
-    } & InputProps, D>;
-    /** 文本框-搜索 */
-    'input-search': WithCommon<{
-        slots?: InputSlots;
-    } & InputProps, D>;
-    /** 数字文本框 */
-    'input-number': WithCommon<{
-        slots?: InputNumberSlots;
-    } & InputNumberProps, D>;
-    /** 下拉选择器 */
-    'select': WithCommon<{
-        slots?: SelectSlots;
-    } & SelectProps, D>;
-    /** 级联选择器 */
-    'cascader': WithCommon<{
-        slots?: CascaderSlots;
-    } & CascaderProps, D>;
-    /** 日期选择器 */
-    'date-picker': WithCommon<{
-        slots?: DatePickerSlots;
-    } & DatePickerProps, D>;
-    /** 日期选择器-范围 */
-    'range-picker': WithCommon<{
-        slots?: RangePickerSlots;
-    } & RangePickerProps, D>;
-    /** 时间选择器 */
-    'time-picker': WithCommon<{
-        slots?: TimePickerSlots;
-    } & TimePickerProps, D>;
-    /** 复选框组 */
-    'checkbox-group': WithCommon<CheckboxGroupProps, D>;
-    /** 单选框组 */
-    'radio-group': WithCommon<RadioGroupProps, D>;
-    /** 开关 */
-    'switch': WithCommon<{
-        slots?: SwitchSlots;
-    } & SwitchProps, D>;
-    /** 滑块 */
-    'slider': WithCommon<{
-        slots?: SliderSlots;
-    } & SliderProps, D>;
-    /** 树形选择器 */
-    'tree-select': WithCommon<{
-        slots?: TreeSelectSlots;
-    } & TreeSelectProps, D>;
-    /** 穿梭框 */
-    'transfer': WithCommon<{
-        slots?: TransferSlots;
-    } & TransferProps, D>;
     /** 自定义组件 */
-    'custom': {
+    custom: {
         component?: RenderComponentType | Raw<RenderComponentType>;
     } & WithCommon<{
         slots?: Slots;
     } & Record<string, any>, D>;
+} & {
+    [K in ComponentName]: WithComponent<GetComponentType<K>, D>;
 };
 
 /**
@@ -503,12 +468,16 @@ declare type FormProps = Omit<FormProps_2, 'scrollToFirstError'> & {
 
 declare type _FormProps = Pick<Partial<FormProps>, 'colon' | 'disabled' | 'hideRequiredMark' | 'labelAlign' | 'labelCol' | 'labelWrap' | 'name' | 'wrapperCol'>;
 
-declare type FP<T extends Record<string, any>> = Partial<T & Pick<Base, 'valueFormatter' | 'componentContainer' | 'modelName'> & AllowedComponentProps>;
+declare type FP<T extends Record<string, any>> = Partial<T & Pick<Base, 'valueFormatter' | 'componentContainer' | 'modelProp'> & AllowedComponentProps>;
+
+export declare type GetComponentType<K extends ComponentName> = K extends keyof ComponentMap ? ComponentMap[K] : K extends keyof BaseComponentMap ? BaseComponentMap[K] : never;
 
 export declare const getInitProps: (field: Field) => Record<string, any>;
 
 export declare type Grid = boolean | (RowProps & {});
 
+export declare const INJECT_COMPONENTS: InjectionKey<Partial<Record<string, Component>>>;
+
 export declare const INJECT_CONFIG: {
     [key in keyof RequiredComponentVars]: {
         injectionKey: InjectionKey<RequiredComponentVars[key]>;
@@ -520,10 +489,6 @@ export declare const InjectionFormKey: InjectionKey<any>;
 
 export declare const InjectionPathKey: InjectionKey<ComputedRef<string | undefined>>;
 
-declare type InputNumberSlots = CompSlot<'addonAfter' | 'addonBefore' | 'prefix' | 'upIcon' | 'downIcon'>;
-
-declare type InputSlots = CompSlot<'addonAfter' | 'addonBefore' | 'clearIcon' | 'prefix' | 'suffix'>;
-
 declare type IsRecord<T> = T extends object ? T extends ((...args: any[]) => any) | any[] | null ? false : true : false;
 
 declare type JoinPath<Prefix extends any[], Key extends PropertyKey> = [
@@ -540,7 +505,7 @@ declare type MaybeRefOrComputedRef<T = any> = MaybeRef<T> | ComputedRef<T>;
 /**
  * @description 不支持响应式的属性名
  */
-declare type NotSupportedRefOrGetterProps = 'component' | 'container' | 'componentContainer' | 'valueFormatter' | 'fields' | 'slots' | 'modelName';
+declare type NotSupportedRefOrGetterProps = 'component' | 'formItemContainer' | 'componentContainer' | 'valueFormatter' | 'fields' | 'slots' | 'modelProp';
 
 declare type Option_2 = {
     label: string;
@@ -572,7 +537,8 @@ declare type PP<T extends Record<string, any>> = Partial<T & AllowedComponentPro
 
 export declare const ProComponentProvider: SFCWithInstall<{
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
-    componentVars: ComponentVars;
+    componentVars?: ComponentVars;
+    componentMap?: Partial<Record<KeyExpandString<ComponentName>, Component>>;
     }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
     P: {};
     B: {};
@@ -581,13 +547,15 @@ export declare const ProComponentProvider: SFCWithInstall<{
     M: {};
     Defaults: {};
     }, Readonly<{
-    componentVars: ComponentVars;
+    componentVars?: ComponentVars;
+    componentMap?: Partial<Record<KeyExpandString<ComponentName>, Component>>;
     }> & Readonly<{}>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & ComponentOptionsBase<Readonly<{
-componentVars: ComponentVars;
+componentVars?: ComponentVars;
+componentMap?: Partial<Record<KeyExpandString<ComponentName>, Component>>;
 }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
@@ -761,7 +729,7 @@ export declare type ProTableInstance = ComponentExposed<typeof _default_2>;
 
 export declare type ProTableProps = ComponentProps<typeof _default_2>;
 
-declare type RangePickerSlots = CompSlot<'dateRender' | 'renderExtraFooter' | 'separator'>;
+declare type ReadonlyFormItemProps = ComponentProps<typeof FormItem>;
 
 /**
  * @description 自定义组件
@@ -774,28 +742,14 @@ export declare type RequiredComponentVars = {
     'pro-form': PP<Omit<ProFormProps, 'form' | 'grid'> & {
         grid: Exclude<Grid, undefined | boolean>;
     }>;
-    'pro-form-item': PP<FormItemProps & Pick<ColProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'> & Pick<Base, 'container'>>;
-    'input': FP<InputProps>;
-    'textarea': FP<TextAreaProps>;
-    'input-password': FP<InputProps>;
-    'input-search': FP<InputProps>;
-    'input-number': FP<InputNumberProps>;
-    'select': FP<SelectProps>;
-    'cascader': FP<CascaderProps>;
-    'date-picker': FP<DatePickerProps>;
-    'date-picker.date': FP<DatePickerProps>;
-    'date-picker.week': FP<DatePickerProps>;
-    'date-picker.month': FP<DatePickerProps>;
-    'date-picker.year': FP<DatePickerProps>;
-    'date-picker.quarter': FP<DatePickerProps>;
-    'range-picker': FP<RangePickerProps>;
-    'time-picker': FP<TimePickerProps>;
-    'checkbox-group': FP<CheckboxGroupProps>;
-    'radio-group': FP<RadioGroupProps>;
-    'switch': FP<SwitchProps>;
-    'slider': FP<SliderProps>;
-    'tree-select': FP<TreeSelectProps>;
-    'transfer': FP<TransferProps>;
+    'pro-form-item': PP<FormItemProps & Pick<ColProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'> & Pick<Base, 'formItemContainer'>>;
+    'date-picker.date': FP<ComponentProps<GetComponentType<'date-picker'>>>;
+    'date-picker.week': FP<ComponentProps<GetComponentType<'date-picker'>>>;
+    'date-picker.month': FP<ComponentProps<GetComponentType<'date-picker'>>>;
+    'date-picker.year': FP<ComponentProps<GetComponentType<'date-picker'>>>;
+    'date-picker.quarter': FP<ComponentProps<GetComponentType<'date-picker'>>>;
+} & {
+    [K in ComponentName]: FP<ComponentProps<GetComponentType<K>>>;
 };
 
 declare type SearchFormProps = {
@@ -807,8 +761,6 @@ declare type SearchFormProps = {
     expandButton?: Component<ExpandButtonProps> | DefineComponent<ExpandButtonProps>;
 } & /* @vue-ignore */ _FormProps & AllowedComponentProps;
 
-declare type SelectSlots = CompSlot<keyof InstanceType<typeof Select>['$slots']>;
-
 declare type SetColumn<D extends Data = Data, C extends BaseColumn<D> = BaseColumn<D>> = (key: Path<D>, column: C | ((pre: Readonly<C>) => C), options?: {
     updateType?: 'rewrite' | 'merge';
 } & UpdateColumnOptions) => void;
@@ -817,8 +769,6 @@ declare type SetPageParam = (pageParam: Partial<PageParam> | ((pre: Readonly<Pag
 
 declare type SFCWithInstall<T> = T & Plugin_2;
 
-declare type SliderSlots = CompSlot<'mark'>;
-
 export declare const SlotComponent: DefineComponent<Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 /**
@@ -833,8 +783,6 @@ export declare type Slots = {
     [name: string]: SlotComponentType;
 };
 
-declare type SwitchSlots = CompSlot<'checkedChildren' | 'unCheckedChildren'>;
-
 /**
  * 重新定义 Table 类型，将 Column 类型绑定为 antd-vue-pro 的 Column<D>
  */
@@ -855,12 +803,6 @@ declare type Table_2<D extends Data = Data, T extends object = ExtendWithAny<D>,
 
 export declare const TeleportComponentNamePrefix = "TeleportComponent_";
 
-declare type TimePickerSlots = CompSlot<'clearIcon' | 'renderExtraFooter' | 'suffixIcon'>;
-
-declare type TransferSlots = CompSlot<'footer' | 'render'>;
-
-declare type TreeSelectSlots = CompSlot<'maxTagPlaceholder' | 'notFoundContent' | 'placeholder' | 'searchPlaceholder' | 'suffixIcon' | 'tagRender' | 'title'>;
-
 declare type UpdateColumnOptions = {
     all?: boolean;
 };
@@ -984,7 +926,9 @@ export declare type WithAdditionalMethodsGetter<T> = T & {
     /**
      * @description 获取传入FormItem组件的属性
      */
-    getFormItemComputedProps?: () => Readonly<FormItemProps>;
+    getFormItemComputedProps?: () => Readonly<{
+        [x: string]: any;
+    }>;
     /**
      * @description 获取组件实例的方法
      */
@@ -998,7 +942,16 @@ export declare type WithAdditionalMethodsGetter<T> = T & {
     }>;
 };
 
-declare type WithCommon<T, D extends Data = Data> = WithRef<T & Omit<FormItemProps, 'label'> & ColProps & Base<D>>;
+declare type WithCommon<T, D extends Data = Data> = WithRef<T & Omit<ReadonlyFormItemProps, 'label'> & ColProps & Base<D>>;
+
+/**
+ * @description 自动从 Vue 组件提取 Props 和 Slots，并加上公共表单字段属性
+ * @template T - Vue 组件类型
+ * @template D - 数据对象类型
+ */
+declare type WithComponent<T extends abstract new (...args: any) => any, D extends Data = Data> = WithCommon<{
+    slots?: ComponentSlots<T>;
+} & ComponentProps<T>, D>;
 
 /**
  * @description 为对象属性添加响应式支持的类型

package/es/index.js

@@ -1,10 +1,10 @@
 import "./antd-vue-pro.css";
 import _sfc_main from "./form/index.js";
-import { BaseField, BaseFormItem, COMPONENT_MAP, ContainerFragment, FORM_ITEM_SLOT_KEYS, SlotComponent, TeleportComponentNamePrefix, getInitProps, useFields, useForm, useFormRef } from "./form/index.js";
+import { BaseField, BaseFormItem, ContainerFragment, FORM_ITEM_SLOT_KEYS, SlotComponent, TeleportComponentNamePrefix, componentMap, getInitProps, useFields, useForm, useFormRef } from "./form/index.js";
 import BaseTable from "./table/index.js";
 import { useTable } from "./table/index.js";
 import _sfc_main$1 from "./component-provider/index.js";
-import { INJECT_CONFIG } from "./component-provider/index.js";
+import { INJECT_COMPONENTS, INJECT_CONFIG } from "./component-provider/index.js";
 import { I, a, e } from "./core/index-BrBzu6aj.js";
 const withInstall = (comp) => {
   comp.install = (app) => {
@@ -27,9 +27,9 @@ export {
   BaseField,
   _sfc_main as BaseForm,
   BaseFormItem,
-  COMPONENT_MAP,
   ContainerFragment,
   FORM_ITEM_SLOT_KEYS,
+  INJECT_COMPONENTS,
   INJECT_CONFIG,
   I as InjectionFormKey,
   a as InjectionPathKey,
@@ -38,6 +38,7 @@ export {
   ProTable,
   SlotComponent,
   TeleportComponentNamePrefix,
+  componentMap,
   index as default,
   getInitProps,
   useFields,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/antd-vue-pro",
-  "version": "2.0.22",
+  "version": "2.1.0",
   "description": "二次封装antd vue组件",
   "type": "module",
   "module": "es/index.js",