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

package/package.json

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

package/src/parsers/div.js

@@ -0,0 +1,60 @@
+export default {
+  name: 'div',
+  mergeProp(ctx) {
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+
+    // 为 div 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // 这样子组件可以直接作为 div 的子元素
+    if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
+      ctx.rule.children.forEach((child) => {
+        if (
+          child &&
+          typeof child === 'object' &&
+          child.type !== 'DragTool' &&
+          child.type !== 'DragBox'
+        ) {
+          // 只有当 col 未设置或为默认值时才设置
+          if (child.col === undefined || child.col === null) {
+            child.col = false
+          } else if (
+            child.col &&
+            typeof child.col === 'object' &&
+            child.col.show !== false
+          ) {
+            child.col.show = false
+          }
+        }
+      })
+    }
+  },
+  render(children, ctx) {
+    // 使用简单的 div 元素作为容器
+    const prop = { ...ctx.prop }
+
+    // 确保 type 是 'div'
+    if (prop.type === 'div') {
+      prop.type = 'div'
+    }
+
+    // children 会通过 form-create 的机制自动渲染
+    const childrenNodes = children || []
+
+    // 直接返回 div，不使用 a-col 或 a-row 包装
+    // 确保样式是自适应（width: 100% 可能会影响布局，所以不设置）
+    if (!prop.props) {
+      prop.props = {}
+    }
+    if (!prop.props.style) {
+      prop.props.style = {}
+    }
+    // 宽高自适应，不设置固定值
+    // 保留用户自定义的样式
+
+    // 直接使用 vNode.make 渲染 div，不包装
+    return ctx.vNode.make('div', prop, childrenNodes)
+  }
+}
+

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/index.js

@@ -16,6 +16,7 @@ import cusUserSelect from './cusUserSelect'
 import flex from './flex'
 import space from './space'
 import spin from './spin'
+import div from './div'
 
 export default [
   checkbox,
@@ -35,5 +36,6 @@ export default [
   cusUserSelect,
   flex,
   space,
-  spin
+  spin,
+  div
 ]

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;
+}