import { ComponentDescription } from '@vtj/engine';
const Checkbox: ComponentDescription[] = [
  {
    name: 'ElCheckbox',
    title: '多选框',
    groupId: 'el',
    childIncludes: false,
    categoryId: 'form',
    package: 'element-plus',
    props: [
      {
        name: 'modelValue',
        defaultValue: '',
        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter']
      },
      {
        name: 'label',
        defaultValue: '',
        setters: ['InputSetter', 'NumberSetter', 'BooleanSetter', 'JSONSetter']
      },
      {
        name: 'trueLabel',
        defaultValue: '',
        setters: ['InputSetter', 'NumberSetter']
      },
      {
        name: 'falseLabel',
        defaultValue: '',
        setters: ['InputSetter', 'NumberSetter']
      },
      {
        name: 'disabled',
        defaultValue: false,
        setters: 'BooleanSetter'
      },
      {
        name: 'border',
        defaultValue: false,
        setters: 'BooleanSetter'
      },
      {
        name: 'size',
        defaultValue: 'default',
        options: ['large', 'default', 'small'],
        setters: 'SelectSetter'
      },
      {
        name: 'name',
        defaultValue: '',
        setters: 'InputSetter'
      },
      {
        name: 'checked',
        defaultValue: false,
        setters: 'BooleanSetter'
      },
      {
        name: 'indeterminate',
        defaultValue: false,
        title: '设置 indeterminate 状态，只负责样式控制',
        label: '样式控制',
        setters: 'BooleanSetter'
      },
      {
        name: 'validateEvent',
        defaultValue: true,
        title: '输入时是否触发表单的校验',
        label: '表单校验',
        setters: 'BooleanSetter'
      }
    ],
    events: [
      {
        name: 'change'
      }
    ]
  },
  {
    name: 'ElCheckboxGroup',
    title: '多选框组',
    groupId: 'el',
    childIncludes: ['ElCheckbox', 'ElCheckboxButton'],
    categoryId: 'form',
    package: 'element-plus',
    props: [
      {
        name: 'modelValue',
        defaultValue: [],
        setters: 'JSONSetter'
      },
      {
        name: 'size',
        defaultValue: '',
        options: ['large', 'default', 'small'],
        setters: 'SelectSetter'
      },
      {
        name: 'disabled',
        defaultValue: false,
        setters: 'BooleanSetter'
      },
      {
        name: 'min',
        defaultValue: false,
        setters: 'NumberSetter'
      },
      {
        name: 'max',
        defaultValue: false,
        setters: 'NumberSetter'
      },
      {
        name: 'label',
        defaultValue: '',
        setters: 'InputSetter'
      },
      {
        name: 'textColor',
        defaultValue: '#ffffff',
        setters: 'InputSetter'
      },
      {
        name: 'fill',
        defaultValue: '#409EFF',
        title: '当按钮为活跃状态时的边框和背景颜色',
        label: '样式控制',
        setters: 'InputSetter'
      },
      {
        name: 'validateEvent',
        defaultValue: true,
        title: '输入时是否触发表单的校验',
        label: '表单校验',
        setters: 'BooleanSetter'
      }
    ],
    events: ['change'],
    snippet: {
      name: 'ElCheckboxGroup',

      children: [
        {
          name: 'ElCheckbox',
          children: 'ElCheckbox',
          props: {
            label: 'ElCheckbox1'
          }
        },
        {
          name: 'ElCheckbox',
          children: 'ElCheckbox',
          props: {
            label: 'ElCheckbox2'
          }
        },
        {
          name: 'ElCheckbox',
          children: 'ElCheckbox',
          props: {
            label: 'ElCheckbox3'
          }
        }
      ]
    }
  },
  {
    name: 'ElCheckboxButton',
    title: '按钮样式的多选组合',
    groupId: 'el',
    categoryId: 'form',
    childIncludes: false,
    package: 'element-plus',
    props: [
      {
        name: 'label',
        defaultValue: '',
        setters: ['JSONSetter', 'InputSetter', 'NumberSetter', 'BooleanSetter']
      },
      {
        name: 'trueLabel',
        defaultValue: '',
        setters: ['InputSetter', 'NumberSetter']
      },
      {
        name: 'falseLabel',
        defaultValue: '',
        setters: ['InputSetter', 'NumberSetter']
      },
      {
        name: 'disabled',
        defaultValue: false,
        setters: 'BooleanSetter'
      },
      {
        name: 'name',
        defaultValue: '',
        setters: 'InputSetter'
      },
      {
        name: 'checked',
        defaultValue: false,
        setters: 'BooleanSetter'
      }
    ],
    events: [
      {
        name: 'change'
      }
    ]
  }
];

export default Checkbox;
