@pisell/materials 6.7.4 → 6.8.2

package/lowcode/pisell-steps/meta.ts

@@ -0,0 +1,537 @@
+import snippets from './snippets';
+
+const PisellStepsMeta = {
+  componentName: 'PisellSteps',
+  title: '步骤条',
+  category: '导航',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellSteps',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  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、navigation。点状模式通过 progressDot 属性控制',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['default', 'navigation'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '默认',
+                      value: 'default',
+                    },
+                    {
+                      title: '导航',
+                      value: 'navigation',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            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: {
+              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: 'className',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'ClassName',
+                'zh-CN': '类名',
+              },
+              tip: 'className | 自定义类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+        ],
+      },
+      {
+        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: 'percent',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Percent',
+                'zh-CN': '进度百分比',
+              },
+              tip: 'percent | 当前步骤的进度百分比（0-100），直接使用 antd Steps 的 percent 属性',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+          },
+          {
+            name: 'responsive',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Responsive',
+                'zh-CN': '响应式',
+              },
+              tip: 'responsive | 是否开启响应式',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+        ],
+      },
+      {
+        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 | 标识区和文本区的布局方式：horizontal-文本在图标右侧，vertical-文本在图标下方（仅在水平步骤条时生效）',
+            },
+            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: '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")',
+            },
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            'onChange(current,${extParams}){\n// 步骤变更时的回调\nconsole.log(\'onChange\', current);}',
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+    },
+  },
+};
+
+export default {
+  ...PisellStepsMeta,
+  snippets,
+};
+

package/lowcode/pisell-steps/snippets.ts

@@ -0,0 +1,118 @@
+export default [
+  {
+    title: '基础步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是一条描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是一条描述信息',
+          },
+          {
+            title: '等待中',
+            description: '这是一条描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '点状步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        type: 'dot',
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是一条描述',
+          },
+          {
+            title: '进行中',
+            description: '这是一条描述',
+          },
+          {
+            title: '等待中',
+            description: '这是一条描述',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '竖向步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        direction: 'vertical',
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是一条描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是一条描述信息',
+          },
+          {
+            title: '等待中',
+            description: '这是一条描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '导航步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        type: 'navigation',
+        current: 1,
+        items: [
+          {
+            title: '步骤1',
+            description: '描述1',
+          },
+          {
+            title: '步骤2',
+            description: '描述2',
+          },
+          {
+            title: '步骤3',
+            description: '描述3',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '小尺寸步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        size: 'small',
+        current: 1,
+        items: [
+          { title: '已完成' },
+          { title: '进行中' },
+          { title: '等待中' },
+        ],
+      },
+    },
+  },
+];
+