@qin-ui/element-plus-pro 1.2.3 → 1.2.4
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/api.json +1 -1
- package/es/components/form/components/BaseFormItem/index.vue.d.ts.map +1 -1
- package/es/components/form/constants/index.d.ts +1 -1
- package/es/components/form/constants/index.d.ts.map +1 -1
- package/es/components/form/hooks/useGroupFieldAttrs.d.ts +18 -0
- package/es/components/form/hooks/useGroupFieldAttrs.d.ts.map +1 -0
- package/es/element-plus-pro.css +1 -1
- package/es/index.js +83 -104
- package/es/index.js.map +1 -1
- package/es/shared/core/index.d.ts +1 -1
- package/es/shared/core/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/form/components/BaseFormItem/index.vue +47 -66
- package/src/components/form/constants/index.ts +1 -5
- package/src/components/form/hooks/useGroupFieldAttrs.ts +119 -0
- package/src/shared/core/index.ts +0 -1
- package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts +0 -31
- package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts.map +0 -1
- package/es/components/form/components/PathProvider/index.vue.d.ts +0 -24
- package/es/components/form/components/PathProvider/index.vue.d.ts.map +0 -1
- package/src/components/form/components/GroupedFieldAttrs/index.vue +0 -115
- package/src/components/form/components/PathProvider/index.vue +0 -19
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* 统一 re-export @qin-ui/pro-components-core,包内所有文件通过此文件引入 core 内容,
|
|
3
3
|
* 避免直接散列依赖 @qin-ui/pro-components-core,便于将来统一维护。
|
|
4
4
|
*/
|
|
5
|
-
export { useForm, useTable, useFields, useFormData, useFormRef, InjectionFormKey,
|
|
5
|
+
export { useForm, useTable, useFields, useFormData, useFormRef, InjectionFormKey, InjectionFormSlotsKey, get, getObject, toPath, camelizeProperties, cloneDeep, omit, pick, isPlainObject, type Data, type Path, type Paths, type KeyExpandString, type ExtendWithAny, type DeepPartial, type PageParam, type Fields, type Form, type Table, type UseFieldsReturn, type UseFormDataReturn, type UseFormRefReturn, } from '@qin-ui/pro-components-core';
|
|
6
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EAEV,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EAEV,gBAAgB,EAChB,qBAAqB,EAErB,GAAG,EACH,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,aAAa,EAEb,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,6BAA6B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qin-ui/element-plus-pro",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4",
|
|
4
4
|
"description": "基于 element-plus 的二次封装组件",
|
|
5
5
|
"bin": {
|
|
6
6
|
"element-plus-pro": "./bin/init-ai.mjs"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"vue-component-type-helpers": "^3.2.5",
|
|
42
|
-
"@qin-ui/pro-components-core": "^1.1.
|
|
42
|
+
"@qin-ui/pro-components-core": "^1.1.3"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"element-plus": "^2.13.6"
|
|
@@ -13,12 +13,9 @@
|
|
|
13
13
|
* ## 渲染流程
|
|
14
14
|
*
|
|
15
15
|
* 1. 遍历 fields 数组,过滤 hidden 字段
|
|
16
|
-
* 2.
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* c. 如果字段有 `fields` 子字段 → 递归渲染 BaseFormItem(嵌套表单)
|
|
20
|
-
* d. 否则 → 渲染 BaseField(输入组件)
|
|
21
|
-
* 3. 通过 ref 回调收集 FormItem 和 Component 实例,注入到 field 对象上
|
|
16
|
+
* 2. 通过 useGroupFieldAttrs Hook 纯计算将 field 配置拆分为 gridItemProps / formItemProps / componentProps / slots
|
|
17
|
+
* 3. 递归渲染 BaseFormItem(嵌套表单)或 BaseField(输入组件)
|
|
18
|
+
* 4. 通过 ref 回调收集 FormItem 和 Component 实例,注入到 field 对象上
|
|
22
19
|
*
|
|
23
20
|
* @param {Fields<D>} [fields] - 字段配置数组
|
|
24
21
|
* @param {boolean | GridProps} [grid] - 是否启用网格布局
|
|
@@ -37,8 +34,7 @@ import {
|
|
|
37
34
|
import { computed, inject, toValue } from 'vue';
|
|
38
35
|
import type { Fields, Grid } from '../../types';
|
|
39
36
|
import { BaseField, SlotComponent, ContainerFragment } from '..';
|
|
40
|
-
import
|
|
41
|
-
import GroupedFieldAttrs from '../GroupedFieldAttrs/index.vue';
|
|
37
|
+
import { useGroupFieldAttrs } from '../../hooks/useGroupFieldAttrs';
|
|
42
38
|
import { INJECT_CONFIG } from '../../../component-provider/constants';
|
|
43
39
|
|
|
44
40
|
defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
|
|
@@ -92,6 +88,8 @@ const onComponentMounted = (index: number) => {
|
|
|
92
88
|
componentRefs[index]?.getComponentComputedProps(),
|
|
93
89
|
});
|
|
94
90
|
};
|
|
91
|
+
|
|
92
|
+
const groupedFields = useGroupFieldAttrs(validFields);
|
|
95
93
|
</script>
|
|
96
94
|
|
|
97
95
|
<template>
|
|
@@ -100,66 +98,49 @@ const onComponentMounted = (index: number) => {
|
|
|
100
98
|
v-bind="computedGridProps"
|
|
101
99
|
style="width: 100%"
|
|
102
100
|
>
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
formItemSlots,
|
|
116
|
-
}"
|
|
101
|
+
<template v-for="(item, index) of groupedFields" :key="item.path || index">
|
|
102
|
+
<ContainerFragment
|
|
103
|
+
:component="enableGrid ? ElGridItem : undefined"
|
|
104
|
+
v-bind="item.gridItemProps"
|
|
105
|
+
>
|
|
106
|
+
<ContainerFragment :component="item.container" :path="item.path">
|
|
107
|
+
<FormItem
|
|
108
|
+
v-bind="item.formItemProps"
|
|
109
|
+
:ref="el => (formItemRefs[index] = el)"
|
|
110
|
+
:prop="toPath(item.path).join('.')"
|
|
111
|
+
:path="item.path"
|
|
112
|
+
@vue:mounted="onFormItemMounted(index, item.formItemProps)"
|
|
117
113
|
>
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
114
|
+
<template
|
|
115
|
+
v-for="(slot, name) in item.formItemSlots"
|
|
116
|
+
:key="name"
|
|
117
|
+
#[name]="scoped"
|
|
121
118
|
>
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
</template>
|
|
148
|
-
<template v-else>
|
|
149
|
-
<BaseField
|
|
150
|
-
:ref="el => (componentRefs[index] = el)"
|
|
151
|
-
v-bind="componentProps"
|
|
152
|
-
:path="path"
|
|
153
|
-
@vue:mounted="onComponentMounted(index)"
|
|
154
|
-
/>
|
|
155
|
-
</template>
|
|
156
|
-
</FormItem>
|
|
157
|
-
</ContainerFragment>
|
|
158
|
-
</ContainerFragment>
|
|
159
|
-
</template>
|
|
160
|
-
</GroupedFieldAttrs>
|
|
161
|
-
</template>
|
|
162
|
-
</PathProvider>
|
|
119
|
+
<SlotComponent
|
|
120
|
+
:path="item.path"
|
|
121
|
+
:component="slot"
|
|
122
|
+
v-bind="scoped"
|
|
123
|
+
/>
|
|
124
|
+
</template>
|
|
125
|
+
<template v-if="item.rawField.fields">
|
|
126
|
+
<BaseFormItem
|
|
127
|
+
:grid="(item.rawField as any).grid ?? grid"
|
|
128
|
+
:fields="item.rawField.fields"
|
|
129
|
+
:disabled="toValue(item.rawField.disabled)"
|
|
130
|
+
/>
|
|
131
|
+
</template>
|
|
132
|
+
<template v-else>
|
|
133
|
+
<BaseField
|
|
134
|
+
:ref="el => (componentRefs[index] = el)"
|
|
135
|
+
v-bind="item.componentProps"
|
|
136
|
+
:path="item.path"
|
|
137
|
+
@vue:mounted="onComponentMounted(index)"
|
|
138
|
+
/>
|
|
139
|
+
</template>
|
|
140
|
+
</FormItem>
|
|
141
|
+
</ContainerFragment>
|
|
142
|
+
</ContainerFragment>
|
|
143
|
+
</template>
|
|
163
144
|
</ContainerFragment>
|
|
164
145
|
</template>
|
|
165
146
|
|
|
@@ -107,8 +107,4 @@ export const componentMap: BaseComponentMap = {
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
// inject keys
|
|
110
|
-
export {
|
|
111
|
-
InjectionFormKey,
|
|
112
|
-
InjectionPathKey,
|
|
113
|
-
InjectionFormSlotsKey,
|
|
114
|
-
} from '../../../shared/core';
|
|
110
|
+
export { InjectionFormKey, InjectionFormSlotsKey } from '../../../shared/core';
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { computed, inject, mergeProps, toValue, type ComputedRef } from 'vue';
|
|
2
|
+
import {
|
|
3
|
+
formItemProps,
|
|
4
|
+
gridItemProps,
|
|
5
|
+
type FormItemProps,
|
|
6
|
+
type GridItemProps,
|
|
7
|
+
} from '../../../shared/ui';
|
|
8
|
+
import { isPlainObject } from '../../../shared/core';
|
|
9
|
+
import { INJECT_CONFIG } from '../../component-provider/constants';
|
|
10
|
+
import { FORM_ITEM_SLOT_KEYS } from '../constants';
|
|
11
|
+
import type { Base, Field } from '../types';
|
|
12
|
+
|
|
13
|
+
const formItemPropKeys = Object.keys(formItemProps());
|
|
14
|
+
const gridItemPropKeys = Object.keys(gridItemProps());
|
|
15
|
+
|
|
16
|
+
export interface GroupedField {
|
|
17
|
+
path: string;
|
|
18
|
+
gridItemProps: GridItemProps;
|
|
19
|
+
formItemProps: FormItemProps;
|
|
20
|
+
formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
|
|
21
|
+
componentProps: Record<string, any>;
|
|
22
|
+
container?: Base['formItemContainer'];
|
|
23
|
+
rawField: Field;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* 将 fields 配置数组逐个拆分为 grid / formItem / component / slots 分组。
|
|
28
|
+
*/
|
|
29
|
+
export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
|
|
30
|
+
const config = INJECT_CONFIG['pro-form-item'];
|
|
31
|
+
const injectFormItemProps = inject(config.injectionKey, config.default);
|
|
32
|
+
|
|
33
|
+
return computed<GroupedField[]>(() => {
|
|
34
|
+
return validFields.value.map(field => {
|
|
35
|
+
let gridItemProps: Record<string, any> = {};
|
|
36
|
+
let formItemProps: Record<string, any> = {};
|
|
37
|
+
const componentProps: Record<string, any> = { slots: {} };
|
|
38
|
+
const formItemSlots: Record<string, any> = {};
|
|
39
|
+
|
|
40
|
+
if (isPlainObject(field)) {
|
|
41
|
+
// prettier-ignore
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
43
|
+
const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
|
|
44
|
+
field as any;
|
|
45
|
+
|
|
46
|
+
const {
|
|
47
|
+
class: injectClassName,
|
|
48
|
+
style: injectStyle,
|
|
49
|
+
span: injectSpan,
|
|
50
|
+
formItemContainer: injectFormItemContainer,
|
|
51
|
+
xs,
|
|
52
|
+
sm,
|
|
53
|
+
md,
|
|
54
|
+
lg,
|
|
55
|
+
xl,
|
|
56
|
+
...injectRest
|
|
57
|
+
} = injectFormItemProps;
|
|
58
|
+
|
|
59
|
+
const initGridItemProps =
|
|
60
|
+
span || span === 0
|
|
61
|
+
? { span }
|
|
62
|
+
: { xs, sm, md, lg, xl, span: injectSpan };
|
|
63
|
+
|
|
64
|
+
gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
|
|
65
|
+
formItemProps = mergeProps(
|
|
66
|
+
injectRest as any,
|
|
67
|
+
{ class: injectClassName, style: injectStyle },
|
|
68
|
+
{ class: toValue(formItemClass), style: toValue(formItemStyle) },
|
|
69
|
+
formItemDataAttrs
|
|
70
|
+
);
|
|
71
|
+
const container = formItemContainer ?? injectFormItemContainer;
|
|
72
|
+
|
|
73
|
+
Object.keys(rest).forEach(k => {
|
|
74
|
+
if (gridItemPropKeys.includes(k)) {
|
|
75
|
+
gridItemProps[k] = rest[k];
|
|
76
|
+
} else if (formItemPropKeys.includes(k)) {
|
|
77
|
+
(formItemProps as any)[k] = rest[k];
|
|
78
|
+
} else {
|
|
79
|
+
componentProps[k] = rest[k];
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
Object.assign(componentProps, componentDataAttrs);
|
|
84
|
+
Object.keys(slots).forEach(k => {
|
|
85
|
+
if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
|
|
86
|
+
formItemSlots[k] = slots[k];
|
|
87
|
+
} else {
|
|
88
|
+
componentProps.slots[k] = slots[k];
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const raw = (toValue(path) ?? toValue(name)) as
|
|
93
|
+
| string
|
|
94
|
+
| number[]
|
|
95
|
+
| undefined;
|
|
96
|
+
return {
|
|
97
|
+
path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
|
|
98
|
+
gridItemProps: gridItemProps as GridItemProps,
|
|
99
|
+
formItemProps: formItemProps as any,
|
|
100
|
+
formItemSlots,
|
|
101
|
+
componentProps,
|
|
102
|
+
container,
|
|
103
|
+
rawField: field,
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
const raw =
|
|
108
|
+
toValue((field as any)?.path) ?? toValue((field as any)?.name);
|
|
109
|
+
return {
|
|
110
|
+
path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
|
|
111
|
+
gridItemProps: gridItemProps as GridItemProps,
|
|
112
|
+
formItemProps: formItemProps as any,
|
|
113
|
+
formItemSlots,
|
|
114
|
+
componentProps,
|
|
115
|
+
rawField: field,
|
|
116
|
+
};
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
}
|
package/src/shared/core/index.ts
CHANGED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { GridItemProps, FormItemProps } from '../../../../shared/ui';
|
|
2
|
-
import { Base, Field } from '../../types';
|
|
3
|
-
import { FORM_ITEM_SLOT_KEYS } from '../../constants';
|
|
4
|
-
type Props = {
|
|
5
|
-
field: Field;
|
|
6
|
-
};
|
|
7
|
-
declare function __VLS_template(): {
|
|
8
|
-
attrs: Partial<{}>;
|
|
9
|
-
slots: {
|
|
10
|
-
default?(_: {
|
|
11
|
-
gridItemProps: GridItemProps;
|
|
12
|
-
formItemProps: FormItemProps & {
|
|
13
|
-
container?: Base["formItemContainer"];
|
|
14
|
-
};
|
|
15
|
-
formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
|
|
16
|
-
componentProps: Record<string, any>;
|
|
17
|
-
}): any;
|
|
18
|
-
};
|
|
19
|
-
refs: {};
|
|
20
|
-
rootEl: any;
|
|
21
|
-
};
|
|
22
|
-
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
23
|
-
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
24
|
-
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
25
|
-
export default _default;
|
|
26
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
27
|
-
new (): {
|
|
28
|
-
$slots: S;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
//# sourceMappingURL=index.vue.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/GroupedFieldAttrs/index.vue"],"names":[],"mappings":"AA0IA,OAAO,EACL,aAAa,EACb,aAAa,EAGd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAMtD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AA4EF,iBAAS,cAAc;WAqBT,OAAO,IAA6B;;;2BAzFjC,aAAa;2BACb,aAAa,GAAG;gBAAE,SAAS,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;aAAE;2BACzD,MAAM,CAAC,CAAC,OAAO,mBAAmB,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC;4BAChD,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;YA4ER,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,sRAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { NamePath } from '../../../../shared/ui';
|
|
2
|
-
type __VLS_Props = {
|
|
3
|
-
path?: NamePath;
|
|
4
|
-
};
|
|
5
|
-
declare function __VLS_template(): {
|
|
6
|
-
attrs: Partial<{}>;
|
|
7
|
-
slots: {
|
|
8
|
-
default?(_: {
|
|
9
|
-
path: string | undefined;
|
|
10
|
-
}): any;
|
|
11
|
-
};
|
|
12
|
-
refs: {};
|
|
13
|
-
rootEl: any;
|
|
14
|
-
};
|
|
15
|
-
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
16
|
-
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
17
|
-
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
18
|
-
export default _default;
|
|
19
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
20
|
-
new (): {
|
|
21
|
-
$slots: S;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=index.vue.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/PathProvider/index.vue"],"names":[],"mappings":"AAuBA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,KAAK,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAavC,iBAAS,cAAc;WAqBT,OAAO,IAA6B;;;;YAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
/**
|
|
3
|
-
* @component GroupedFieldAttrs
|
|
4
|
-
* @description 字段属性分组器,将 field 配置对象拆分为三类属性
|
|
5
|
-
*
|
|
6
|
-
* ## 属性分发逻辑
|
|
7
|
-
*
|
|
8
|
-
* 单个 field 对象包含多种属性,需要分发到不同的渲染目标:
|
|
9
|
-
*
|
|
10
|
-
* 1. **gridItemProps** — 网格布局属性(span、xs、sm、md、lg、xl、xxl 等),传递给 GridItem
|
|
11
|
-
* 2. **formItemProps** — 表单项属性(label、rules、required 等),传递给 FormItem
|
|
12
|
-
* 3. **componentProps** — 组件属性(placeholder、clearable 等),传递给输入组件
|
|
13
|
-
* 4. **formItemSlots** — FormItem 的具名插槽(label、error 等)
|
|
14
|
-
*
|
|
15
|
-
* 分组依据:
|
|
16
|
-
* - 匹配 element-plus GridItem 的 props key → gridItemProps
|
|
17
|
-
* - 匹配 element-plus FormItem 的 props key → formItemProps
|
|
18
|
-
* - 其余所有属性 → componentProps
|
|
19
|
-
* - 属于 FORM_ITEM_SLOT_KEYS 的插槽 → formItemSlots
|
|
20
|
-
* - 其余插槽 → componentProps.slots
|
|
21
|
-
*/
|
|
22
|
-
import { computed, inject, mergeProps, toValue } from 'vue';
|
|
23
|
-
import {
|
|
24
|
-
GridItemProps,
|
|
25
|
-
FormItemProps,
|
|
26
|
-
gridItemProps,
|
|
27
|
-
formItemProps,
|
|
28
|
-
} from '../../../../shared/ui';
|
|
29
|
-
import { INJECT_CONFIG } from '../../../component-provider/constants';
|
|
30
|
-
import type { Base, Field } from '../../types';
|
|
31
|
-
import { FORM_ITEM_SLOT_KEYS } from '../../constants';
|
|
32
|
-
import { isPlainObject } from '../../../../shared/core';
|
|
33
|
-
|
|
34
|
-
const formItemPropKeys = Object.keys(formItemProps());
|
|
35
|
-
const gridItemPropKeys = Object.keys(gridItemProps());
|
|
36
|
-
|
|
37
|
-
type Props = {
|
|
38
|
-
field: Field;
|
|
39
|
-
};
|
|
40
|
-
const props = defineProps<Props>();
|
|
41
|
-
|
|
42
|
-
const config = INJECT_CONFIG['pro-form-item'];
|
|
43
|
-
const injectFormItemProps = inject(config.injectionKey, config.default);
|
|
44
|
-
|
|
45
|
-
type GroupedFieldAttrs = {
|
|
46
|
-
gridItemProps: GridItemProps;
|
|
47
|
-
formItemProps: FormItemProps & { container?: Base['formItemContainer'] };
|
|
48
|
-
formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
|
|
49
|
-
componentProps: Record<string, any>;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
// 将 field 配置按 key 分发到三类属性分组中
|
|
53
|
-
const groupedAttributes = computed<GroupedFieldAttrs>(() => {
|
|
54
|
-
let gridItemProps: Record<string, any> = {};
|
|
55
|
-
let formItemProps: Record<string, any> = {};
|
|
56
|
-
const componentProps: Record<string, any> = { slots: {} };
|
|
57
|
-
const formItemSlots: Record<string, any> = {};
|
|
58
|
-
|
|
59
|
-
if (isPlainObject(props.field)) {
|
|
60
|
-
// prettier-ignore
|
|
61
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
62
|
-
const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
|
|
63
|
-
props.field as any;
|
|
64
|
-
const {
|
|
65
|
-
class: injectClassName,
|
|
66
|
-
style: injectStyle,
|
|
67
|
-
span: injectSpan,
|
|
68
|
-
formItemContainer: injectFormItemContainer,
|
|
69
|
-
xs,
|
|
70
|
-
sm,
|
|
71
|
-
md,
|
|
72
|
-
lg,
|
|
73
|
-
xl,
|
|
74
|
-
...injectRest
|
|
75
|
-
} = injectFormItemProps;
|
|
76
|
-
|
|
77
|
-
const initGridItemProps =
|
|
78
|
-
span || span === 0 ? { span } : { xs, sm, md, lg, xl, span: injectSpan };
|
|
79
|
-
|
|
80
|
-
gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
|
|
81
|
-
formItemProps = mergeProps(
|
|
82
|
-
injectRest as any,
|
|
83
|
-
{ class: injectClassName, style: injectStyle },
|
|
84
|
-
{ class: toValue(formItemClass), style: toValue(formItemStyle) },
|
|
85
|
-
formItemDataAttrs
|
|
86
|
-
);
|
|
87
|
-
formItemProps.container = formItemContainer ?? injectFormItemContainer;
|
|
88
|
-
|
|
89
|
-
Object.keys(rest).forEach(k => {
|
|
90
|
-
if (gridItemPropKeys.includes(k)) {
|
|
91
|
-
gridItemProps[k] = rest[k];
|
|
92
|
-
} else if (formItemPropKeys.includes(k)) {
|
|
93
|
-
(formItemProps as any)[k] = rest[k];
|
|
94
|
-
} else {
|
|
95
|
-
componentProps[k] = rest[k];
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
// 将 componentDataAttrs 展开到组件 props 中
|
|
99
|
-
Object.assign(componentProps, componentDataAttrs);
|
|
100
|
-
Object.keys(slots).forEach(k => {
|
|
101
|
-
if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
|
|
102
|
-
formItemSlots[k] = slots[k];
|
|
103
|
-
} else {
|
|
104
|
-
componentProps['slots'][k] = slots[k];
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
return { gridItemProps, formItemProps, componentProps, formItemSlots };
|
|
110
|
-
});
|
|
111
|
-
</script>
|
|
112
|
-
|
|
113
|
-
<template>
|
|
114
|
-
<slot v-bind="groupedAttributes"></slot>
|
|
115
|
-
</template>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import { computed, provide } from 'vue';
|
|
3
|
-
import { InjectionPathKey } from '../../constants';
|
|
4
|
-
import { NamePath } from '../../../../shared/ui';
|
|
5
|
-
|
|
6
|
-
const props = defineProps<{ path?: NamePath }>();
|
|
7
|
-
|
|
8
|
-
const namePath = computed(() => {
|
|
9
|
-
return Array.isArray(props.path)
|
|
10
|
-
? props.path.join('.')
|
|
11
|
-
: (props.path as string | undefined);
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
provide(InjectionPathKey, namePath);
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<template>
|
|
18
|
-
<slot :path="namePath" />
|
|
19
|
-
</template>
|