import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; const DataVScrollTableTopMeta: IPublicTypeComponentMetadata = { componentName: 'DataVScrollTableTop', title: '高级轮播表top', docUrl: '', screenshot: '', devMode: 'proCode', group: '云仓大屏', category: '轮播表', npm: { package: '@ztocwst/datav-materials', version: '0.1.10', exportName: 'DataVScrollTableTop', main: 'src/index.tsx', destructuring: true, subName: '', }, configure: { props: [ { title: { label: { type: 'i18n', 'en-US': 'index', 'zh-CN': '显示行号', }, tip: 'index | 显示行号', }, name: 'index', description: '显示行号', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'dataIndex', 'zh-CN': '行号字段', }, }, name: 'dataIndex', setter: { componentName: 'StringSetter', }, }, { title: { label: { type: 'i18n', 'en-US': 'highlight number', 'zh-CN': '行号高亮前几', }, tip: 'highlight | 行号高亮前几', }, name: 'highlight', description: '高亮', setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 3, }, condition(target) { return target.parent.getPropValue('index'); }, }, { title: { label: { type: 'i18n', 'en-US': 'showHeader', 'zh-CN': '是否显示表头', }, tip: 'showHeader | 是否显示表头', }, name: 'showHeader', description: '是否显示表头', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'indexHeader', 'zh-CN': '行号表头，默认#', }, tip: 'indexHeader | 行号表头，默认#', }, name: 'indexHeader', description: '行号表头，默认#', setter: { componentName: 'I18nSetter', isRequired: false, initialValue: '#', }, }, { title: { label: { type: 'i18n', 'en-US': 'showIcon', 'zh-CN': '行号使用图标', }, tip: 'showIcon | 行号使用图标', }, name: 'showIcon', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'icons setting', 'zh-CN': '自定义索引图标', }, tip: 'icons | 自定义图标,按照顺序渲染,格式为字符串数组', }, name: 'icons', setter: { componentName: 'JsonSetter', }, condition(target) { return target.parent.getPropValue('showIcon'); }, }, { title: { label: { type: 'i18n', 'en-US': 'indexWidth', 'zh-CN': '行号宽度', }, tip: 'indexWidth | 行号宽度', }, name: 'indexWidth', description: '行号宽度', setter: { componentName: 'StringSetter', initialValue: '50px', }, }, { title: { label: { type: 'i18n', 'en-US': 'oddRowBGC', 'zh-CN': '奇数行背景色', }, tip: 'oddRowBGC | 奇数行背景色', }, name: 'oddRowBGC', description: '奇数行背景色', setter: { componentName: 'ColorSetter', isRequired: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'evenRowBGC', 'zh-CN': '偶数行背景色', }, tip: 'evenRowBGC | 偶数行背景色', }, name: 'evenRowBGC', description: '偶数行背景色', setter: { componentName: 'ColorSetter', isRequired: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'rowColor', 'zh-CN': '行字体颜色', }, tip: 'rowColor | 行字体颜色', }, name: 'rowColor', description: '行字体颜色', setter: { componentName: 'ColorSetter', isRequired: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'headerBGC', 'zh-CN': '表头背景色', }, tip: 'headerBGC | 表头背景色', }, name: 'headerBGC', description: '表头背景色', setter: { componentName: 'ColorSetter', isRequired: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'headerColor', 'zh-CN': '表头字体色', }, tip: 'headerColor | 表头字体色', }, name: 'headerColor', description: '表头字体色', setter: { componentName: 'ColorSetter', isRequired: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'size', 'zh-CN': '表格大小', }, tip: 'size | 表格大小', }, name: 'size', description: '表格大小', setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: '默认', value: 'default', }, { label: '中', value: 'middle', }, { label: '小', value: 'small', }, ], }, initialValue: 'default', }, }, { title: { label: { type: 'i18n', 'en-US': 'dataSource', 'zh-CN': '表数据', }, tip: 'dataSource | 表数据', }, name: 'dataSource', description: '表数据', setter: { componentName: 'JsonSetter', isRequired: true, initialValue: [], }, }, { title: { label: { type: 'i18n', 'en-US': 'top Number', 'zh-CN': 'top数量', }, tip: 'topNumber | top数量', }, name: 'topNumber', description: 'top数量', setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 5, }, }, { title: { label: { type: 'i18n', 'en-US': 'model', 'zh-CN': '展示数据模式', }, tip: 'model | 展示数据模式', }, name: 'model', description: '展示数据模式', setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: '默认', value: 'default', }, { label: '中部', value: 'center', }, ], }, initialValue: 'default', }, }, { title: { label: { type: 'i18n', 'en-US': 'expandOpen', 'zh-CN': '默认展开', }, tip: 'expandOpen | 默认展开', }, name: 'expandOpen', setter: { componentName: 'BoolSetter', initialValue: true, }, }, { title: { label: { type: 'i18n', 'en-US': 'autoOpenClose', 'zh-CN': '自动展开关闭', }, tip: 'autoOpenClose | 自动展开关闭', }, name: 'autoOpenClose', setter: { componentName: 'BoolSetter', initialValue: true, }, }, { title: { label: { type: 'i18n', 'en-US': 'onRowClick', 'zh-CN': '行点击事件', }, tip: 'onRowClick | 行点击事件', }, name: 'onRowClick', description: '行点击事件', setter: { componentName: 'FunctionSetter', isRequired: false, props: { template: `onRowClick(record,i){\n\n}`, }, }, }, { title: { label: { type: 'i18n', 'en-US': 'rowSelectStyle', 'zh-CN': '行选中样式', }, }, name: 'rowSelectStyle', setter: ['JsonSetter', 'FunctionSetter'], }, { title: { label: { type: 'i18n', 'en-US': 'rowStyle', 'zh-CN': '行样式', }, }, name: 'rowStyle', setter: ['JsonSetter', 'FunctionSetter'], }, { title: { label: { type: 'i18n', 'en-US': 'columns', 'zh-CN': '表格列配置', }, tip: 'columns | 表格列配置', }, name: 'columns', display: 'accordion', description: '表格列配置', setter: { componentName: 'ArraySetter', props: { itemSetter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: { type: 'i18n', 'en-US': 'title', 'zh-CN': '列标题', }, }, name: 'title', setter: { isRequired: true, componentName: 'MixedSetter', props: { setters: [ { isRequired: true, componentName: 'I18nSetter', }, { isRequired: true, componentName: 'SlotSetter', }, ], }, }, }, { title: { label: { type: 'i18n', 'en-US': 'dataIndex', 'zh-CN': '数据字段', }, }, name: 'dataIndex', setter: { componentName: 'StringSetter', isRequired: true, }, }, { title: { label: { type: 'i18n', 'en-US': 'React Key', 'zh-CN': 'React Key', }, }, name: 'key', setter: { componentName: 'MixedSetter', props: { setters: [ { componentName: 'StringSetter', isRequired: false, initialValue: '', }, { componentName: 'NumberSetter', isRequired: false, initialValue: 0, }, ], }, }, }, { title: { label: { type: 'i18n', 'en-US': 'width', 'zh-CN': '宽度', }, }, name: 'width', setter: { componentName: 'StringSetter', isRequired: false, }, }, { title: { label: { type: 'i18n', 'en-US': 'align', 'zh-CN': '对齐方式', }, }, name: 'align', setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: 'center', value: 'center', }, { label: 'left', value: 'left', }, { label: 'right', value: 'right', }, ], }, initialValue: 'left', }, }, { title: { label: { type: 'i18n', 'en-US': 'expandDataIndex', 'zh-CN': '展开字段', }, }, name: 'expandDataIndex', setter: { componentName: 'StringSetter', }, }, { title: { label: { type: 'i18n', 'en-US': 'expandExtra', 'zh-CN': '展开扩展', }, }, name: 'expandExtra', setter: { componentName: 'SlotSetter', props: { mode: 'node', }, initialValue: { type: 'JSSlot', value: [], params: ['icon', 'open'], }, }, }, { title: { label: { type: 'i18n', 'en-US': 'render', 'zh-CN': '自定义渲染', }, }, name: 'render', setter: { componentName: 'SlotSetter', props: { mode: 'node', }, initialValue: { type: 'JSSlot', value: [], params: ['text', 'record', 'index', 'level'], }, }, }, ], extraSetter: { componentName: 'MixedSetter', isRequired: false, props: {}, }, }, }, }, }, isRequired: true, initialValue: [], }, }, { title: { label: { type: 'i18n', 'en-US': 'carouselConfig', 'zh-CN': '滚动相关配置', }, tip: 'carouselConfig | 滚动相关配置', }, name: 'scrollConfig', display: 'accordion', description: '滚动相关配置', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: { type: 'i18n', 'en-US': 'autoplay', 'zh-CN': '自动滚动', }, }, name: 'autoplay', setter: { componentName: 'BoolSetter', initialValue: true, }, }, { title: { label: { type: 'i18n', 'en-US': 'slidesToShow', 'zh-CN': '滚动步长', }, }, name: 'step', setter: { componentName: 'NumberSetter', initialValue: 1, props: { min: 1, precision: 0, }, }, }, { title: { label: { type: 'i18n', 'en-US': 'autoplaySpeed', 'zh-CN': '滚动延迟', }, tip: 'autoplaySpeed | 滚动延迟，默认 3000', }, name: 'autoplaySpeed', setter: { componentName: 'NumberSetter', initialValue: 3000, props: { min: 1, precision: 0, }, }, }, ], extraSetter: { componentName: 'MixedSetter', isRequired: false, props: {}, }, }, }, isRequired: true, }, }, ], supports: { style: true, }, component: {}, }, }; const snippets: IPublicTypeSnippet[] = [ { title: '高级轮播表top', screenshot: 'https://files.ztocwst.com/download/5201dc4e333c44798385252372d3ef81?isShow=true', schema: { componentName: 'DataVScrollTableTop', props: { dataSource: [ { key: `000`, index: 0, name: '胡彦祖000', age: 0, address: '西湖区湖底公园000号', children: [ { key: `000-000`, index: 0, name: '胡彦祖000-000', age: `0`, address: '西湖区湖底公园000-000号', }, { key: `000-111`, index: 1, name: '胡彦祖000-111', age: 1, address: '西湖区湖底公园000-111号', } ] }, { key: `111`, index: 1, name: '胡彦祖111', age: 111, address: '西湖区湖底公园111号', }, { key: `222`, index: 2, name: '胡彦斌222', age: 222, address: '西湖区湖底公园222号', children: [ { key: `222-000`, index: 0, name: '胡彦祖222-000', age: `0`, address: '西湖区湖底公园222-000号', }, { key: `222-111`, index: 1, name: '胡彦祖222-111', age: 1, address: '西湖区湖底公园222-111号', } ] }, { key: `333`, index: 3, name: '胡彦祖333', age: 333, address: '西湖区湖底公园333号', }, { key: `444`, index: 4, name: '胡彦祖444', age: 444, address: '西湖区湖底公园444号', }, { key: `555`, index: 5, name: '胡彦祖555', age: 555, address: '西湖区湖底公园555号', }, { key: `666`, index: 6, name: '胡彦祖666', age: 666, address: '西湖区湖底公园666号', }, ], columns: [ { dataIndex: 'name', expandDataIndex: 'name', // expandExtra: (Dom, open) => { // return Dom // }, align: 'left', key: 'name', title: '姓名', }, { dataIndex: 'age', align: 'left', key: 'age', title: '年龄', width: `100px`, }, { dataIndex: 'address', align: 'left', key: 'address', title: '地址', }, ], size: 'small', index: true, dataIndex: 'index', highlight: 0, indexWidth: `50px`, topNumber: 5, showIcon: false, showHeader: true, expandOpen: true, autoOpenClose: true, scrollConfig: { step: 1, autoplaySpeed: 3000, }, rowSelectStyle: { color: 'red' }, // rowStyle: (...args) => { // console.log(...args) // return {} // }, style:{ height: '240px' } }, }, }, ]; export default { ...DataVScrollTableTopMeta, snippets, };