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

YwDesign for lowcode

import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types';
import { getRefConfig, uuid } from '../_utils';
import { FormItemsProps, IPublicTypeSnippetMore } from '../_base';

const refConfig = getRefConfig('filter');
const YwFilterMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwFilter',
  title: 'YwFilter',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '页面模块',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.1.0',
    exportName: 'YwFilter',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // ...FormSchemaProps,
      refConfig,
      {
        title: '筛选配置',
        display: 'accordion',
        type: 'group',
        items: [
          {
            title: {
              label: '最多展示列',
              tip: 'maxColumns | 最多展示列',
            },
            name: 'maxColumns',
            description: '最多展示列',
            supportVariable: false,
            setter: {
              componentName: 'NumberSetter',
              isRequired: true,
              initialValue: 3,
            },
          },
          {
            title: {
              label: '表单项宽度',
              tip: 'itemWidth | 表单项宽度',
            },
            name: 'itemWidth',
            description: '表单项宽度',
            supportVariable: false,
            setter: {
              componentName: 'NumberSetter',
              isRequired: true,
              initialValue: 328,
            },
          },
          {
            title: {
              label: '查询按钮',
              tip: 'hasSearchBtn | 查询按钮',
            },
            name: 'hasSearchBtn',
            description: '是否有查询按钮',
            supportVariable: false,
            setter: {
              componentName: 'BoolSetter',
              initialValue: true,
            },
          },
          {
            title: {
              label: '默认查询条件',
              tip: 'initialValues | 默认查询条件',
            },
            display: 'inline',
            name: 'initialValues',
            description: '默认查询条件',
            supportVariable: false,
            setter: {
              componentName: 'JsonSetter',
              isRequired: false,
              initialValue: {},
            },
          },
          {
            title: {
              label: '条件缓存',
              tip: 'cache | 条件缓存',
            },
            name: 'cache',
            description: '条件缓存',
            setter: {
              componentName: 'JsonSetter',
              isRequired: false,
              initialValue: {},
            },
            // 有点问题 暂时关闭
            condition: () => false,
          },
          // {
          //   title: {
          //     label: 'form creat',
          //     tip: 'onCreate | form create',
          //   },
          //   name: 'onCreate',
          //   description: 'form create',
          //   setter: {
          //     componentName: 'FunctionSetter',
          //   },
          // },
          {
            title: {
              label: '查询事件',
              tip: 'onSubmit | 查询事件',
            },
            name: 'onSubmit',
            description: '查询按钮事件配置',
            supportVariable: false,
            defaultValue: () => ({
              type: 'JSFunction',
              schema: {
                title: 'onSubmit',
                type: 'JSFunction',
                async: false,
                properties: {
                  input: {
                    type: 'object',
                    properties: {
                      values: {
                        type: 'string',
                        defaultValue: {},
                      },
                    },
                    required: ['values'],
                  },
                  body: {
                    type: 'array',
                    items: [
                      {
                        type: 'Function',
                        properties: {
                          template: 'SetStateFunction',
                          extraProps: {
                            state: 'filterProps',
                            value: '{{values}}',
                          },
                        },
                      },
                    ],
                  },
                },
                required: ['input', 'body'],
              },
            }),
            setter: {
              componentName: 'SchemaFunctionSetter',
            },
          },
          // {
          //   title: {
          //     label: '重置筛选',
          //     tip: 'onReset | 重置筛选',
          //   },
          //   name: 'onReset',
          //   description: '重置筛选',
          //   setter: {
          //     componentName: 'FunctionSetter',
          //   },
          // },
          {
            title: {
              label: '表单值变化',
              tip: 'onValueChange | 表单值变化',
            },
            name: 'onValueChange',
            description: '表单值变化',
            setter: {
              componentName: 'FunctionSetter',
            },
            // 暂时隐藏
            condition: () => false,
          },
        ],
      },

      FormItemsProps,
    ],
    supports: {
      style: true,
      events: ['onCreate', 'onValueChange', 'onSubmit', 'onReset'],
      loop: false,
    },
    component: {
      isContainer: false,
    },
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '筛选器',
    svgId: 'icon-shaixuanqi',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/filters',
    schema: {
      componentName: 'YwFilter',
      props: {
        labelInset: true,
        // initialValues: {},
        items: [
          {
            component: 'Input',
            primaryKey: `input_${uuid()}`,
            label: '表单项',
            size: 'medium',
            title: '表单项',
            name: `input_${uuid()}`,
          },
        ],
      },
    },
  },
];

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