@longhongguo/form-create-ant-design-vue 3.2.76 → 3.2.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.76",
+  "version": "3.2.77",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/parsers/flex.js

@@ -133,6 +133,28 @@ export default {
         }
       })
     }
+
+    // 读取 resetMarginBottom 配置，用于重置包裹 flex 的 ant-form-item 的 margin-bottom
+    const resetMarginBottom =
+      props.resetMarginBottom ?? ctx.rule.resetMarginBottom ?? false
+    if (resetMarginBottom) {
+      // 将 class 添加到 wrap 配置中，使其应用到包裹 flex 的 ant-form-item 上
+      if (!ctx.rule.wrap) {
+        ctx.rule.wrap = {}
+      }
+      if (typeof ctx.rule.wrap === 'object' && !ctx.rule.wrap.class) {
+        ctx.rule.wrap.class = ''
+      }
+      const wrapClass = typeof ctx.rule.wrap === 'object' 
+        ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
+        : []
+      if (!wrapClass.includes('_fc-reset-margin-bottom')) {
+        wrapClass.push('_fc-reset-margin-bottom')
+        if (typeof ctx.rule.wrap === 'object') {
+          ctx.rule.wrap.class = wrapClass.join(' ')
+        }
+      }
+    }
   },
   render(children, ctx) {
     // 使用 Ant Design Vue 的 Flex 组件

package/src/parsers/space.js

@@ -67,6 +67,28 @@ export default {
         }
       })
     }
+
+    // 读取 resetMarginBottom 配置，用于重置包裹 space 的 ant-form-item 的 margin-bottom
+    const resetMarginBottom =
+      props.resetMarginBottom ?? ctx.rule.resetMarginBottom ?? false
+    if (resetMarginBottom) {
+      // 将 class 添加到 wrap 配置中，使其应用到包裹 space 的 ant-form-item 上
+      if (!ctx.rule.wrap) {
+        ctx.rule.wrap = {}
+      }
+      if (typeof ctx.rule.wrap === 'object' && !ctx.rule.wrap.class) {
+        ctx.rule.wrap.class = ''
+      }
+      const wrapClass = typeof ctx.rule.wrap === 'object' 
+        ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
+        : []
+      if (!wrapClass.includes('_fc-reset-margin-bottom')) {
+        wrapClass.push('_fc-reset-margin-bottom')
+        if (typeof ctx.rule.wrap === 'object') {
+          ctx.rule.wrap.class = wrapClass.join(' ')
+        }
+      }
+    }
   },
   render(children, ctx) {
     // 使用 Ant Design Vue 的 Space 组件

package/src/style/index.css

@@ -533,3 +533,8 @@
 .ant-flex._fc-flex-vertical > .ant-form-item {
   width: var(--fc-child-width, 100%) !important;
 }
+
+/* Flex 和 Space 组件重置包裹它们的 ant-form-item 的 margin-bottom 的样式 */
+.ant-form-item._fc-reset-margin-bottom {
+  margin-bottom: 0 !important;
+}