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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +121 -21
  2. package/dist/FormAction.vue.d.ts +3 -3
  3. package/dist/FormAction.vue.d.ts.map +1 -1
  4. package/dist/FormItem.vue.d.ts +7 -24
  5. package/dist/FormItem.vue.d.ts.map +1 -1
  6. package/dist/composables/index.d.ts +1 -0
  7. package/dist/composables/index.d.ts.map +1 -1
  8. package/dist/composables/useChangeEventState.d.ts +5 -27
  9. package/dist/composables/useChangeEventState.d.ts.map +1 -1
  10. package/dist/composables/useClearState.d.ts +17 -0
  11. package/dist/composables/useClearState.d.ts.map +1 -0
  12. package/dist/config/action.d.ts +19 -14
  13. package/dist/config/action.d.ts.map +1 -1
  14. package/dist/config/comp.d.ts +44 -0
  15. package/dist/config/comp.d.ts.map +1 -0
  16. package/dist/config/form-item.d.ts +6 -0
  17. package/dist/config/form-item.d.ts.map +1 -0
  18. package/dist/config/form.d.ts +1 -1
  19. package/dist/config/index.d.ts +2 -1
  20. package/dist/config/index.d.ts.map +1 -1
  21. package/dist/index.d.ts +1 -1
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.js +1120 -505
  24. package/dist/style.css +1 -1
  25. package/dist/types/action.d.ts +13 -12
  26. package/dist/types/common.d.ts +5 -4
  27. package/dist/types/comp.d.ts +93 -0
  28. package/dist/types/el.d.ts +11 -8
  29. package/dist/types/form-item.d.ts +36 -92
  30. package/dist/types/index.d.ts +3 -0
  31. package/dist/types/index.d.ts.map +1 -1
  32. package/dist/types/layout.d.ts +6 -0
  33. package/dist/types/options.d.ts +15 -31
  34. package/dist/types/scope.d.ts +64 -0
  35. package/dist/utils/action.d.ts +2 -2
  36. package/dist/utils/action.d.ts.map +1 -1
  37. package/dist/utils/index.d.ts +1 -1
  38. package/dist/utils/index.d.ts.map +1 -1
  39. package/dist/utils/lodash.d.ts +6 -0
  40. package/dist/utils/lodash.d.ts.map +1 -0
  41. package/dist/utils/options.d.ts.map +1 -1
  42. package/dist/utils/value.d.ts +13 -19
  43. package/dist/utils/value.d.ts.map +1 -1
  44. package/package.json +5 -3
  45. package/dist/config/component.d.ts +0 -38
  46. package/dist/config/component.d.ts.map +0 -1
  47. package/dist/utils/debounce.d.ts +0 -25
  48. package/dist/utils/debounce.d.ts.map +0 -1
@@ -1,4 +1,5 @@
1
1
  import { ButtonProps } from 'element-plus';
2
+ import { Condition } from './common';
2
3
  /**
3
4
  * 标准化的表单操作按钮配置项
4
5
  *
@@ -6,7 +7,7 @@ import { ButtonProps } from 'element-plus';
6
7
  * @property {string} label 按钮文字
7
8
  * @property {string} eventName 事件名称
8
9
  */
9
- export interface ActionConfigButtonItem extends Partial<ButtonProps> {
10
+ export interface FormActionButtonItem extends Partial<ButtonProps> {
10
11
  label?: string
11
12
  eventName: string
12
13
  }
@@ -16,7 +17,7 @@ export interface ActionConfigButtonItem extends Partial<ButtonProps> {
16
17
  *
17
18
  * 可以是标准化的按钮配置对象,也可以是预定义的按钮类型字符串
18
19
  */
19
- export type ActionConfigButtons = ActionConfigButtonItem | 'submit' | 'cancel' | 'search' | 'reset' | 'expand'
20
+ export type FormActionButtons = FormActionButtonItem | 'submit' | 'cancel' | 'search' | 'reset' | 'expand'
20
21
 
21
22
  /**
22
23
  * 展开规则基础配置
@@ -35,7 +36,7 @@ export type ActionConfigButtons = ActionConfigButtonItem | 'submit' | 'cancel' |
35
36
  * - 默认值为 `{ behavior: 'smooth', block: 'center', inline: 'nearest' }`
36
37
  * - 支持所有 `ScrollIntoViewOptions` 类型的选项配置
37
38
  */
38
- export interface ExpandRuleBase {
39
+ export interface FormExpandRuleBase {
39
40
  /** 是否启用鼠标悬停自动展开功能 */
40
41
  autoExpandOnHover?: boolean
41
42
  /** 是否在展开/收起后自动滚动到表单中心 */
@@ -54,21 +55,21 @@ export interface ExpandRuleBase {
54
55
  *
55
56
  * **配置优先级**:`exclude` > `include` > `count`
56
57
  */
57
- export type ExpandRule
58
- = | ({ count: number } & ExpandRuleBase)
59
- | ({ include: string[] } & ExpandRuleBase)
60
- | ({ exclude: string[] } & ExpandRuleBase)
58
+ export type FormExpandRule
59
+ = | ({ count: number } & FormExpandRuleBase)
60
+ | ({ include: string[] } & FormExpandRuleBase)
61
+ | ({ exclude: string[] } & FormExpandRuleBase)
61
62
 
62
63
  /**
63
64
  * 表单操作项配置
64
65
  */
65
- export interface ActionConfig {
66
+ export interface FormActionConfig {
66
67
  /** 是否显示操作区域(支持函数动态判断) */
67
- vIf?: boolean | ((data?: any) => boolean)
68
+ vIf?: Condition
68
69
  /** 是否显示操作区域(支持函数动态判断,使用 v-show) */
69
- vShow?: boolean | ((data?: any) => boolean)
70
+ vShow?: Condition
70
71
  /** 操作按钮配置数组 */
71
- buttons?: ActionConfigButtons[]
72
+ buttons?: FormActionButtons[]
72
73
  /** 默认展开规则(仅在 buttons 包含 'expand' 时生效) */
73
- expand?: ExpandRule
74
+ expand?: FormExpandRule
74
75
  }
@@ -1,9 +1,10 @@
1
- import { FORM_ITEM_COMP_MAP } from '../config';
1
+ /* eslint-disable ts/no-explicit-any */
2
2
  /** 允许数组类型 */
3
3
  export type Arrayable<T> = T | T[]
4
4
 
5
5
  /**
6
- * 表单组件配置映射类型
7
- * 共享类型定义,避免在多个文件中重复定义导致冲突
6
+ * 条件类型
7
+ * 支持布尔值或接收数据的函数
8
+ * @template T - 数据类型,默认为 Record<string, any>
8
9
  */
9
- export type FormCompConfig = typeof FORM_ITEM_COMP_MAP
10
+ export type Condition<T = Record<string, any>> = boolean | ((data: T) => boolean)
@@ -0,0 +1,93 @@
1
+ import { ElAutocomplete, ElCascader, ElCheckboxGroup, ElColorPicker, ElColorPickerPanel, ElDatePicker, ElDatePickerPanel, ElInput, ElInputNumber, ElInputTag, ElMention, ElRadioGroup, ElRate, ElSelect, ElSelectV2, ElSlider, ElSwitch, ElTimePicker, ElTimeSelect, ElTransfer, ElTreeSelect } from 'element-plus';
2
+ import { EXPAND_COMP_MAP } from '../config';
3
+ /**
4
+ * Element Plus 组件映射类型
5
+ *
6
+ * 手动定义类型映射,避免从 EL_COMP_MAP 使用 typeof 时类型推断超出编译器序列化限制
7
+ * 与 comp.ts 中的 EL_COMP_MAP 保持同步
8
+ */
9
+ interface ElCompMap {
10
+ readonly 'autocomplete': typeof ElAutocomplete
11
+ readonly 'cascader': typeof ElCascader
12
+ readonly 'checkbox': typeof ElCheckboxGroup
13
+ readonly 'color-picker-panel': typeof ElColorPickerPanel
14
+ readonly 'color-picker': typeof ElColorPicker
15
+ readonly 'date-picker-panel': typeof ElDatePickerPanel
16
+ readonly 'date-picker': typeof ElDatePicker
17
+ readonly 'input': typeof ElInput
18
+ readonly 'input-number': typeof ElInputNumber
19
+ readonly 'input-tag': typeof ElInputTag
20
+ readonly 'mention': typeof ElMention
21
+ readonly 'radio': typeof ElRadioGroup
22
+ readonly 'rate': typeof ElRate
23
+ readonly 'select': typeof ElSelect
24
+ readonly 'select-v2': typeof ElSelectV2
25
+ readonly 'slider': typeof ElSlider
26
+ readonly 'switch': typeof ElSwitch
27
+ readonly 'time-picker': typeof ElTimePicker
28
+ readonly 'time-select': typeof ElTimeSelect
29
+ readonly 'transfer': typeof ElTransfer
30
+ readonly 'tree-select': typeof ElTreeSelect
31
+ }
32
+
33
+ /**
34
+ * 表单组件配置映射类型
35
+ *
36
+ * 合并 Element Plus 组件映射和扩展组件映射的类型
37
+ * - ElCompMap: 手动定义,避免类型推断超出限制
38
+ * - typeof EXPAND_COMP_MAP: 从运行时值提取类型(简单映射,不会超出限制)
39
+ *
40
+ * 注意:不使用 typeof FORM_ITEM_COMP_MAP,因为 FORM_ITEM_COMP_MAP 使用了
41
+ * Record<string, any> 避免类型推断超出编译器序列化限制
42
+ */
43
+ export type FormCompConfig = ElCompMap & typeof EXPAND_COMP_MAP
44
+
45
+ /**
46
+ * 支持的表单组件枚举
47
+ *
48
+ * 显式定义所有可用的组件键名,确保类型提示正常工作
49
+ * 注意:由于 FORM_ITEM_COMP_MAP 使用了 Record<string, any> 避免类型推断超出限制,
50
+ * 我们需要显式定义键名类型,而不是从 typeof FORM_ITEM_COMP_MAP 中提取
51
+ */
52
+ export type FormItemComp = 'custom'
53
+ | 'autocomplete'
54
+ | 'cascader'
55
+ | 'checkbox'
56
+ | 'color-picker'
57
+ | 'color-picker-panel'
58
+ | 'date-picker'
59
+ | 'date-picker-panel'
60
+ | 'input'
61
+ | 'input-number'
62
+ | 'input-tag'
63
+ | 'mention'
64
+ | 'radio'
65
+ | 'rate'
66
+ | 'select'
67
+ | 'select-v2'
68
+ | 'slider'
69
+ | 'switch'
70
+ | 'time-picker'
71
+ | 'time-select'
72
+ | 'transfer'
73
+ | 'tree-select'
74
+ | 'custom'
75
+
76
+ /**
77
+ * 根据组件类型获取组件实例类型
78
+ * @template T 组件类型
79
+ */
80
+ export type FormItemCompInstance<T extends FormItemComp> = InstanceType<FormCompConfig[T]>
81
+
82
+ /**
83
+ * 根据组件类型推断对应的 Props 类型(包含事件处理器)
84
+ * @template T - 组件类型
85
+ */
86
+ export type FormItemCompProps<T extends FormItemComp = FormItemComp>
87
+ = FormItemCompInstance<T>['$props']
88
+
89
+ /**
90
+ * 根据组件类型推断对应的插槽类型
91
+ * @template T - 组件类型
92
+ */
93
+ export type FormItemCompSlots<T extends FormItemComp> = FormItemCompInstance<T>['$slots']
@@ -1,6 +1,6 @@
1
1
  import { ElCol, ElRow, FormItemInstance, FormRules } from 'element-plus';
2
2
  /**
3
- * Element Plus Form Attributes
3
+ * Element Plus Form Props
4
4
  *
5
5
  * 由于 `FormInstance['$slots']` 类型定义存在问题,
6
6
  * 暂时无法直接使用 `FormInstance['$props']`,
@@ -8,7 +8,7 @@ import { ElCol, ElRow, FormItemInstance, FormRules } from 'element-plus';
8
8
  *
9
9
  * @see {@link https://element-plus.org/zh-CN/component/form.html#form-attributes Element Plus Form Attributes}
10
10
  */
11
- export interface ElFormAttrs {
11
+ export interface ElFormProps {
12
12
  // 数据相关
13
13
  model?: Record<string, any>
14
14
  rules?: FormRules
@@ -33,11 +33,14 @@ export interface ElFormAttrs {
33
33
  scrollIntoViewOptions?: ScrollIntoViewOptions
34
34
  }
35
35
 
36
- /** Element Plus FormItem 属性 */
37
- export type ElFormItemAttrs = FormItemInstance['$props']
36
+ /** Element Plus FormItem Props */
37
+ export type ElFormItemProps = FormItemInstance['$props']
38
38
 
39
- /** Element Plus Row 组件属性 */
40
- export type ElRowAttrs = InstanceType<typeof ElRow>['$props']
39
+ /** Element Plus FormItem Slots */
40
+ export type ElFormItemSlots = FormItemInstance['$slots']
41
41
 
42
- /** Element Plus Col 组件属性 */
43
- export type ElColAttrs = InstanceType<typeof ElCol>['$props']
42
+ /** Element Plus Row 组件 Props */
43
+ export type ElRowProps = InstanceType<typeof ElRow>['$props']
44
+
45
+ /** Element Plus Col 组件 Props */
46
+ export type ElColProps = InstanceType<typeof ElCol>['$props']
@@ -1,109 +1,53 @@
1
- import { FormCompConfig } from './common';
2
- import { ElColAttrs, ElFormItemAttrs, ElRowAttrs } from './el';
3
- import { GetComponentOptionsType, InferOptionsType, IsOptionsSupported } from './options';
4
- /** Row 布局属性(扩展自 Element Plus Row 组件属性) */
5
- export type RowAttrs = ElRowAttrs & { span?: number }
6
-
7
- /** Col 布局属性(Element Plus Col 组件属性) */
8
- export type ColAttrs = ElColAttrs
9
-
1
+ import { Condition } from './common';
2
+ import { FormItemComp, FormItemCompProps } from './comp';
3
+ import { ElFormItemProps } from './el';
4
+ import { ColProps } from './layout';
5
+ import { InferOptionsType, IsOptionsSupported } from './options';
6
+ import { CompSlotsConfig, FormItemSlotsConfig } from './scope';
10
7
  /**
11
- * 支持的表单组件枚举
12
- *
13
- * 显式定义所有可用的组件键名,确保类型提示正常工作
14
- * 注意:由于 FORM_ITEM_COMP_MAP 使用了 Record<string, any> 避免类型推断超出限制,
15
- * 我们需要显式定义键名类型,而不是从 typeof FORM_ITEM_COMP_MAP 中提取
8
+ * 根据组件类型推断 options 类型
9
+ * 只有支持 options 的组件才会扩展 options 类型
10
+ * @template T - 组件类型
16
11
  */
17
- export type FormItemComp
18
- = | 'autocomplete'
19
- | 'cascader'
20
- | 'checkbox'
21
- | 'color-picker'
22
- | 'color-picker-panel'
23
- | 'date-picker'
24
- | 'date-picker-panel'
25
- | 'input'
26
- | 'input-number'
27
- | 'input-tag'
28
- | 'mention'
29
- | 'radio'
30
- | 'rate'
31
- | 'select'
32
- | 'select-v2'
33
- | 'slider'
34
- | 'switch'
35
- | 'time-picker'
36
- | 'time-select'
37
- | 'transfer'
38
- | 'tree-select'
39
- | 'custom'
12
+ export type FormItemOptions<T extends FormItemComp> = IsOptionsSupported<T> extends true
13
+ ? InferOptionsType<T>
14
+ : never
40
15
 
41
16
  /**
42
- * 根据组件类型推断对应的属性类型(排除事件处理器)
17
+ * 根据组件类型推断 compProps 类型(扩展版本)
18
+ * 支持扩展属性,如 options、slots 等
43
19
  * @template T - 组件类型
44
20
  */
45
- export type FormItemCompAttrs<T extends FormItemComp = FormItemComp>
46
- = Omit<InstanceType<FormCompConfig[T]>['$props'], `on${string}`>
21
+ export type FormItemCompPropsExtended<T extends FormItemComp>
22
+ = (IsOptionsSupported<T> extends true
23
+ ? Omit<FormItemCompProps<T>, 'options'> & { options?: FormItemOptions<T> }
24
+ : FormItemCompProps<T>)
25
+ & { slots?: CompSlotsConfig<T> }
47
26
 
48
27
  /**
49
- * 根据组件类型推断 options 类型
50
- * 只有支持 options 的组件才会扩展 options 类型
51
- * @template C - 组件类型
52
- */
53
- export type FormItemOptions<C extends FormItemComp> = IsOptionsSupported<C> extends true
54
- ? InferOptionsType<C, GetComponentOptionsType<C>>
55
- : never
56
-
57
- /**
58
- * FormItem 属性
28
+ * FormItem Props
59
29
  *
60
- * 扩展自 Element Plus 的 FormItem 组件属性,添加了自定义配置选项
30
+ * 扩展自 Element Plus 的 FormItem 组件 Props,添加了自定义配置选项
61
31
  *
62
- * @template C - 组件类型
63
- * @extends {ElFormItemAttrs} Element Plus FormItem 组件原始属性
64
- * @property {C} comp 使用的组件类型
65
- * @property {FormItemCompAttrs<C>} [compAttrs] 传递给组件的属性配置对象
66
- * @property {boolean | ((data?: any) => boolean)} [vIf] 条件渲染控制,支持布尔值或接收表单数据的函数
67
- * @property {boolean | ((data?: any) => boolean)} [vShow] 显示/隐藏控制,支持布尔值或接收表单数据的函数
32
+ * @template T - 组件类型
33
+ * @extends {ElFormItemProps} Element Plus FormItem 组件原始 Props(包含事件处理器)
34
+ * @property {T} compType 使用的组件类型
35
+ * @property {FormItemCompPropsExtended<T>} [compProps] 传递给组件的 Props 配置对象(包含事件处理器和插槽,用于动态组件)
36
+ * @property {FormItemSlotsConfig} [slots] FormItem 插槽配置(用于 el-form-item 的插槽)
37
+ * @property {Condition} [vIf] 条件渲染控制,支持布尔值或接收表单数据的函数
38
+ * @property {Condition} [vShow] 显示/隐藏控制,支持布尔值或接收表单数据的函数
68
39
  *
69
40
  * @see {@link https://element-plus.org/zh-CN/component/form.html#form-item-attributes Element Plus Form Item Attributes}
70
41
  */
71
- export interface FormItem<
72
- C extends FormItemComp = FormItemComp,
73
- > extends ElFormItemAttrs {
42
+ export interface FormItem<T extends FormItemComp = FormItemComp> extends ElFormItemProps {
74
43
  prop: string
75
- comp: C
76
- compAttrs?: IsOptionsSupported<C> extends true
77
- ? FormItemCompAttrs<C> & { options?: FormItemOptions<C> } // 支持 options 的组件:直接覆盖 options 类型为扩展类型
78
- : FormItemCompAttrs<C> // 不支持 options 的组件:使用原始属性类型
79
- vIf?: boolean | ((data: Record<string, any>) => boolean)
80
- vShow?: boolean | ((data: Record<string, any>) => boolean)
81
- colAttrs?: ColAttrs
44
+ compType: T
45
+ compProps?: FormItemCompPropsExtended<T> // 包含事件处理器和插槽(动态组件的事件和插槽)
46
+ slots?: FormItemSlotsConfig // FormItem 插槽配置
47
+ vIf?: Condition
48
+ vShow?: Condition
49
+ colProps?: ColProps
82
50
  }
83
51
 
84
- /** formItems 配置类型 - 推断每一项的 comp 对应的组件类型 */
52
+ /** formItems 配置类型 - 推断每一项的 compType 对应的组件类型 */
85
53
  export type FormItems = { [K in FormItemComp]: FormItem<K> }[FormItemComp][]
86
-
87
- /**
88
- * 事件拓展参数
89
- * @template K 属性名类型
90
- */
91
- export interface EventExtendedParams<K = string> {
92
- prop: K
93
- index: number
94
- formItem: FormItem
95
- }
96
-
97
- /**
98
- * 表单项插槽作用域参数
99
- *
100
- * @property {any} value 当前表单项组件的值
101
- * @property {Record<string, any>} form 表单数据
102
- * @property {FormItem} formItem 表单项配置
103
- */
104
- export interface FormItemSlotScope {
105
- value: any
106
- form: Record<string, any>
107
- formItem: FormItem
108
- [key: string]: any // 允许 el-form-item 的其他作用域参数
109
- }
@@ -1,6 +1,9 @@
1
1
  export type * from './action';
2
2
  export type * from './common';
3
+ export type * from './comp';
3
4
  export type * from './el';
4
5
  export type * from './form-item';
6
+ export type * from './layout';
5
7
  export type * from './options';
8
+ export type * from './scope';
6
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,MAAM,CAAA;AACzB,mBAAmB,aAAa,CAAA;AAChC,mBAAmB,WAAW,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,QAAQ,CAAA;AAC3B,mBAAmB,MAAM,CAAA;AACzB,mBAAmB,aAAa,CAAA;AAChC,mBAAmB,UAAU,CAAA;AAC7B,mBAAmB,WAAW,CAAA;AAC9B,mBAAmB,SAAS,CAAA"}
@@ -0,0 +1,6 @@
1
+ import { ElColProps, ElRowProps } from './el';
2
+ /** Row 布局 Props(扩展自 Element Plus Row 组件 Props) */
3
+ export type RowProps = ElRowProps & { span?: number }
4
+
5
+ /** Col 布局 Props(Element Plus Col 组件 Props) */
6
+ export type ColProps = ElColProps
@@ -1,29 +1,28 @@
1
- import { FormCompConfig } from './common';
2
- import { FormItemComp } from './form-item';
1
+ import { FormItemComp, FormItemCompProps } from './comp';
3
2
  /**
4
3
  * 检查组件类型是否包含 options 属性
5
4
  * 通过检查组件实例的 $props 中是否包含 'options' 来判断
6
- * @template C 组件类型
5
+ * @template T 组件类型
7
6
  */
8
- type HasOptionsProp<C extends FormItemComp> = 'options' extends keyof InstanceType<FormCompConfig[C]>['$props']
7
+ type HasOptionsProp<T extends FormItemComp> = 'options' extends keyof FormItemCompProps<T>
9
8
  ? true
10
9
  : false
11
10
 
12
11
  /**
13
12
  * 判断组件是否支持 options 属性
14
13
  * 动态从组件类型定义中判断,不硬编码组件名称
15
- * @template C 组件类型
14
+ * @template T 组件类型
16
15
  */
17
- export type IsOptionsSupported<C extends FormItemComp> = HasOptionsProp<C>
16
+ export type IsOptionsSupported<T extends FormItemComp> = HasOptionsProp<T>
18
17
 
19
18
  /**
20
19
  * 支持 options 属性的组件类型
21
20
  * 通过类型系统自动提取,不硬编码
22
21
  */
23
- export type OptionsSupportedComp = FormItemComp extends infer C
24
- ? C extends FormItemComp
25
- ? IsOptionsSupported<C> extends true
26
- ? C
22
+ export type OptionsSupportedComp = FormItemComp extends infer T
23
+ ? T extends FormItemComp
24
+ ? IsOptionsSupported<T> extends true
25
+ ? T
27
26
  : never
28
27
  : never
29
28
  : never
@@ -58,32 +57,17 @@ export interface OptionsConfig {
58
57
 
59
58
  /**
60
59
  * 根据组件类型推断 options 类型
61
- * @template C 组件类型
62
- * @template T 组件实例类型
60
+ * @template T 组件类型
63
61
  */
64
- export type InferOptionsType<C extends FormItemComp, T = any> = IsOptionsSupported<C> extends true
65
- ? T[] | OptionsLoader | OptionsConfig
62
+ export type InferOptionsType<T extends FormItemComp> = IsOptionsSupported<T> extends true
63
+ ? OptionsLoader | OptionsConfig | any[]
66
64
  : never
67
65
 
68
66
  /**
69
67
  * 获取组件原始的 options 类型
70
68
  * 从组件实例的 $props 中提取 options 属性的类型
71
- * @template C 组件类型
69
+ * @template T 组件类型
72
70
  */
73
- export type GetComponentOptionsType<C extends FormItemComp> = IsOptionsSupported<C> extends true
74
- ? InstanceType<FormCompConfig[C]>['$props']['options']
71
+ export type GetCompOptionsType<T extends FormItemComp> = IsOptionsSupported<T> extends true
72
+ ? FormItemCompProps<T>['options']
75
73
  : never
76
-
77
- /**
78
- * 检查组件类型是否包含 loading 属性
79
- * @template C 组件类型
80
- */
81
- type HasLoadingProp<C extends FormItemComp> = 'loading' extends keyof InstanceType<FormCompConfig[C]>['$props']
82
- ? true
83
- : false
84
-
85
- /**
86
- * 判断组件是否支持 loading 属性
87
- * @template C 组件类型
88
- */
89
- export type IsLoadingSupported<C extends FormItemComp> = HasLoadingProp<C>
@@ -0,0 +1,64 @@
1
+ import { VNode } from 'vue';
2
+ import { FormItemComp, FormItemCompSlots } from './comp';
3
+ import { ElFormItemSlots } from './el';
4
+ import { FormItem } from './form-item';
5
+ /**
6
+ * 表单项事件扩展参数
7
+ *
8
+ * 表单组件事件的扩展参数,包含字段名、索引和表单项配置
9
+ * 用于 change 等事件,未来可扩展用于其他表单项相关事件
10
+ *
11
+ * @template K 属性名类型
12
+ * @property {K} prop 表单字段名
13
+ * @property {number} index 表单项索引
14
+ * @property {FormItem} formItem 表单项配置
15
+ */
16
+ export interface FormItemEventExtendedParams<K = string> {
17
+ prop: K
18
+ index: number
19
+ formItem: FormItem
20
+ }
21
+
22
+ /**
23
+ * 表单项插槽作用域参数
24
+ *
25
+ * 表单项插槽的作用域参数,包含当前值、表单数据和表单项配置
26
+ * 用于 form-item 插槽、动态组件插槽、自定义组件插槽等
27
+ *
28
+ * @property {any} value 当前表单项组件的值
29
+ * @property {Record<string, any>} form 表单数据
30
+ * @property {FormItem} formItem 表单项配置
31
+ */
32
+ export interface FormItemSlotScope {
33
+ value: any
34
+ form: Record<string, any>
35
+ formItem: FormItem
36
+ [key: string]: any // 允许 el-form-item 的其他作用域参数
37
+ }
38
+
39
+ /**
40
+ * 插槽渲染函数类型
41
+ *
42
+ * 允许返回 VNode 或 VNode[],兼容 h() 函数返回单个 VNode 的情况
43
+ * Vue 的 component :is 可以接受返回 VNode 或 VNode[] 的函数
44
+ * 用于插槽配置,提供比 Vue 的 Slot 类型更灵活的返回值支持
45
+ * 接受 FormItemSlotScope 参数(或扩展类型),包含 value、form、formItem 等属性
46
+ * 使用泛型支持扩展参数类型,如 FormItemSlotScope & { label: string } 用于 label 插槽
47
+ */
48
+ export type SlotRenderFn<T extends FormItemSlotScope = FormItemSlotScope> = (props: T) => VNode | VNode[]
49
+
50
+ /**
51
+ * 动态组件插槽配置类型
52
+ *
53
+ * @template T - 组件类型
54
+ */
55
+ export type CompSlotsConfig<T extends FormItemComp> = {
56
+ [K in keyof FormItemCompSlots<T>]?: SlotRenderFn
57
+ }
58
+
59
+ /**
60
+ * FormItem 插槽配置类型
61
+ */
62
+ export type FormItemSlotsConfig = {
63
+ [K in keyof ElFormItemSlots]?: SlotRenderFn
64
+ }
@@ -1,4 +1,4 @@
1
- import { ActionConfigButtons } from '../types';
1
+ import { FormActionButtons } from '../types';
2
2
  /**
3
3
  * 判断按钮列表中是否包含指定的事件名
4
4
  *
@@ -6,5 +6,5 @@ import { ActionConfigButtons } from '../types';
6
6
  * @param eventName - 事件名称
7
7
  * @returns 是否包含该事件名
8
8
  */
9
- export declare function hasButtonEvent(buttons: ActionConfigButtons[] | string[] | undefined, eventName: string): boolean;
9
+ export declare function hasButtonEvent(buttons: FormActionButtons[] | string[] | undefined, eventName: string): boolean;
10
10
  //# sourceMappingURL=action.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/utils/action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAEnD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,mBAAmB,EAAE,GAAG,MAAM,EAAE,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAIhH"}
1
+ {"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/utils/action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEjD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,iBAAiB,EAAE,GAAG,MAAM,EAAE,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAI9G"}
@@ -1,5 +1,5 @@
1
1
  export * from './action';
2
- export * from './debounce';
2
+ export * from './lodash';
3
3
  export * from './options';
4
4
  export * from './value';
5
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA"}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * @file lodash.ts
3
+ * @description lodash-es 方法统一导出
4
+ */
5
+ export { cloneDeep, debounce, isEmpty } from 'lodash-es';
6
+ //# sourceMappingURL=lodash.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lodash.d.ts","sourceRoot":"","sources":["../../src/utils/lodash.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/utils/options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAO1E;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAOtH;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,IAAI,aAAa,CAEtE"}
1
+ {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/utils/options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAO1E;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAGtH;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,IAAI,aAAa,CAEtE"}
@@ -1,27 +1,21 @@
1
1
  /**
2
- * 检查值是否为空
2
+ * 检查值是否在选项中的参数
3
3
  */
4
- export declare function isEmpty(val: any): boolean;
4
+ export interface CheckValueInOptionsParams {
5
+ /** 当前值(支持单个值或数组值) */
6
+ modelValue: any;
7
+ /** 选项数组 */
8
+ options: any[];
9
+ /** 表单项配置,用于获取组件类型等信息 */
10
+ formItem: {
11
+ compType: string;
12
+ };
13
+ }
5
14
  /**
6
15
  * 检查当前值是否在新的选项中
7
16
  * 用于判断是否需要自动清理值:如果值在新的选项中,保留;否则清理
8
- * @param currentValue - 当前值
9
- * @param options - 选项数组
17
+ * @param params - 检查参数
10
18
  * @returns 是否在选项中(true 表示在选项中,不需要清理;false 表示不在,需要清理)
11
19
  */
12
- export declare function checkValueInOptions(currentValue: any, options: any[]): boolean;
13
- /**
14
- * 深拷贝值(仅对对象和数组)
15
- *
16
- * @param value - 要深拷贝的值
17
- * @returns 深拷贝后的值
18
- *
19
- * @example
20
- * ```typescript
21
- * const obj = { a: 1, b: { c: 2 } }
22
- * const cloned = deepCloneValue(obj)
23
- * cloned.b.c = 3 // 不会影响原对象
24
- * ```
25
- */
26
- export declare function deepCloneValue<T = Record<string, unknown>>(value: T): T;
20
+ export declare function checkValueInOptions(params: CheckValueInOptionsParams): boolean;
27
21
  //# sourceMappingURL=value.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../src/utils/value.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAEzC;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAa9E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAMvE"}
1
+ {"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../src/utils/value.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,qBAAqB;IACrB,UAAU,EAAE,GAAG,CAAA;IACf,WAAW;IACX,OAAO,EAAE,GAAG,EAAE,CAAA;IACd,wBAAwB;IACxB,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAA;CAC/B;AA4BD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,yBAAyB,GAAG,OAAO,CA+B9E"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@iswangh/element-plus-kit-form",
3
3
  "type": "module",
4
- "version": "0.1.4",
4
+ "version": "0.2.1",
5
5
  "description": "Element Plus Kit 表单组件包",
6
6
  "license": "Apache-2.0",
7
7
  "sideEffects": [
@@ -31,10 +31,12 @@
31
31
  "vue": "^3.5.23"
32
32
  },
33
33
  "dependencies": {
34
- "@iswangh/element-plus-kit-core": "0.1.3"
34
+ "lodash-es": "^4.17.21",
35
+ "@iswangh/element-plus-kit-core": "0.2.1"
35
36
  },
36
37
  "devDependencies": {
37
38
  "@element-plus/icons-vue": "^2.3.2",
39
+ "@types/lodash-es": "^4.17.12",
38
40
  "@vitejs/plugin-vue": "^6.0.1",
39
41
  "element-plus": "^2.11.8",
40
42
  "sass": "^1.94.0",
@@ -50,6 +52,6 @@
50
52
  "scripts": {
51
53
  "build": "vite build",
52
54
  "dev": "vite build --watch",
53
- "type-check": "vue-tsc --noEmit"
55
+ "type-check": "vue-tsc --build"
54
56
  }
55
57
  }