Skip to content

Commit

Permalink
feat(yunti-ui): add MonacoEditor
Browse files Browse the repository at this point in the history
  • Loading branch information
Carrotzpc committed Jan 11, 2024
1 parent 6d38c6b commit b080afb
Show file tree
Hide file tree
Showing 9 changed files with 401 additions and 93 deletions.
12 changes: 10 additions & 2 deletions packages/yunti-ui-lowcode-materials/.fatherrc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,16 @@ import { IS_DEV } from '../../constants';
const library = 'YuntiUiLowcode';

const externals = {
react: 'var window.React',
lodash: 'var window._',
'react': 'var window.React',
'lodash': 'var window._',
// @todo: 增加以下 externals 避免 'VERSION_PLACEHOLDER is not defined' 错误
'@alifd/next': 'var window.Next',
'@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
'@alilc/lowcode-editor-core': 'var window.AliLowCodeEngine.common.editorCabin',
'@alilc/lowcode-editor-skeleton': 'var window.AliLowCodeEngine.common.skeletonCabin',
'@alilc/lowcode-designer': 'var window.AliLowCodeEngine.common.designerCabin',
'@alilc/lowcode-engine-ext': 'var window.AliLowCodeEngineExt',
'@ali/lowcode-engine': 'var window.AliLowCodeEngine',
};

const output = IS_DEV
Expand Down
6 changes: 3 additions & 3 deletions packages/yunti-ui-lowcode-materials/demo/assets.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"url": "/lowcode-materials-public/yunti-ui-lowcode-materials/dist/umd/meta.min.js",
"version": "0.1.0",
"reference": {
"id": "@yunti/yunti-ui-lowcode-materials",
"id": "@yunti/ui-lowcode-materials",
"version": "0.1.0"
},
"exportName": "YuntiUiLowcodeMeta"
Expand Down Expand Up @@ -74,11 +74,11 @@
"editUrls": null
},
{
"id": "@yunti/yunti-ui-lowcode-materials",
"id": "@yunti/ui-lowcode-materials",
"meta": {},
"urls": ["/lowcode-materials-public/yunti-ui-lowcode-materials/dist/umd/index.min.js"],
"library": "YuntiUiLowcode",
"package": "@yunti/yunti-ui-lowcode-materials",
"package": "@yunti/ui-lowcode-materials",
"version": "0.1.0",
"editUrls": ["/lowcode-materials-public/yunti-ui-lowcode-materials/dist/umd/view.min.js"]
}
Expand Down
235 changes: 235 additions & 0 deletions packages/yunti-ui-lowcode-materials/lowcode/MonacoEditor/meta.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
import { IPublicTypeComponentMetadata, IPublicTypeConfigure } from '@alilc/lowcode-types';

import { Setters } from '../../../shared/src';
import { COMMON_CONFIGURE_PROPS, getPriority } from '../utils';
import { MonacoDiffEditorSnippets, MonacoEditorSnippets } from './snippets';

export const MonacoEditorMeta: IPublicTypeComponentMetadata = {
title: 'MonacoEditor',
componentName: 'MonacoEditor',
category: '数据展示',
snippets: MonacoEditorSnippets,
priority: getPriority('MonacoEditor'),
devMode: 'proCode',
npm: {
package: '@yunti/ui-lowcode-materials',
version: '{{version}}',
exportName: 'MonacoEditor',
destructuring: true,
subName: '',
},
configure: {
props: [
...COMMON_CONFIGURE_PROPS,
{
title: '常用配置',
display: 'block',
type: 'group',
items: [
{
name: 'language',
title: {
label: '语言',
},
defaultValue: 'javascript',
setter: Setters.StringSetter,
},
{
name: 'width',
title: {
label: '宽度',
},
defaultValue: '100%',
setter: Setters.StringSetter,
},
{
name: 'height',
title: {
label: '高度',
},
defaultValue: '100%',
setter: Setters.StringSetter,
},
{
name: 'theme',
title: {
label: '主题',
},
defaultValue: 'vs',
setter: {
...Setters.RadioGroupSetter,
props: {
options: ['vs', 'vs-dark', 'hc-light', 'hc-black'],
},
},
},
{
name: 'lineNumbers',
title: {
label: '行号',
tip: '行号展示方式',
},
defaultValue: 'on',
setter: {
...Setters.RadioGroupSetter,
props: {
options: ['on', 'off', 'relative', 'interval'],
},
},
},
{
name: 'wordWrap',
title: {
label: '换行',
tip: '是否开启自动换行',
},
defaultValue: 'off',
setter: {
...Setters.RadioGroupSetter,
props: {
options: ['on', 'off', 'wordWrapColumn', 'bounded'],
},
},
},
{
name: 'inlineView',
title: {
label: '单列布局',
tip: 'Render the differences in one editor. Defaults to off, render the differences in two side-by-side editors',
},
defaultValue: 'off',
setter: {
...Setters.RadioGroupSetter,
props: {
defaultValue: 'off',
options: ['on', 'off', 'auto'],
},
},
},
{
name: 'contextmenu',
title: {
label: '右键菜单',
tip: '是否开启右键菜单',
},
defaultValue: true,
setter: Setters.BoolSetter,
},
{
name: 'minimapEnabled',
title: {
label: '右侧预览',
tip: '是否启用右侧预览',
},
defaultValue: false,
setter: Setters.BoolSetter,
},
{
name: 'readOnly',
title: {
label: '只读',
tip: '内容是否只读',
},
defaultValue: false,
setter: Setters.BoolSetter,
},
],
},
{
title: '高级配置',
display: 'block',
type: 'group',
items: [
{
name: 'path',
title: {
label: '路径',
tip: 'path of the current model, useful when creating a multi-model editor',
},
setter: Setters.StringSetter,
},
{
name: 'version',
title: {
label: '版本',
},
defaultValue: '0.45.0',
setter: Setters.StringSetter,
},
{
name: 'options',
title: {
label: 'options',
},
setter: Setters.VariableSetter,
},
],
},
],
supports: {
loop: true,
condition: true,
style: true,
events: [
{
name: 'onChange',
description: '输入时触发',
template: `
onChange(input, event) {
console.log(input, event);
}
`,
},
{
name: 'editorWillMount',
description: 'editor 即将渲染时触发',
template: `
editorWillMount(monaco) {
console.log(monaco);
}
`,
},
{
name: 'editorDidMount',
description: 'editor 渲染完成后触发',
template: `
editorDidMount(editor, monaco) {
console.log(editor, monaco);
}
`,
},
{
name: 'editorWillUnmount',
description: 'editor 即将卸载时触发',
template: `
editorWillUnmount(editor, monaco) {
console.log(editor, monaco);
}
`,
},
],
},
},
};

export const MonacoDiffEditorMeta: IPublicTypeComponentMetadata = {
title: 'MonacoDiffEditor',
componentName: 'MonacoDiffEditor',
category: '数据展示',
snippets: MonacoDiffEditorSnippets,
priority: getPriority('MonacoDiffEditor'),
devMode: 'proCode',
npm: {
package: '@yunti/ui-lowcode-materials',
version: '{{version}}',
exportName: 'MonacoDiffEditor',
destructuring: true,
subName: '',
},
configure: {
props: [...(MonacoEditorMeta.configure as IPublicTypeConfigure)!.props!],
supports: {
...(MonacoEditorMeta.configure as IPublicTypeConfigure)!.supports,
},
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { IPublicTypeSnippet } from '@alilc/lowcode-types';

export const MonacoEditorSnippets: IPublicTypeSnippet[] = [
{
title: 'MonacoEditor',
screenshot: '',
schema: {
componentName: 'MonacoEditor',
props: {
__component_name: 'MonacoEditor',
language: 'json',
height: '200px',
defaultValue: `{
"version": "1.0.0",
"componentsMap": [
{
"package": "@yunti/ui-lowcode-materials",
"version": "1.0.0",
"exportName": "MonacoEditor",
"destructuring": true,
"subName": "",
"componentName": "MonacoEditor"
}
],
"componentsTree": [],
"i18n": {}
}`,
},
},
},
];

export const MonacoDiffEditorSnippets: IPublicTypeSnippet[] = [
{
title: 'MonacoDiffEditor',
screenshot: '',
schema: {
componentName: 'MonacoDiffEditor',
props: {
__component_name: 'MonacoDiffEditor',
language: 'json',
height: '200px',
original: `{
"version": "1.0.0",
"componentsMap": [
{
"package": "@yunti/ui-lowcode-materials",
"version": "1.0.0",
"exportName": "MonacoDiffEditor",
"destructuring": true,
"subName": "",
"componentName": "MonacoDiffEditor"
}
],
"componentsTree": [],
"i18n": {}
}`,
value: `{
"version": "1.0.0",
"componentsMap": [
{
"package": "@yunti/ui-lowcode-materials",
"version": "1.1.0",
"exportName": "MonacoDiffEditor",
"destructuring": true,
"subName": "",
"componentName": "MonacoDiffEditor"
}
],
"componentsTree": [],
"i18n": {}
}`,
},
},
},
];
Loading

0 comments on commit b080afb

Please sign in to comment.