import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellHeaderProgressBar',
  title: '顶部进度栏',
  category: '导航',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellHeaderProgressBar',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: '基础',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'showClose',
          title: { label: '显示关闭', tip: 'showClose | 显示关闭' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'title',
          title: { label: '标题', tip: 'title | 标题' },
          propType: 'node',
          setter: {
            componentName: 'SlotSetter',
            initialValue: {
              type: 'JSSlot',
              value: [],
            },
          }
        },
        {
          name: 'stepText',
          title: { label: '步骤文案', tip: 'stepText | 步骤文案' },
          propType: 'node',
          setter: {
            componentName: 'SlotSetter',
            initialValue: {
              type: 'JSSlot',
              value: [],
            },
          }
        }
      ],
    },
    {
      title: '外观',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'enableShadow',
          title: { label: '启用投影', tip: 'enableShadow | 启用投影' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'enableBorder',
          title: { label: '启用描边', tip: 'enableBorder | 启用描边' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'borderWidth',
          title: { label: '描边粗细', tip: 'borderWidth | 描边粗细' },
          setter: 'NumberSetter',
          defaultValue: 1,
        },
        {
          name: 'borderColor',
          title: '描边颜色',
          setter: 'ColorSetter',
          defaultValue: '#E5E5E5',
        },
        {
          name: 'backgroundColor',
          title: '头部背景颜色',
          setter: 'ColorSetter',
          defaultValue: '#FFFFFF',
        },
      ],
    },
  ],

  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onBack',
          template:
            'onBack(${extParams}){\n// 点击返回时的回调\n}',
        },
        {
          name: 'onClose',
          template:
            'onClose(${extParams}){\n// 点击关闭时的回调\n}',
        },
      ],
    },
  },
};