@longhongguo/form-create-ant-design-vue 3.3.35 → 3.3.36

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.
Files changed (9) hide show
  1. package/dist/form-create.esm.js +2 -2
  2. package/dist/form-create.esm.js.map +1 -1
  3. package/dist/form-create.js +2 -2
  4. package/dist/form-create.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/FcEditorWrapper.vue +1257 -1257
  7. package/src/core/manager.js +674 -674
  8. package/src/parsers/flex.js +255 -264
  9. package/src/parsers/space.js +128 -137
package/src/parsers/space.js CHANGED
@@ -1,137 +1,128 @@
1
- export default {
2
- name: 'space',
3
- mergeProp(ctx) {
4
- // 从 props 中读取 Space 组件配置
5
- const props = ctx.rule.props || {}
6
- const direction = props.direction || ctx.rule.direction || 'horizontal'
7
- const size = props.size || ctx.rule.size || 'small'
8
- const align = props.align || ctx.rule.align
9
- const wrap = props.wrap || ctx.rule.wrap || false
10
-
11
- // 设置到 prop.props，用于传递给 a-space 组件
12
- if (!ctx.prop.props) {
13
- ctx.prop.props = {}
14
- }
15
-
16
- // 映射 Ant Design Vue Space 组件的 props
17
- ctx.prop.props.direction = direction
18
- ctx.prop.props.size = size
19
- if (align !== undefined && align !== null && align !== '') {
20
- ctx.prop.props.align = align
21
- }
22
- ctx.prop.props.wrap = wrap
23
-
24
- // 合并样式，确保 Space 容器占满整行
25
- const existingStyle = ctx.rule.style || {}
26
- const spaceStyles = {
27
- width: '100%',
28
- ...existingStyle
29
- }
30
-
31
- // 同时设置到 ctx.prop.style 和 ctx.prop.props.style
32
- if (!ctx.prop.style) {
33
- ctx.prop.style = {}
34
- }
35
- ctx.prop.style = { ...ctx.prop.style, ...spaceStyles }
36
-
37
- if (!ctx.prop.props.style) {
38
- ctx.prop.props.style = {}
39
- }
40
- ctx.prop.props.style = { ...ctx.prop.props.style, ...spaceStyles }
41
-
42
- // componentStyle 应用到 prop.style（包裹容器），最后合并确保优先级最高
43
- if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
44
- ctx.prop.style = {
45
- ...ctx.prop.style,
46
- ...ctx.rule.componentStyle
47
- }
48
- }
49
-
50
- // 确保 children 存在
51
- if (!ctx.rule.children) {
52
- ctx.rule.children = []
53
- }
54
-
55
- // 为 space 容器的所有子组件设置 col: false，避免被 a-col 包装
56
- // Space 组件会自动处理子项间距，不需要 col 包装
57
- if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
58
- ctx.rule.children.forEach((child) => {
59
- if (
60
- child &&
61
- typeof child === 'object' &&
62
- child.type !== 'DragTool' &&
63
- child.type !== 'DragBox'
64
- ) {
65
- // 只有当 col 未设置或为默认值时才设置
66
- if (child.col === undefined || child.col === null) {
67
- child.col = false
68
- } else if (
69
- child.col &&
70
- typeof child.col === 'object' &&
71
- child.col.show !== false
72
- ) {
73
- child.col.show = false
74
- }
75
- }
76
- })
77
- }
78
-
79
- // 读取 resetMarginBottom 配置，用于重置包裹 space 的 ant-form-item 的 margin-bottom
80
- const resetMarginBottom =
81
- props.resetMarginBottom ?? ctx.rule.resetMarginBottom ?? false
82
- if (resetMarginBottom) {
83
- // 将 class 添加到 wrap 配置中，使其应用到包裹 space 的 ant-form-item 上
84
- if (!ctx.rule.wrap) {
85
- ctx.rule.wrap = {}
86
- }
87
- if (typeof ctx.rule.wrap === 'object' && !ctx.rule.wrap.class) {
88
- ctx.rule.wrap.class = ''
89
- }
90
- const wrapClass = typeof ctx.rule.wrap === 'object'
91
- ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
92
- : []
93
- if (!wrapClass.includes('_fc-reset-margin-bottom')) {
94
- wrapClass.push('_fc-reset-margin-bottom')
95
- if (typeof ctx.rule.wrap === 'object') {
96
- ctx.rule.wrap.class = wrapClass.join(' ')
97
- }
98
- }
99
- }
100
- },
101
- render(children, ctx) {
102
- // 使用 Ant Design Vue 的 Space 组件
103
- const prop = { ...ctx.prop }
104
-
105
- // 读取 compact 配置，决定使用 Space 还是 Space.Compact
106
- const props = ctx.rule.props || {}
107
- const compact = props.compact || ctx.rule.compact || false
108
-
109
- // 根据 compact 属性决定使用哪个组件
110
- if (compact) {
111
- // 使用 Space.Compact 紧凑布局
112
- prop.type = 'a-space-compact'
113
- } else {
114
- // 使用普通 Space 组件
115
- if (prop.type === 'space') {
116
- prop.type = 'a-space'
117
- }
118
- }
119
-
120
- // children 会通过 form-create 的机制自动渲染
121
- const childrenNodes = children || []
122
-
123
- // 将 space 容器包装在 col 中，确保它占满整行（span: 24）
124
- // 这样 space 容器才能有足够的宽度
125
- // 应用 componentStyle 到 col 容器（如果存在）
126
- const componentStyle = ctx.rule.componentStyle || {}
127
- return ctx.vNode.col(
128
- {
129
- props: { span: 24 },
130
- style: componentStyle
131
- },
132
- {
133
- default: () => [ctx.vNode.make(prop.type, prop, childrenNodes)]
134
- }
135
- )
136
- }
137
- }
1
+ export default {
2
+ name: 'space',
3
+ mergeProp(ctx) {
4
+ // 从 props 中读取 Space 组件配置
5
+ const props = ctx.rule.props || {}
6
+ const direction = props.direction || ctx.rule.direction || 'horizontal'
7
+ const size = props.size || ctx.rule.size || 'small'
8
+ const align = props.align || ctx.rule.align
9
+ const wrap = props.wrap || ctx.rule.wrap || false
10
+
11
+ // 设置到 prop.props，用于传递给 a-space 组件
12
+ if (!ctx.prop.props) {
13
+ ctx.prop.props = {}
14
+ }
15
+
16
+ // 映射 Ant Design Vue Space 组件的 props
17
+ ctx.prop.props.direction = direction
18
+ ctx.prop.props.size = size
19
+ if (align !== undefined && align !== null && align !== '') {
20
+ ctx.prop.props.align = align
21
+ }
22
+ ctx.prop.props.wrap = wrap
23
+
24
+ // 合并样式，确保 Space 容器占满整行
25
+ const existingStyle = ctx.rule.style || {}
26
+ const spaceStyles = {
27
+ width: '100%',
28
+ ...existingStyle
29
+ }
30
+
31
+ // 同时设置到 ctx.prop.style 和 ctx.prop.props.style
32
+ // 注意：这里不合并 componentStyle，componentStyle 是独立的，用于顶级容器
33
+ if (!ctx.prop.style) {
34
+ ctx.prop.style = {}
35
+ }
36
+ ctx.prop.style = { ...ctx.prop.style, ...spaceStyles }
37
+
38
+ // componentStyle 独立应用到顶级容器，不在这里合并，在 manager.js 中处理
39
+
40
+ if (!ctx.prop.props.style) {
41
+ ctx.prop.props.style = {}
42
+ }
43
+ ctx.prop.props.style = { ...ctx.prop.props.style, ...spaceStyles }
44
+
45
+ // 确保 children 存在
46
+ if (!ctx.rule.children) {
47
+ ctx.rule.children = []
48
+ }
49
+
50
+ // 为 space 容器的所有子组件设置 col: false，避免被 a-col 包装
51
+ // Space 组件会自动处理子项间距，不需要 col 包装
52
+ if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
53
+ ctx.rule.children.forEach((child) => {
54
+ if (
55
+ child &&
56
+ typeof child === 'object' &&
57
+ child.type !== 'DragTool' &&
58
+ child.type !== 'DragBox'
59
+ ) {
60
+ // 只有当 col 未设置或为默认值时才设置
61
+ if (child.col === undefined || child.col === null) {
62
+ child.col = false
63
+ } else if (
64
+ child.col &&
65
+ typeof child.col === 'object' &&
66
+ child.col.show !== false
67
+ ) {
68
+ child.col.show = false
69
+ }
70
+ }
71
+ })
72
+ }
73
+
74
+ // 读取 resetMarginBottom 配置，用于重置包裹 space 的 ant-form-item 的 margin-bottom
75
+ const resetMarginBottom =
76
+ props.resetMarginBottom ?? ctx.rule.resetMarginBottom ?? false
77
+ if (resetMarginBottom) {
78
+ // 将 class 添加到 wrap 配置中，使其应用到包裹 space 的 ant-form-item 上
79
+ if (!ctx.rule.wrap) {
80
+ ctx.rule.wrap = {}
81
+ }
82
+ if (typeof ctx.rule.wrap === 'object' && !ctx.rule.wrap.class) {
83
+ ctx.rule.wrap.class = ''
84
+ }
85
+ const wrapClass = typeof ctx.rule.wrap === 'object'
86
+ ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
87
+ : []
88
+ if (!wrapClass.includes('_fc-reset-margin-bottom')) {
89
+ wrapClass.push('_fc-reset-margin-bottom')
90
+ if (typeof ctx.rule.wrap === 'object') {
91
+ ctx.rule.wrap.class = wrapClass.join(' ')
92
+ }
93
+ }
94
+ }
95
+ },
96
+ render(children, ctx) {
97
+ // 使用 Ant Design Vue 的 Space 组件
98
+ const prop = { ...ctx.prop }
99
+
100
+ // 读取 compact 配置，决定使用 Space 还是 Space.Compact
101
+ const props = ctx.rule.props || {}
102
+ const compact = props.compact || ctx.rule.compact || false
103
+
104
+ // 根据 compact 属性决定使用哪个组件
105
+ if (compact) {
106
+ // 使用 Space.Compact 紧凑布局
107
+ prop.type = 'a-space-compact'
108
+ } else {
109
+ // 使用普通 Space 组件
110
+ if (prop.type === 'space') {
111
+ prop.type = 'a-space'
112
+ }
113
+ }
114
+
115
+ // children 会通过 form-create 的机制自动渲染
116
+ const childrenNodes = children || []
117
+
118
+ // 将 space 容器包装在 col 中，确保它占满整行（span: 24）
119
+ // 这样 space 容器才能有足够的宽度
120
+ // componentStyle 会在 manager.js 中应用到 col 容器
121
+ return ctx.vNode.col(
122
+ { props: { span: 24 } },
123
+ {
124
+ default: () => [ctx.vNode.make(prop.type, prop, childrenNodes)]
125
+ }
126
+ )
127
+ }
128
+ }