@longhongguo/form-create-ant-design-vue 3.2.53 → 3.2.54

package/package.json

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

package/src/core/maker.js

@@ -98,6 +98,10 @@ function useText(maker) {
   maker.text = creatorFactory('text')
 }
 
+function useFlex(maker) {
+  maker.flex = creatorFactory('flex')
+}
+
 useAlias(maker)
 useSlider(maker)
 useFrame(maker)
@@ -106,5 +110,6 @@ useSelect(maker)
 useCusStoreSelect(maker)
 useCusUserSelect(maker)
 useText(maker)
+useFlex(maker)
 
 export default maker

package/src/parsers/flex.js

@@ -0,0 +1,59 @@
+export default {
+  name: 'flex',
+  mergeProp(ctx) {
+    // 从 props 中读取 flex 布局配置
+    const props = ctx.rule.props || {}
+
+    // 获取 flex 布局相关配置
+    const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
+    const flexWrap = props.flexWrap || ctx.rule.flexWrap || 'nowrap'
+    const justifyContent =
+      props.justifyContent || ctx.rule.justifyContent || 'flex-start'
+    const alignItems = props.alignItems || ctx.rule.alignItems || 'flex-start'
+    const alignContent =
+      props.alignContent || ctx.rule.alignContent || 'flex-start'
+
+    // 将 flex 样式设置到 ctx.prop.props.style，而不是直接修改 ctx.rule.style
+    // 这样可以避免触发递归更新
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
+    }
+
+    // 获取现有的 style（来自 rule.style 或 prop.props.style）
+    const existingStyle = ctx.rule.style || ctx.prop.props.style || {}
+
+    // 合并 flex 样式和现有样式
+    const flexStyle = {
+      display: 'flex',
+      flexDirection,
+      flexWrap,
+      justifyContent,
+      alignItems,
+      alignContent,
+      ...existingStyle
+    }
+
+    // 设置到 prop.props.style，这样不会触发 rule 的响应式更新
+    ctx.prop.props.style = flexStyle
+
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+  },
+  render(children, ctx) {
+    // 复制 prop，避免修改原始对象
+    const prop = { ...ctx.prop }
+
+    // 确保 type 是 'div'
+    if (prop.type === 'flex') {
+      prop.type = 'div'
+    }
+
+    // style 已经在 mergeProp 中设置到 prop.props.style 了，直接使用
+    // children 会通过 form-create 的机制自动渲染
+    const childrenNodes = children || []
+
+    return ctx.vNode.make('div', prop, childrenNodes)
+  }
+}

package/src/parsers/index.js

@@ -13,6 +13,7 @@ import rangePicker from './rangePicker'
 import timeRangePicker from './timeRangePicker'
 import cusStoreSelect from './cusStoreSelect'
 import cusUserSelect from './cusUserSelect'
+import flex from './flex'
 
 export default [
   checkbox,
@@ -29,5 +30,6 @@ export default [
   cascader,
   row,
   cusStoreSelect,
-  cusUserSelect
+  cusUserSelect,
+  flex
 ]

package/types/maker.d.ts

@@ -64,7 +64,8 @@ declare enum MakerName {
   'cusStoreSelect',
   'storeSelect',
   'cusUserSelect',
-  'userSelect'
+  'userSelect',
+  'flex'
 }
 
 type Maker = {