合并0.9.0代码

packages/demo/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.44"></a>
+## [0.8.44](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.43...@ali/lowcode-demo@0.8.44) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-demo
+
+<a name="0.8.43"></a>
+## [0.8.43](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.42...@ali/lowcode-demo@0.8.43) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-demo
+
+<a name="0.8.42"></a>
+## [0.8.42](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.41...@ali/lowcode-demo@0.8.42) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-demo
+
 <a name="0.8.41"></a>
 ## [0.8.41](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.40...@ali/lowcode-demo@0.8.41) (2020-07-22)
 

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-demo",
-  "version": "0.8.41",
+  "version": "0.8.44",
   "private": true,
   "description": "低代码引擎 DEMO",
   "scripts": {
@@ -9,19 +9,19 @@
   },
   "config": {},
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
-    "@ali/lowcode-editor-skeleton": "^0.8.37",
+    "@ali/lowcode-editor-skeleton": "^0.8.40",
-    "@ali/lowcode-plugin-components-pane": "^0.8.33",
+    "@ali/lowcode-plugin-components-pane": "^0.8.36",
-    "@ali/lowcode-plugin-designer": "^0.9.31",
+    "@ali/lowcode-plugin-designer": "^0.9.34",
-    "@ali/lowcode-plugin-event-bind-dialog": "^0.8.23",
+    "@ali/lowcode-plugin-event-bind-dialog": "^0.8.24",
-    "@ali/lowcode-plugin-outline-pane": "^0.8.37",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.40",
-    "@ali/lowcode-plugin-sample-logo": "^0.8.22",
+    "@ali/lowcode-plugin-sample-logo": "^0.8.23",
-    "@ali/lowcode-plugin-sample-preview": "^0.8.35",
+    "@ali/lowcode-plugin-sample-preview": "^0.8.38",
     "@ali/lowcode-plugin-settings-pane": "^0.8.8",
-    "@ali/lowcode-plugin-undo-redo": "^0.8.35",
+    "@ali/lowcode-plugin-undo-redo": "^0.8.38",
-    "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.21",
+    "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.22",
-    "@ali/lowcode-plugin-zh-en": "^0.8.25",
+    "@ali/lowcode-plugin-zh-en": "^0.8.26",
-    "@ali/lowcode-react-renderer": "^0.8.16",
+    "@ali/lowcode-react-renderer": "^0.8.17",
     "@ali/lowcode-runtime": "^0.8.16",
     "@ali/lowcode-utils": "^0.8.15",
     "@ali/ve-action-pane": "^4.7.0-beta.0",

packages/designer/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.9.34"></a>
+## [0.9.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.33...@ali/lowcode-designer@0.9.34) (2020-07-29)
+
+
+### Bug Fixes
+
+* getSuitablePlace ([03e7c57](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/03e7c57))
+* slot 兼容问题 + loop key bug fix ([bc64017](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bc64017))
+
+
+
+
+<a name="0.9.33"></a>
+## [0.9.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.32...@ali/lowcode-designer@0.9.33) (2020-07-28)
+
+
+### Bug Fixes
+
+* props.getNode 防死循环 ([444e25c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/444e25c))
+* vc-filter bug fix ([31ea5d5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/31ea5d5))
+* VC-Filter组件的适配问题 ([1f581b8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1f581b8))
+* 增加 getNode 兼容接口 ([5b6792f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/5b6792f))
+* 补充documnet-model中addonData 相关方法 ([cbc70ea](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/cbc70ea))
+* 调整visionNode修改未知 ([da59235](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/da59235))
+
+
+
+
+<a name="0.9.32"></a>
+## [0.9.32](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.31...@ali/lowcode-designer@0.9.32) (2020-07-23)
+
+
+### Bug Fixes
+
+* prop type=UNSET 时返回 undefined ([f437f30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/f437f30))
+
+
+
+
 <a name="0.9.31"></a>
 ## [0.9.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.30...@ali/lowcode-designer@0.9.31) (2020-07-22)
 

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-designer",
-  "version": "0.9.31",
+  "version": "0.9.34",
   "description": "Designer for Ali LowCode Engine",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -15,7 +15,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "classnames": "^2.2.6",

packages/designer/src/designer/setting/setting-field.ts

@@ -21,6 +21,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
   readonly isSettingField = true;
   readonly isRequired: boolean;
   readonly transducer: Transducer;
+  private _config: FieldConfig;
   extraProps: FieldExtraProps;
 
   // ==== dynamic properties ====
@@ -53,6 +54,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
     super(parent, config.name, config.type);
 
     const { title, items, setter, extraProps, ...rest } = config;
+    this._config = config;
     this._title = title;
     this._setter = setter;
     this.extraProps = {
@@ -80,6 +82,10 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
     return this._items;
   }
 
+  get config(): FieldConfig {
+    return this._config;
+  }
+
   private initItems(items: Array<FieldConfig | CustomView>, settingFieldCollector?: { (name: string | number, field: SettingField): void; (name: string, field: SettingField): void; }) {
     this._items = items.map((item) => {
       if (isCustomView(item)) {

packages/designer/src/designer/setting/setting-top-entry.ts

@@ -224,6 +224,13 @@ export class SettingTopEntry implements SettingEntry {
   getPage() {
     return this.first.document;
   }
+
+  /**
+   * @deprecated
+   */
+  getNode() {
+    return this.nodes[0];
+  }
 }
 
 interface Purgeable {

packages/designer/src/document/document-model.ts

@@ -49,6 +49,11 @@ export class DocumentModel {
   private emitter: EventEmitter;
   private rootNodeVisitorMap: { [visitorName: string]: any } = {};
 
+  /**
+   * @deprecated
+   */
+  private _addons: { [key: string]: { exportData: () => any; isProp: boolean;} } = {};
+
   /**
    * 模拟器
    */
@@ -173,7 +178,7 @@ export class DocumentModel {
       node = this.getNode(schema.id);
       if (node && node.componentName === schema.componentName) {
         if (node.parent) {
-          node.internalSetParent(null);
+          node.internalSetParent(null, false);
           // will move to another position
           // todo: this.activeNodes?.push(node);
         }
@@ -512,6 +517,32 @@ export class DocumentModel {
     this.emitter.emit('lowcode_engine_renderer_ready', renderer);
   }
 
+  /**
+   * @deprecated
+   */
+  getAddonData(name: string) {
+    const addon = this._addons[name];
+    return addon?.exportData();
+  }
+
+  /**
+   * @deprecated
+   */
+  registerAddon(name: string, exportData: any) {
+    if (['id', 'params', 'layout'].indexOf(name) > -1) {
+      throw new Error('addon name cannot be id, params, layout');
+    }
+    const i = this._addons?.findIndex((item) => item.name === name);
+    if (i > -1) {
+      this._addons?.splice(i, 1);
+    }
+    this._addons?.push({
+      exportData,
+      name,
+    });
+  }
+
+
   acceptRootNodeVisitor(
     visitorName: string = 'default',
     visitorFn: (node: RootNode) => any ) {
@@ -546,6 +577,13 @@ export class DocumentModel {
       this.emitter.removeListener('nodedestroy', func);
     };
   }
+
+  /**
+   * @deprecated
+   */
+  refresh() {
+    console.warn('refresh method is deprecated');
+  }
 }
 
 export function isDocumentModel(obj: any): obj is DocumentModel {

packages/designer/src/document/node/node-children.ts

@@ -61,6 +61,14 @@ export class NodeChildren {
     }
   }
 
+  /**
+   * @deprecated
+   * @param nodes 
+   */
+  concat(nodes: Node[]) {
+    return this.children.concat(nodes);
+  }
+
   /**
    * 元素个数
    */
@@ -86,7 +94,7 @@ export class NodeChildren {
   /**
    * 删除一个节点
    */
-  delete(node: Node, purge = false): boolean {
+  delete(node: Node, purge = false, useMutator = true): boolean {
     const i = this.children.indexOf(node);
     if (i < 0) {
       return false;
@@ -94,18 +102,20 @@ export class NodeChildren {
     const deleted = this.children.splice(i, 1)[0];
     if (purge) {
       // should set parent null
-      deleted.internalSetParent(null);
+      deleted.internalSetParent(null, useMutator);
-      deleted.purge();
+      deleted.purge(useMutator);
     }
     this.emitter.emit('change');
-    this.reportModified(node, this.owner, {type: 'remove', removeIndex: i, removeNode: node});
+    if (useMutator) {
+      this.reportModified(node, this.owner, {type: 'remove', removeIndex: i, removeNode: node});
+    }
     return false;
   }
 
   /**
    * 插入一个节点，返回新长度
    */
-  insert(node: Node, at?: number | null): void {
+  insert(node: Node, at?: number | null, useMutator = true): void {
     const children = this.children;
     let index = at == null || at === -1 ? children.length : at;
 
@@ -117,7 +127,7 @@ export class NodeChildren {
       } else {
         children.push(node);
       }
-      node.internalSetParent(this.owner);
+      node.internalSetParent(this.owner, useMutator);
     } else {
       if (index > i) {
         index -= 1;
@@ -132,6 +142,7 @@ export class NodeChildren {
     }
 
     this.emitter.emit('change');
+    // this.reportModified(node, this.owner, { type: 'insert' });
 
     // check condition group
     if (node.conditionGroup) {
@@ -233,7 +244,7 @@ export class NodeChildren {
     return this.children.some((child, index) => fn(child, index));
   }
 
-  filter(fn: (item: Node, index: number) => item is Node) {
+  filter(fn: (item: Node, index: number) => any) {
     return this.children.filter(fn);
   }
 
@@ -246,7 +257,7 @@ export class NodeChildren {
           const i = this.children.indexOf(node);
           if (i > -1) {
             this.children.splice(i, 1);
-            node.remove();
+            node.remove(false);
           }
         });
         changed = true;
@@ -283,25 +294,41 @@ export class NodeChildren {
   /**
    * 回收销毁
    */
-  purge() {
+  purge(useMutator = true) {
     if (this.purged) {
       return;
     }
     this.purged = true;
-    this.children.forEach(child => child.purge());
+    this.children.forEach((child) => child.purge(useMutator));
   }
 
   get [Symbol.toStringTag]() {
     // 保证向前兼容性
-    return "Array";
+    return 'Array';
   }
 
+  // /**
+  //  * @deprecated
+  //  * 为了兼容vision体系存量api
+  //  */
+  // getChildrenArray() {
+  //   return this.children;
+  // }
+
   private reportModified(node: Node, owner: Node, options = {}) {
-    if (!node) { return; }
+    if (!node) {
-    if (node.isRoot()) { return; }
+      return;
+    }
+    if (node.isRoot()) {
+      return;
+    }
     const callbacks = owner.componentMeta.getMetadata().experimental?.callbacks;
     if (callbacks?.onSubtreeModified) {
-      callbacks?.onSubtreeModified.call(node, owner, options);
+      try {
+        callbacks?.onSubtreeModified.call(node, owner, options);
+      } catch (e) {
+        console.error('error when excute experimental.callbacks.onNodeAdd', e);
+      }
     }
 
     if (owner.parent && !owner.parent.isRoot()) {

packages/designer/src/document/node/node.ts

@@ -98,7 +98,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 属性抽象
    */
-  readonly props: Props;
+  props: Props;
   protected _children?: NodeChildren;
   /**
    * @deprecated
@@ -239,10 +239,22 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     this.internalSetParent(null);
     this.document.addWillPurge(this);
   }
+
+  private didDropIn(dragment: Node) {
+    const callbacks = this.componentMeta.getMetadata().experimental?.callbacks;
+    if (callbacks?.onNodeAdd) {
+      callbacks?.onNodeAdd.call(this, dragment, this);
+    }
+    if (this._parent) {
+      this._parent.didDropIn(dragment);
+    }
+  }
+
   /**
    * 内部方法，请勿使用
+   * @param useMutator 是否触发联动逻辑
    */
-  internalSetParent(parent: ParentalNode | null) {
+  internalSetParent(parent: ParentalNode | null, useMutator = false) {
     if (this._parent === parent) {
       return;
     }
@@ -251,7 +263,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
       if (this.isSlot()) {
         this._parent.removeSlot(this, false);
       } else {
-        this._parent.children.delete(this);
+        this._parent.children.delete(this, false, useMutator);
       }
     }
 
@@ -265,6 +277,10 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
           this.setConditionGroup(grp);
         }
       }
+
+      if (useMutator) {
+        parent.didDropIn(this);
+      }
     }
   }
 
@@ -283,12 +299,12 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 移除当前节点
    */
-  remove() {
+  remove(useMutator = true) {
     if (this.parent) {
       if (this.isSlot()) {
         this.parent.removeSlot(this, true);
       } else {
-        this.parent.children.delete(this, true);
+        this.parent.children.delete(this, true, useMutator);
       }
     }
   }
@@ -408,8 +424,8 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
       delete data.id;
       const newNode = this.document.createNode(data);
 
-      this.insertBefore(newNode, node);
+      this.insertBefore(newNode, node, false);
-      node.remove();
+      node.remove(false);
 
       if (selected) {
         this.document.selection.select(newNode.id);
@@ -473,7 +489,11 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 设置多个属性值，替换原有值
    */
-  setProps(props?: PropsMap | PropsList | null) {
+  setProps(props?: PropsMap | PropsList | Props | null) {
+    if(props instanceof Props) {
+      this.props = props;
+      return;
+    }
     this.props.import(props);
   }
 
@@ -630,7 +650,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   }
 
   addSlot(slotNode: Node) {
-    slotNode.internalSetParent(this as ParentalNode);
+    slotNode.internalSetParent(this as ParentalNode, true);
     this._slots.push(slotNode);
   }
 
@@ -652,18 +672,18 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 销毁
    */
-  purge() {
+  purge(useMutator = true) {
     if (this.purged) {
       return;
     }
     if (this._parent) {
       // should remove thisNode before purge
-      this.remove();
+      this.remove(useMutator);
       return;
     }
     this.purged = true;
     if (this.isParental()) {
-      this.children.purge();
+      this.children.purge(useMutator);
     }
     this.autoruns?.forEach((dispose) => dispose());
     this.props.purge();
@@ -682,10 +702,10 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   getComponentName() {
     return this.componentName;
   }
-  insertBefore(node: Node, ref?: Node) {
+  insertBefore(node: Node, ref?: Node, useMutator = true) {
-    this.children?.insert(node, ref ? ref.index : null);
+    this.children?.insert(node, ref ? ref.index : null, useMutator);
   }
-  insertAfter(node: any, ref?: Node) {
+  insertAfter(node: any, ref?: Node, useMutator = true) {
     if (!isNode(node)) {
       if (node.getComponentName) {
         node = this.document.createNode({
@@ -695,7 +715,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
         node = this.document.createNode(node);
       }
     }
-    this.children?.insert(node, ref ? ref.index + 1 : null);
+    this.children?.insert(node, ref ? ref.index + 1 : null, useMutator);
   }
   getParent() {
     return this.parent;
@@ -773,11 +793,39 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
    * @deprecated
    */
   getSuitablePlace(node: Node, ref: any): any {
-    // TODO:
+    if (this.isRoot() && this.children) {
-    if (this.isRoot()) {
+      const dropElement = this.children.filter((c: Node) => {
+        if (!c.isContainer()) {
+          return false;
+        }
+        const canDropIn = c.componentMeta?.prototype?.options?.canDropIn;
+        if (typeof canDropIn === 'function') {
+          return canDropIn(node);
+        } else if (typeof canDropIn === 'boolean'){
+          return canDropIn;
+        }
+        return true;
+      })[0];
+      if (dropElement) {
+        return { container: dropElement, ref };
+      }
       return { container: this, ref };
     }
-    return { container: this.parent, ref: this };
+
+    const canDropIn = this.componentMeta?.prototype?.options?.canDropIn;
+    if (this.isContainer()) {
+      if (canDropIn === undefined ||
+        (typeof canDropIn === 'boolean' && canDropIn) ||
+      (typeof canDropIn === 'function' && canDropIn(node))){
+        return { container: this, ref };
+      }
+    }
+
+    if (this.parent) {
+      return this.parent.getSuitablePlace(node, ref);
+    }
+    
+    return null;
   }
   /**
    * @deprecated
@@ -793,9 +841,9 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
    * @deprecated
    */
   registerAddon(key: string, exportData: () => any, isProp: boolean = false) {
-    if (this._addons[key]) {
+    // if (this._addons[key]) {
-      throw new Error(`node addon ${key} exist`);
+    //   throw new Error(`node addon ${key} exist`);
-    }
+    // }
 
     this._addons[key] = { exportData, isProp };
   }

packages/designer/src/document/node/props/prop.ts

@@ -66,7 +66,8 @@ export class Prop implements IPropParent {
     const type = this._type;
 
     if (type === 'unset') {
-      return UNSET;
+      // return UNSET; @康为 之后 review 下这块改造
+      return undefined;
     }
 
     if (type === 'literal' || type === 'expression') {
@@ -98,9 +99,11 @@ export class Prop implements IPropParent {
       const maps: any = {};
       this.items!.forEach((prop, key) => {
         const v = prop.export(stage);
-        if (v !== UNSET) {
+        // if (v !== UNSET) {
-          maps[prop.key == null ? key : prop.key] = v;
+        //   maps[prop.key == null ? key : prop.key] = v;
-        }
+        // }
+        // @康为 之后 review 下这块改造
+        maps[prop.key == null ? key : prop.key] = v;
       });
       return maps;
     }

packages/designer/src/document/node/props/props.ts

@@ -329,4 +329,11 @@ export class Props implements IPropParent {
   setPropValue(path: string, value: any) {
     this.getProp(path, true)!.setValue(value);
   }
+
+  /**
+   * 获取 props 对应的 node
+   */
+  getNode() {
+    return this.owner;
+  }
 }

packages/editor-core/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.25"></a>
+## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.24...@ali/lowcode-editor-core@0.8.25) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-core
+
 <a name="0.8.24"></a>
 ## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.23...@ali/lowcode-editor-core@0.8.24) (2020-07-22)
 

packages/editor-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-core",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "description": "Core Api for Ali lowCode engine",
   "license": "MIT",
   "main": "lib/index.js",

packages/editor-preset-general/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.9.19"></a>
+## [0.9.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.18...@ali/lowcode-editor-preset-general@0.9.19) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-preset-general
+
+<a name="0.9.18"></a>
+## [0.9.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.17...@ali/lowcode-editor-preset-general@0.9.18) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-preset-general
+
+<a name="0.9.17"></a>
+## [0.9.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.16...@ali/lowcode-editor-preset-general@0.9.17) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-preset-general
+
 <a name="0.9.16"></a>
 ## [0.9.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.15...@ali/lowcode-editor-preset-general@0.9.16) (2020-07-22)
 

packages/editor-preset-general/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-preset-general",
-  "version": "0.9.16",
+  "version": "0.9.19",
   "private": true,
   "description": "Ali General Editor Preset",
   "main": "lib/index.js",
@@ -15,10 +15,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
-    "@ali/lowcode-editor-skeleton": "^0.8.37",
+    "@ali/lowcode-editor-skeleton": "^0.8.40",
-    "@ali/lowcode-plugin-designer": "^0.9.31",
+    "@ali/lowcode-plugin-designer": "^0.9.34",
-    "@ali/lowcode-plugin-outline-pane": "^0.8.37",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.40",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "@alifd/next": "^1.19.12",
@@ -28,7 +28,7 @@
     "react-dom": "^16.8.1"
   },
   "devDependencies": {
-    "@ali/lowcode-editor-setters": "^0.9.10",
+    "@ali/lowcode-editor-setters": "^0.9.11",
     "@alib/build-scripts": "^0.1.18",
     "@types/events": "^3.0.0",
     "@types/react": "^16.8.3",

packages/editor-preset-vision/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.35"></a>
+## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.34...@ali/lowcode-editor-preset-vision@0.8.35) (2020-07-29)
+
+
+### Bug Fixes
+
+* slot 兼容问题 + loop key bug fix ([bc64017](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bc64017))
+
+
+
+
+<a name="0.8.34"></a>
+## [0.8.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.33...@ali/lowcode-editor-preset-vision@0.8.34) (2020-07-28)
+
+
+### Bug Fixes
+
+* vc-filter bug fix ([31ea5d5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/31ea5d5))
+
+
+### Features
+
+* 支持 entry 模式 ([fe1f6f1](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/fe1f6f1))
+
+
+
+
+<a name="0.8.33"></a>
+## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.32...@ali/lowcode-editor-preset-vision@0.8.33) (2020-07-23)
+
+
+### Bug Fixes
+
+* vision prop 初始化时有依赖已初始化的 prop，需要实时添加 ([1feb46f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1feb46f))
+
+
+
+
 <a name="0.8.32"></a>
 ## [0.8.32](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.31...@ali/lowcode-editor-preset-vision@0.8.32) (2020-07-22)
 

packages/editor-preset-vision/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-preset-vision",
-  "version": "0.8.32",
+  "version": "0.8.35",
   "private": true,
   "description": "Vision Polyfill for Ali lowCode engine",
   "main": "lib/index.js",
@@ -15,11 +15,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
-    "@ali/lowcode-editor-skeleton": "^0.8.38-beta1",
+    "@ali/lowcode-editor-skeleton": "^0.8.40",
-    "@ali/lowcode-plugin-designer": "^0.9.31",
+    "@ali/lowcode-plugin-designer": "^0.9.34",
-    "@ali/lowcode-plugin-outline-pane": "^0.8.37",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.40",
     "@ali/ve-i18n-util": "^2.0.0",
     "@ali/ve-icons": "^4.1.9",
     "@ali/ve-less-variables": "2.0.3",

packages/editor-preset-vision/src/bundle/upgrade-metadata.ts

@@ -1,8 +1,9 @@
 import { ComponentType, ReactElement, isValidElement, ComponentClass } from 'react';
-import { isPlainObject } from '@ali/lowcode-utils';
+import { isPlainObject, uniqueId } from '@ali/lowcode-utils';
 import { isI18nData, SettingTarget, InitialItem, FilterItem, isJSSlot, ProjectSchema, AutorunItem } from '@ali/lowcode-types';
 import { untracked } from '@ali/lowcode-editor-core';
 import { editor, designer } from '../editor';
+import { SettingField } from '@ali/lowcode-designer';
 
 type Field = SettingTarget;
 
@@ -218,7 +219,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
   };
   const newConfig: any = {
     type: type === 'group' ? 'group' : 'field',
-    name,
+    name: type === 'group' && !name ? uniqueId('group') : name,
     title,
     extraProps,
   };
@@ -280,21 +281,24 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
   }
 
   let initialFn = (slotName ? null : initial) || initialValue;
-  if (slotName && initialValue === true) {
+  // 在 upgrade reducer 做了 JSBlock ——> JSSlot
-    initialFn = (value: any, defaultValue: any) => {
+  // if (slotName && initialValue === true) {
-      if (isJSSlot(value)) {
+  //   initialFn = (value: any, defaultValue: any) => {
-        return {
+  //     if (isJSSlot(value)) {
-          title: slotTitle || title,
+  //       return {
-          ...value,
+  //         title: slotTitle || title,
-        };
+  //         name: slotName,
-      }
+  //         ...value,
-      return {
+  //       };
-        type: 'JSSlot',
+  //     }
-        title: slotTitle || title,
+  //     return {
-        value: initialChildren,
+  //       type: 'JSSlot',
-      };
+  //       title: slotTitle || title,
-    };
+  //       name: slotName,
-  }
+  //       value: initialChildren,
+  //     };
+  //   };
+  // }
 
   if (!slotName) {
     if (accessor) {
@@ -325,6 +329,10 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
 
     if (mutator) {
       extraProps.setValue = (field: Field, value: any) => {
+        // TODO: 兼容代码，不触发查询组件的 Mutator
+        if (field instanceof SettingField && field.componentMeta?.componentName === 'Filter') {
+          return;
+        }
         mutator.call(field, value, value);
       };
     }
@@ -396,6 +404,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
           return {
             type: 'JSSlot',
             title: slotTitle || title,
+            name: slotName,
             value: value == null ? initialChildren : value,
           };
         },

packages/editor-preset-vision/src/editor.ts

@@ -120,7 +120,11 @@ designer.addPropsReducer((props, node) => {
           newProps[item.name] = props[item.name];
         }
       }
+      if (newProps[item.name] && !node.props.has(item.name)) {
+        node.props.add(newProps[item.name], item.name);
+      }
     });
+
     return newProps;
   }
   return props;

packages/editor-setters/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.9.11"></a>
+## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.10...@ali/lowcode-editor-setters@0.9.11) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-setters
+
 <a name="0.9.10"></a>
 ## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.9...@ali/lowcode-editor-setters@0.9.10) (2020-07-22)
 

packages/editor-setters/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-setters",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "description": "Builtin setters for Ali lowCode engine",
   "files": [
     "es",
@@ -22,7 +22,7 @@
     "@ali/iceluna-comp-react-node": "^1.0.5",
     "@ali/iceluna-sdk": "^1.0.5-beta.24",
     "@ali/lc-style-setter": "^0.0.1",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@alifd/next": "^1.19.16",
     "acorn": "^6.4.1",
     "classnames": "^2.2.6",

packages/editor-skeleton/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.40"></a>
+## [0.8.40](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.39...@ali/lowcode-editor-skeleton@0.8.40) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-skeleton
+
+<a name="0.8.39"></a>
+## [0.8.39](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.38...@ali/lowcode-editor-skeleton@0.8.39) (2020-07-28)
+
+
+### Bug Fixes
+
+* setting 面板样式调整 ([922b361](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/922b361))
+
+
+### Features
+
+* 支持 entry 模式 ([fe1f6f1](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/fe1f6f1))
+
+
+
+
+<a name="0.8.38"></a>
+## [0.8.38](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.37...@ali/lowcode-editor-skeleton@0.8.38) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-skeleton
+
 <a name="0.8.37"></a>
 ## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.36...@ali/lowcode-editor-skeleton@0.8.37) (2020-07-22)
 

packages/editor-skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-skeleton",
-  "version": "0.8.38-beta1",
+  "version": "0.8.40",
   "description": "alibaba lowcode editor skeleton",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -19,8 +19,8 @@
     "editor"
   ],
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "@alifd/next": "^1.20.12",

packages/editor-skeleton/src/area.ts

@@ -31,6 +31,10 @@ export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget =
   }
 
   add(config: T | C): T {
+    const item = this.container.get(config.name);
+    if (item) {
+      return item;
+    }
     return this.container.add(config);
   }
 

packages/editor-skeleton/src/components/field/fields.tsx

@@ -2,19 +2,17 @@ import { Component } from 'react';
 import { isObject } from 'lodash';
 import classNames from 'classnames';
 import { Icon } from '@alifd/next';
-import { Title, Tip } from '@ali/lowcode-editor-core';
+import { Title } from '@ali/lowcode-editor-core';
 import { TitleContent } from '@ali/lowcode-types';
 import { PopupPipe, PopupContext } from '../popup';
-import { intlNode } from '../../locale';
 import './index.less';
-import { IconClear } from '../../icons/clear';
 import InlineTip from './inlinetip';
 
 export interface FieldProps {
   className?: string;
   meta?: { package: string; componentName: string } | string;
   title?: TitleContent | null;
-  defaultDisplay?: 'accordion' | 'inline' | 'block';
+  defaultDisplay?: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry';
   collapsed?: boolean;
   valueState?: number;
   name?: string;
@@ -134,14 +132,18 @@ export class Field extends Component<FieldProps> {
         })}
         id={id}
       >
-        <div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
+        {
-          <div className="lc-field-title">
+          display !== 'plain' && (
-            {createValueState(valueState, this.handleClear)}
+            <div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
-            <Title title={title || ''} />
+              <div className="lc-field-title">
-            <InlineTip position="top">{tipContent}</InlineTip>
+                {createValueState(valueState, this.handleClear)}
-          </div>
+                <Title title={title || ''} />
-          {isAccordion && <Icon className="lc-field-icon" type="arrow-up" size="xs" />}
+                <InlineTip position="top">{tipContent}</InlineTip>
-        </div>
+              </div>
+              {isAccordion && <Icon className="lc-field-icon" type="arrow-up" size="xs" />}
+            </div>
+          )
+        }
         <div key="body" ref={(shell) => (this.body = shell)} className="lc-field-body">
           {children}
         </div>
@@ -250,21 +252,17 @@ export interface EntryFieldProps extends FieldProps {
 
 export class EntryField extends Component<EntryFieldProps> {
   render() {
-    const { stageName, title, className } = this.props;
+    const { title, className, stageName } = this.props;
-    const classNameList = classNames('engine-setting-field', 'engine-entry-field', className);
+    const classNameList = classNames('lc-field', 'lc-entry-field', className);
-    const fieldProps: any = {};
-
-    if (stageName) {
-      // 为 stage 切换奠定基础
-      fieldProps['data-stage-target'] = stageName;
-    }
 
     return (
-      <div className={classNameList} {...fieldProps}>
+      <div className={classNameList}>
-        <div className="lc-field-title">
+        <div className="lc-field-head" data-stage-target={stageName}>
-          <Title title={title || ''} />
+          <div className="lc-field-title">
+            <Title title={title || ''} />
+          </div>
+          <Icon className="lc-field-icon" type="arrow-right" size="xs" />
         </div>
-        <Icon className="lc-field-icon" type="arrow-left" size="xs" />
       </div>
     );
   }

packages/editor-skeleton/src/components/field/index.less

@@ -1,6 +1,10 @@
 @x-gap: 12px;
 @y-gap: 8px;
 
+.lc-settings-content > .lc-field:first-child > .lc-field-head{
+  border-top: none !important;
+}
+
 .lc-field {
   .lc-field-head {
     display: flex;
@@ -68,17 +72,7 @@
   &.lc-inline-field {
     display: flex;
     align-items: center;
-    // for top-level style
+    margin: 12px;
-    padding: 16px;
-    &:first-child{
-      padding-top: 16px;
-    }
-    &:last-child{
-      padding-bottom: 16px;
-    }
-    &+.lc-inline-field{
-      padding-top: 0;
-    }
 
     > .lc-field-head {
       width: 70px;
@@ -96,11 +90,11 @@
     }
   }
 
-  &.lc-block-field, &.lc-accordion-field {
+  &.lc-block-field, &.lc-accordion-field, &.lc-entry-field {
     display: block;
     &:first-child {
       > .lc-field-head {
-        border-top: none;
+        // border-top: none;
       }
     }
     > .lc-field-head {
@@ -112,7 +106,7 @@
       border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
       border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
       color: var(--color-title);
-      padding: 0 16px;
+      padding: 0 12px;
       user-select: none;
 
       > .lc-field-icon {
@@ -121,18 +115,30 @@
     }
 
     > .lc-field-body {
-      // padding: @y-gap @x-gap/2;
       padding: 12px;
-      .lc-inline-field{
+
-        margin-bottom: 12px;
+      .lc-inline-field {
-        &:last-child{
+        margin: 12px 0;
+
+        &:first-child {
+          margin-top: 0;
+        }
+        &:last-child {
           margin-bottom: 0;
         }
       }
     }
 
-    + .lc-inline-field {
+    // + .lc-inline-field {
-      border-top: 1px solid var(--color-line-normal);
+    //   border-top: 1px solid var(--color-line-normal);
+    // }
+  }
+
+  &.lc-entry-field {
+    margin-bottom: 6px;
+
+    > .lc-field-head {
+      cursor: pointer;
     }
   }
 
@@ -154,6 +160,10 @@
   &.lc-accordion-field {
     position: relative;
 
+    > .lc-field-head {
+      cursor: pointer;
+    }
+    
     &.lc-field-is-collapsed {
       margin-bottom: 6px;
     }
@@ -179,37 +189,35 @@
 
   // 2rd level reset
   .lc-field-body {
-    .lc-inline-field {
+    // .lc-inline-field {
-      // padding: @y-gap @x-gap/2 0 @x-gap/2;
+    //   &:first-child {
-      padding: 0;
+    //     padding-top: 0;
-      &:first-child {
+    //   }
-        padding-top: 0;
+    //   + .lc-accordion-field, +.lc-block-field {
-      }
+    //     margin-top: @y-gap;
-      + .lc-accordion-field, +.lc-block-field {
+    //   }
-        margin-top: @y-gap;
+    // }
-      }
-    }
 
-    .lc-field {
+    // .lc-field {
-      border-top: none !important;
+    //   border-top: none !important;
-    }
+    // }
 
-    .lc-accordion-field, .lc-block-field {
+    // .lc-accordion-field, .lc-block-field {
-      > .lc-field-head {
+    //   > .lc-field-head {
-        padding-left: @x-gap;
+    //     padding-left: @x-gap;
-        background: var(--color-block-background-light);
+    //     background: var(--color-block-background-light);
-        border-bottom: none;
+    //     border-bottom: none;
-        border-top: none;
+    //     border-top: none;
-        > .lc-field-icon {
+    //     > .lc-field-icon {
-          // margin-right: @x-gap/2;
+    //       // margin-right: @x-gap/2;
-          margin-right: 0;
+    //       margin-right: 0;
-        }
+    //     }
-      }
+    //   }
 
-      > .lc-field-body {
+    //   > .lc-field-body {
-        padding: 8px;
+    //     padding: 8px;
-      }
+    //   }
-    }
+    // }
 
     // 3rd level field title width should short
     // .lc-field-body .lc-inline-field {
@@ -220,8 +228,8 @@
     //     }
     //   }
     // }
-    >.lc-block-setter {
+    // >.lc-block-setter {
-      flex: 1;
+    //   flex: 1;
-    }
+    // }
   }
 }

packages/editor-skeleton/src/components/settings/settings-pane.tsx

@@ -1,21 +1,30 @@
-import { Component, MouseEvent } from 'react';
+import { Component, MouseEvent, Fragment } from 'react';
-import { shallowIntl, createSetterContent, observer } from '@ali/lowcode-editor-core';
+import { shallowIntl, createSetterContent, observer, obx, Title } from '@ali/lowcode-editor-core';
 import { createContent } from '@ali/lowcode-utils';
-import { Field, createField } from '../field';
+import { createField } from '../field';
-import PopupService, { PopupPipe } from '../popup';
 import { SkeletonContext } from '../../context';
 import { SettingField, isSettingField, SettingTopEntry, SettingEntry } from '@ali/lowcode-designer';
+import { Icon } from '@alifd/next';
 import { isSetterConfig, CustomView } from '@ali/lowcode-types';
 import { intl } from '../../locale';
-import { Skeleton } from 'editor-skeleton/src/skeleton';
+import { Skeleton } from '../../skeleton';
+import { Stage } from '../../widget/stage';
 
 @observer
 class SettingFieldView extends Component<{ field: SettingField }> {
+  static contextType = SkeletonContext;
+
   render() {
     const { field } = this.props;
     const { extraProps } = field;
-    const { condition, defaultValue } = extraProps;
+    const { condition, defaultValue, display } = extraProps;
-    const visible = field.isSingle && typeof condition === 'function' ? condition(field) !== false : true;
+    let visible;
+    try {
+      visible = field.isSingle && typeof condition === 'function' ? condition(field) !== false : true;
+    } catch (error) {
+      console.error('exception when condition (hidden) is excuted', error);
+    }
+
     if (!visible) {
       return null;
     }
@@ -59,7 +68,26 @@ class SettingFieldView extends Component<{ field: SettingField }> {
       value = field.getValue();
     }
 
+    const skeleton = this.context as Skeleton;
+    const { stages } = skeleton;
+
     // todo: error handling
+    let stageName;
+    if (display === 'entry') {
+      const stage = stages.add({
+        type: 'Widget',
+        name: field.getNode().id + '_' + field.name.toString(),
+        content: (
+          <Fragment>
+            {field.items.map((item, index) => createSettingFieldView(item, field, index))}
+          </Fragment>
+        ),
+        props: {
+          title: field.title,
+        },
+      });
+      stageName = stage.name;
+    }
 
     return createField(
       {
@@ -69,9 +97,12 @@ class SettingFieldView extends Component<{ field: SettingField }> {
         valueState: field.isRequired ? 10 : field.valueState,
         onExpandChange: (expandState) => field.setExpanded(expandState),
         onClear: () => field.clearValue(),
+        // field: field,
+        // stages,
+        stageName,
         ...extraProps,
       },
-      createSetterContent(setterType, {
+      !stageName && createSetterContent(setterType, {
         ...shallowIntl(setterProps),
         forceInline: extraProps.forceInline,
         key: field.id,
@@ -104,6 +135,8 @@ class SettingFieldView extends Component<{ field: SettingField }> {
 
 @observer
 class SettingGroupView extends Component<{ field: SettingField }> {
+  static contextType = SkeletonContext;
+
   shouldComponentUpdate() {
     return false;
   }
@@ -111,36 +144,54 @@ class SettingGroupView extends Component<{ field: SettingField }> {
   render() {
     const { field } = this.props;
     const { extraProps } = field;
-    const { condition } = extraProps;
+    const { condition, display } = extraProps;
     const visible = field.isSingle && typeof condition === 'function' ? condition(field) !== false : true;
 
     if (!visible) {
       return null;
     }
 
+    const skeleton = this.context as Skeleton;
+    const { stages } = skeleton;
+
+    let stageName;
+    if (display === 'entry') {
+      const stage = stages.add({
+        type: 'Widget',
+        name: field.getNode().id + '_' + field.name.toString(),
+        content: (
+          <Fragment>
+            {field.items.map((item, index) => createSettingFieldView(item, field, index))}
+          </Fragment>
+        ),
+        props: {
+          title: field.title,
+        },
+      });
+      stageName = stage.name;
+    }
+
     // todo: split collapsed state | field.items for optimize
-    return (
+    return createField({
-      <Field
+        meta: field.componentMeta?.npm || field.componentMeta?.componentName || '',
-        defaultDisplay="accordion"
+        title: field.title,
-        meta={field?.componentMeta?.npm || field?.componentMeta?.componentName || ''}
+        collapsed: !field.expanded,
-        title={field.title}
+        onExpandChange: (expandState) => field.setExpanded(expandState),
-        collapsed={!field.expanded}
+        // field: field,
-        onExpandChange={(expandState) => {
+        // stages,
-          field.setExpanded(expandState);
+        stageName,
-        }}
+      }, 
-      >
+      field.items.map((item, index) => createSettingFieldView(item, field, index)),
-        {field.items.map((item, index) => createSettingFieldView(item, field, index))}
+      display);
-      </Field>
-    );
   }
 }
 
 export function createSettingFieldView(item: SettingField | CustomView, field: SettingEntry, index?: number) {
   if (isSettingField(item)) {
     if (item.isGroup) {
-      return <SettingGroupView field={item} key={item.id} />;
+      return <SettingGroupView field={item} key={item.id}/>;
     } else {
-      return <SettingFieldView field={item} key={item.id} />;
+      return <SettingFieldView field={item} key={item.id}/>;
     }
   } else {
     return createContent(item, { key: index, field });
@@ -155,20 +206,19 @@ export type SettingsPaneProps = {
 @observer
 export class SettingsPane extends Component<SettingsPaneProps> {
   static contextType = SkeletonContext;
+  @obx
+  private currentStage?: Stage;
+
   shouldComponentUpdate() {
     return false;
   }
 
-  private popupPipe = new PopupPipe();
-  private pipe = this.popupPipe.create();
-
   private handleClick = (e: MouseEvent) => {
     // compatiable vision stageBox
     // TODO: optimize these codes
     const { usePopup = true } = this.props;
     if (!usePopup) return;
     const pane = e.currentTarget as HTMLDivElement;
-    let entry: any;
     function getTarget(node: any): any {
       if (!pane.contains(node) || (node.nodeName === 'A' && node.getAttribute('href'))) {
         return null;
@@ -176,7 +226,6 @@ export class SettingsPane extends Component<SettingsPaneProps> {
 
       const target = node.dataset ? node.dataset.stageTarget : null;
       if (target) {
-        entry = node;
         return target;
       }
       return getTarget(node.parentNode);
@@ -192,22 +241,40 @@ export class SettingsPane extends Component<SettingsPaneProps> {
     }
     const stage = skeleton.stages.container.get(target);
     if (stage) {
-      this.pipe.send(stage.content, stage.title);
+      if (this.currentStage) {
-      this.pipe.show(entry);
+        stage.setPrevious(this.currentStage);
+      }
+      this.currentStage = stage;
     }
   };
 
+  private popStage() {
+    this.currentStage = this.currentStage?.getPrevious();
+  }
+
   render() {
-    const { target } = this.props;
+    let { target } = this.props;
-    const items = target.items;
+
     return (
       <div className="lc-settings-pane" onClick={this.handleClick}>
-        {/* todo: add head for single use */}
+        {
-        <PopupService popupPipe={this.popupPipe}>
+          this.currentStage && (
-          <div className="lc-settings-content">
+            <div className="lc-setting-stage-back">
-            {items.map((item, index) => createSettingFieldView(item, target, index))}
+              <Icon
-          </div>
+                className="lc-setting-stage-back-icon" 
-        </PopupService>
+                type="arrow-left"
+                size="xs"
+                onClick={this.popStage.bind(this)}
+              />
+              <Title title={this.currentStage.title}/>
+            </div>
+          )
+        }
+        <div className="lc-settings-content">
+          {
+            this.currentStage ? this.currentStage.content : target.items.map((item, index) => createSettingFieldView(item, target, index))
+          }
+        </div>
       </div>
     );
   }

packages/editor-skeleton/src/components/settings/style.less

@@ -3,6 +3,42 @@
   height: 100%;
   overflow: hidden;
 
+  .lc-settings-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .lc-setting-stage-back + .lc-settings-content {
+    top: 38px;
+  }
+
+  .lc-setting-stage-back {
+    height: 32px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    background: var(--color-block-background-shallow, rgba(31,56,88,.06));
+    color: var(--color-title);
+    padding: 0 16px;
+    user-select: none;
+    position: relative;
+    margin-bottom: 4px;
+    position: absolute;
+
+    .lc-setting-stage-back-icon {
+      position: absolute;
+      left: 8px;
+      top: 8px;
+      color: #8F9BB3;
+      cursor: pointer;
+    }
+  }
+
   .lc-settings-notice {
     text-align: center;
     font-size: 12px;

packages/editor-skeleton/src/transducers/addon-combine.ts

@@ -132,10 +132,11 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
     let l = propsGroup.length;
     while (l-- > 0) {
       const item = propsGroup[l];
-      if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) {
+      // if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) {
-        advanceGroup = item.items || [];
+      //   advanceGroup = item.items || [];
-        propsGroup.splice(l, 1);
+      //   propsGroup.splice(l, 1);
-      } else if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') {
+      // } 
+      if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') {
         propsGroup.splice(l, 1);
         stylesGroup.push(item);
         if (item.extraProps?.defaultCollapsed && item.name !== 'containerStyle') {
@@ -212,6 +213,9 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
         }, {
           componentName: 'VariableSetter'
         }],
+        extraProps: {
+          display: 'block',
+        },
       });
     }
     if (supports.loop !== false) {
@@ -252,18 +256,28 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
               }
             },
           },
-          {
-            name: 'key',
-            title: '循环 Key',
-            setter: [{
-              componentName: 'StringSetter',
-            }, {
-              componentName: 'VariableSetter'
-            }],
-          },
         ],
+        extraProps: {
+          display: 'accordion',
+        },
       })
     }
+    advanceGroup.push({
+      name: 'key',
+      title: {
+        label: '渲染唯一标识（key）',
+        tip: '搭配「条件渲染」或「循环渲染」时使用，和 react 组件中的 key 原理相同，点击查看帮助',
+        docUrl: 'https://yuque.antfin-inc.com/legao/help3.0/ca5in7',
+      },
+      setter: [{
+        componentName: 'StringSetter',
+      }, {
+        componentName: 'VariableSetter'
+      }],
+      extraProps: {
+        display: 'block',
+      },
+    },)
   }
   if (advanceGroup.length > 0) {
     combined.push({

packages/plugin-components-pane/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.36"></a>
+## [0.8.36](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.35...@ali/lowcode-plugin-components-pane@0.8.36) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
+
+<a name="0.8.35"></a>
+## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.34...@ali/lowcode-plugin-components-pane@0.8.35) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
+
+<a name="0.8.34"></a>
+## [0.8.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.33...@ali/lowcode-plugin-components-pane@0.8.34) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
+
 <a name="0.8.33"></a>
 ## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.32...@ali/lowcode-plugin-components-pane@0.8.33) (2020-07-22)
 

packages/plugin-components-pane/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-components-pane",
-  "version": "0.8.33",
+  "version": "0.8.36",
   "description": "alibaba lowcode editor component-list plugin",
   "files": [
     "es/",
@@ -20,8 +20,8 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/ve-component-list": "^1.1.1",
     "@alifd/next": "^1.19.19",

packages/plugin-designer/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.9.34"></a>
+## [0.9.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.33...@ali/lowcode-plugin-designer@0.9.34) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-designer
+
+<a name="0.9.33"></a>
+## [0.9.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.32...@ali/lowcode-plugin-designer@0.9.33) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-designer
+
+<a name="0.9.32"></a>
+## [0.9.32](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.31...@ali/lowcode-plugin-designer@0.9.32) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-designer
+
 <a name="0.9.31"></a>
 ## [0.9.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.30...@ali/lowcode-plugin-designer@0.9.31) (2020-07-22)
 

packages/plugin-designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-designer",
-  "version": "0.9.31",
+  "version": "0.9.34",
   "description": "alibaba lowcode editor designer plugin",
   "files": [
     "es",
@@ -20,8 +20,8 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },

packages/plugin-event-bind-dialog/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.24"></a>
+## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.23...@ali/lowcode-plugin-event-bind-dialog@0.8.24) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog
+
 <a name="0.8.23"></a>
 ## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.22...@ali/lowcode-plugin-event-bind-dialog@0.8.23) (2020-07-22)
 

packages/plugin-event-bind-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-event-bind-dialog",
-  "version": "0.8.23",
+  "version": "0.8.24",
   "description": "alibaba lowcode editor event bind dialog plugin",
   "files": [
     "es",
@@ -19,7 +19,7 @@
   ],
   "author": "zude.hzd",
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@ali/lowcode-types": "^0.8.13",
     "@alifd/next": "^1.19.16",
     "react": "^16.8.1",

packages/plugin-outline-pane/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.40"></a>
+## [0.8.40](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.39...@ali/lowcode-plugin-outline-pane@0.8.40) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
+
+<a name="0.8.39"></a>
+## [0.8.39](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.38...@ali/lowcode-plugin-outline-pane@0.8.39) (2020-07-28)
+
+
+### Bug Fixes
+
+* 🐛 getPrototype is undefined ([95b3409](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/95b3409))
+
+
+
+
+<a name="0.8.38"></a>
+## [0.8.38](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.37...@ali/lowcode-plugin-outline-pane@0.8.38) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
+
 <a name="0.8.37"></a>
 ## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.36...@ali/lowcode-plugin-outline-pane@0.8.37) (2020-07-22)
 

packages/plugin-outline-pane/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-outline-pane",
-  "version": "0.8.37",
+  "version": "0.8.40",
   "description": "Outline pane for Ali lowCode engine",
   "files": [
     "es",
@@ -14,8 +14,8 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "@alifd/next": "^1.19.16",

packages/plugin-outline-pane/src/views/root-tree-node.tsx

@@ -29,7 +29,7 @@ class ModalTreeNodeView extends Component<{ treeNode: TreeNode }> {
   render() {
     const { treeNode } = this.props;
     const modalNodes = treeNode.children?.filter((item) => {
-      return item.node.getPrototype().isModal();
+      return item.node.getPrototype()?.isModal();
     });
     if (!modalNodes || modalNodes.length === 0) {
       return null;

packages/plugin-sample-logo/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.23"></a>
+## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.22...@ali/lowcode-plugin-sample-logo@0.8.23) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo
+
 <a name="0.8.22"></a>
 ## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.21...@ali/lowcode-plugin-sample-logo@0.8.22) (2020-07-22)
 

packages/plugin-sample-logo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-sample-logo",
-  "version": "0.8.22",
+  "version": "0.8.23",
   "description": "alibaba lowcode editor logo plugin",
   "files": [
     "es/",
@@ -20,7 +20,7 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "react": "^16.8.1"
   },
   "devDependencies": {

packages/plugin-sample-preview/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.38"></a>
+## [0.8.38](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.37...@ali/lowcode-plugin-sample-preview@0.8.38) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
+
+<a name="0.8.37"></a>
+## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.36...@ali/lowcode-plugin-sample-preview@0.8.37) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
+
+<a name="0.8.36"></a>
+## [0.8.36](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.35...@ali/lowcode-plugin-sample-preview@0.8.36) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
+
 <a name="0.8.35"></a>
 ## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.34...@ali/lowcode-plugin-sample-preview@0.8.35) (2020-07-22)
 

packages/plugin-sample-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-sample-preview",
-  "version": "0.8.35",
+  "version": "0.8.38",
   "description": "alibaba lowcode editor sample preview plugin",
   "files": [
     "es",
@@ -18,8 +18,8 @@
     "editor"
   ],
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@alifd/next": "^1.x",
     "react": "^16.8.1"
   },

packages/plugin-source-editor/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.21"></a>
+## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.20...@ali/lowcode-plugin-source-editor@0.8.21) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-source-editor
+
 <a name="0.8.20"></a>
 ## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.19...@ali/lowcode-plugin-source-editor@0.8.20) (2020-07-22)
 

packages/plugin-source-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-source-editor",
-  "version": "0.8.20",
+  "version": "0.8.21",
   "description": "alibaba lowcode editor source-editor plugin",
   "files": [
     "es",
@@ -19,7 +19,7 @@
   ],
   "author": "zude.hzd",
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@alifd/next": "^1.19.16",
     "js-beautify": "^1.10.1",
     "prettier": "^1.18.2",

packages/plugin-undo-redo/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.38"></a>
+## [0.8.38](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.37...@ali/lowcode-plugin-undo-redo@0.8.38) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
+
+<a name="0.8.37"></a>
+## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.36...@ali/lowcode-plugin-undo-redo@0.8.37) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
+
+<a name="0.8.36"></a>
+## [0.8.36](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.35...@ali/lowcode-plugin-undo-redo@0.8.36) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
+
 <a name="0.8.35"></a>
 ## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.34...@ali/lowcode-plugin-undo-redo@0.8.35) (2020-07-22)
 

packages/plugin-undo-redo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-undo-redo",
-  "version": "0.8.35",
+  "version": "0.8.38",
   "description": "alibaba lowcode editor undo redo plugin",
   "files": [
     "es",
@@ -19,9 +19,9 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
-    "@ali/lowcode-editor-skeleton": "^0.8.37",
+    "@ali/lowcode-editor-skeleton": "^0.8.40",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "react": "^16.8.1",

packages/plugin-variable-bind-dialog/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.22"></a>
+## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.21...@ali/lowcode-plugin-variable-bind-dialog@0.8.22) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog
+
 <a name="0.8.21"></a>
 ## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.20...@ali/lowcode-plugin-variable-bind-dialog@0.8.21) (2020-07-22)
 

packages/plugin-variable-bind-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-variable-bind-dialog",
-  "version": "0.8.21",
+  "version": "0.8.22",
   "description": "alibaba lowcode editor variable bind dialog plugin",
   "files": [
     "es",
@@ -19,7 +19,7 @@
   ],
   "author": "zude.hzd",
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@alifd/next": "^1.19.16",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"

packages/plugin-zh-en/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.26"></a>
+## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.25...@ali/lowcode-plugin-zh-en@0.8.26) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-zh-en
+
 <a name="0.8.25"></a>
 ## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.24...@ali/lowcode-plugin-zh-en@0.8.25) (2020-07-22)
 

packages/plugin-zh-en/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-zh-en",
-  "version": "0.8.25",
+  "version": "0.8.26",
   "description": "alibaba lowcode editor zhong english plugin",
   "files": [
     "es",
@@ -14,7 +14,7 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.24",
+    "@ali/lowcode-editor-core": "^0.8.25",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "react": "^16.8.1",

packages/rax-simulator-renderer/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.37"></a>
+## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-rax-simulator-renderer@0.8.36...@ali/lowcode-rax-simulator-renderer@0.8.37) (2020-07-29)
+
+
+### Bug Fixes
+
+* getSuitablePlace ([03e7c57](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/03e7c57))
+
+
+
+
+<a name="0.8.36"></a>
+## [0.8.36](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-rax-simulator-renderer@0.8.35...@ali/lowcode-rax-simulator-renderer@0.8.36) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-rax-simulator-renderer
+
+<a name="0.8.35"></a>
+## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-rax-simulator-renderer@0.8.34...@ali/lowcode-rax-simulator-renderer@0.8.35) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-rax-simulator-renderer
+
 <a name="0.8.34"></a>
 ## [0.8.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-rax-simulator-renderer@0.8.33...@ali/lowcode-rax-simulator-renderer@0.8.34) (2020-07-22)
 

packages/rax-simulator-renderer/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ali/lowcode-rax-simulator-renderer",
-  "version": "0.8.34",
+  "version": "0.8.37",
   "description": "rax simulator renderer for alibaba lowcode designer",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -14,7 +14,7 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
     "@ali/lowcode-rax-renderer": "^0.1.6",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
@@ -52,5 +52,6 @@
     "require": [
       "ts-node/register"
     ]
-  }
+  },
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@0.8.36/build/index.html"
 }

packages/react-renderer/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.17"></a>
+## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-renderer@0.8.16...@ali/lowcode-react-renderer@0.8.17) (2020-07-29)
+
+
+### Bug Fixes
+
+* slot 兼容问题 + loop key bug fix ([bc64017](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bc64017))
+
+
+
+
 <a name="0.8.16"></a>
 ## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-renderer@0.8.15...@ali/lowcode-react-renderer@0.8.16) (2020-07-22)
 

packages/react-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-react-renderer",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "description": "react renderer for ali lowcode engine",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/react-renderer/src/engine/base.jsx

@@ -309,6 +309,8 @@ export default class BaseEngine extends PureComponent {
       if (scopeKey && this.__compScopes[scopeKey]) {
         props.__scope = this.__compScopes[scopeKey];
       }
+      // FIXME 这里清除 key 是为了避免循环渲染中更改 key 导致的渲染重复
+      props.key = '';
       if (schema.__ctx && schema.__ctx.lunaKey) {
         if (!isFileSchema(schema)) {
           engine && engine.props.onCompGetCtx(schema, self);
@@ -317,6 +319,7 @@ export default class BaseEngine extends PureComponent {
       } else if (typeof idx === 'number' && !props.key) {
         props.key = idx;
       }
+
       props.__id = schema.id;
       const renderComp = (props) => {
         return engine.createElement(

packages/react-simulator-renderer/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.40"></a>
+## [0.8.40](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.39...@ali/lowcode-react-simulator-renderer@0.8.40) (2020-07-29)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer
+
+<a name="0.8.39"></a>
+## [0.8.39](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.38...@ali/lowcode-react-simulator-renderer@0.8.39) (2020-07-28)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer
+
+<a name="0.8.38"></a>
+## [0.8.38](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.37...@ali/lowcode-react-simulator-renderer@0.8.38) (2020-07-23)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer
+
 <a name="0.8.37"></a>
 ## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.36...@ali/lowcode-react-simulator-renderer@0.8.37) (2020-07-22)
 

packages/react-simulator-renderer/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ali/lowcode-react-simulator-renderer",
-  "version": "0.8.37",
+  "version": "0.8.40",
   "description": "react simulator renderer for alibaba lowcode designer",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,8 +13,8 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.31",
+    "@ali/lowcode-designer": "^0.9.34",
-    "@ali/lowcode-react-renderer": "^0.8.16",
+    "@ali/lowcode-react-renderer": "^0.8.17",
     "@ali/lowcode-types": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.15",
     "@ali/vu-css-style": "^1.0.2",

packages/react-simulator-renderer/src/renderer.ts

@@ -213,55 +213,77 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
   }
 
   createComponent(schema: ComponentSchema): Component | null {
-    const _schema = {
+    let _schema: any = {
       ...schema,
     };
     _schema.methods = {};
     _schema.lifeCycles = {};
 
+    const node = host.document.createNode(_schema);
+    _schema = node.export(TransformStage.Render);
+
     const processPropsSchema = (propsSchema: any, propsMap: any): any => {
       if (!propsSchema) {
         return {};
       }
 
-      const result = { ...propsSchema };
+      let result = { ...propsSchema };
       const reg = /^(?:this\.props|props)\.(\S+)$/;
-      Object.keys(propsSchema).map((key: string) => {
+      Object.keys(result).map((key: string) => {
-        if (propsSchema[key].type === 'JSExpression') {
+        if (result[key].type === 'JSExpression') {
-          const { value } = propsSchema[key];
+          const { value } = result[key];
           const matched = reg.exec(value);
           if (matched) {
             const propName = matched[1];
             result[key] = propsMap[propName];
           }
+        } else if (result[key].type === 'JSSlot') {
+          const schema = result[key].value;
+          result[key] = createElement(Ele, {schema, propsMap: {}});
         }
       });
+
       return result;
     };
 
-    const getElement = (componentsMap: any, schema: any, propsMap: any): ReactElement => {
-      const Com = componentsMap[schema.componentName];
-      let children = null;
-      if (schema.children && schema.children.length > 0) {
-        children = schema.children.map((item: any) => getElement(componentsMap, item, propsMap));
-      }
-      const _leaf = host.document.designer.currentDocument?.createNode(schema);
-      const node = host.document.createNode(schema);
-      let { props } = schema;
-      props = host.document.designer.transformProps(props, node, TransformStage.Init);
-      props = host.document.designer.transformProps(props, node, TransformStage.Upgrade);
-      props = processPropsSchema(props, propsMap);
-      props = host.document.designer.transformProps(props, node, TransformStage.Render);
-      return createElement(Com, { ...props, _leaf }, children);
-    };
-
     const renderer = this;
+    const componentsMap = renderer.componentsMap;
+
+    class Ele extends React.Component<{ schema: any, propsMap: any }> {
+      private isModal: boolean;
+
+      constructor(props: any){
+        super(props);
+        const componentMeta = host.document.getComponentMeta(props.schema.componentName);
+        if (componentMeta?.prototype?.isModal()) {
+          this.isModal = true;
+          return;
+        }
+      }
+
+      render() {
+        if (this.isModal) {
+          return null;
+        }
+        const { schema, propsMap } = this.props;
+        const Com = componentsMap[schema.componentName];
+        let children = null;
+        if (schema.children && schema.children.length > 0) {
+          children = schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
+        }
+        const props = processPropsSchema(schema.props, propsMap);
+        const _leaf = host.document.createNode(schema);
+
+        return createElement(Com, {...props, _leaf}, children);
+      }
+    }
+
     class Com extends React.Component {
       render() {
-        const componentsMap = renderer.componentsMap;
+        let children = [];
-        let children = null;
+        const propsMap = this.props;
         if (_schema.children && Array.isArray(_schema.children)) {
-          children = _schema.children?.map((item: any) => getElement(componentsMap, item, this.props));
+          children = _schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
         }
         return createElement(React.Fragment, {}, children);
       }