@pisell/materials 1.0.983 → 1.0.988

package/lowcode/pisell-steps/meta.ts

@@ -36,11 +36,11 @@ const PisellStepsMeta = {
                 'en-US': 'Type',
                 'zh-CN': '步骤条类型',
               },
-              tip: 'type | 步骤条类型，可选 default、dot、navigation',
+              tip: 'type | 步骤条类型，可选 default、navigation。点状模式通过 progressDot 属性控制',
             },
             propType: {
               type: 'oneOf',
-              value: ['default', 'dot', 'navigation'],
+              value: ['default', 'navigation'],
             },
             setter: [
               {
@@ -51,10 +51,6 @@ const PisellStepsMeta = {
                       title: '默认',
                       value: 'default',
                     },
-                    {
-                      title: '点状',
-                      value: 'dot',
-                    },
                     {
                       title: '导航',
                       value: 'navigation',
@@ -66,6 +62,20 @@ const PisellStepsMeta = {
             ],
             defaultValue: 'default',
           },
+          {
+            name: 'progressDot',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Progress Dot',
+                'zh-CN': '点状步骤条',
+              },
+              tip: 'progressDot | 点状步骤条，设置为 true 启用点状模式',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
           {
             name: 'current',
             title: {
@@ -382,20 +392,6 @@ const PisellStepsMeta = {
             setter: 'BoolSetter',
             defaultValue: true,
           },
-          {
-            name: 'showProgressPercent',
-            title: {
-              label: {
-                type: 'i18n',
-                'en-US': 'Show Progress Percent',
-                'zh-CN': '显示进度百分比',
-              },
-              tip: 'showProgressPercent | 是否显示进度百分比',
-            },
-            propType: 'bool',
-            setter: 'BoolSetter',
-            defaultValue: false,
-          },
           {
             name: 'percent',
             title: {
@@ -404,68 +400,117 @@ const PisellStepsMeta = {
                 'en-US': 'Percent',
                 'zh-CN': '进度百分比',
               },
-              tip: 'percent | 当前步骤的进度百分比（0-100）',
+              tip: 'percent | 当前步骤的进度百分比（0-100），直接使用 antd Steps 的 percent 属性',
             },
             propType: 'number',
             setter: ['NumberSetter', 'VariableSetter'],
-            condition: {
-              type: 'JSFunction',
-              value: 'target => !!target.getProps().getPropValue("showProgressPercent")',
-            },
           },
           {
-            name: 'iconSize',
+            name: 'responsive',
             title: {
               label: {
                 type: 'i18n',
-                'en-US': 'Icon Size',
-                'zh-CN': '图标尺寸',
+                'en-US': 'Responsive',
+                'zh-CN': '响应式',
               },
-              tip: 'iconSize | 图标尺寸（单位：px）',
+              tip: 'responsive | 是否开启响应式',
             },
-            propType: 'number',
-            setter: ['NumberSetter', 'VariableSetter'],
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
           },
-          {
-            name: 'iconColor',
-            title: {
-              label: {
-                type: 'i18n',
-                'en-US': 'Icon Color',
-                'zh-CN': '图标颜色',
-              },
-              tip: 'iconColor | 图标颜色',
-            },
-            propType: 'string',
-            setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Scroll Mode',
+            'zh-CN': '滚动模式',
           },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
           {
-            name: 'responsive',
+            name: 'enableScrollMode',
             title: {
               label: {
                 type: 'i18n',
-                'en-US': 'Responsive',
-                'zh-CN': '响应式',
+                'en-US': 'Enable Scroll Mode',
+                'zh-CN': '启用滚动模式',
               },
-              tip: 'responsive | 是否开启响应式',
+              tip: 'enableScrollMode | 当步骤条宽度不足时，启用横向滚动并显示左右箭头按钮',
             },
             propType: 'bool',
             setter: 'BoolSetter',
-            defaultValue: true,
+            defaultValue: false,
           },
           {
-            name: 'animated',
+            name: 'scrollActionsConfig',
             title: {
               label: {
                 type: 'i18n',
-                'en-US': 'Animated',
-                'zh-CN': '动画',
+                'en-US': 'Scroll Actions Config',
+                'zh-CN': '滚动箭头配置',
               },
-              tip: 'animated | 是否开启动画',
+              tip: 'scrollActionsConfig | 配置滚动箭头的显示类型和滚动距离',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'show',
+                      title: {
+                        label: '显示箭头',
+                        tip: '是否显示滚动箭头',
+                      },
+                      propType: 'bool',
+                      setter: 'BoolSetter',
+                      defaultValue: true,
+                    },
+                    {
+                      name: 'type',
+                      title: {
+                        label: '箭头类型',
+                        tip: '滚动箭头的显示类型',
+                      },
+                      propType: {
+                        type: 'oneOf',
+                        value: ['lrArrows', 'rArrows'],
+                      },
+                      setter: {
+                        componentName: 'SelectSetter',
+                        props: {
+                          options: [
+                            { title: '左右箭头', value: 'lrArrows' },
+                            { title: '仅右箭头', value: 'rArrows' },
+                          ],
+                        },
+                      },
+                      defaultValue: 'lrArrows',
+                    },
+                    {
+                      name: 'scrollDistance',
+                      title: {
+                        label: '滚动距离',
+                        tip: '每次点击箭头滚动的距离（单位：px）',
+                      },
+                      propType: 'number',
+                      setter: 'NumberSetter',
+                      defaultValue: 200,
+                    },
+                  ],
+                },
+              },
+            },
+            condition: {
+              type: 'JSFunction',
+              value: 'target => !!target.getProps().getPropValue("enableScrollMode")',
             },
-            propType: 'bool',
-            setter: 'BoolSetter',
-            defaultValue: true,
           },
         ],
       },
@@ -488,7 +533,7 @@ const PisellStepsMeta = {
                 'en-US': 'Label Placement',
                 'zh-CN': '标签位置',
               },
-              tip: 'labelPlacement | 标签文本位置',
+              tip: 'labelPlacement | 标识区和文本区的布局方式：horizontal-文本在图标右侧，vertical-文本在图标下方（仅在水平步骤条时生效）',
             },
             propType: {
               type: 'oneOf',
@@ -514,6 +559,19 @@ const PisellStepsMeta = {
             ],
             defaultValue: 'horizontal',
           },
+          {
+            name: 'itemGap',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Item Gap',
+                'zh-CN': '标识区和文本区间距',
+              },
+              tip: 'itemGap | 标识区和文本区的间距（单位：px），横向时控制图标右侧间距，纵向时控制图标下方间距',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+          },
           {
             name: 'gridLayout',
             title: {
@@ -545,91 +603,6 @@ const PisellStepsMeta = {
               value: 'target => !!target.getProps().getPropValue("gridLayout")',
             },
           },
-          {
-            name: 'itemLayout',
-            title: {
-              label: {
-                type: 'i18n',
-                'en-US': 'Item Layout',
-                'zh-CN': '项布局',
-              },
-              tip: 'itemLayout | 标识区和文本区的布局方式',
-            },
-            propType: {
-              type: 'oneOf',
-              value: ['horizontal', 'vertical'],
-            },
-            setter: [
-              {
-                componentName: 'RadioGroupSetter',
-                props: {
-                  options: [
-                    {
-                      title: '水平',
-                      value: 'horizontal',
-                    },
-                    {
-                      title: '垂直',
-                      value: 'vertical',
-                    },
-                  ],
-                },
-              },
-              'VariableSetter',
-            ],
-            defaultValue: 'horizontal',
-          },
-          {
-            name: 'itemGap',
-            title: {
-              label: {
-                type: 'i18n',
-                'en-US': 'Item Gap',
-                'zh-CN': '项间距',
-              },
-              tip: 'itemGap | 标识区和文本区的间距（单位：px）',
-            },
-            propType: 'number',
-            setter: ['NumberSetter', 'VariableSetter'],
-          },
-          {
-            name: 'connectorPosition',
-            title: {
-              label: {
-                type: 'i18n',
-                'en-US': 'Connector Position',
-                'zh-CN': '连接器位置',
-              },
-              tip: 'connectorPosition | 连接器位置',
-            },
-            propType: {
-              type: 'oneOf',
-              value: ['center', 'top', 'bottom'],
-            },
-            setter: [
-              {
-                componentName: 'SelectSetter',
-                props: {
-                  options: [
-                    {
-                      title: '居中',
-                      value: 'center',
-                    },
-                    {
-                      title: '顶部',
-                      value: 'top',
-                    },
-                    {
-                      title: '底部',
-                      value: 'bottom',
-                    },
-                  ],
-                },
-              },
-              'VariableSetter',
-            ],
-            defaultValue: 'center',
-          },
         ],
       },
     ],