@iswangh/element-plus-kit-form 0.2.0 → 0.2.1

package/dist/types/comp.d.ts

@@ -49,29 +49,29 @@ export type FormCompConfig = ElCompMap & typeof EXPAND_COMP_MAP
  * 注意：由于 FORM_ITEM_COMP_MAP 使用了 Record<string, any> 避免类型推断超出限制，
  * 我们需要显式定义键名类型，而不是从 typeof FORM_ITEM_COMP_MAP 中提取
  */
-export type FormItemComp
-  = | 'autocomplete'
-    | 'cascader'
-    | 'checkbox'
-    | 'color-picker'
-    | 'color-picker-panel'
-    | 'date-picker'
-    | 'date-picker-panel'
-    | 'input'
-    | 'input-number'
-    | 'input-tag'
-    | 'mention'
-    | 'radio'
-    | 'rate'
-    | 'select'
-    | 'select-v2'
-    | 'slider'
-    | 'switch'
-    | 'time-picker'
-    | 'time-select'
-    | 'transfer'
-    | 'tree-select'
-    | 'custom'
+export type FormItemComp = 'custom'
+  | 'autocomplete'
+  | 'cascader'
+  | 'checkbox'
+  | 'color-picker'
+  | 'color-picker-panel'
+  | 'date-picker'
+  | 'date-picker-panel'
+  | 'input'
+  | 'input-number'
+  | 'input-tag'
+  | 'mention'
+  | 'radio'
+  | 'rate'
+  | 'select'
+  | 'select-v2'
+  | 'slider'
+  | 'switch'
+  | 'time-picker'
+  | 'time-select'
+  | 'transfer'
+  | 'tree-select'
+  | 'custom'
 
 /**
  * 根据组件类型获取组件实例类型
@@ -80,14 +80,14 @@ export type FormItemComp
 export type FormItemCompInstance<T extends FormItemComp> = InstanceType<FormCompConfig[T]>
 
 /**
- * 根据组件类型获取组件完整 Props 类型（包含事件处理器）
- * @template T 组件类型
+ * 根据组件类型推断对应的 Props 类型（包含事件处理器）
+ * @template T - 组件类型
  */
-type FormItemCompPropsFull<T extends FormItemComp> = FormItemCompInstance<T>['$props']
+export type FormItemCompProps<T extends FormItemComp = FormItemComp>
+  = FormItemCompInstance<T>['$props']
 
 /**
- * 根据组件类型推断对应的 Props 类型（排除事件处理器）
+ * 根据组件类型推断对应的插槽类型
  * @template T - 组件类型
  */
-export type FormItemCompProps<T extends FormItemComp = FormItemComp>
-  = Omit<FormItemCompPropsFull<T>, `on${string}`>
+export type FormItemCompSlots<T extends FormItemComp> = FormItemCompInstance<T>['$slots']

package/dist/types/el.d.ts

@@ -36,6 +36,9 @@ export interface ElFormProps {
 /** Element Plus FormItem Props */
 export type ElFormItemProps = FormItemInstance['$props']
 
+/** Element Plus FormItem Slots */
+export type ElFormItemSlots = FormItemInstance['$slots']
+
 /** Element Plus Row 组件 Props */
 export type ElRowProps = InstanceType<typeof ElRow>['$props']
 

package/dist/types/form-item.d.ts

@@ -3,6 +3,7 @@ import { FormItemComp, FormItemCompProps } from './comp';
 import { ElFormItemProps } from './el';
 import { ColProps } from './layout';
 import { InferOptionsType, IsOptionsSupported } from './options';
+import { CompSlotsConfig, FormItemSlotsConfig } from './scope';
 /**
  * 根据组件类型推断 options 类型
  * 只有支持 options 的组件才会扩展 options 类型
@@ -14,12 +15,14 @@ export type FormItemOptions<T extends FormItemComp> = IsOptionsSupported<T> exte
 
 /**
  * 根据组件类型推断 compProps 类型（扩展版本）
- * 支持扩展属性，如 options 等
+ * 支持扩展属性，如 options、slots 等
  * @template T - 组件类型
  */
-export type FormItemCompPropsExtended<T extends FormItemComp> = IsOptionsSupported<T> extends true
-  ? Omit<FormItemCompProps<T>, 'options'> & { options?: FormItemOptions<T> } // 支持 options 的组件：先排除原始 options，再添加扩展的 options 类型
-  : FormItemCompProps<T> // 不支持 options 的组件：使用原始 Props 类型
+export type FormItemCompPropsExtended<T extends FormItemComp>
+  = (IsOptionsSupported<T> extends true
+    ? Omit<FormItemCompProps<T>, 'options'> & { options?: FormItemOptions<T> }
+    : FormItemCompProps<T>)
+  & { slots?: CompSlotsConfig<T> }
 
 /**
  * FormItem Props
@@ -27,9 +30,10 @@ export type FormItemCompPropsExtended<T extends FormItemComp> = IsOptionsSupport
  * 扩展自 Element Plus 的 FormItem 组件 Props，添加了自定义配置选项
  *
  * @template T - 组件类型
- * @extends {ElFormItemProps} Element Plus FormItem 组件原始 Props
+ * @extends {ElFormItemProps} Element Plus FormItem 组件原始 Props（包含事件处理器）
  * @property {T} compType 使用的组件类型
- * @property {FormItemCompPropsExtended<T>} [compProps] 传递给组件的 Props 配置对象
+ * @property {FormItemCompPropsExtended<T>} [compProps] 传递给组件的 Props 配置对象（包含事件处理器和插槽，用于动态组件）
+ * @property {FormItemSlotsConfig} [slots] FormItem 插槽配置（用于 el-form-item 的插槽）
  * @property {Condition} [vIf] 条件渲染控制，支持布尔值或接收表单数据的函数
  * @property {Condition} [vShow] 显示/隐藏控制，支持布尔值或接收表单数据的函数
  *
@@ -38,7 +42,8 @@ export type FormItemCompPropsExtended<T extends FormItemComp> = IsOptionsSupport
 export interface FormItem<T extends FormItemComp = FormItemComp> extends ElFormItemProps {
   prop: string
   compType: T
-  compProps?: FormItemCompPropsExtended<T>
+  compProps?: FormItemCompPropsExtended<T> // 包含事件处理器和插槽（动态组件的事件和插槽）
+  slots?: FormItemSlotsConfig // FormItem 插槽配置
   vIf?: Condition
   vShow?: Condition
   colProps?: ColProps

package/dist/types/scope.d.ts

@@ -1,3 +1,6 @@
+import { VNode } from 'vue';
+import { FormItemComp, FormItemCompSlots } from './comp';
+import { ElFormItemSlots } from './el';
 import { FormItem } from './form-item';
 /**
  * 表单项事件扩展参数
@@ -32,3 +35,30 @@ export interface FormItemSlotScope {
   formItem: FormItem
   [key: string]: any // 允许 el-form-item 的其他作用域参数
 }
+
+/**
+ * 插槽渲染函数类型
+ *
+ * 允许返回 VNode 或 VNode[]，兼容 h() 函数返回单个 VNode 的情况
+ * Vue 的 component :is 可以接受返回 VNode 或 VNode[] 的函数
+ * 用于插槽配置，提供比 Vue 的 Slot 类型更灵活的返回值支持
+ * 接受 FormItemSlotScope 参数（或扩展类型），包含 value、form、formItem 等属性
+ * 使用泛型支持扩展参数类型，如 FormItemSlotScope & { label: string } 用于 label 插槽
+ */
+export type SlotRenderFn<T extends FormItemSlotScope = FormItemSlotScope> = (props: T) => VNode | VNode[]
+
+/**
+ * 动态组件插槽配置类型
+ *
+ * @template T - 组件类型
+ */
+export type CompSlotsConfig<T extends FormItemComp> = {
+  [K in keyof FormItemCompSlots<T>]?: SlotRenderFn
+}
+
+/**
+ * FormItem 插槽配置类型
+ */
+export type FormItemSlotsConfig = {
+  [K in keyof ElFormItemSlots]?: SlotRenderFn
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iswangh/element-plus-kit-form",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Element Plus Kit 表单组件包",
   "license": "Apache-2.0",
   "sideEffects": [
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "@iswangh/element-plus-kit-core": "0.2.0"
+    "@iswangh/element-plus-kit-core": "0.2.1"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.2",