diff --git a/.gitignore b/.gitignore index 2f87724cb..dc6504d08 100644 --- a/.gitignore +++ b/.gitignore @@ -36,6 +36,7 @@ lib-cov # Coverage directory used by tools like istanbul coverage +coverage-all # nyc test coverage .nyc_output diff --git a/packages/designer/jest.config.js b/packages/designer/jest.config.js index 807f8eceb..43bea9064 100644 --- a/packages/designer/jest.config.js +++ b/packages/designer/jest.config.js @@ -10,7 +10,7 @@ const jestConfig = { // // '^.+\\.(js|jsx)$': 'babel-jest', // }, // testMatch: ['**/document/node/node.test.ts'], - // testMatch: ['**/designer/builtin-hotkey.test.ts'], + // testMatch: ['**/component-meta.test.ts'], // testMatch: ['**/plugin/plugin-manager.test.ts'], // testMatch: ['(/tests?/.*(test))\\.[jt]s$'], transformIgnorePatterns: [ diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 0484c0b96..3ca04f809 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -13,7 +13,7 @@ import { LiveTextEditingConfig, FieldConfig, } from '@alilc/lowcode-types'; -import { deprecate } from '@alilc/lowcode-utils'; +import { deprecate, isRegExp } from '@alilc/lowcode-utils'; import { computed, engineConfig } from '@alilc/lowcode-editor-core'; import EventEmitter from 'events'; import { componentDefaults, legacyIssues } from './transducers'; @@ -31,7 +31,7 @@ import { IconHidden, } from './icons'; -function ensureAList(list?: string | string[]): string[] | null { +export function ensureAList(list?: string | string[]): string[] | null { if (!list) { return null; } @@ -47,11 +47,7 @@ function ensureAList(list?: string | string[]): string[] | null { return list; } -function isRegExp(obj: any): obj is RegExp { - return obj && obj.test && obj.exec && obj.compile; -} - -function buildFilter(rule?: string | string[] | RegExp | NestingFilter) { +export function buildFilter(rule?: string | string[] | RegExp | NestingFilter) { if (!rule) { return null; } @@ -145,9 +141,8 @@ export class ComponentMeta { private _isMinimalRenderUnit?: boolean; get title(): string | I18nData | ReactElement { - // TODO: 标记下。这块需要康师傅加一下API，页面正常渲染。 // string | i18nData | ReactElement - // TitleConfig title.label + // TitleConfig title.label if (isTitleConfig(this._title)) { return (this._title.label as any) || this.componentName; } @@ -220,10 +215,10 @@ export class ComponentMeta { collectLiveTextEditing(this.configure); this._liveTextEditing = liveTextEditing.length > 0 ? liveTextEditing : undefined; - const isTopFiexd = this._transformedMetadata.configure.advanced?.isTopFixed; + const isTopFixed = this._transformedMetadata.configure.advanced?.isTopFixed; - if (isTopFiexd) { - this._isTopFixed = isTopFiexd; + if (isTopFixed) { + this._isTopFixed = isTopFixed; } const { configure = {} } = this._transformedMetadata; @@ -403,6 +398,7 @@ const builtinComponentActions: ComponentAction[] = [ content: { icon: IconRemove, title: intlNode('remove'), + /* istanbul ignore next */ action(node: Node) { node.remove(); }, @@ -414,10 +410,12 @@ const builtinComponentActions: ComponentAction[] = [ content: { icon: IconHidden, title: intlNode('hide'), + /* istanbul ignore next */ action(node: Node) { node.setVisible(false); }, }, + /* istanbul ignore next */ condition: (node: Node) => { return node.componentMeta.isModal; }, @@ -428,6 +426,7 @@ const builtinComponentActions: ComponentAction[] = [ content: { icon: IconClone, title: intlNode('copy'), + /* istanbul ignore next */ action(node: Node) { // node.remove(); const { document: doc, parent, index } = node; @@ -459,10 +458,12 @@ const builtinComponentActions: ComponentAction[] = [ content: { icon: IconLock, // 锁定 icon title: intlNode('lock'), + /* istanbul ignore next */ action(node: Node) { node.lock(); }, }, + /* istanbul ignore next */ condition: (node: Node) => { return engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked; }, @@ -473,10 +474,12 @@ const builtinComponentActions: ComponentAction[] = [ content: { icon: IconUnlock, // 解锁 icon title: intlNode('unlock'), + /* istanbul ignore next */ action(node: Node) { node.lock(false); }, }, + /* istanbul ignore next */ condition: (node: Node) => { return engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked; }, diff --git a/packages/designer/tests/fixtures/component-metadata/abcgroup.ts b/packages/designer/tests/fixtures/component-metadata/abcgroup.ts new file mode 100644 index 000000000..986d6e3e9 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/abcgroup.ts @@ -0,0 +1,280 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Abc.Group', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: { label: '容器' }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + }, + supports: {}, + advanced: { + isTopFixed: true, + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/abcitem.ts b/packages/designer/tests/fixtures/component-metadata/abcitem.ts new file mode 100644 index 000000000..c378b35d5 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/abcitem.ts @@ -0,0 +1,280 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Abc.Item', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: { label: '容器' }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + }, + supports: {}, + advanced: { + isTopFixed: true, + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/abcnode.ts b/packages/designer/tests/fixtures/component-metadata/abcnode.ts new file mode 100644 index 000000000..f59907194 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/abcnode.ts @@ -0,0 +1,280 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Abc.Node', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: { label: '容器' }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + }, + supports: {}, + advanced: { + isTopFixed: true, + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/abcoption.ts b/packages/designer/tests/fixtures/component-metadata/abcoption.ts new file mode 100644 index 000000000..78490060e --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/abcoption.ts @@ -0,0 +1,280 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Abc.Option', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: { label: '容器' }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + }, + supports: {}, + advanced: { + isTopFixed: true, + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div.ts b/packages/designer/tests/fixtures/component-metadata/div.ts index 730da3f62..3c29bf488 100644 --- a/packages/designer/tests/fixtures/component-metadata/div.ts +++ b/packages/designer/tests/fixtures/component-metadata/div.ts @@ -229,55 +229,55 @@ export default { }, }, supports: {}, - }, - experimental: { - callbacks: { - onNodeAdd: (dragment, self) => { console.log(dragment); }, - onNodeRemove: (dragment, self) => { console.log(dragment); } + advanced: { + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], }, - initials: [ - { - name: 'behavior', - }, - { - name: '__style__', - }, - { - name: 'fieldId', - }, - { - name: 'useFieldIdAsDomId', - }, - { - name: 'customClassName', - }, - { - name: 'events', - }, - { - name: 'onClick', - }, - { - name: 'onMouseEnter', - }, - { - name: 'onMouseLeave', - }, - ], - filters: [ - { - name: 'events', - }, - { - name: 'onClick', - }, - { - name: 'onMouseEnter', - }, - { - name: 'onMouseLeave', - }, - ], - autoruns: [], }, } as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div10.ts b/packages/designer/tests/fixtures/component-metadata/div10.ts new file mode 100644 index 000000000..929c34f8c --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div10.ts @@ -0,0 +1,22 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + title: '容器', + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + component: { + nestingRule: { + parentWhitelist: (parent, my) => { + if (parent.componentName === 'Form' && my.componentName === 'Div') return true; + return false; + }, + childWhitelist: (child, my) => { + if (child.componentName === 'Image' && my.componentName === 'Div') return true; + return false; + }, + }, + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div2.ts b/packages/designer/tests/fixtures/component-metadata/div2.ts new file mode 100644 index 000000000..001266d85 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div2.ts @@ -0,0 +1,280 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: { label: '容器' }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + }, + supports: {}, + advanced: { + isTopFixed: true, + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div3.ts b/packages/designer/tests/fixtures/component-metadata/div3.ts new file mode 100644 index 000000000..6b3717078 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div3.ts @@ -0,0 +1,282 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + nestingRule: { + // parentWhitelist: 'Div', + // childWhitelist: 'Div', + } + }, + supports: {}, + advanced: { + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div4.ts b/packages/designer/tests/fixtures/component-metadata/div4.ts new file mode 100644 index 000000000..b987e6f84 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div4.ts @@ -0,0 +1,272 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + experimental: { + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div5.ts b/packages/designer/tests/fixtures/component-metadata/div5.ts new file mode 100644 index 000000000..bf47a6e85 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div5.ts @@ -0,0 +1,283 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + nestingRule: { + // parentWhitelist: 'Div', + // childWhitelist: 'Div', + }, + disableBehaviors: '*', + }, + supports: {}, + advanced: { + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div6.ts b/packages/designer/tests/fixtures/component-metadata/div6.ts new file mode 100644 index 000000000..47e324a80 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div6.ts @@ -0,0 +1,283 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + nestingRule: { + // parentWhitelist: 'Div', + // childWhitelist: 'Div', + }, + disableBehaviors: '*', + }, + supports: {}, + }, + experimental: { + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div7.ts b/packages/designer/tests/fixtures/component-metadata/div7.ts new file mode 100644 index 000000000..33bf01259 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div7.ts @@ -0,0 +1,276 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: '容器', + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + supports: {}, + advanced: { + callbacks: { + onNodeAdd: (dragment, self) => { console.log(dragment); }, + onNodeRemove: (dragment, self) => { console.log(dragment); } + }, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div8.ts b/packages/designer/tests/fixtures/component-metadata/div8.ts new file mode 100644 index 000000000..268616569 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div8.ts @@ -0,0 +1,12 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + npm: { + package: '@ali/vc-div', + componentName: 'Div', + }, + title: '容器', + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/div9.ts b/packages/designer/tests/fixtures/component-metadata/div9.ts new file mode 100644 index 000000000..59b334650 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/div9.ts @@ -0,0 +1,8 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Div', + title: '容器', + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], +} as ComponentMetadata; diff --git a/packages/designer/tests/fixtures/component-metadata/page2.ts b/packages/designer/tests/fixtures/component-metadata/page2.ts new file mode 100644 index 000000000..40f9d8e38 --- /dev/null +++ b/packages/designer/tests/fixtures/component-metadata/page2.ts @@ -0,0 +1,279 @@ +import { ComponentMetadata } from "@alilc/lowcode-types"; +export default { + componentName: 'Page', + npm: { + package: '@ali/vc-page', + }, + title: '容器', + docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs', + devMode: 'proCode', + tags: ['布局'], + configure: { + props: [ + { + type: 'field', + name: 'behavior', + title: '默认状态', + extraProps: { + display: 'inline', + defaultValue: 'NORMAL', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + options: [ + { + title: '普通', + value: 'NORMAL', + }, + { + title: '隐藏', + value: 'HIDDEN', + }, + ], + loose: false, + cancelable: false, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: '__style__', + title: { + label: '样式设置', + tip: '点击 ? 查看样式设置器用法指南', + docUrl: 'https://lark.alipay.com/legao/help/design-tool-style', + }, + extraProps: { + display: 'accordion', + defaultValue: {}, + }, + setter: { + key: null, + ref: null, + props: { + advanced: true, + }, + _owner: null, + }, + }, + { + type: 'group', + name: 'groupkgzzeo41', + title: '高级', + extraProps: { + display: 'accordion', + }, + items: [ + { + type: 'field', + name: 'fieldId', + title: { + label: '唯一标识', + }, + extraProps: { + display: 'block', + }, + setter: { + key: null, + ref: null, + props: { + placeholder: '请输入唯一标识', + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'useFieldIdAsDomId', + title: { + label: '将唯一标识用作 DOM ID', + }, + extraProps: { + display: 'block', + defaultValue: false, + }, + setter: { + key: null, + ref: null, + props: {}, + _owner: null, + }, + }, + { + type: 'field', + name: 'customClassName', + title: '自定义样式类', + extraProps: { + display: 'block', + defaultValue: '', + }, + setter: { + componentName: 'MixedSetter', + props: { + setters: [ + { + key: null, + ref: null, + props: { + placeholder: null, + multiline: false, + rows: 10, + required: false, + pattern: null, + maxLength: null, + }, + _owner: null, + }, + 'VariableSetter', + ], + }, + }, + }, + { + type: 'field', + name: 'events', + title: { + label: '动作设置', + tip: '点击 ? 查看如何设置组件的事件响应动作', + docUrl: 'https://lark.alipay.com/legao/legao/events-call', + }, + extraProps: { + display: 'accordion', + defaultValue: { + ignored: true, + }, + }, + setter: { + key: null, + ref: null, + props: { + events: [ + { + name: 'onClick', + title: '当点击时', + initialValue: + "/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}", + }, + { + name: 'onMouseEnter', + title: '当鼠标进入时', + initialValue: + "/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}", + }, + { + name: 'onMouseLeave', + title: '当鼠标离开时', + initialValue: + "/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}", + }, + ], + }, + _owner: null, + }, + }, + { + type: 'field', + name: 'onClick', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseEnter', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + { + type: 'field', + name: 'onMouseLeave', + extraProps: { + defaultValue: { + ignored: true, + }, + }, + setter: 'I18nSetter', + }, + ], + }, + ], + component: { + isContainer: true, + nestingRule: { + // parentWhitelist: 'Div', + // childWhitelist: 'Div', + }, + }, + supports: {}, + }, + experimental: { + callbacks: {}, + initials: [ + { + name: 'behavior', + }, + { + name: '__style__', + }, + { + name: 'fieldId', + }, + { + name: 'useFieldIdAsDomId', + }, + { + name: 'customClassName', + }, + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + filters: [ + { + name: 'events', + }, + { + name: 'onClick', + }, + { + name: 'onMouseEnter', + }, + { + name: 'onMouseLeave', + }, + ], + autoruns: [], + }, +} as ComponentMetadata; diff --git a/packages/designer/tests/main/meta/component-meta.test.ts b/packages/designer/tests/main/meta/component-meta.test.ts index 8ca8e84b1..a1a113d93 100644 --- a/packages/designer/tests/main/meta/component-meta.test.ts +++ b/packages/designer/tests/main/meta/component-meta.test.ts @@ -2,7 +2,32 @@ import '../../fixtures/window'; import { Node } from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; import divMeta from '../../fixtures/component-metadata/div'; -import { ComponentMeta, isComponentMeta, removeBuiltinComponentAction, addBuiltinComponentAction } from '../../../src/component-meta'; +import div2Meta from '../../fixtures/component-metadata/div2'; +import div3Meta from '../../fixtures/component-metadata/div3'; +import div4Meta from '../../fixtures/component-metadata/div4'; +import div5Meta from '../../fixtures/component-metadata/div5'; +import div6Meta from '../../fixtures/component-metadata/div6'; +import div7Meta from '../../fixtures/component-metadata/div7'; +import div8Meta from '../../fixtures/component-metadata/div8'; +import div9Meta from '../../fixtures/component-metadata/div9'; +import div10Meta from '../../fixtures/component-metadata/div10'; +import abcgroup from '../../fixtures/component-metadata/abcgroup'; +import abcitem from '../../fixtures/component-metadata/abcitem'; +import abcnode from '../../fixtures/component-metadata/abcnode'; +import abcoption from '../../fixtures/component-metadata/abcoption'; +import page2Meta from '../../fixtures/component-metadata/page2'; +import { + ComponentMeta, + isComponentMeta, + removeBuiltinComponentAction, + addBuiltinComponentAction, + modifyBuiltinComponentAction, + ensureAList, + buildFilter, + registerMetadataTransducer, + getRegisteredMetadataTransducers, +} from '../../../src/component-meta'; +import { componentDefaults } from '../../../src/transducers'; const mockCreateSettingEntry = jest.fn(); jest.mock('../../../src/designer/designer', () => { @@ -34,11 +59,64 @@ describe('组件元数据处理', () => { expect(typeof meta.icon).toBe('function'); expect(meta.getMetadata().title).toBe('容器'); expect(meta.title).toEqual({ type: 'i18n', 'en-US': 'Div', 'zh-CN': '容器' }); + expect(meta.isMinimalRenderUnit).toBeFalsy(); + expect(meta.isTopFixed).toBeFalsy(); meta.setNpm({ package: '@ali/vc-div', componentName: 'Div' }); expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' }); + meta.npm = { package: '@ali/vc-div', componentName: 'Div' }; + expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' }); + + const mockFn = jest.fn(); + const offFn = meta.onMetadataChange(mockFn); meta.setMetadata(divMeta); + expect(mockFn).toHaveBeenCalledTimes(1); + offFn(); + meta.setMetadata(divMeta); + // 不会再触发函数 + expect(mockFn).toHaveBeenCalledTimes(1); + }); + + it('构造函数 - 兼容场景（title 是个普通对象）', () => { + const meta = new ComponentMeta(designer, div2Meta); + expect(meta.title).toEqual('容器'); + + expect(meta.isTopFixed).toBeTruthy(); + }); + + it('构造函数 - 兼容场景（title fallback 到 componentName）', () => { + const meta = new ComponentMeta(designer, div3Meta); + expect(meta.title).toEqual('Div'); + }); + + it('构造函数 - 兼容场景（configure 是个数组）', () => { + const meta = new ComponentMeta(designer, div4Meta); + expect(meta.configure).toEqual(div4Meta.configure); + }); + + it('构造函数 - 兼容场景（使用 experimental）', () => { + const meta = new ComponentMeta(designer, div6Meta); + expect(meta.getMetadata().configure.advanced.initials).toHaveLength(9); + }); + + it('构造函数 - 兼容场景（没有 configure.component）', () => { + const meta = new ComponentMeta(designer, div7Meta); + expect(meta.isContainer).toBeFalsy(); + expect(meta.isModal).toBeFalsy(); + }); + + it('构造函数 - 兼容场景（没有 configure）', () => { + const meta = new ComponentMeta(designer, div8Meta); + expect(meta.configure).toEqual([]); + }); + + it('构造函数 - 兼容场景（没有 npm）', () => { + const meta = new ComponentMeta(designer, div9Meta); + expect(meta.npm).toBeUndefined(); + + meta.setNpm({ package: '@ali/vc-div', componentName: 'Div' }); + expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' }); }); it('availableActions', () => { @@ -64,16 +142,116 @@ describe('组件元数据处理', () => { expect(meta.availableActions[1].name).toBe('copy'); expect(meta.availableActions[4].name).toBe('new'); }); + + it('availableActions - disableBehaviors: *', () => { + const meta = new ComponentMeta(designer, div5Meta); + expect(meta.availableActions).toHaveLength(0); + }); + + it('availableActions - rootCompoment', () => { + const meta = new ComponentMeta(designer, page2Meta); + // (hide + new) left + expect(meta.availableActions).toHaveLength(2); + }); + + describe('checkNesting', () => { + const mockNode = (componentName) => { + return { + internalToShellNode() { + return { + componentName, + }; + }, + isNode: true, + }; + }; + const mockNodeForm = mockNode('Form'); + const mockNodeImage = mockNode('Image'); + const mockNodeDiv = mockNode('Div'); + it('checkNestingUp', () => { + const meta1 = new ComponentMeta(designer, divMeta); + // 没有配置 parentWhitelist，判断默认为 true + expect(meta1.checkNestingUp(mockNodeDiv, mockNodeDiv)).toBeTruthy(); + + const meta2 = new ComponentMeta(designer, div10Meta); + expect(meta2.checkNestingUp(mockNodeDiv, mockNodeForm)).toBeTruthy(); + expect(meta2.checkNestingUp(mockNodeDiv, mockNodeDiv)).toBeFalsy(); + }); + + it('checkNestingDown', () => { + const meta1 = new ComponentMeta(designer, divMeta); + // 没有配置 childWhitelist，判断默认为 true + expect(meta1.checkNestingDown(mockNodeDiv, mockNodeDiv)).toBeTruthy(); + + const meta2 = new ComponentMeta(designer, div10Meta); + expect(meta2.checkNestingDown(mockNodeDiv, mockNodeForm)).toBeFalsy(); + expect(meta2.checkNestingDown(mockNodeDiv, mockNodeImage)).toBeTruthy(); + }); + }); }); -describe('组件元数据transducers', () => { +describe('组件元数据 transducers', () => { it('legacyIssues', () => { const legacyMeta: any = { ...divMeta, - devMode: 'procode' - } + devMode: 'procode', + }; const meta = new ComponentMeta(designer, legacyMeta); const metadata = meta.getMetadata(); expect(metadata.devMode).toBe('proCode'); - }) -}) + }); +}); + +describe('帮助函数', () => { + it('ensureAList', () => { + expect(ensureAList()).toBeNull(); + expect(ensureAList(1)).toBeNull(); + expect(ensureAList([])).toBeNull(); + expect(ensureAList('copy lock')).toEqual(['copy', 'lock']); + expect(ensureAList(['copy', 'lock'])).toEqual(['copy', 'lock']); + }); + + it('buildFilter', () => { + const mockFn = () => {}; + expect(buildFilter()).toBeNull(); + expect(buildFilter([])).toBeNull(); + expect(buildFilter(mockFn)).toBe(mockFn); + + const mockRE = /xxx/; + const filter = buildFilter(mockRE); + expect(filter({ componentName: 'xxx' })).toBeTruthy(); + expect(filter({ componentName: 'yyy' })).toBeFalsy(); + + expect(buildFilter('xxx yyy')({ componentName: 'xxx' })).toBeTruthy(); + expect(buildFilter('xxx yyy')({ componentName: 'zzz' })).toBeFalsy(); + }); + + it('registerMetadataTransducer', () => { + expect(getRegisteredMetadataTransducers()).toHaveLength(2); + // 插入到 legacy-issues 和 component-defaults 的中间 + registerMetadataTransducer((metadata) => metadata, 3, 'noop'); + expect(getRegisteredMetadataTransducers()).toHaveLength(3); + + registerMetadataTransducer((metadata) => metadata); + expect(getRegisteredMetadataTransducers()).toHaveLength(4); + }); + + it('modifyBuiltinComponentAction', () => { + modifyBuiltinComponentAction('copy', (action) => { + expect(action.name).toBe('copy'); + }); + }); +}); + +describe('transducers', () => { + it('componentDefaults', () => { + const meta1 = new ComponentMeta(designer, abcgroup); + const meta2 = new ComponentMeta(designer, abcitem); + const meta3 = new ComponentMeta(designer, abcnode); + const meta4 = new ComponentMeta(designer, abcoption); + expect(meta1.getMetadata().configure.component.nestingRule.childWhitelist).toEqual(['Abc']); + expect(meta2.getMetadata().configure.component.nestingRule.parentWhitelist).toEqual(['Abc']); + expect(meta3.getMetadata().configure.component.nestingRule.parentWhitelist).toEqual(['Abc', 'Abc.Node']); + expect(meta4.getMetadata().configure.component.nestingRule.parentWhitelist).toEqual(['Abc']); + }); +}); diff --git a/packages/designer/tests/utils-ut/misc.test.ts b/packages/designer/tests/utils-ut/misc.test.ts index a9dcfeeb5..dc3dcd6bb 100644 --- a/packages/designer/tests/utils-ut/misc.test.ts +++ b/packages/designer/tests/utils-ut/misc.test.ts @@ -1,5 +1,5 @@ // @ts-nocheck -import { isElementNode, isDOMNodeVisible } from '../../src/utils/misc'; +import { isElementNode, isDOMNodeVisible, normalizeTriggers } from '../../src/utils/misc'; it('isElementNode', () => { expect(isElementNode(document.createElement('div'))).toBeTruthy(); @@ -148,3 +148,7 @@ describe('isDOMNodeVisible', () => { ).toBeFalsy(); }); }); + +it('normalizeTriggers', () => { + expect(normalizeTriggers(['n', 'w'])).toEqual(['N', 'W']); +}); diff --git a/packages/utils/src/misc.ts b/packages/utils/src/misc.ts index 1cde5adb3..87eea62f8 100644 --- a/packages/utils/src/misc.ts +++ b/packages/utils/src/misc.ts @@ -104,4 +104,8 @@ export function deprecate(fail: any, message: string, alterative?: string) { if (fail) { console.warn(`Deprecation: ${message}` + (alterative ? `, use ${alterative} instead.` : '')); } +} + +export function isRegExp(obj: any): obj is RegExp { + return obj && obj.test && obj.exec && obj.compile; } \ No newline at end of file