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

package/src/parsers/flex.js

@@ -1,264 +1,259 @@
-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'
-    const alignContent =
-      props.alignContent || ctx.rule.alignContent || '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
-    // 注意：不设置 wrap prop，因为 Ant Design Vue 的 Flex 组件的 wrap prop 类型可能不匹配
-    // 换行功能完全通过 CSS 样式来实现
-    ctx.prop.props.justify = justify
-    ctx.prop.props.align = align
-
-    // 如果设置了 gap，也传递
-    if (props.gap !== undefined) {
-      ctx.prop.props.gap = props.gap
-    }
-
-    // 合并样式（不要直接修改 ctx.rule.style，避免响应式循环）
-    const existingStyle = ctx.rule.style || {}
-    // 排除已经被 Flex 组件处理的样式
-    const {
-      display: userDisplay,
-      flexDirection: _fd,
-      flexWrap: _fw,
-      justifyContent: _jc,
-      alignItems: _ai,
-      alignContent: _ac,
-      ...otherStyles
-    } = existingStyle
-
-    // 构建样式对象，确保从 props 读取的配置能够应用到样式中
-    const flexStyles = {
-      // 保留用户设置的 display，如果没有则设置为 'flex'
-      display: userDisplay || 'flex',
-      // 确保 flex 容器占满整行
-      // 在样式中设置 flexWrap，确保从 props 读取的配置能够生效
-      // 这是关键的：将 props.flexWrap 的值（'wrap' 或 'nowrap'）应用到样式中
-      flexWrap: flexWrap,
-      // 合并其他用户自定义样式
-      ...otherStyles
-    }
-
-    // 如果设置了 alignContent，添加到样式中
-    if (alignContent && alignContent !== 'flex-start') {
-      flexStyles.alignContent = alignContent
-    }
-
-    // 同时设置到 ctx.prop.style 和 ctx.prop.props.style
-    // form-create 会将 prop.style 应用到组件上，但有时也需要 prop.props.style
-    // 保留已有的 prop.style 和 prop.props.style，然后合并新的样式
-    const existingPropStyle = ctx.prop.style || {}
-    const existingPropsStyle = ctx.prop.props?.style || {}
-
-    // 合并样式到 ctx.prop.style（保留已有样式，新的样式优先）
-    ctx.prop.style = {
-      ...existingPropStyle,
-      ...flexStyles
-    }
-
-    // 同时也合并到 props.style，确保样式生效
-    if (!ctx.prop.props) {
-      ctx.prop.props = {}
-    }
-    ctx.prop.props.style = {
-      ...existingPropsStyle,
-      ...flexStyles
-    }
-    
-    // componentStyle 应用到 prop.style（包裹容器），最后合并确保优先级最高
-    if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
-      ctx.prop.style = {
-        ...ctx.prop.style,
-        ...ctx.rule.componentStyle
-      }
-    }
-
-    // 确保 children 存在
-    if (!ctx.rule.children) {
-      ctx.rule.children = []
-    }
-
-    // 为 flex 容器的所有子组件设置 col: false，避免被 a-col 包装
-    // 这样可以确保子组件直接作为 flex 子项，而不是占满整行
-    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
-          }
-        }
-      })
-    }
-
-    // 读取 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 组件
-    const prop = { ...ctx.prop }
-
-    // 将 type 设置为 'a-flex'，form-create 会自动识别
-    if (prop.type === 'flex') {
-      prop.type = 'a-flex'
-    }
-
-    // 读取 flexDirection 来判断是否是垂直方向
-    const props = ctx.rule.props || {}
-    const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
-    const isVertical =
-      flexDirection === 'column' || flexDirection === 'column-reverse'
-
-    // 初始化 prop.props 和 prop.class（如果需要的话）
-    if (!prop.props) {
-      prop.props = {}
-    }
-
-    // 添加自定义 class 的辅助函数
-    const ensureClass = () => {
-      if (!prop.class) {
-        prop.class = []
-      }
-      if (!Array.isArray(prop.class)) {
-        prop.class = [prop.class]
-      }
-    }
-
-    // 读取 childFlex 配置
-    const childFlex = ctx.rule.props?.childFlex ?? ctx.rule.childFlex
-    if (childFlex !== undefined && childFlex !== null && childFlex !== '') {
-      ensureClass()
-      if (!prop.class.includes('_fc-flex-container')) {
-        prop.class.push('_fc-flex-container')
-      }
-
-      // 通过 CSS 变量传递 flex 值
-      const flexValue = String(childFlex).trim()
-      // 合并到样式中，设置 CSS 变量
-      if (!prop.props.style) {
-        prop.props.style = {}
-      }
-      prop.props.style['--fc-child-flex'] = flexValue
-
-      // 同时也设置到 prop.style
-      if (!prop.style) {
-        prop.style = {}
-      }
-      prop.style['--fc-child-flex'] = flexValue
-    }
-
-    // 如果是垂直方向，读取 childWidth 配置（默认 100%）
-    if (isVertical) {
-      const childWidth =
-        ctx.rule.props?.childWidth ?? ctx.rule.childWidth ?? '100%'
-
-      ensureClass()
-      if (!prop.class.includes('_fc-flex-container')) {
-        prop.class.push('_fc-flex-container')
-      }
-      if (!prop.class.includes('_fc-flex-vertical')) {
-        prop.class.push('_fc-flex-vertical')
-      }
-
-      // 通过 CSS 变量传递宽度值
-      const widthValue = String(childWidth).trim()
-      if (!prop.props.style) {
-        prop.props.style = {}
-      }
-      prop.props.style['--fc-child-width'] = widthValue
-
-      if (!prop.style) {
-        prop.style = {}
-      }
-      prop.style['--fc-child-width'] = widthValue
-    }
-
-    // children 会通过 form-create 的机制自动渲染
-    const childrenNodes = children || []
-
-    // 将 flex 容器包装在 col 中，确保它占满整行（span: 24）
-    // 这样 flex 容器才能有足够的宽度，子项才能自适应展示
-    // 应用 componentStyle 到 col 容器（如果存在）
-    const componentStyle = ctx.rule.componentStyle || {}
-    return ctx.vNode.col(
-      { 
-        props: { span: 24 },
-        style: componentStyle
-      },
-      {
-        default: () => [ctx.vNode.make('a-flex', prop, childrenNodes)]
-      }
-    )
-  }
-}
+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'
+    const alignContent =
+      props.alignContent || ctx.rule.alignContent || '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
+    // 注意：不设置 wrap prop，因为 Ant Design Vue 的 Flex 组件的 wrap prop 类型可能不匹配
+    // 换行功能完全通过 CSS 样式来实现
+    ctx.prop.props.justify = justify
+    ctx.prop.props.align = align
+
+    // 如果设置了 gap，也传递
+    if (props.gap !== undefined) {
+      ctx.prop.props.gap = props.gap
+    }
+
+    // 合并样式（不要直接修改 ctx.rule.style，避免响应式循环）
+    const existingStyle = ctx.rule.style || {}
+    // 排除已经被 Flex 组件处理的样式
+    const {
+      display: userDisplay,
+      flexDirection: _fd,
+      flexWrap: _fw,
+      justifyContent: _jc,
+      alignItems: _ai,
+      alignContent: _ac,
+      ...otherStyles
+    } = existingStyle
+
+    // 构建样式对象，确保从 props 读取的配置能够应用到样式中
+    const flexStyles = {
+      // 保留用户设置的 display，如果没有则设置为 'flex'
+      display: userDisplay || 'flex',
+      // 确保 flex 容器占满整行
+      // 在样式中设置 flexWrap，确保从 props 读取的配置能够生效
+      // 这是关键的：将 props.flexWrap 的值（'wrap' 或 'nowrap'）应用到样式中
+      flexWrap: flexWrap,
+      // 合并其他用户自定义样式
+      ...otherStyles
+    }
+
+    // 如果设置了 alignContent，添加到样式中
+    if (alignContent && alignContent !== 'flex-start') {
+      flexStyles.alignContent = alignContent
+    }
+
+    // 同时设置到 ctx.prop.style 和 ctx.prop.props.style
+    // form-create 会将 prop.style 应用到组件上，但有时也需要 prop.props.style
+    // 保留已有的 prop.style 和 prop.props.style，然后合并新的样式
+    const existingPropStyle = ctx.prop.style || {}
+    const existingPropsStyle = ctx.prop.props?.style || {}
+
+    // 合并样式到 ctx.prop.style（保留已有样式，新的样式优先）
+    // 注意：这里不合并 componentStyle，componentStyle 是独立的，用于顶级容器
+    ctx.prop.style = {
+      ...existingPropStyle,
+      ...flexStyles
+    }
+    
+    // componentStyle 独立应用到顶级容器，不在这里合并，在 manager.js 中处理
+
+    // 同时也合并到 props.style，确保样式生效
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
+    }
+    ctx.prop.props.style = {
+      ...existingPropsStyle,
+      ...flexStyles
+    }
+
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+
+    // 为 flex 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // 这样可以确保子组件直接作为 flex 子项，而不是占满整行
+    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
+          }
+        }
+      })
+    }
+
+    // 读取 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 组件
+    const prop = { ...ctx.prop }
+
+    // 将 type 设置为 'a-flex'，form-create 会自动识别
+    if (prop.type === 'flex') {
+      prop.type = 'a-flex'
+    }
+
+    // 读取 flexDirection 来判断是否是垂直方向
+    const props = ctx.rule.props || {}
+    const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
+    const isVertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+
+    // 初始化 prop.props 和 prop.class（如果需要的话）
+    if (!prop.props) {
+      prop.props = {}
+    }
+
+    // 添加自定义 class 的辅助函数
+    const ensureClass = () => {
+      if (!prop.class) {
+        prop.class = []
+      }
+      if (!Array.isArray(prop.class)) {
+        prop.class = [prop.class]
+      }
+    }
+
+    // 读取 childFlex 配置
+    const childFlex = ctx.rule.props?.childFlex ?? ctx.rule.childFlex
+    if (childFlex !== undefined && childFlex !== null && childFlex !== '') {
+      ensureClass()
+      if (!prop.class.includes('_fc-flex-container')) {
+        prop.class.push('_fc-flex-container')
+      }
+
+      // 通过 CSS 变量传递 flex 值
+      const flexValue = String(childFlex).trim()
+      // 合并到样式中，设置 CSS 变量
+      if (!prop.props.style) {
+        prop.props.style = {}
+      }
+      prop.props.style['--fc-child-flex'] = flexValue
+
+      // 同时也设置到 prop.style
+      if (!prop.style) {
+        prop.style = {}
+      }
+      prop.style['--fc-child-flex'] = flexValue
+    }
+
+    // 如果是垂直方向，读取 childWidth 配置（默认 100%）
+    if (isVertical) {
+      const childWidth =
+        ctx.rule.props?.childWidth ?? ctx.rule.childWidth ?? '100%'
+
+      ensureClass()
+      if (!prop.class.includes('_fc-flex-container')) {
+        prop.class.push('_fc-flex-container')
+      }
+      if (!prop.class.includes('_fc-flex-vertical')) {
+        prop.class.push('_fc-flex-vertical')
+      }
+
+      // 通过 CSS 变量传递宽度值
+      const widthValue = String(childWidth).trim()
+      if (!prop.props.style) {
+        prop.props.style = {}
+      }
+      prop.props.style['--fc-child-width'] = widthValue
+
+      if (!prop.style) {
+        prop.style = {}
+      }
+      prop.style['--fc-child-width'] = widthValue
+    }
+
+    // children 会通过 form-create 的机制自动渲染
+    const childrenNodes = children || []
+
+    // 将 flex 容器包装在 col 中，确保它占满整行（span: 24）
+    // 这样 flex 容器才能有足够的宽度，子项才能自适应展示
+    // componentStyle 独立应用到 col 容器，不和 prop.style 混用
+    const componentStyle = ctx._componentStyle || {}
+    return ctx.vNode.col(
+      { 
+        props: { span: 24 },
+        style: componentStyle
+      },
+      {
+        default: () => [ctx.vNode.make('a-flex', prop, childrenNodes)]
+      }
+    )
+  }
+}