import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; /** * PisellBasicGrid 组件元数据 * @description 基于 Flexbox 的基础布局组件，用于控制循环型数据组件的排列方式 */ const PisellBasicGridMeta: IPublicTypeComponentMetadata = { componentName: 'PisellBasicGrid', title: '基础布局', category: '布局', group: '原子组件', docUrl: '', screenshot: '', devMode: 'proCode', npm: { package: '@pisell/materials', version: '1.0.3', exportName: 'PisellBasicGrid', main: 'src/index.tsx', destructuring: true, subName: '', }, configure: { props: [ { title: { label: { type: 'i18n', 'en-US': 'Layout', 'zh-CN': '布局', }, }, display: 'block', type: 'group', items: [ { name: 'direction', title: { label: { type: 'i18n', 'en-US': 'Direction', 'zh-CN': '排列方向', }, tip: 'direction | 控制子元素的排列方向', }, propType: { type: 'oneOf', value: ['horizontal', 'horizontal-reverse', 'vertical', 'vertical-reverse'], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: '横向排列', value: 'horizontal' }, { title: '横向反向', value: 'horizontal-reverse' }, { title: '竖向排列', value: 'vertical' }, { title: '竖向反向', value: 'vertical-reverse' }, ], }, }, 'VariableSetter', ], defaultValue: 'horizontal', }, { name: 'wrap', title: { label: { type: 'i18n', 'en-US': 'Wrap', 'zh-CN': '换行控制', }, tip: 'wrap | 控制子元素是否换行', }, propType: { type: 'oneOf', value: ['nowrap', 'wrap', 'wrap-reverse'], }, setter: [ { componentName: 'RadioGroupSetter', props: { options: [ { title: '不换行', value: 'nowrap' }, { title: '换行', value: 'wrap' }, { title: '反向换行', value: 'wrap-reverse' }, ], }, }, 'VariableSetter', ], defaultValue: 'nowrap', }, { name: 'columns', title: { label: { type: 'i18n', 'en-US': 'Columns', 'zh-CN': '一行几个', }, tip: 'columns | 一行显示的元素个数，会自动计算宽度', }, propType: 'number', setter: [ { componentName: 'NumberSetter', props: { min: 1, max: 24, }, }, 'VariableSetter', ], }, { name: 'equalWidth', title: { label: { type: 'i18n', 'en-US': 'Equal Width', 'zh-CN': '等分宽度', }, tip: 'equalWidth | 子元素是否等分容器宽度', }, propType: 'bool', setter: ['BoolSetter', 'VariableSetter'], defaultValue: false, }, ], }, { title: { label: { type: 'i18n', 'en-US': 'Spacing', 'zh-CN': '间距', }, }, display: 'block', type: 'group', items: [ { name: 'gap', title: { label: { type: 'i18n', 'en-US': 'Gap', 'zh-CN': '统一间距', }, tip: 'gap | 统一设置行列间距', }, propType: { type: 'oneOfType', value: ['number', 'string'], }, setter: [ { componentName: 'NumberSetter', props: { min: 0, }, }, 'StringSetter', 'VariableSetter', ], }, { name: 'rowGap', title: { label: { type: 'i18n', 'en-US': 'Row Gap', 'zh-CN': '行间距', }, tip: 'rowGap | 行间距，优先级高于 gap', }, propType: { type: 'oneOfType', value: ['number', 'string'], }, setter: [ { componentName: 'NumberSetter', props: { min: 0, }, }, 'StringSetter', 'VariableSetter', ], }, { name: 'columnGap', title: { label: { type: 'i18n', 'en-US': 'Column Gap', 'zh-CN': '列间距', }, tip: 'columnGap | 列间距，优先级高于 gap', }, propType: { type: 'oneOfType', value: ['number', 'string'], }, setter: [ { componentName: 'NumberSetter', props: { min: 0, }, }, 'StringSetter', 'VariableSetter', ], }, ], }, { title: { label: { type: 'i18n', 'en-US': 'Alignment', 'zh-CN': '对齐', }, }, display: 'block', type: 'group', items: [ { name: 'justify', title: { label: { type: 'i18n', 'en-US': 'Justify', 'zh-CN': '主轴对齐', }, tip: 'justify | 控制子元素在主轴上的对齐方式', }, propType: { type: 'oneOf', value: ['start', 'end', 'center', 'between', 'around', 'evenly'], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: '起始对齐', value: 'start' }, { title: '末尾对齐', value: 'end' }, { title: '居中对齐', value: 'center' }, { title: '两端对齐', value: 'between' }, { title: '等间距', value: 'around' }, { title: '均匀分布', value: 'evenly' }, ], }, }, 'VariableSetter', ], defaultValue: 'start', }, { name: 'align', title: { label: { type: 'i18n', 'en-US': 'Align', 'zh-CN': '交叉轴对齐', }, tip: 'align | 控制子元素在交叉轴上的对齐方式', }, propType: { type: 'oneOf', value: ['start', 'end', 'center', 'stretch', 'baseline'], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: '顶部对齐', value: 'start' }, { title: '底部对齐', value: 'end' }, { title: '居中对齐', value: 'center' }, { title: '拉伸填充', value: 'stretch' }, { title: '基线对齐', value: 'baseline' }, ], }, }, 'VariableSetter', ], defaultValue: 'stretch', }, { name: 'alignContent', title: { label: { type: 'i18n', 'en-US': 'Align Content', 'zh-CN': '多行对齐', }, tip: 'alignContent | 当存在多行时，控制行与行之间的对齐方式', }, propType: { type: 'oneOf', value: ['start', 'end', 'center', 'between', 'around', 'stretch'], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: '顶部对齐', value: 'start' }, { title: '底部对齐', value: 'end' }, { title: '居中对齐', value: 'center' }, { title: '两端对齐', value: 'between' }, { title: '等间距', value: 'around' }, { title: '拉伸填充', value: 'stretch' }, ], }, }, 'VariableSetter', ], defaultValue: 'stretch', }, ], }, { title: { label: { type: 'i18n', 'en-US': 'Data Source', 'zh-CN': '数据源', }, }, display: 'block', type: 'group', items: [ { name: 'dataSource', title: { label: { type: 'i18n', 'en-US': 'Data Source', 'zh-CN': '数据源', }, tip: 'dataSource | 数据源数组，传入后组件内部自动循环渲染', }, propType: 'array', setter: ['JsonSetter', 'VariableSetter'], }, { name: 'renderItem', title: { label: { type: 'i18n', 'en-US': 'Render Item', 'zh-CN': '渲染函数', }, tip: 'renderItem | 自定义每个数据项的渲染内容', }, propType: 'func', setter: [ { componentName: 'SlotSetter', title: '渲染插槽', initialValue: { type: 'JSSlot', params: ['item', 'index'], value: [], }, }, { componentName: 'FunctionSetter', props: { template: 'renderItem(item, index, ${extParams}) {\n // 自定义渲染逻辑\n return null;\n}', }, }, 'VariableSetter', ], }, { name: 'rowKey', title: { label: { type: 'i18n', 'en-US': 'Row Key', 'zh-CN': '唯一标识', }, tip: 'rowKey | 指定每项的唯一 key，可以是字符串或函数', }, propType: { type: 'oneOfType', value: ['string', 'func'], }, setter: [ 'StringSetter', { componentName: 'FunctionSetter', props: { template: 'rowKey(item, index, ${extParams}) {\n // 返回唯一 key\n return item.id;\n}', }, }, 'VariableSetter', ], }, ], }, { title: { label: { type: 'i18n', 'en-US': 'Style', 'zh-CN': '样式', }, }, display: 'block', type: 'group', items: [ { name: 'className', title: { label: { type: 'i18n', 'en-US': 'Class Name', 'zh-CN': '类名', }, tip: 'className | 自定义类名', }, propType: 'string', setter: ['StringSetter', 'VariableSetter'], }, { name: 'style', title: { label: { type: 'i18n', 'en-US': 'Style', 'zh-CN': '样式', }, tip: 'style | 自定义样式', }, propType: 'object', setter: 'StyleSetter', }, ], }, ], component: { isContainer: true, }, supports: { style: true, className: true, }, }, }; /** * 组件片段配置 * @description 用于在组件面板中展示的预设配置 */ const snippets: IPublicTypeSnippet[] = [ { title: '基础布局', screenshot: '', schema: { componentName: 'PisellBasicGrid', props: { direction: 'horizontal', wrap: 'wrap', gap: 16, }, }, }, { title: '一行四个', screenshot: '', schema: { componentName: 'PisellBasicGrid', props: { direction: 'horizontal', wrap: 'wrap', columns: 4, gap: 16, }, }, }, { title: '等分布局', screenshot: '', schema: { componentName: 'PisellBasicGrid', props: { direction: 'horizontal', equalWidth: true, gap: 12, }, }, }, { title: '竖向布局', screenshot: '', schema: { componentName: 'PisellBasicGrid', props: { direction: 'vertical', gap: 16, }, }, }, ]; export default { ...PisellBasicGridMeta, snippets, };