import snippets from "./snippets";

export default {
  snippets,
  componentName: "ClassicLayout",
  title: "layout布局组件",
  category: "布局",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "ClassicLayout",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: "className",
      title: { label: "容器 className", tip: "容器 className" },
      setter: "StringSetter",
    },
    {
      name: "fixedHeader",
      title: { label: "固定顶部", tip: "是否固定顶部｜fixedHeader" },
      setter: "BoolSetter",
    },
    {
      name: "fixedFooter",
      title: { label: "固定底部", tip: "是否固定底部｜fixedFooter" },
      setter: "BoolSetter",
    },
    {
      name: "header",
      title: {
        label: "顶部渲染函数",
        tip: "顶部渲染函数 ｜header",
      },
      propType: "func",
      setter: [
        {
          componentName: "SlotSetter",
          title: "顶部渲染函数插槽",
        },
        {
          componentName: "FunctionSetter",
          props: {
            template: "header(){\n// 自定义渲染顶部\nreturn `Header`;\n}",
          },
        },
        "VariableSetter",
      ],
    },
    {
      name: "content",
      title: {
        label: "内容渲染函数",
        tip: "内容渲染函数 ｜content",
      },
      propType: "func",
      setter: [
        {
          componentName: "SlotSetter",
          title: "内容渲染插槽",
        },
        {
          componentName: "FunctionSetter",
          props: {
            template: "content(){\n// 自定义渲染内容\nreturn `Content`;\n}",
          },
        },
        "VariableSetter",
      ],
    },
    {
      name: "footer",
      title: {
        label: "底部渲染函数",
        tip: "底部渲染函数 ｜footer",
      },
      propType: "func",
      setter: [
        {
          componentName: "SlotSetter",
          title: "底部函数插槽",
          initialValue: {
            type: "JSSlot",
            value: [],
          },
        },
        {
          componentName: "FunctionSetter",
          props: {
            template: "footer(){\n// 自定义渲染底部\nreturn `Footer`;\n}",
          },
        },
        "VariableSetter",
      ],
    },
  ],
  configure: {
    component: {
      // isContainer: true,
      // nestingRule: {
      //   childWhitelist: [],
      //   parentWhitelist: [],
      // },
    },
    supports: {
      style: true,
      events: [
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
        },
      ],
    },
  },
};