import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellBaseCard',
  title: '基础卡片',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellBaseCard',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  experimental: { hideSelectTools: true },
  props: [
    {
      name: 'className',
      title: {
        label: { type: 'i18n', 'en-US': 'Class Name', 'zh-CN': '样式类名' },
        tip: 'className | 根节点自定义类名',
      },
      propType: 'string',
      setter: ['PisellI18nSetter', 'StringSetter'],
    },
    {
      name: 'style',
      title: {
        label: { type: 'i18n', 'en-US': 'Style', 'zh-CN': '样式' },
        tip: 'style | 默认状态下内联样式（背景、圆角、边框、阴影、padding、宽高等）',
      },
      propType: 'object',
      setter: 'StyleSetter',
    },
    {
      name: 'hoverStyle',
      title: {
        label: { type: 'i18n', 'en-US': 'Hover Style', 'zh-CN': '悬停样式' },
        tip: 'hoverStyle | 悬停时的样式覆盖',
      },
      propType: 'object',
      setter: 'StyleSetter',
    },
    {
      name: 'activeStyle',
      title: {
        label: { type: 'i18n', 'en-US': 'Active Style', 'zh-CN': '按下样式' },
        tip: 'activeStyle | 按下时的样式覆盖',
      },
      propType: 'object',
      setter: 'StyleSetter',
    },
    {
      name: 'disabledStyle',
      title: {
        label: { type: 'i18n', 'en-US': 'Disabled Style', 'zh-CN': '禁用样式' },
        tip: 'disabledStyle | 禁用时的样式覆盖',
      },
      propType: 'object',
      setter: 'StyleSetter',
    },
    {
      name: 'clickable',
      title: {
        label: { type: 'i18n', 'en-US': 'Clickable', 'zh-CN': '可点击' },
        tip: 'clickable | 是否可点击（可聚焦并触发 onClick）',
      },
      propType: 'bool',
      defaultValue: true,
    },
    {
      name: 'disabled',
      title: {
        label: { type: 'i18n', 'en-US': 'Disabled', 'zh-CN': '禁用' },
        tip: 'disabled | 是否禁用',
      },
      propType: 'bool',
      defaultValue: false,
    },
  ],
  configure: {
    component: { isContainer: true },
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          template:
            "onClick(event,${extParams}){\n// 点击卡片时的回调\nconsole.log('onClick', event);}",
        },
      ],
    },
  },
};
