@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.
- package/README.md +121 -21
- package/dist/FormAction.vue.d.ts +3 -3
- package/dist/FormAction.vue.d.ts.map +1 -1
- package/dist/FormItem.vue.d.ts +7 -24
- package/dist/FormItem.vue.d.ts.map +1 -1
- package/dist/composables/index.d.ts +1 -0
- package/dist/composables/index.d.ts.map +1 -1
- package/dist/composables/useChangeEventState.d.ts +5 -27
- package/dist/composables/useChangeEventState.d.ts.map +1 -1
- package/dist/composables/useClearState.d.ts +17 -0
- package/dist/composables/useClearState.d.ts.map +1 -0
- package/dist/config/action.d.ts +19 -14
- package/dist/config/action.d.ts.map +1 -1
- package/dist/config/comp.d.ts +44 -0
- package/dist/config/comp.d.ts.map +1 -0
- package/dist/config/form-item.d.ts +6 -0
- package/dist/config/form-item.d.ts.map +1 -0
- package/dist/config/form.d.ts +1 -1
- package/dist/config/index.d.ts +2 -1
- package/dist/config/index.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1120 -505
- package/dist/style.css +1 -1
- package/dist/types/action.d.ts +13 -12
- package/dist/types/common.d.ts +5 -4
- package/dist/types/comp.d.ts +93 -0
- package/dist/types/el.d.ts +11 -8
- package/dist/types/form-item.d.ts +36 -92
- package/dist/types/index.d.ts +3 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/layout.d.ts +6 -0
- package/dist/types/options.d.ts +15 -31
- package/dist/types/scope.d.ts +64 -0
- package/dist/utils/action.d.ts +2 -2
- package/dist/utils/action.d.ts.map +1 -1
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/lodash.d.ts +6 -0
- package/dist/utils/lodash.d.ts.map +1 -0
- package/dist/utils/options.d.ts.map +1 -1
- package/dist/utils/value.d.ts +13 -19
- package/dist/utils/value.d.ts.map +1 -1
- package/package.json +5 -3
- package/dist/config/component.d.ts +0 -38
- package/dist/config/component.d.ts.map +0 -1
- package/dist/utils/debounce.d.ts +0 -25
- package/dist/utils/debounce.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -24,13 +24,13 @@ const formItems: FormItems = [
|
|
|
24
24
|
{
|
|
25
25
|
prop: 'username',
|
|
26
26
|
label: '用户名',
|
|
27
|
-
|
|
27
|
+
compType: 'input',
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
prop: 'email',
|
|
31
31
|
label: '邮箱',
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
compType: 'input',
|
|
33
|
+
compProps: {
|
|
34
34
|
type: 'email',
|
|
35
35
|
},
|
|
36
36
|
},
|
|
@@ -77,7 +77,7 @@ import '@iswangh/element-plus-kit-form/style.css'
|
|
|
77
77
|
| --- | --- | --- | --- |
|
|
78
78
|
| model | 表单数据对象 | `Record<string, any>` | `{}` |
|
|
79
79
|
| formItems | 表单项配置数组 | `FormItems` | `[]` |
|
|
80
|
-
|
|
|
80
|
+
| rowProps | 行布局属性(ElRow 属性) | `RowProps` | `{}` |
|
|
81
81
|
| actionConfig | 操作按钮配置 | `ActionConfig` | `{}` |
|
|
82
82
|
|
|
83
83
|
**继承 Element Plus Form 属性**:组件继承所有 `ElForm` 的属性,如 `rules`、`labelPosition`、`size` 等。
|
|
@@ -87,7 +87,7 @@ import '@iswangh/element-plus-kit-form/style.css'
|
|
|
87
87
|
| 事件名 | 说明 | 参数 |
|
|
88
88
|
| --- | --- | --- |
|
|
89
89
|
| validate | 表单项验证事件 | `(prop: FormItemProp, isValid: boolean, message: string)` |
|
|
90
|
-
| change | 表单项值变化事件 | `(extendedParams:
|
|
90
|
+
| change | 表单项值变化事件 | `(extendedParams: FormItemEventExtendedParams, value: any)` |
|
|
91
91
|
| action | 操作按钮点击事件 | `(eventName: string)` |
|
|
92
92
|
| search | 搜索按钮点击事件 | - |
|
|
93
93
|
| reset | 重置按钮点击事件 | - |
|
|
@@ -95,15 +95,54 @@ import '@iswangh/element-plus-kit-form/style.css'
|
|
|
95
95
|
| cancel | 取消按钮点击事件 | - |
|
|
96
96
|
| expand | 展开状态变化事件 | `(value: boolean)` |
|
|
97
97
|
|
|
98
|
+
**可配置化事件**:
|
|
99
|
+
- 除了在 `WForm` 标签上监听事件,还可以在 `formItems` 配置对象的 `compProps` 中定义事件处理器
|
|
100
|
+
- 事件名以 `on` 开头(如 `onBlur`、`onFocus`、`onInput` 等),直接接收原始事件参数(不需要 `extendedParams`)
|
|
101
|
+
- 可配置化事件优先级高于 `WForm` 标签上的事件,如果同时定义了可配置化事件和标签事件,会优先使用可配置化事件
|
|
102
|
+
- 示例:
|
|
103
|
+
```typescript
|
|
104
|
+
{
|
|
105
|
+
prop: 'username',
|
|
106
|
+
compType: 'input',
|
|
107
|
+
compProps: {
|
|
108
|
+
onBlur: (event: FocusEvent) => {
|
|
109
|
+
console.log('onBlur 事件:', event)
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
98
115
|
### Slots
|
|
99
116
|
|
|
100
117
|
| 插槽名 | 说明 | 作用域参数 |
|
|
101
118
|
| --- | --- | --- |
|
|
102
|
-
| `{prop}` | 自定义组件插槽,当 `
|
|
119
|
+
| `{prop}` | 自定义组件插槽,当 `compType` 为 `custom` 时使用 | `FormItemSlotScope` |
|
|
103
120
|
| `form-item-{prop}` | 表单项插槽,用于自定义表单项内容 | `FormItemSlotScope` |
|
|
104
121
|
| `{prop}-{slotName}` | 动态组件插槽,如 `username-prefix`、`email-suffix` | `FormItemSlotScope` |
|
|
105
122
|
| `expand-toggle` | 展开/折叠按钮插槽,用于自定义按钮 | `{ expanded: boolean, toggle: (value?: boolean) => void }` |
|
|
106
123
|
|
|
124
|
+
**可配置化插槽**:
|
|
125
|
+
- 除了使用模板插槽,还可以在 `formItems` 配置对象中直接定义插槽
|
|
126
|
+
- **FormItem 插槽**:在配置对象的 `slots` 字段中定义,用于自定义 `el-form-item` 的插槽(如 `label`、`error` 等)
|
|
127
|
+
- **动态组件插槽**:在 `compProps.slots` 字段中定义,用于自定义动态组件的插槽(如 `prefix`、`suffix` 等)
|
|
128
|
+
- 可配置化插槽优先级高于模板插槽,如果同时定义了可配置化插槽和模板插槽,会优先使用可配置化插槽
|
|
129
|
+
- 插槽函数使用 `h()` 函数创建 VNode,接收 `FormItemSlotScope` 参数
|
|
130
|
+
- 示例:
|
|
131
|
+
```typescript
|
|
132
|
+
{
|
|
133
|
+
prop: 'username',
|
|
134
|
+
compType: 'input',
|
|
135
|
+
slots: {
|
|
136
|
+
label: props => h('span', {}, props.formItem.label),
|
|
137
|
+
},
|
|
138
|
+
compProps: {
|
|
139
|
+
slots: {
|
|
140
|
+
prefix: () => h(User),
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
107
146
|
### FormItem 配置
|
|
108
147
|
|
|
109
148
|
#### 基础配置
|
|
@@ -112,15 +151,15 @@ import '@iswangh/element-plus-kit-form/style.css'
|
|
|
112
151
|
interface FormItem<C extends FormItemComp = FormItemComp> {
|
|
113
152
|
prop: string // 表单字段名(必填)
|
|
114
153
|
label: string // 标签文本
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
// 对于支持 options 的组件(如 select、cascader、radio、checkbox 等),
|
|
154
|
+
compType: FormItemComp // 组件类型(必填)
|
|
155
|
+
compProps?: FormItemCompProps<C> // 组件属性配置
|
|
156
|
+
// 对于支持 options 的组件(如 select、cascader、radio、checkbox 等),compProps.options 支持三种模式:
|
|
118
157
|
// 1. 静态数组:options: [{ label: '选项1', value: '1' }]
|
|
119
158
|
// 2. 函数模式:options: (formData) => [{ label: '选项1', value: '1' }]
|
|
120
159
|
// 3. 对象模式:options: { loader: (formData) => [...], deps: ['field1'], immediate: true }
|
|
121
160
|
vIf?: boolean | ((data?: any) => boolean) // 条件渲染(v-if)
|
|
122
161
|
vShow?: boolean | ((data?: any) => boolean) // 显示/隐藏(v-show)
|
|
123
|
-
|
|
162
|
+
colProps?: ColProps // 列布局属性(ElCol 属性)
|
|
124
163
|
// ... 其他 ElFormItem 属性
|
|
125
164
|
}
|
|
126
165
|
```
|
|
@@ -159,8 +198,8 @@ const formItems: FormItems = [
|
|
|
159
198
|
{
|
|
160
199
|
prop: 'username',
|
|
161
200
|
label: '用户名',
|
|
162
|
-
|
|
163
|
-
|
|
201
|
+
compType: 'input',
|
|
202
|
+
compProps: {
|
|
164
203
|
placeholder: '请输入用户名',
|
|
165
204
|
clearable: true,
|
|
166
205
|
},
|
|
@@ -171,8 +210,8 @@ const formItems: FormItems = [
|
|
|
171
210
|
{
|
|
172
211
|
prop: 'age',
|
|
173
212
|
label: '年龄',
|
|
174
|
-
|
|
175
|
-
|
|
213
|
+
compType: 'input-number',
|
|
214
|
+
compProps: {
|
|
176
215
|
min: 0,
|
|
177
216
|
max: 120,
|
|
178
217
|
step: 1,
|
|
@@ -183,8 +222,8 @@ const formItems: FormItems = [
|
|
|
183
222
|
{
|
|
184
223
|
prop: 'gender',
|
|
185
224
|
label: '性别',
|
|
186
|
-
|
|
187
|
-
|
|
225
|
+
compType: 'select',
|
|
226
|
+
compProps: {
|
|
188
227
|
options: [
|
|
189
228
|
{ label: '男', value: 'male' },
|
|
190
229
|
{ label: '女', value: 'female' },
|
|
@@ -253,12 +292,12 @@ const formItems: FormItems = [
|
|
|
253
292
|
{
|
|
254
293
|
prop: 'username',
|
|
255
294
|
label: '用户名',
|
|
256
|
-
|
|
295
|
+
compType: 'input',
|
|
257
296
|
},
|
|
258
297
|
{
|
|
259
298
|
prop: 'email',
|
|
260
299
|
label: '邮箱',
|
|
261
|
-
|
|
300
|
+
compType: 'input',
|
|
262
301
|
// 只有当用户名存在时才显示邮箱字段
|
|
263
302
|
vIf: (data) => !!data?.username,
|
|
264
303
|
},
|
|
@@ -267,7 +306,7 @@ const formItems: FormItems = [
|
|
|
267
306
|
|
|
268
307
|
### 自定义插槽
|
|
269
308
|
|
|
270
|
-
|
|
309
|
+
使用模板插槽自定义表单项内容:
|
|
271
310
|
|
|
272
311
|
```vue
|
|
273
312
|
<template>
|
|
@@ -279,6 +318,39 @@ const formItems: FormItems = [
|
|
|
279
318
|
</template>
|
|
280
319
|
```
|
|
281
320
|
|
|
321
|
+
### 可配置化插槽
|
|
322
|
+
|
|
323
|
+
除了使用模板插槽,还可以在 `formItems` 配置对象中直接定义插槽:
|
|
324
|
+
|
|
325
|
+
```typescript
|
|
326
|
+
import { h } from 'vue'
|
|
327
|
+
import { User } from '@element-plus/icons-vue'
|
|
328
|
+
|
|
329
|
+
const formItems: FormItems = [
|
|
330
|
+
{
|
|
331
|
+
prop: 'username',
|
|
332
|
+
label: '用户名',
|
|
333
|
+
compType: 'input',
|
|
334
|
+
// FormItem 插槽配置
|
|
335
|
+
slots: {
|
|
336
|
+
label: props => h('span', { class: 'flex items-center gap-1' }, [
|
|
337
|
+
h('span', props.formItem.label),
|
|
338
|
+
h('span', { class: 'text-red-500' }, '*'),
|
|
339
|
+
]),
|
|
340
|
+
},
|
|
341
|
+
// 动态组件插槽配置
|
|
342
|
+
compProps: {
|
|
343
|
+
placeholder: '请输入用户名',
|
|
344
|
+
slots: {
|
|
345
|
+
prefix: () => h(User, { class: 'text-gray-400' }),
|
|
346
|
+
},
|
|
347
|
+
},
|
|
348
|
+
},
|
|
349
|
+
]
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
**优先级**:可配置化插槽优先级高于模板插槽,如果同时定义了可配置化插槽和模板插槽,会优先使用可配置化插槽。
|
|
353
|
+
|
|
282
354
|
### 表单验证
|
|
283
355
|
|
|
284
356
|
```typescript
|
|
@@ -286,7 +358,7 @@ const formItems: FormItems = [
|
|
|
286
358
|
{
|
|
287
359
|
prop: 'email',
|
|
288
360
|
label: '邮箱',
|
|
289
|
-
|
|
361
|
+
compType: 'input',
|
|
290
362
|
rules: [
|
|
291
363
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
|
292
364
|
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
|
|
@@ -297,6 +369,8 @@ const formItems: FormItems = [
|
|
|
297
369
|
|
|
298
370
|
### 监听事件
|
|
299
371
|
|
|
372
|
+
在 `WForm` 标签上监听事件:
|
|
373
|
+
|
|
300
374
|
```vue
|
|
301
375
|
<template>
|
|
302
376
|
<WForm
|
|
@@ -308,7 +382,7 @@ const formItems: FormItems = [
|
|
|
308
382
|
</template>
|
|
309
383
|
|
|
310
384
|
<script setup lang="ts">
|
|
311
|
-
const onChange = (extendedParams:
|
|
385
|
+
const onChange = (extendedParams: FormItemEventExtendedParams, value: any) => {
|
|
312
386
|
console.log('字段变化:', extendedParams.prop, value)
|
|
313
387
|
}
|
|
314
388
|
|
|
@@ -318,6 +392,32 @@ const onSubmit = () => {
|
|
|
318
392
|
</script>
|
|
319
393
|
```
|
|
320
394
|
|
|
395
|
+
### 可配置化事件
|
|
396
|
+
|
|
397
|
+
除了在 `WForm` 标签上监听事件,还可以在 `formItems` 配置对象中直接定义事件处理器:
|
|
398
|
+
|
|
399
|
+
```typescript
|
|
400
|
+
const formItems: FormItems = [
|
|
401
|
+
{
|
|
402
|
+
prop: 'username',
|
|
403
|
+
label: '用户名',
|
|
404
|
+
compType: 'input',
|
|
405
|
+
compProps: {
|
|
406
|
+
placeholder: '请输入用户名',
|
|
407
|
+
// 动态组件的事件在 compProps 中定义
|
|
408
|
+
onBlur: (event: FocusEvent) => {
|
|
409
|
+
console.log('onBlur 事件:', event)
|
|
410
|
+
},
|
|
411
|
+
onFocus: (event: FocusEvent) => {
|
|
412
|
+
console.log('onFocus 事件:', event)
|
|
413
|
+
},
|
|
414
|
+
},
|
|
415
|
+
},
|
|
416
|
+
]
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
**优先级**:可配置化事件优先级高于 `WForm` 标签上的事件,如果同时定义了可配置化事件和标签事件,会优先使用可配置化事件。
|
|
420
|
+
|
|
321
421
|
### 展开/折叠功能
|
|
322
422
|
|
|
323
423
|
表单支持展开/折叠功能,可以控制表单项的显示和隐藏,适用于字段较多的表单场景。
|
package/dist/FormAction.vue.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Slot } from 'vue';
|
|
2
|
-
import {
|
|
2
|
+
import { FormActionConfig } from './types';
|
|
3
3
|
interface Props {
|
|
4
4
|
inline?: boolean;
|
|
5
5
|
actionSlot?: Slot;
|
|
6
|
-
config?:
|
|
6
|
+
config?: FormActionConfig;
|
|
7
7
|
/** 展开/折叠状态(仅在 buttons 包含 'expand' 时有效) */
|
|
8
8
|
expanded?: boolean;
|
|
9
9
|
/** 是否启用鼠标悬停自动展开 */
|
|
@@ -43,7 +43,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
43
43
|
}>, {
|
|
44
44
|
expanded: boolean;
|
|
45
45
|
inline: boolean;
|
|
46
|
-
config:
|
|
46
|
+
config: FormActionConfig;
|
|
47
47
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
48
48
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
49
49
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAction.vue.d.ts","sourceRoot":"","sources":["../src/FormAction.vue"],"names":[],"mappings":"AACA;AAkKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"FormAction.vue.d.ts","sourceRoot":"","sources":["../src/FormAction.vue"],"names":[],"mappings":"AACA;AAkKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,KAAK,EAAwB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAMrE,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mBAAmB;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAwGD,iBAAS,cAAc;WAsHT,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;mBArPiB,MAAM;eAAS,GAAG;;;;;;;;mBAAlB,MAAM;eAAS,GAAG;;;cAV3C,OAAO;YAJT,OAAO;YAEP,gBAAgB;4EAwQzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,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,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
package/dist/FormItem.vue.d.ts
CHANGED
|
@@ -6,8 +6,8 @@ interface ProcessedSlot {
|
|
|
6
6
|
slotFn: Slot;
|
|
7
7
|
}
|
|
8
8
|
interface FormSlots {
|
|
9
|
-
formItemSlots: ProcessedSlot[]
|
|
10
|
-
|
|
9
|
+
formItemSlots: Map<string, ProcessedSlot[]>;
|
|
10
|
+
dynamicCompSlots: Map<string, ProcessedSlot[]>;
|
|
11
11
|
}
|
|
12
12
|
interface Props {
|
|
13
13
|
formItem: FormItem;
|
|
@@ -20,34 +20,22 @@ type __VLS_Props = Props;
|
|
|
20
20
|
type __VLS_PublicProps = {
|
|
21
21
|
modelValue?: any;
|
|
22
22
|
} & __VLS_Props;
|
|
23
|
-
declare
|
|
24
|
-
attrs: Partial<{}>;
|
|
25
|
-
slots: Partial<Record<string, (_: {
|
|
26
|
-
value: unknown;
|
|
27
|
-
form: Record<string, any>;
|
|
28
|
-
formItem: FormItem<import('./types').FormItemComp>;
|
|
29
|
-
}) => any>>;
|
|
30
|
-
refs: {};
|
|
31
|
-
rootEl: any;
|
|
32
|
-
};
|
|
33
|
-
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
34
|
-
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {
|
|
23
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {
|
|
35
24
|
formData: () => {};
|
|
36
25
|
formSlots: () => {
|
|
37
|
-
formItemSlots:
|
|
38
|
-
|
|
26
|
+
formItemSlots: Map<any, any>;
|
|
27
|
+
dynamicCompSlots: Map<any, any>;
|
|
39
28
|
};
|
|
40
29
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_PublicProps>, {
|
|
41
30
|
formData: () => {};
|
|
42
31
|
formSlots: () => {
|
|
43
|
-
formItemSlots:
|
|
44
|
-
|
|
32
|
+
formItemSlots: Map<any, any>;
|
|
33
|
+
dynamicCompSlots: Map<any, any>;
|
|
45
34
|
};
|
|
46
35
|
}>>> & Readonly<{}>, {
|
|
47
36
|
formData: Record<string, any>;
|
|
48
37
|
formSlots: FormSlots;
|
|
49
38
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
50
|
-
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
51
39
|
export default _default;
|
|
52
40
|
type __VLS_WithDefaults<P, D> = {
|
|
53
41
|
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
|
|
@@ -63,11 +51,6 @@ type __VLS_TypePropsToOption<T> = {
|
|
|
63
51
|
required: true;
|
|
64
52
|
};
|
|
65
53
|
};
|
|
66
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
67
|
-
new (): {
|
|
68
|
-
$slots: S;
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
54
|
type __VLS_PrettifyLocal<T> = {
|
|
72
55
|
[K in keyof T]: T[K];
|
|
73
56
|
} & {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormItem.vue.d.ts","sourceRoot":"","sources":["../src/FormItem.vue"],"names":[],"mappings":"AACA;
|
|
1
|
+
{"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA"}
|
|
@@ -3,33 +3,11 @@
|
|
|
3
3
|
* 用于区分不同类型的值变化,防止重复触发 change 事件
|
|
4
4
|
*/
|
|
5
5
|
export declare function useChangeEventState(): {
|
|
6
|
-
/** 是否正在清理 */
|
|
7
|
-
readonly isClearing: boolean;
|
|
8
6
|
/** 是否用户交互 */
|
|
9
|
-
readonly
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
startClearing(value: any): void;
|
|
15
|
-
/**
|
|
16
|
-
* 结束清理操作(在 nextTick 中调用)
|
|
17
|
-
*/
|
|
18
|
-
endClearing(): void;
|
|
19
|
-
/**
|
|
20
|
-
* 开始用户交互
|
|
21
|
-
*/
|
|
22
|
-
startUserInteraction(): void;
|
|
23
|
-
/**
|
|
24
|
-
* 结束用户交互(在 nextTick 中调用)
|
|
25
|
-
*/
|
|
26
|
-
endUserInteraction(): void;
|
|
27
|
-
/**
|
|
28
|
-
* 判断是否是清理操作
|
|
29
|
-
* @param oldValue - 旧值
|
|
30
|
-
* @param newValue - 新值
|
|
31
|
-
* @param isEmpty - 检查值是否为空的函数
|
|
32
|
-
*/
|
|
33
|
-
isClearingOperation(oldValue: any, newValue: any, isEmpty: (val: any) => boolean): boolean;
|
|
7
|
+
readonly isUser: boolean;
|
|
8
|
+
/** 开始用户交互 */
|
|
9
|
+
start(): void;
|
|
10
|
+
/** 结束用户交互(在 nextTick 中调用) */
|
|
11
|
+
end(): void;
|
|
34
12
|
};
|
|
35
13
|
//# sourceMappingURL=useChangeEventState.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChangeEventState.d.ts","sourceRoot":"","sources":["../../src/composables/useChangeEventState.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useChangeEventState.d.ts","sourceRoot":"","sources":["../../src/composables/useChangeEventState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,mBAAmB;IAI/B,aAAa;;IAKb,aAAa;;IAKb,6BAA6B;;EAKhC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 清理状态管理组合式函数
|
|
3
|
+
* 用于管理依赖变更时的清理操作,支持用户在 change 事件中设置默认值
|
|
4
|
+
*/
|
|
5
|
+
export declare function useClearState(): {
|
|
6
|
+
/** 是否正在处理依赖变更 */
|
|
7
|
+
readonly changing: boolean;
|
|
8
|
+
/** 用户是否在 change 事件中设置了值 */
|
|
9
|
+
readonly hasUserValue: boolean;
|
|
10
|
+
/** 开始依赖变更处理 */
|
|
11
|
+
start(): void;
|
|
12
|
+
/** 结束依赖变更处理 */
|
|
13
|
+
end(): void;
|
|
14
|
+
/** 标记用户在 change 事件中设置了值 */
|
|
15
|
+
markValue(): void;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useClearState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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/config/action.d.ts
CHANGED
|
@@ -1,25 +1,30 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FormActionButtonItem, FormActionConfig } from '../types';
|
|
2
2
|
/**
|
|
3
3
|
* 表单动作按钮默认配置
|
|
4
4
|
*/
|
|
5
|
-
export declare const DEFAULT_FORM_ACTION_BUTTONS: Record<string, Partial<Omit<
|
|
6
|
-
/**
|
|
7
|
-
* 展开/收起功能默认滚动选项
|
|
8
|
-
*/
|
|
9
|
-
export declare const DEFAULT_EXPAND_SCROLL_OPTIONS: ScrollIntoViewOptions;
|
|
5
|
+
export declare const DEFAULT_FORM_ACTION_BUTTONS: Record<string, Partial<Omit<FormActionButtonItem, 'eventName'>>>;
|
|
10
6
|
/**
|
|
11
7
|
* 表单动作默认配置
|
|
12
8
|
*/
|
|
13
|
-
export declare const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
export declare const FORM_ACTION_DEFAULT_CONFIG: {
|
|
10
|
+
/**
|
|
11
|
+
* 获取动作默认属性
|
|
12
|
+
*/
|
|
13
|
+
getDefaults(inline?: boolean, actionConfig?: FormActionConfig): {
|
|
14
|
+
vIf: import('../types').Condition;
|
|
15
|
+
vShow: import('../types').Condition;
|
|
16
|
+
buttons: string[] | import('../types').FormActionButtons[];
|
|
17
|
+
expand?: import('../types').FormExpandRule;
|
|
19
18
|
autoExpandOnError: boolean;
|
|
20
19
|
};
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
/**
|
|
21
|
+
* 获取动作按钮列表
|
|
22
|
+
*/
|
|
23
|
+
getActionButtons(inline?: boolean): string[];
|
|
24
|
+
/**
|
|
25
|
+
* 构建动作属性
|
|
26
|
+
*/
|
|
27
|
+
buildActionProps(inline?: boolean): {
|
|
23
28
|
buttons: string[];
|
|
24
29
|
vIf: boolean | undefined;
|
|
25
30
|
autoExpandOnError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/config/action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/config/action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAGtE;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAMxG,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B;IACrC;;OAEG;yBACkB,OAAO,iBAAiB,gBAAgB;;;;;;;IAI7D;;OAEG;8BACuB,OAAO;IAGjC;;OAEG;8BACuB,OAAO;;;;;;CAQlC,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { FormItem } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* 拓展的组件映射
|
|
4
|
+
* 导出以便在类型文件中使用 typeof 提取类型
|
|
5
|
+
*/
|
|
6
|
+
export declare const EXPAND_COMP_MAP: {
|
|
7
|
+
readonly custom: "div";
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* 表单组件类型映射配置
|
|
11
|
+
*
|
|
12
|
+
* 使用显式类型注解避免类型推断超出编译器序列化限制
|
|
13
|
+
* 类型提示通过 keyof 提取键名,不依赖完整的类型定义
|
|
14
|
+
*
|
|
15
|
+
* 注意:虽然这里使用 Record<string, any>,但实际的类型定义
|
|
16
|
+
* 通过类型工具在 comp.d.ts 中从 EL_COMP_MAP 和 EXPAND_COMP_MAP 提取
|
|
17
|
+
*/
|
|
18
|
+
export declare const FORM_ITEM_COMP_MAP: Record<string, any>;
|
|
19
|
+
/**
|
|
20
|
+
* 动态组件默认配置
|
|
21
|
+
*/
|
|
22
|
+
export declare const COMP_DEFAULT_CONFIG: {
|
|
23
|
+
/**
|
|
24
|
+
* 获取组件默认属性
|
|
25
|
+
*/
|
|
26
|
+
getDefaults(formItem: FormItem): {
|
|
27
|
+
[x: string]: any;
|
|
28
|
+
options?: any[] | import('../types').OptionsLoader | import('../types').OptionsConfig | undefined;
|
|
29
|
+
slots?: import('../types').CompSlotsConfig<import('../types').FormItemComp> | undefined;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* 判断组件类型
|
|
33
|
+
*/
|
|
34
|
+
getCompType(comp: string): "input" | "select" | "picker" | "other";
|
|
35
|
+
/**
|
|
36
|
+
* 动态生成 placeholder
|
|
37
|
+
*/
|
|
38
|
+
generatePlaceholder(formItem: FormItem, type: string): string;
|
|
39
|
+
/**
|
|
40
|
+
* 构建组件属性
|
|
41
|
+
*/
|
|
42
|
+
buildCompProps(formItem: FormItem, type: string): Record<string, any>;
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=comp.d.ts.map
|
|
@@ -0,0 +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,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"}
|
|
@@ -0,0 +1 @@
|
|
|
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/form.d.ts
CHANGED
package/dist/config/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,
|
|
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,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default } from './Form.vue';
|
|
2
2
|
export { default as WForm } from './Form.vue';
|
|
3
|
-
export type {
|
|
3
|
+
export type { FormActionConfig, FormItemEventExtendedParams, FormItems, FormItemSlotScope } from './types';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +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,
|
|
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,iBAAiB,EAAE,MAAM,SAAS,CAAA"}
|