oadp-material

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; const OadpTabMeta: IPublicTypeComponentMetadata = { "componentName": "OadpTab", "title": "选项卡", "docUrl": "", "category": "高级组件", "group": "低代码组件", "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01mh9LPG268B90t8DaA_!!6000000007616-55-tps-56-56.svg", "devMode": "proCode", "npm": { "package": "oadp-material", "version": "{{version}}", "exportName": "OadpTab", "main": "src/index.tsx", "destructuring": true, "subName": "" }, "configure": { "props": [ { "name": "DataSetting", "title": "数据设置", "type": "group", "display": "block", "items": [ { "name": "name", "title": { "label": { "type": "i18n", "zh_CN": "表单标识", "en_US": "Name", }, "tip": { "type": "i18n", "zh_CN": "属性: name | 说明: 表单标识", "en_US": "prop: name | description: switch name", }, }, "setter": "StringSetter", "supportVariable": false, }, { "name": "id", "title": { "label": { "type": "i18n", "zh_CN": "唯一标识", "en_US": "ID", }, "tip": { "type": "i18n", "zh_CN": "属性: id | 说明: 唯一标识", "en_US": "prop: id | description: switch id", }, }, "setter": "StringSetter" }, { "name": "items", "title": "选项", "setter": { "componentName": "ArraySetter", "props": { "itemSetter": { "componentName": "ObjectSetter", "props": { "config": { "items": [ { "name": "title", "title": "名称", "defaultValue": "选项", "important": true, "setter": "StringSetter", }, { "name": "primaryKey", "title": "项目编号", "condition": () => false, "setter": "StringSetter", }, { "name": "closeable", "title": "可关闭", "initialValue": false, "setter": "BoolSetter", }, { "name": "disabled", "title": "是否禁用", "initialValue": false, "setter": "BoolSetter", }, ], }, }, "initialValue": () => { return { "primaryKey": String(Math.floor(Math.random() * 10000)), "title": "选项", "closeable": false, "disabled": false, }; }, }, }, }, "extraProps": { getValue(target) { const map = target.node.children.map((child) => { const primaryKey = child.getPropValue('primaryKey') ? String(child.getPropValue('primaryKey')) : child.id; return { primaryKey, title: child.getPropValue('title') || '标签项', closeable: child.getPropValue('closeable'), disabled: child.getPropValue('disabled'), }; }); return map; }, setValue(target, value) { const { node } = target; const map = {}; if (!Array.isArray(value)) { value = []; } value.forEach((item) => { const tabitem = Object.assign({}, item); map[item.primaryKey] = tabitem; }); node.children.mergeChildren( (child) => { const primaryKey = String(child.getPropValue('primaryKey')); if (Object.hasOwnProperty.call(map, primaryKey)) { child.setPropValue('title', map[primaryKey].title); child.setPropValue('closeable', map[primaryKey].closeable); child.setPropValue('disabled', map[primaryKey].disabled); delete map[primaryKey]; return false; } return true; }, () => { const items = []; for (const primaryKey in map) { if (Object.hasOwnProperty.call(map, primaryKey)) { items.push({ "componentName": "OadpTabItem", "props": map[primaryKey], }); } } return items; }, (child1, child2) => { const a = value.findIndex( (item) => String(item.primaryKey) === String(child1.getPropValue('primaryKey')), ); const b = value.findIndex( (item) => String(item.primaryKey) === String(child2.getPropValue('primaryKey')), ); return a - b; }, ); }, }, }, ] }, { "name": "DisplaySetting", "title": "显示设置", "type": "group", "display": "block", "items": [ { "name": "size", "title": { "label": { "type": "i18n", "en-US": "Size", "zh-CN": "尺寸模式" }, "tip": { "type": "i18n", "zh_CN": "属性: size | 说明: 尺寸模式，可选值:small=紧凑模式, medium=普通模式。默认为:medium。", "en_US": "prop: size | description: Size mode, optional values: small=compact mode, medium=normal mode. The default is: medium.", }, }, "description": "属性: size | 说明: 尺寸模式，可选值:small=紧凑模式, medium=普通模式。默认为:medium。", "setter": { "componentName": "RadioGroupSetter", "props": { "dataSource": [ { "label": "普通模式", "value": "medium" }, { "label": "紧凑模式", "value": "small" }, ], "options": [ { "label": "普通模式", "value": "medium" }, { "label": "紧凑模式", "value": "small" }, ] }, "initialValue": "medium" } }, { "name": "shape", "title": { "label": { "type": "i18n", "en-US": "Shape", "zh-CN": "外观形态" }, "tip": { "type": "i18n", "zh_CN": "属性: shape | 说明: 外观形态，可选值:pure=普通模式, wrapped=包裹模式, text=文本模式, capsule=胶囊模式。默认为:pure。", "en_US": "prop: shape | description: shape mode, optional values: pure=normal mode, wrapped=package mode, text=text mode, capsule=capsule mode. Default: pure.", }, }, "description": "属性: mode | 说明: 外观形态，可选值:pure=普通模式, wrapped=包裹模式, text=文本模式, capsule=胶囊模式。默认为:pure。", "setter": { "componentName": "RadioGroupSetter", "props": { "dataSource": [ { "label": "普通模式", "value": "pure" }, { "label": "包裹模式", "value": "wrapped" }, { "label": "文本模式", "value": "text" }, { "label": "胶囊模式", "value": "capsule" } ], "options": [ { "label": "普通模式", "value": "pure" }, { "label": "包裹模式", "value": "wrapped" }, { "label": "文本模式", "value": "text" }, { "label": "胶囊模式", "value": "capsule" } ] }, "initialValue": "pure" } }, ] }, { "name": "InteractionSetting", "title": "交互设置", "type": "group", "display": "block", "items": [ { "name": "excessMode", "title": { "label": { "type": "i18n", "en-US": "Excess Mode", "zh-CN": "展示更多" }, "tip": { "type": "i18n", "zh_CN": "属性: excessMode | 说明: 展示更多，选项卡过多时的滑动模式，可选值:slide=滑动模式, dropdown=下拉模式。默认为:slide。", "en_US": "prop: excessMode | description: Display more, sliding mode with too many tabs, optional values: slide=sliding mode, dropout=drop-down mode. Default is: slide.", }, }, "description": "属性: size | 说明: 展示更多，选项卡过多时的滑动模式，可选值:slide=滑动模式, dropdown=下拉模式。默认为:slide。", "setter": { "componentName": "RadioGroupSetter", "props": { "dataSource": [ { "label": "滑动模式", "value": "slide" }, { "label": "下拉模式", "value": "dropdown" } ], "options": [ { "label": "滑动模式", "value": "slide" }, { "label": "下拉模式", "value": "dropdown" } ] }, "initialValue": "slide" } }, ] }, ], "supports": { "style": true }, "component": { "isContainer": true, "nestingRule": { "childWhitelist": ["OadpTabItem"], }, } } }; const snippets: IPublicTypeSnippet[] = [ { "title": "选项卡", "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01mh9LPG268B90t8DaA_!!6000000007616-55-tps-56-56.svg", "schema": { "componentName": "OadpTab", "props": { "shape": "pure", "size": "medium", "excessMode": "slide", }, "children": [ { "componentName": "OadpTabItem", "props": { "title": '选项1', "primaryKey": 'tab-item-1', }, }, { "componentName": "OadpTabItem", "props": { "title": '选项2', "primaryKey": 'tab-item-2', }, }, ], }, } ]; export default { ...OadpTabMeta, snippets };