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

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

@@ -2,24 +2,18 @@ import { Condition } from './common';
 import { FormItemComp, FormItemCompProps } from './comp';
 import { ElFormItemProps } from './el';
 import { ColProps } from './layout';
-import { InferOptionsType, IsOptionsSupported } from './options';
-/**
- * 根据组件类型推断 options 类型
- * 只有支持 options 的组件才会扩展 options 类型
- * @template T - 组件类型
- */
-export type FormItemOptions<T extends FormItemComp> = IsOptionsSupported<T> extends true
-  ? InferOptionsType<T>
-  : never
-
+import { HasOptionsProp, OptionsLoaderType } from './options';
+import { CompSlotsConfig, FormItemSlotsConfig } from './scope';
 /**
  * 根据组件类型推断 compProps 类型（扩展版本）
- * 支持扩展属性，如 options 等
+ * 支持扩展属性，如 options、optionsLoader、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>
+  = (HasOptionsProp<T> extends true
+    ? FormItemCompProps<T> & { optionsLoader?: OptionsLoaderType }
+    : FormItemCompProps<T>)
+  & { slots?: CompSlotsConfig<T> }
 
 /**
  * FormItem Props
@@ -27,9 +21,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 +33,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/index.d.ts

@@ -1,9 +1,8 @@
-export type * from './action';
-export type * from './common';
-export type * from './comp';
-export type * from './el';
-export type * from './form-item';
-export type * from './layout';
-export type * from './options';
-export type * from './scope';
-//# sourceMappingURL=index.d.ts.map
+export * from './action'
+export * from './common'
+export * from './comp'
+export * from './el'
+export * from './form-item'
+export * from './layout'
+export * from './options'
+export * from './scope'

package/dist/types/options.d.ts

@@ -4,70 +4,11 @@ import { FormItemComp, FormItemCompProps } from './comp';
  * 通过检查组件实例的 $props 中是否包含 'options' 来判断
  * @template T 组件类型
  */
-type HasOptionsProp<T extends FormItemComp> = 'options' extends keyof FormItemCompProps<T>
+export type HasOptionsProp<T extends FormItemComp> = 'options' extends keyof FormItemCompProps<T>
   ? true
   : false
 
 /**
- * 判断组件是否支持 options 属性
- * 动态从组件类型定义中判断，不硬编码组件名称
- * @template T 组件类型
- */
-export type IsOptionsSupported<T extends FormItemComp> = HasOptionsProp<T>
-
-/**
- * 支持 options 属性的组件类型
- * 通过类型系统自动提取，不硬编码
- */
-export type OptionsSupportedComp = FormItemComp extends infer T
-  ? T extends FormItemComp
-    ? IsOptionsSupported<T> extends true
-      ? T
-      : never
-    : never
-  : never
-
-/**
- * Options 加载器函数类型
- * @param formData 表单数据（外部依赖通过闭包访问）
- * @returns 返回选项数组（支持同步和异步）
- */
-export type OptionsLoader = (formData: Record<string, any>) => any[] | Promise<any[]>
-
-/**
- * Options 对象模式配置
- */
-export interface OptionsConfig {
-  /**
-   * 选项加载器函数
-   * @param formData 表单数据（外部依赖通过闭包访问）
-   * @returns 返回选项数组（支持同步和异步）
-   */
-  loader: OptionsLoader
-  /**
-   * 是否立即加载（默认 false，需要显式设置为 true 才会立即加载）
-   */
-  immediate?: boolean
-  /**
-   * 依赖字段列表，需要监听并获取
-   * 支持内部依赖（表单字段），外部依赖通过闭包访问
-   */
-  deps?: string[]
-}
-
-/**
- * 根据组件类型推断 options 类型
- * @template T 组件类型
- */
-export type InferOptionsType<T extends FormItemComp> = IsOptionsSupported<T> extends true
-  ? OptionsLoader | OptionsConfig | any[]
-  : never
-
-/**
- * 获取组件原始的 options 类型
- * 从组件实例的 $props 中提取 options 属性的类型
- * @template T 组件类型
+ * OptionsLoader 类型
  */
-export type GetCompOptionsType<T extends FormItemComp> = IsOptionsSupported<T> extends true
-  ? FormItemCompProps<T>['options']
-  : never
+export type OptionsLoaderType = (formData?: Record<string, any>) => any[] | Promise<any[]>

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/dist/utils/action.d.ts.map

@@ -1 +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"}
+{"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,CAE9G"}

package/dist/utils/index.d.ts

@@ -1,5 +1,3 @@
 export * from './action';
 export * from './lodash';
-export * from './options';
-export * from './value';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iswangh/element-plus-kit-form",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",
@@ -47,7 +47,8 @@
     "vue-tsc": "^3.1.3"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
     "build": "vite build",

package/dist/composables/useClearState.d.ts

@@ -1,17 +0,0 @@
-/**
- * 清理状态管理组合式函数
- * 用于管理依赖变更时的清理操作，支持用户在 change 事件中设置默认值
- */
-export declare function useClearState(): {
-    /** 是否正在处理依赖变更 */
-    readonly changing: boolean;
-    /** 用户是否在 change 事件中设置了值 */
-    readonly hasUserValue: boolean;
-    /** 开始依赖变更处理 */
-    start(): void;
-    /** 结束依赖变更处理 */
-    end(): void;
-    /** 标记用户在 change 事件中设置了值 */
-    markValue(): void;
-};
-//# sourceMappingURL=useClearState.d.ts.map

package/dist/composables/useClearState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClearState.d.ts","sourceRoot":"","sources":["../../src/composables/useClearState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,aAAa;IAKzB,iBAAiB;;IAKjB,2BAA2B;;IAK3B,eAAe;;IAMf,eAAe;;IAMf,2BAA2B;;EAK9B"}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/utils/options.d.ts

@@ -1,21 +0,0 @@
-import { OptionsConfig } from '../types';
-/**
- * 处理依赖列表：排除自身并去重
- * @param deps 依赖字段列表
- * @param currentProp 当前字段名，用于排除自己
- */
-export declare function processDeps(deps: string[], currentProp?: string): string[];
-/**
- * 获取依赖值
- * @param deps 依赖字段列表
- * @param formData 表单数据（外部依赖通过闭包访问）
- * @param currentProp 当前字段名，用于排除自己
- */
-export declare function getDepsValues(deps: string[], formData: Record<string, any>, currentProp?: string): Record<string, any>;
-/**
- * 检查是否为对象模式的 options 配置
- * @param options - 待检查的选项配置
- * @returns 是否为对象模式配置
- */
-export declare function isOptionsConfig(options: any): options is OptionsConfig;
-//# sourceMappingURL=options.d.ts.map

package/dist/utils/options.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/utils/value.d.ts

@@ -1,21 +0,0 @@
-/**
- * 检查值是否在选项中的参数
- */
-export interface CheckValueInOptionsParams {
-    /** 当前值（支持单个值或数组值） */
-    modelValue: any;
-    /** 选项数组 */
-    options: any[];
-    /** 表单项配置，用于获取组件类型等信息 */
-    formItem: {
-        compType: string;
-    };
-}
-/**
- * 检查当前值是否在新的选项中
- * 用于判断是否需要自动清理值：如果值在新的选项中，保留；否则清理
- * @param params - 检查参数
- * @returns 是否在选项中（true 表示在选项中，不需要清理；false 表示不在，需要清理）
- */
-export declare function checkValueInOptions(params: CheckValueInOptionsParams): boolean;
-//# sourceMappingURL=value.d.ts.map

package/dist/utils/value.d.ts.map

@@ -1 +0,0 @@
-{"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"}