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

package/package.json

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

package/src/core/alias.js

@@ -27,6 +27,7 @@ export default {
   frame: 'fcFrame',
   col: PRE + 'Col',
   row: PRE + 'Row',
+  flex: PRE + 'Flex',
   tree: PRE + 'Tree',
   autoComplete: PRE + 'AutoComplete',
   transfer: PRE + 'Transfer',

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,88 @@
+export default {
+  name: 'flex',
+  mergeProp(ctx) {
+    // 从 props 中读取 flex 布局配置
+    const props = ctx.rule.props || {}
+    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'
+
+    // 映射 CSS flexbox 值到 Ant Design Vue Flex 组件的 props
+    const vertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+    const wrap = flexWrap === 'wrap'
+
+    // 映射 justifyContent 到 justify
+    const justifyMap = {
+      'flex-start': 'start',
+      'flex-end': 'end',
+      center: 'center',
+      'space-between': 'space-between',
+      'space-around': 'space-around',
+      'space-evenly': 'space-evenly'
+    }
+    const justify = justifyMap[justifyContent] || 'start'
+
+    // 映射 alignItems 到 align
+    const alignMap = {
+      'flex-start': 'start',
+      'flex-end': 'end',
+      center: 'center',
+      baseline: 'baseline',
+      stretch: 'stretch'
+    }
+    const align = alignMap[alignItems] || 'start'
+
+    // 设置到 prop.props，用于传递给 a-flex 组件
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
+    }
+
+    // 映射 Ant Design Vue Flex 组件的 props
+    ctx.prop.props.vertical = vertical
+    ctx.prop.props.wrap = wrap
+    ctx.prop.props.justify = justify
+    ctx.prop.props.align = align
+
+    // 如果设置了 gap，也传递
+    if (props.gap !== undefined) {
+      ctx.prop.props.gap = props.gap
+    }
+
+    // 合并其他样式到 props.style（用于非 Flex 组件控制的样式，如 padding, margin 等）
+    const existingStyle = ctx.rule.style || {}
+    // 排除已经被 Flex 组件处理的样式
+    const {
+      display,
+      flexDirection: _fd,
+      flexWrap: _fw,
+      justifyContent: _jc,
+      alignItems: _ai,
+      ...otherStyles
+    } = existingStyle
+    if (Object.keys(otherStyles).length > 0) {
+      ctx.prop.props.style = otherStyles
+    }
+
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+  },
+  render(children, ctx) {
+    // 使用 Ant Design Vue 的 Flex 组件
+    const prop = { ...ctx.prop }
+
+    // 将 type 设置为 'a-flex'，form-create 会自动识别
+    if (prop.type === 'flex') {
+      prop.type = 'a-flex'
+    }
+
+    // children 会通过 form-create 的机制自动渲染
+    const childrenNodes = children || []
+
+    return ctx.vNode.make('a-flex', 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 = {