@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.
@@ -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, InjectionPathKey, 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';
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,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"}
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",
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.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
- * a. 通过 PathProvider 提供当前字段路径
18
- * b. 通过 GroupedFieldAttrs 将 field 配置拆分为 gridItemProps / formItemProps / componentProps
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 PathProvider from '../PathProvider/index.vue';
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
- <PathProvider
104
- v-for="({ path: _path, ...field }, index) of validFields"
105
- :key="toPath(toValue((_path ?? index) as any)).join('.') || index"
106
- v-bind="{ path: _path as any }"
107
- >
108
- <template #default="{ path }">
109
- <GroupedFieldAttrs :field="field">
110
- <template
111
- #default="{
112
- gridItemProps,
113
- formItemProps: { container, ...formItemProps },
114
- componentProps,
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
- <ContainerFragment
119
- :component="enableGrid ? ElGridItem : undefined"
120
- v-bind="gridItemProps"
114
+ <template
115
+ v-for="(slot, name) in item.formItemSlots"
116
+ :key="name"
117
+ #[name]="scoped"
121
118
  >
122
- <ContainerFragment :component="container" :path="path">
123
- <FormItem
124
- v-bind="formItemProps"
125
- :ref="el => (formItemRefs[index] = el)"
126
- :prop="toPath(path).join('.')"
127
- :path="path"
128
- @vue:mounted="onFormItemMounted(index, formItemProps)"
129
- >
130
- <template
131
- v-for="(slot, name) in formItemSlots"
132
- :key="name"
133
- #[name]="scoped"
134
- >
135
- <SlotComponent
136
- :path="path"
137
- :component="slot"
138
- v-bind="scoped"
139
- />
140
- </template>
141
- <template v-if="field.fields">
142
- <BaseFormItem
143
- :grid="(field as any).grid ?? grid"
144
- :fields="field.fields"
145
- :disabled="toValue(field.disabled)"
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
+ }
@@ -11,7 +11,6 @@ export {
11
11
  useFormRef,
12
12
  // injection keys
13
13
  InjectionFormKey,
14
- InjectionPathKey,
15
14
  InjectionFormSlotsKey,
16
15
  // utils
17
16
  get,
@@ -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>