@qin-ui/antd-vue-pro 2.3.2 → 2.3.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/antd-vue-pro.css +11 -11
- package/es/components/form/components/BaseFormItem/index.vue.d.ts.map +1 -1
- package/es/components/form/components/ProForm/index.vue.d.ts.map +1 -1
- package/es/components/form/constants/index.d.ts +1 -6
- 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/components/table/components/ColumnControl.vue.d.ts.map +1 -1
- package/es/components/table/components/ProTable.vue.d.ts.map +1 -1
- package/es/components/table/components/SearchForm.vue.d.ts.map +1 -1
- package/es/index.js +162 -148
- 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/BaseField/index.vue +8 -8
- package/src/components/form/components/BaseFormItem/index.vue +50 -66
- package/src/components/form/components/ProForm/index.vue +5 -11
- package/src/components/form/constants/index.ts +1 -7
- package/src/components/form/hooks/useGroupFieldAttrs.ts +120 -0
- package/src/components/table/components/ColumnControl.vue +7 -2
- package/src/components/table/components/ProTable.vue +2 -13
- package/src/components/table/components/SearchForm.vue +81 -15
- package/src/shared/core/index.ts +1 -1
- package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts +0 -29
- 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 -118
- package/src/components/form/components/PathProvider/index.vue +0 -19
|
@@ -1,118 +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、allowClear 等),传递给输入组件
|
|
13
|
-
* 4. **formItemSlots** — FormItem 的具名插槽(label、help、extra 等)
|
|
14
|
-
*
|
|
15
|
-
* 分组依据:
|
|
16
|
-
* - 匹配 antd-vue GridItem 的 props key → gridItemProps
|
|
17
|
-
* - 匹配 antd-vue 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()).concat([
|
|
35
|
-
'formItemContainer',
|
|
36
|
-
]);
|
|
37
|
-
const gridItemPropKeys = Object.keys(gridItemProps());
|
|
38
|
-
|
|
39
|
-
type Props = {
|
|
40
|
-
field: Field;
|
|
41
|
-
};
|
|
42
|
-
const props = defineProps<Props>();
|
|
43
|
-
|
|
44
|
-
const config = INJECT_CONFIG['pro-form-item'];
|
|
45
|
-
const injectFormItemProps = inject(config.injectionKey, config.default);
|
|
46
|
-
|
|
47
|
-
type GroupedFieldAttrs = {
|
|
48
|
-
gridItemProps: GridItemProps;
|
|
49
|
-
formItemProps: FormItemProps & Pick<Base, 'formItemContainer'>;
|
|
50
|
-
formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
|
|
51
|
-
componentProps: Record<string, any>;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// 将 field 配置按 key 分发到三类属性分组中
|
|
55
|
-
const groupedAttributes = computed<GroupedFieldAttrs>(() => {
|
|
56
|
-
let gridItemProps: Record<string, any> = {};
|
|
57
|
-
let formItemProps: Record<string, any> = {};
|
|
58
|
-
const componentProps: Record<string, any> = { slots: {} };
|
|
59
|
-
const formItemSlots: Record<string, any> = {};
|
|
60
|
-
|
|
61
|
-
if (isPlainObject(props.field)) {
|
|
62
|
-
// prettier-ignore
|
|
63
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
64
|
-
const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
|
|
65
|
-
props.field as any;
|
|
66
|
-
const {
|
|
67
|
-
class: injectClassName,
|
|
68
|
-
style: injectStyle,
|
|
69
|
-
span: injectSpan,
|
|
70
|
-
xs,
|
|
71
|
-
sm,
|
|
72
|
-
md,
|
|
73
|
-
lg,
|
|
74
|
-
xl,
|
|
75
|
-
xxl,
|
|
76
|
-
...injectRest
|
|
77
|
-
} = injectFormItemProps;
|
|
78
|
-
|
|
79
|
-
const initGridItemProps =
|
|
80
|
-
span || span === 0
|
|
81
|
-
? { span }
|
|
82
|
-
: { xs, sm, md, lg, xl, xxl, span: injectSpan };
|
|
83
|
-
|
|
84
|
-
gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
|
|
85
|
-
formItemProps = mergeProps(
|
|
86
|
-
injectRest,
|
|
87
|
-
{ class: injectClassName, style: injectStyle },
|
|
88
|
-
{ class: toValue(formItemClass), style: toValue(formItemStyle) },
|
|
89
|
-
formItemDataAttrs
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
Object.keys(rest).forEach(k => {
|
|
93
|
-
if (gridItemPropKeys.includes(k)) {
|
|
94
|
-
gridItemProps[k] = rest[k];
|
|
95
|
-
} else if (formItemPropKeys.includes(k)) {
|
|
96
|
-
formItemProps[k as keyof FormItemProps] = rest[k];
|
|
97
|
-
} else {
|
|
98
|
-
componentProps[k] = rest[k];
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
Object.assign(componentProps, componentDataAttrs);
|
|
103
|
-
Object.keys(slots).forEach(k => {
|
|
104
|
-
if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
|
|
105
|
-
formItemSlots[k] = slots[k];
|
|
106
|
-
} else {
|
|
107
|
-
componentProps['slots'][k] = slots[k];
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return { gridItemProps, formItemProps, componentProps, formItemSlots };
|
|
113
|
-
});
|
|
114
|
-
</script>
|
|
115
|
-
|
|
116
|
-
<template>
|
|
117
|
-
<slot v-bind="groupedAttributes"></slot>
|
|
118
|
-
</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>
|