@ywfe/materials-design/lowcode/yw-tab/meta.ts

YwDesign for lowcode

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const YwTabMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwTab',
  title: 'YwTab',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '基础元素',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.8',
    exportName: 'YwTab',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: { label: '标签形态', tip: '选择需要显示的标签类型' },
        name: 'shape',
        description: '形态 ，默认pure',
        setter: {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                label: '普通选项卡',
                value: 'pure',
              },
              {
                label: '包裹型选项卡',
                value: 'wrapped',
              },
              {
                label: '胶囊型选项卡',
                value: 'capsule',
              },
            ],
          },
          initialValue: 'pure',
        },
      },
      {
        title: { label: '配置tab', tip: 'dataSource ｜ 标签配置项' },
        name: 'dataSource',
        description: 'tab项',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: { label: 'tab名称', tip: 'tab | 标签名称' },
                      name: 'tab',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                        initialValue: '',
                      },
                    },
                    {
                      title: { label: '标识', tip: 'key | 唯一标识' },
                      name: 'key',
                      setter: {
                        componentName: 'MixedSetter',
                        props: {
                          setters: [
                            {
                              componentName: 'StringSetter',
                              isRequired: false,
                              initialValue: '',
                            },
                            {
                              componentName: 'NumberSetter',
                              isRequired: false,
                              initialValue: 0,
                            },
                          ],
                        },
                        isRequired: true,
                      },
                    },
                    {
                      title: {
                        label: 'tab下面展示的内容',
                        tip: 'content | tab下面展示的内容',
                      },
                      name: 'content',
                      setter: [{
                        componentName: 'SlotSetter',
                        props: {
                          mode: 'node',
                        },
                        isRequired: false,
                        initialValue: {
                          type: 'JSSlot',
                          value: [],
                        },
                      }],
                    },
                    {
                      title: {
                        label: '展示红点',
                        tip: 'dot | 是否展示红点',
                      },
                      name: 'dot',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: false,
                        initialValue: true,
                      },
                    },
                    {
                      title: { label: '数量', tip: '右上角显示数量' },
                      name: 'count',
                      setter: {
                        componentName: 'NumberSetter',
                        isRequired: false,
                      },
                    },
                    {
                      title: { label: '是否显示', tip: '是否显示' },
                      name: 'visible',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: false,
                        initialValue: true,
                      },
                    },
                    // {
                    //   title: {
                    //     label: 'offset',
                    //   },
                    //   name: 'offset',
                    //   setter: {
                    //     componentName: 'MixedSetter',
                    //     props: {},
                    //   },
                    // },
                  ],
                  extraSetter: {
                    componentName: 'MixedSetter',
                    isRequired: false,
                    props: {},
                  },
                },
              },
            },
          },
          isRequired: true,
          initialValue: [],
        },
      },
      {
        title: {
          label: '切换tab执行函数',
          tip: 'onChange | 切换tab执行函数',
        },
        name: 'onChange',
        setter: {
          componentName: 'FunctionSetter',
        },
      },
      {
        title: {
          label: '当前选中tab',
          tip: 'activeKey | 当前选中的tab',
        },
        name: 'activeKey',
        setter: {
          componentName: 'StringSetter',
          isRequired: false,
          initialValue: undefined,
        },
      },
      {
        title: {
          label: '默认选中tab',
          tip: 'defaultActiveKey | 默认选中的tab',
        },
        name: 'defaultActiveKey',
        setter: {
          componentName: 'StringSetter',
          isRequired: false,
          initialValue: '',
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '页面标签',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/pageTab',
    schema: {
      componentName: 'YwTab',
      props: {
        style: {
          width: '100%',
        },
      },
    },
  },
];

export default {
  ...YwTabMeta,
  snippets,
};