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

package/README.md

@@ -95,6 +95,23 @@ import '@iswangh/element-plus-kit-form/style.css'
 | cancel | 取消按钮点击事件 | - |
 | expand | 展开状态变化事件 | `(value: boolean)` |
 
+**可配置化事件**：
+- 除了在 `WForm` 标签上监听事件，还可以在 `formItems` 配置对象的 `compProps` 中定义事件处理器
+- 事件名以 `on` 开头（如 `onBlur`、`onFocus`、`onInput` 等），直接接收原始事件参数（不需要 `extendedParams`）
+- 可配置化事件优先级高于 `WForm` 标签上的事件，如果同时定义了可配置化事件和标签事件，会优先使用可配置化事件
+- 示例：
+  ```typescript
+  {
+    prop: 'username',
+    compType: 'input',
+    compProps: {
+      onBlur: (event: FocusEvent) => {
+        console.log('onBlur 事件:', event)
+      },
+    },
+  }
+  ```
+
 ### Slots
 
 | 插槽名 | 说明 | 作用域参数 |
@@ -104,6 +121,28 @@ import '@iswangh/element-plus-kit-form/style.css'
 | `{prop}-{slotName}` | 动态组件插槽，如 `username-prefix`、`email-suffix` | `FormItemSlotScope` |
 | `expand-toggle` | 展开/折叠按钮插槽，用于自定义按钮 | `{ expanded: boolean, toggle: (value?: boolean) => void }` |
 
+**可配置化插槽**：
+- 除了使用模板插槽，还可以在 `formItems` 配置对象中直接定义插槽
+- **FormItem 插槽**：在配置对象的 `slots` 字段中定义，用于自定义 `el-form-item` 的插槽（如 `label`、`error` 等）
+- **动态组件插槽**：在 `compProps.slots` 字段中定义，用于自定义动态组件的插槽（如 `prefix`、`suffix` 等）
+- 可配置化插槽优先级高于模板插槽，如果同时定义了可配置化插槽和模板插槽，会优先使用可配置化插槽
+- 插槽函数使用 `h()` 函数创建 VNode，接收 `FormItemSlotScope` 参数
+- 示例：
+  ```typescript
+  {
+    prop: 'username',
+    compType: 'input',
+    slots: {
+      label: props => h('span', {}, props.formItem.label),
+    },
+    compProps: {
+      slots: {
+        prefix: () => h(User),
+      },
+    },
+  }
+  ```
+
 ### FormItem 配置
 
 #### 基础配置
@@ -267,7 +306,7 @@ const formItems: FormItems = [
 
 ### 自定义插槽
 
-使用插槽自定义表单项内容：
+使用模板插槽自定义表单项内容：
 
 ```vue
 <template>
@@ -279,6 +318,39 @@ const formItems: FormItems = [
 </template>
 ```
 
+### 可配置化插槽
+
+除了使用模板插槽，还可以在 `formItems` 配置对象中直接定义插槽：
+
+```typescript
+import { h } from 'vue'
+import { User } from '@element-plus/icons-vue'
+
+const formItems: FormItems = [
+  {
+    prop: 'username',
+    label: '用户名',
+    compType: 'input',
+    // FormItem 插槽配置
+    slots: {
+      label: props => h('span', { class: 'flex items-center gap-1' }, [
+        h('span', props.formItem.label),
+        h('span', { class: 'text-red-500' }, '*'),
+      ]),
+    },
+    // 动态组件插槽配置
+    compProps: {
+      placeholder: '请输入用户名',
+      slots: {
+        prefix: () => h(User, { class: 'text-gray-400' }),
+      },
+    },
+  },
+]
+```
+
+**优先级**：可配置化插槽优先级高于模板插槽，如果同时定义了可配置化插槽和模板插槽，会优先使用可配置化插槽。
+
 ### 表单验证
 
 ```typescript
@@ -297,6 +369,8 @@ const formItems: FormItems = [
 
 ### 监听事件
 
+在 `WForm` 标签上监听事件：
+
 ```vue
 <template>
   <WForm
@@ -318,6 +392,32 @@ const onSubmit = () => {
 </script>
 ```
 
+### 可配置化事件
+
+除了在 `WForm` 标签上监听事件，还可以在 `formItems` 配置对象中直接定义事件处理器：
+
+```typescript
+const formItems: FormItems = [
+  {
+    prop: 'username',
+    label: '用户名',
+    compType: 'input',
+    compProps: {
+      placeholder: '请输入用户名',
+      // 动态组件的事件在 compProps 中定义
+      onBlur: (event: FocusEvent) => {
+        console.log('onBlur 事件:', event)
+      },
+      onFocus: (event: FocusEvent) => {
+        console.log('onFocus 事件:', event)
+      },
+    },
+  },
+]
+```
+
+**优先级**：可配置化事件优先级高于 `WForm` 标签上的事件，如果同时定义了可配置化事件和标签事件，会优先使用可配置化事件。
+
 ### 展开/折叠功能
 
 表单支持展开/折叠功能，可以控制表单项的显示和隐藏，适用于字段较多的表单场景。

package/dist/FormItem.vue.d.ts

@@ -6,9 +6,8 @@ interface ProcessedSlot {
     slotFn: Slot;
 }
 interface FormSlots {
-    formItemSlots: ProcessedSlot[];
-    dynamicComponentSlots: Map<string, ProcessedSlot[]>;
-    customComponentSlots: Map<string, ProcessedSlot[]>;
+    formItemSlots: Map<string, ProcessedSlot[]>;
+    dynamicCompSlots: Map<string, ProcessedSlot[]>;
 }
 interface Props {
     formItem: FormItem;
@@ -24,16 +23,14 @@ type __VLS_PublicProps = {
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {
     formData: () => {};
     formSlots: () => {
-        formItemSlots: never[];
-        dynamicComponentSlots: Map<any, any>;
-        customComponentSlots: Map<any, any>;
+        formItemSlots: Map<any, any>;
+        dynamicCompSlots: Map<any, any>;
     };
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {
     formData: () => {};
     formSlots: () => {
-        formItemSlots: never[];
-        dynamicComponentSlots: Map<any, any>;
-        customComponentSlots: Map<any, any>;
+        formItemSlots: Map<any, any>;
+        dynamicCompSlots: Map<any, any>;
     };
 }>>> & Readonly<{}>, {
     formData: Record<string, any>;

package/dist/FormItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.vue.d.ts","sourceRoot":"","sources":["../src/FormItem.vue"],"names":[],"mappings":"AACA;AAsaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAA6D,MAAM,SAAS,CAAA;AAOlG,UAAU,aAAa;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,IAAI,CAAA;CACb;AAED,UAAU,SAAS;IACjB,aAAa,EAAE,aAAa,EAAE,CAAA;IAC9B,qBAAqB,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;IACnD,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;CACnD;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAQD,KAAK,WAAW,GAAG,KAAK,CAAC;AAmWzB,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CAChB,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;cAhXH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAElB,SAAS;;AAggBvB,wBAUG;AAEH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GAC5C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"FormItem.vue.d.ts","sourceRoot":"","sources":["../src/FormItem.vue"],"names":[],"mappings":"AACA;AAkaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAA6D,MAAM,SAAS,CAAA;AAOlG,UAAU,aAAa;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,IAAI,CAAA;CACb;AAED,UAAU,SAAS;IACjB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;IAC3C,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;CAC/C;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAQD,KAAK,WAAW,GAAG,KAAK,CAAC;AAkWzB,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CAChB,GAAG,WAAW,CAAC;;;;;;;;;;;;;;cA/WH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAElB,SAAS;;AAwfvB,wBAUG;AAEH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GAC5C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/config/comp.d.ts

@@ -1,9 +1,4 @@
 import { FormItem } from '../types';
-/**
- * 需要从 FormItem 中排除的自定义属性键名
- * 这些属性不会传递给 el-form-item 组件
- */
-export declare const FORM_ITEM_EXCLUDED_KEYS: readonly ["compType", "compProps", "vIf", "vShow"];
 /**
  * 拓展的组件映射
  * 导出以便在类型文件中使用 typeof 提取类型
@@ -31,6 +26,7 @@ export declare const COMP_DEFAULT_CONFIG: {
     getDefaults(formItem: FormItem): {
         [x: string]: any;
         options?: any[] | import('../types').OptionsLoader | import('../types').OptionsConfig | undefined;
+        slots?: import('../types').CompSlotsConfig<import('../types').FormItemComp> | undefined;
     };
     /**
      * 判断组件类型

package/dist/config/comp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"comp.d.ts","sourceRoot":"","sources":["../../src/config/comp.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGxC;;;GAGG;AACH,eAAO,MAAM,uBAAuB,oDAAqD,CAAA;AAEzF;;;GAGG;AACH,eAAO,MAAM,eAAe;;CAA6B,CAAA;AA+BzD;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAwD,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AAE1G;;GAEG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;OAEG;0BACmB,QAAQ;;;;IAe9B;;OAEG;sBACe,MAAM;IAoBxB;;OAEG;kCAC2B,QAAQ,QAAQ,MAAM;IAkBpD;;OAEG;6BACsB,QAAQ,QAAQ,MAAM;CAYhD,CAAA"}
+{"version":3,"file":"comp.d.ts","sourceRoot":"","sources":["../../src/config/comp.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGxC;;;GAGG;AACH,eAAO,MAAM,eAAe;;CAA6B,CAAA;AA+BzD;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAwD,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AAE1G;;GAEG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;OAEG;0BACmB,QAAQ;;;;;IAe9B;;OAEG;sBACe,MAAM;IAoBxB;;OAEG;kCAC2B,QAAQ,QAAQ,MAAM;IAkBpD;;OAEG;6BACsB,QAAQ,QAAQ,MAAM;CAYhD,CAAA"}

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

@@ -0,0 +1,6 @@
+/**
+ * 需要从 FormItem 中排除的自定义属性键名
+ * 这些属性不会传递给 el-form-item 组件
+ */
+export declare const FORM_ITEM_EXCLUDED_KEYS: readonly ["compType", "compProps", "slots", "vIf", "vShow"];
+//# sourceMappingURL=form-item.d.ts.map

package/dist/config/form-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-item.d.ts","sourceRoot":"","sources":["../../src/config/form-item.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,6DAA8D,CAAA"}

package/dist/config/index.d.ts

@@ -1,5 +1,6 @@
 export * from './action';
 export * from './comp';
 export * from './form';
+export * from './form-item';
 export * from './scroll';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './Form.vue';
 export { default as WForm } from './Form.vue';
-export type { FormActionConfig, FormItemEventExtendedParams, FormItems } from './types';
+export type { FormActionConfig, FormItemEventExtendedParams, FormItems, FormItemSlotScope } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,OAAO,2CAA2C,CAAA;AAClD,OAAO,gDAAgD,CAAA;AAEvD,OAAO,0CAA0C,CAAA;AACjD,OAAO,0CAA0C,CAAA;AAEjD,OAAO,6CAA6C,CAAA;AAEpD,OAAO,2CAA2C,CAAA;AAKlD,OAAO,4CAA4C,CAAA;AACnD,OAAO,mDAAmD,CAAA;AAC1D,OAAO,gDAAgD,CAAA;AACvD,OAAO,mDAAmD,CAAA;AAC1D,OAAO,8CAA8C,CAAA;AAErD,OAAO,6CAA6C,CAAA;AACpD,OAAO,gDAAgD,CAAA;AACvD,OAAO,+CAA+C,CAAA;AACtD,OAAO,kDAAkD,CAAA;AAEzD,OAAO,kDAAkD,CAAA;AACzD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,kDAAkD,CAAA;AACzD,OAAO,kDAAkD,CAAA;AAEzD,OAAO,qDAAqD,CAAA;AAC5D,OAAO,kDAAkD,CAAA;AACzD,OAAO,6CAA6C,CAAA;AACpD,OAAO,6CAA6C,CAAA;AACpD,OAAO,2CAA2C,CAAA;AAClD,OAAO,mDAAmD,CAAA;AAC1D,OAAO,yDAAyD,CAAA;AAChE,OAAO,+CAA+C,CAAA;AAEtD,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAE7C,YAAY,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,OAAO,2CAA2C,CAAA;AAClD,OAAO,gDAAgD,CAAA;AAEvD,OAAO,0CAA0C,CAAA;AACjD,OAAO,0CAA0C,CAAA;AAEjD,OAAO,6CAA6C,CAAA;AAEpD,OAAO,2CAA2C,CAAA;AAKlD,OAAO,4CAA4C,CAAA;AACnD,OAAO,mDAAmD,CAAA;AAC1D,OAAO,gDAAgD,CAAA;AACvD,OAAO,mDAAmD,CAAA;AAC1D,OAAO,8CAA8C,CAAA;AAErD,OAAO,6CAA6C,CAAA;AACpD,OAAO,gDAAgD,CAAA;AACvD,OAAO,+CAA+C,CAAA;AACtD,OAAO,kDAAkD,CAAA;AAEzD,OAAO,kDAAkD,CAAA;AACzD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,kDAAkD,CAAA;AACzD,OAAO,kDAAkD,CAAA;AAEzD,OAAO,qDAAqD,CAAA;AAC5D,OAAO,kDAAkD,CAAA;AACzD,OAAO,6CAA6C,CAAA;AACpD,OAAO,6CAA6C,CAAA;AACpD,OAAO,2CAA2C,CAAA;AAClD,OAAO,mDAAmD,CAAA;AAC1D,OAAO,yDAAyD,CAAA;AAChE,OAAO,+CAA+C,CAAA;AAEtD,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAE7C,YAAY,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA"}