@pisell/materials 1.0.978 → 1.0.980

package/lowcode/pisell-steps/meta.ts

@@ -1,307 +1,657 @@
 import snippets from './snippets';
 
-/**
- * PisellSteps 组件 Lowcode Meta 配置
- * 用于阿里低代码引擎的物料描述
- */
-export default {
-  snippets,
+const PisellStepsMeta = {
   componentName: 'PisellSteps',
-  title: 'Steps 步骤条',
+  title: '步骤条',
   category: '导航',
   docUrl: '',
   screenshot: '',
   devMode: 'proCode',
   npm: {
     package: '@pisell/materials',
-    version: '1.0.0',
+    version: '1.0.3',
     exportName: 'PisellSteps',
     main: 'src/index.tsx',
     destructuring: true,
     subName: '',
   },
-  props: [
-    {
-      name: 'items',
-      title: { label: '步骤项配置', tip: '步骤项配置数组' },
-      setter: {
-        componentName: 'ArraySetter',
-        props: {
-          itemSetter: {
-            componentName: 'ObjectSetter',
-            props: {
-              config: {
-                items: [
-                  {
-                    name: 'title',
-                    title: { label: '标题', tip: '步骤标题' },
-                    setter: 'PisellI18nSetter',
-                    isRequired: true,
-                  },
-                  {
-                    name: 'subTitle',
-                    title: { label: '副标题', tip: '步骤副标题' },
-                    setter: 'PisellI18nSetter',
-                  },
-                  {
-                    name: 'description',
-                    title: { label: '描述', tip: '步骤详细描述' },
-                    setter: 'PisellI18nSetter',
-                  },
-                  {
-                    name: 'status',
-                    title: { label: '状态', tip: '步骤状态' },
-                    setter: {
-                      componentName: 'RadioGroupSetter',
-                      props: {
-                        options: [
-                          { title: '等待', value: 'wait' },
-                          { title: '进行中', value: 'process' },
-                          { title: '完成', value: 'finish' },
-                          { title: '错误', value: 'error' },
-                        ],
-                      },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Basic',
+            'zh-CN': '基础配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'type',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Type',
+                'zh-CN': '步骤条类型',
+              },
+              tip: 'type | 步骤条类型，可选 default、dot、navigation',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['default', 'dot', 'navigation'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '默认',
+                      value: 'default',
                     },
-                    propType: {
-                      type: 'oneOf',
-                      value: ['wait', 'process', 'finish', 'error'],
+                    {
+                      title: '点状',
+                      value: 'dot',
+                    },
+                    {
+                      title: '导航',
+                      value: 'navigation',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'default',
+          },
+          {
+            name: 'current',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Current',
+                'zh-CN': '当前步骤',
+              },
+              tip: 'current | 当前步骤索引（受控模式）',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+          },
+          {
+            name: 'defaultCurrent',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Default Current',
+                'zh-CN': '默认当前步骤',
+              },
+              tip: 'defaultCurrent | 默认当前步骤索引（非受控模式）',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 0,
+          },
+          {
+            name: 'direction',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Direction',
+                'zh-CN': '方向',
+              },
+              tip: 'direction | 步骤条方向',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['horizontal', 'vertical'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '横向',
+                      value: 'horizontal',
+                    },
+                    {
+                      title: '竖向',
+                      value: 'vertical',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'horizontal',
+          },
+          {
+            name: 'size',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Size',
+                'zh-CN': '尺寸',
+              },
+              tip: 'size | 步骤条尺寸',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['small', 'default', 'large'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '小',
+                      value: 'small',
+                    },
+                    {
+                      title: '中',
+                      value: 'default',
+                    },
+                    {
+                      title: '大',
+                      value: 'large',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'default',
+          },
+          {
+            name: 'status',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Status',
+                'zh-CN': '当前步骤状态',
+              },
+              tip: 'status | 当前步骤的状态',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['wait', 'process', 'finish', 'error'],
+            },
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    {
+                      title: '等待',
+                      value: 'wait',
+                    },
+                    {
+                      title: '进行中',
+                      value: 'process',
+                    },
+                    {
+                      title: '完成',
+                      value: 'finish',
+                    },
+                    {
+                      title: '错误',
+                      value: 'error',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'process',
+          },
+          {
+            name: 'items',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Items',
+                'zh-CN': '步骤数据',
+              },
+              tip: 'items | 步骤数据配置数组',
+            },
+            propType: 'object',
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: 'title',
+                          title: {
+                            label: '标题',
+                            tip: '步骤标题',
+                          },
+                          propType: { type: 'oneOfType', value: ['string', 'node'] },
+                          setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+                          isRequired: true,
+                        },
+                        {
+                          name: 'subTitle',
+                          title: {
+                            label: '副标题',
+                            tip: '步骤副标题',
+                          },
+                          propType: { type: 'oneOfType', value: ['string', 'node'] },
+                          setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+                        },
+                        {
+                          name: 'description',
+                          title: {
+                            label: '描述',
+                            tip: '步骤描述',
+                          },
+                          propType: { type: 'oneOfType', value: ['string', 'node'] },
+                          setter: ['PisellI18nSetter', 'StringSetter', 'SlotSetter'],
+                        },
+                        {
+                          name: 'icon',
+                          title: {
+                            label: '图标',
+                            tip: '自定义步骤图标',
+                          },
+                          propType: { type: 'oneOfType', value: ['node'] },
+                          setter: [
+                            {
+                              componentName: 'SlotSetter',
+                              initialValue: {
+                                type: 'JSSlot',
+                                value: [
+                                  {
+                                    componentName: 'Icon',
+                                    props: {
+                                      type: 'CheckOutlined',
+                                      size: 16,
+                                    },
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                        {
+                          name: 'status',
+                          title: {
+                            label: '状态',
+                            tip: '步骤状态',
+                          },
+                          propType: {
+                            type: 'oneOf',
+                            value: ['wait', 'process', 'finish', 'error'],
+                          },
+                          setter: {
+                            componentName: 'SelectSetter',
+                            props: {
+                              options: [
+                                { title: '等待', value: 'wait' },
+                                { title: '进行中', value: 'process' },
+                                { title: '完成', value: 'finish' },
+                                { title: '错误', value: 'error' },
+                              ],
+                            },
+                          },
+                        },
+                        {
+                          name: 'disabled',
+                          title: {
+                            label: '禁用',
+                            tip: '是否禁用点击',
+                          },
+                          propType: 'bool',
+                          setter: 'BoolSetter',
+                          defaultValue: false,
+                        },
+                        {
+                          name: 'hidden',
+                          title: {
+                            label: '隐藏',
+                            tip: '是否隐藏该步骤',
+                          },
+                          propType: 'bool',
+                          setter: 'BoolSetter',
+                          defaultValue: false,
+                        },
+                      ],
                     },
                   },
-                  {
-                    name: 'icon',
-                    title: { label: '自定义图标', tip: '自定义步骤图标' },
-                    propType: 'node',
-                    setter: 'IconSetter',
-                  },
-                  {
-                    name: 'disabled',
-                    title: { label: '是否禁用', tip: '禁用该步骤' },
-                    setter: 'BoolSetter',
-                    propType: 'bool',
-                    defaultValue: false,
-                  },
-                ],
+                },
               },
             },
-            initialValue: () => ({
-              title: '步骤',
-              disabled: false,
-            }),
           },
-        },
-      },
-      propType: 'array',
-    },
-    {
-      name: 'current',
-      title: {
-        label: '当前步骤',
-        tip: '当前步骤索引（从 0 开始）',
-      },
-      propType: 'number',
-      setter: 'NumberSetter',
-      defaultValue: 0,
-    },
-    {
-      name: 'type',
-      title: {
-        label: '步骤条类型',
-        tip: '步骤条类型',
-      },
-      setter: {
-        componentName: 'RadioGroupSetter',
-        props: {
-          options: [
-            { title: '默认', value: 'default' },
-            { title: '导航', value: 'navigation' },
-            { title: '行内', value: 'inline' },
-          ],
-        },
-      },
-      propType: {
-        type: 'oneOf',
-        value: ['default', 'navigation', 'inline'],
-      },
-      defaultValue: 'default',
-    },
-    {
-      name: 'size',
-      title: {
-        label: '尺寸',
-        tip: '步骤条尺寸',
-      },
-      setter: {
-        componentName: 'RadioGroupSetter',
-        props: {
-          options: [
-            { title: '默认', value: 'default' },
-            { title: '小', value: 'small' },
-          ],
-        },
-      },
-      propType: {
-        type: 'oneOf',
-        value: ['default', 'small'],
-      },
-      defaultValue: 'default',
-    },
-    {
-      name: 'direction',
-      title: {
-        label: '步骤条方向',
-        tip: '步骤条方向：横向或竖向',
-      },
-      setter: {
-        componentName: 'RadioGroupSetter',
-        props: {
-          options: [
-            { title: '横向', value: 'horizontal' },
-            { title: '竖向', value: 'vertical' },
-          ],
-        },
-      },
-      propType: {
-        type: 'oneOf',
-        value: ['horizontal', 'vertical'],
-      },
-      defaultValue: 'horizontal',
-    },
-    {
-      name: 'status',
-      title: {
-        label: '当前步骤状态',
-        tip: '当前步骤的状态',
-      },
-      setter: {
-        componentName: 'RadioGroupSetter',
-        props: {
-          options: [
-            { title: '等待', value: 'wait' },
-            { title: '进行中', value: 'process' },
-            { title: '完成', value: 'finish' },
-            { title: '错误', value: 'error' },
-          ],
-        },
-      },
-      propType: {
-        type: 'oneOf',
-        value: ['wait', 'process', 'finish', 'error'],
-      },
-      defaultValue: 'process',
-    },
-    {
-      name: 'progressDot',
-      title: {
-        label: '圆点样式',
-        tip: '使用圆点样式的步骤条',
-      },
-      setter: 'BoolSetter',
-      propType: { type: 'oneOfType', value: ['bool', 'func'] },
-      defaultValue: false,
-    },
-    {
-      name: 'labelPlacement',
-      title: {
-        label: '标签放置位置',
-        tip: '标签放置位置',
-      },
-      setter: {
-        componentName: 'RadioGroupSetter',
-        props: {
-          options: [
-            { title: '水平', value: 'horizontal' },
-            { title: '竖直', value: 'vertical' },
-          ],
-        },
-      },
-      propType: {
-        type: 'oneOf',
-        value: ['horizontal', 'vertical'],
-      },
-      defaultValue: 'horizontal',
-    },
-    {
-      name: 'percent',
-      title: {
-        label: '进度百分比',
-        tip: '当前步骤的进度百分比（0-100）',
+          {
+            name: 'className',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'ClassName',
+                'zh-CN': '类名',
+              },
+              tip: 'className | 自定义类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+        ],
       },
-      propType: 'number',
-      setter: {
-        componentName: 'NumberSetter',
-        props: {
-          min: 0,
-          max: 100,
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Advanced',
+            'zh-CN': '高级配置',
+          },
         },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'clickable',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Clickable',
+                'zh-CN': '可点击',
+              },
+              tip: 'clickable | 是否允许点击步骤切换',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'allowClickFinished',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Allow Click Finished',
+                'zh-CN': '允许点击已完成',
+              },
+              tip: 'allowClickFinished | 是否允许点击已完成的步骤',
+            },
+            propType: 'bool',
+            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: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Percent',
+                'zh-CN': '进度百分比',
+              },
+              tip: 'percent | 当前步骤的进度百分比（0-100）',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            condition: {
+              type: 'JSFunction',
+              value: 'target => !!target.getProps().getPropValue("showProgressPercent")',
+            },
+          },
+          {
+            name: 'iconSize',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Icon Size',
+                'zh-CN': '图标尺寸',
+              },
+              tip: 'iconSize | 图标尺寸（单位：px）',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+          },
+          {
+            name: 'iconColor',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Icon Color',
+                'zh-CN': '图标颜色',
+              },
+              tip: 'iconColor | 图标颜色',
+            },
+            propType: 'string',
+            setter: ['ColorSetter', 'StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'responsive',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Responsive',
+                'zh-CN': '响应式',
+              },
+              tip: 'responsive | 是否开启响应式',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'animated',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Animated',
+                'zh-CN': '动画',
+              },
+              tip: 'animated | 是否开启动画',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+        ],
       },
-    },
-    {
-      name: 'responsive',
-      title: {
-        label: '响应式',
-        tip: '是否响应式适配',
-      },
-      setter: 'BoolSetter',
-      propType: 'bool',
-      defaultValue: true,
-    },
-    {
-      name: 'showConnector',
-      title: {
-        label: '显示连接器',
-        tip: '是否显示步骤间的连接线',
-      },
-      setter: 'BoolSetter',
-      propType: 'bool',
-      defaultValue: true,
-    },
-    {
-      name: 'iconPosition',
-      title: {
-        label: '图标位置',
-        tip: '图标位置（竖向布局时有效）',
-      },
-      setter: {
-        componentName: 'RadioGroupSetter',
-        props: {
-          options: [
-            { title: '顶部', value: 'top' },
-            { title: '底部', value: 'bottom' },
-          ],
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Layout',
+            'zh-CN': '布局配置',
+          },
         },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'labelPlacement',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Label Placement',
+                'zh-CN': '标签位置',
+              },
+              tip: 'labelPlacement | 标签文本位置',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['horizontal', 'vertical'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '水平',
+                      value: 'horizontal',
+                    },
+                    {
+                      title: '垂直',
+                      value: 'vertical',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'horizontal',
+          },
+          {
+            name: 'gridLayout',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Grid Layout',
+                'zh-CN': '栅格布局',
+              },
+              tip: 'gridLayout | 是否开启栅格布局',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'gridColumns',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Grid Columns',
+                'zh-CN': '栅格列数',
+              },
+              tip: 'gridColumns | 栅格列数（仅在 gridLayout=true 时有效）',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            condition: {
+              type: 'JSFunction',
+              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',
+          },
+        ],
       },
-      propType: {
-        type: 'oneOf',
-        value: ['top', 'bottom'],
-      },
-      defaultValue: 'top',
-      condition: {
-        type: 'JSFunction',
-        value: "target => target.getProps().getPropValue('direction') === 'vertical'",
-      },
-    },
-    {
-      name: 'className',
-      title: { label: '自定义类名', tip: '自定义 CSS 类名' },
-      propType: 'string',
-      setter: 'StringSetter',
-    },
-    {
-      name: 'onChange',
-      title: { label: '步骤改变回调', tip: '步骤改变时的回调函数' },
-      propType: 'func',
-    },
-  ],
-  configure: {
+    ],
     supports: {
       style: true,
+      className: true,
       events: [
         {
           name: 'onChange',
           template:
-            "onChange(current,${extParams}){\n// 步骤改变时的回调\nconsole.log('onChange', current);}",
+            'onChange(current,${extParams}){\n// 步骤变更时的回调\nconsole.log(\'onChange\', current);}',
         },
       ],
     },
+    component: {
+      isContainer: false,
+    },
   },
 };
+
+export default {
+  ...PisellStepsMeta,
+  snippets,
+};
+