@tmagic/editor 1.2.0-beta.17 → 1.2.0-beta.19

package/dist/tmagic-editor.mjs

@@ -1,16 +1,16 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, createElementBlock, createVNode, ref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, uniq, isObject } from 'lodash-es';
+import { createValues, MForm } from '@tmagic/form';
 import { HookType, NodeType } from '@tmagic/schema';
 import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
 import { TMagicButton, TMagicTooltip, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import * as monaco from 'monaco-editor';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
-import { MForm } from '@tmagic/form';
 import KeyController from 'keycon';
 
 const __default__$t = defineComponent({
@@ -136,6 +136,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
+    const mForm = inject("mForm");
     const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
     const tableConfig = computed(() => {
       const defaultConfig = {
@@ -166,7 +167,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             name: "params",
             label: "\u53C2\u6570",
             defaultValue: {},
-            itemsFunction: (row) => getParamsConfig(row.codeId)
+            itemsFunction: (row) => {
+              const paramsConfig = getParamsConfig(row.codeId);
+              if (!row.params)
+                row.params = {};
+              if (isEmpty(row.params)) {
+                createValues(mForm, paramsConfig, {}, row.params);
+              }
+              return paramsConfig;
+            }
           }
         ]
       };
@@ -1151,6 +1160,7 @@ class History extends BaseService {
       this.state.pageSteps[this.state.pageId] = undoRedo;
     }
     this.setCanUndoRedo();
+    this.emit("page-change", this.state.pageSteps[this.state.pageId]);
   }
   empty() {
     this.state.pageId = void 0;
@@ -1481,7 +1491,7 @@ class Props extends BaseService {
       this.setPropsValue(toLine(type), values[type]);
     });
   }
-  setPropsValue(type, value) {
+  async setPropsValue(type, value) {
     this.state.propsValueMap[type] = value;
   }
   async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
@@ -2566,7 +2576,7 @@ const useStage = (stageOptions) => {
   stage.on("highlight", (el) => {
     editorService.highlight(el.id);
   });
-  stage.on("multiSelect", (els) => {
+  stage.on("multi-select", (els) => {
     editorService.multiSelect(els.map((el) => el.id));
   });
   stage.on("update", (ev) => {
@@ -2586,7 +2596,7 @@ const useStage = (stageOptions) => {
     editorService.select(parent);
     editorService.get("stage").select(parent.id);
   });
-  stage.on("changeGuides", (e) => {
+  stage.on("change-guides", (e) => {
     uiService.set("showGuides", true);
     if (!root.value || !page.value)
       return;
@@ -5463,6 +5473,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
       }
     });
+    watch(page, (page2) => {
+      if (runtime && page2) {
+        runtime.updatePageId?.(page2.id);
+        nextTick(() => {
+          stage?.select(page2.id);
+        });
+      }
+    });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set("stageContainerRect", {
@@ -5684,10 +5702,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          (openBlock(), createBlock(_sfc_main$2, {
-            key: unref(page)?.id,
+          unref(page) ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
             "stage-content-menu": __props.stageContentMenu
-          }, null, 8, ["stage-content-menu"]))
+          }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
         createVNode(_sfc_main$6, null, {
@@ -5746,6 +5764,10 @@ const _sfc_main = defineComponent({
     sidebar: {
       type: Object
     },
+    menu: {
+      type: Object,
+      default: () => ({ left: [], right: [] })
+    },
     layerContentMenu: {
       type: Array,
       default: () => []
@@ -5754,10 +5776,6 @@ const _sfc_main = defineComponent({
       type: Array,
       default: () => []
     },
-    menu: {
-      type: Object,
-      default: () => ({ left: [], right: [] })
-    },
     render: {
       type: Function
     },
@@ -5791,7 +5809,7 @@ const _sfc_main = defineComponent({
     },
     containerHighlightClassName: {
       type: String,
-      default: CONTAINER_HIGHLIGHT_CLASS
+      default: CONTAINER_HIGHLIGHT_CLASS_NAME
     },
     containerHighlightDuration: {
       type: Number,