@tmagic/editor 1.3.7 → 1.3.9

package/dist/style.css

@@ -901,6 +901,11 @@
 .m-editor-tree .m-editor-tree-node .tree-node .tree-node-tool .tmagic-design-icon {
   margin-right: 10px;
 }
+.m-editor-tree .m-editor-tree-empty {
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+}
 .m-editor-float-box {
   position: absolute;
   background-color: #fff;
@@ -928,6 +933,20 @@
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
+.m-fields-page-fragment-select {
+  width: 100%;
+}
+.m-fields-page-fragment-select .page-fragment-select-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.m-fields-page-fragment-select .page-fragment-select-container .select {
+  flex: 1;
+}
+.m-fields-page-fragment-select .page-fragment-select-container .icon {
+  margin-left: 10px;
+}
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;

package/dist/tmagic-editor.js

@@ -1,13 +1,14 @@
 import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, normalizeProps, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, toHandlers, mergeDefaults } from 'vue';
 import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, Top, Bottom } from '@element-plus/icons-vue';
-import { throttle, isEmpty, cloneDeep, mergeWith, get, set, isObject, uniq, map, has, pick, keys } from 'lodash-es';
-import * as monaco from 'monaco-editor';
+import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
 import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
+import * as monaco from 'monaco-editor';
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
-import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
+import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
 import Moveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
@@ -23,6 +24,9 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
+emmetHTML(monaco);
+emmetCSS(monaco, ["css", "scss"]);
+
 const _hoisted_1$t = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
@@ -1133,6 +1137,22 @@ class DataSource extends BaseService {
     events: {},
     methods: {}
   });
+  constructor() {
+    super([
+      { name: "getFormConfig", isAsync: false },
+      { name: "setFormConfig", isAsync: false },
+      { name: "getFormValue", isAsync: false },
+      { name: "setFormValue", isAsync: false },
+      { name: "getFormEvent", isAsync: false },
+      { name: "setFormEvent", isAsync: false },
+      { name: "getFormMethod", isAsync: false },
+      { name: "setFormMethod", isAsync: false },
+      { name: "add", isAsync: false },
+      { name: "update", isAsync: false },
+      { name: "remove", isAsync: false },
+      { name: "createId", isAsync: false }
+    ]);
+  }
   set(name, value) {
     this.state[name] = value;
   }
@@ -1818,6 +1838,9 @@ class Dep extends BaseService {
   clear(nodes) {
     return this.watcher.clear(nodes);
   }
+  clearByType(type, nodes) {
+    return this.watcher.clearByType(type, nodes);
+  }
   hasTarget(id, type = DepTargetType.DEFAULT) {
     return this.watcher.hasTarget(id, type);
   }
@@ -2234,11 +2257,11 @@ class Props extends BaseService {
       if (!targetConfig)
         return;
       target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = get(config, fullKey);
+        const relateOriginId = getValueByKeyPath(fullKey, config);
         const relateTargetId = relateIdMap[relateOriginId];
         if (!relateTargetId)
           return;
-        set(targetConfig, fullKey, relateTargetId);
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
     });
   }
@@ -2764,7 +2787,7 @@ class Editor extends BaseService {
    */
   copyWithRelated(config) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
     depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
     const customTarget = depService.getTarget(
       DepTargetType.RELATED_COMP_WHEN_COPY,
@@ -2878,14 +2901,19 @@ class Editor extends BaseService {
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
     const layout = await this.getLayout(parent, node);
     const isRelative = layout === Layout.RELATIVE;
-    brothers.splice(index, 1);
+    let offsetIndex;
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
+      offsetIndex = isRelative ? 0 : brothers.length;
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length : 0, 0, node);
+      offsetIndex = isRelative ? brothers.length : 0;
     } else {
-      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
+      offsetIndex = index + (isRelative ? -offset : offset);
+    }
+    if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) {
+      return;
     }
+    brothers.splice(index, 1);
+    brothers.splice(offsetIndex, 0, node);
     const grandparent = this.getParentById(parent.id);
     this.get("stage")?.update({
       config: cloneDeep(toRaw(parent)),
@@ -2894,6 +2922,7 @@ class Editor extends BaseService {
     });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+    this.emit("move-layer", offset);
   }
   /**
    * 移动到指定容器中
@@ -5085,8 +5114,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       options: () => {
         if (pageList.value) {
           return pageList.value.map((item) => ({
-            text: `${item.name}（${item.id}）`,
-            label: `${item.name}（${item.id}）`,
+            text: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+            label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
             value: item.id
           }));
         }
@@ -5096,6 +5125,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const changeHandler = async () => {
       emit("change", props.model[props.name]);
     };
+    const editPageFragment = (id) => {
+      services?.editorService.select(id);
+    };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
@@ -5106,7 +5138,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             model: _ctx.model,
             size: _ctx.size,
             onChange: changeHandler
-          }, null, 8, ["model", "size"])
+          }, null, 8, ["model", "size"]),
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$N, {
+            key: 0,
+            class: "icon",
+            icon: unref(Edit),
+            onClick: _cache[0] || (_cache[0] = ($event) => editPageFragment(_ctx.model[_ctx.name]))
+          }, null, 8, ["icon"])) : createCommentVNode("", true)
         ])
       ]);
     };
@@ -6182,15 +6220,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
               createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
-            createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
-              "page-bar-title": withCtx(({ page: page2 }) => [
-                renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
-              ]),
-              "page-bar-popover": withCtx(({ page: page2 }) => [
-                renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
-              ]),
-              _: 3
-            }, 8, ["disabled-page-fragment"])
+            renderSlot(_ctx.$slots, "page-bar", {}, () => [
+              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                "page-bar-title": withCtx(({ page: page2 }) => [
+                  renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
+                ]),
+                "page-bar-popover": withCtx(({ page: page2 }) => [
+                  renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
+                ]),
+                _: 3
+              }, 8, ["disabled-page-fragment"])
+            ])
           ]),
           _: 2
         }, [
@@ -6399,7 +6439,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     extendState: { type: Function }
   },
-  emits: ["mounted"],
+  emits: ["mounted", "submit-error", "form-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const internalInstance = getCurrentInstance();
@@ -6438,11 +6478,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         const values2 = await configForm.value?.submitForm();
         services?.editorService.update(values2);
       } catch (e) {
-        console.error(e);
-        tMagicMessage.closeAll();
-        tMagicMessage.error(e.message);
+        emit("submit-error", e);
       }
     };
+    const errorHandler = (e) => {
+      emit("form-error", e);
+    };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$b, [
@@ -6456,7 +6497,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           "init-values": values.value,
           config: curFormConfig.value,
           "extend-state": _ctx.extendState,
-          onChange: submit
+          onChange: submit,
+          onError: errorHandler
         }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"])
       ], 512)), [
         [vShow, nodes.value.length === 1]
@@ -6771,7 +6813,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { key: 1 };
+const _hoisted_1$9 = {
+  key: 1,
+  class: "m-editor-tree-empty"
+};
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
@@ -10812,7 +10857,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabledPageFragment: { type: Boolean },
     customContentMenu: { type: Function }
   }, defaultEditorProps),
-  emits: ["props-panel-mounted", "update:modelValue"],
+  emits: ["props-panel-mounted", "update:modelValue", "props-form-error", "props-submit-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -10932,7 +10977,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
             createVNode(_sfc_main$p, {
               "extend-state": _ctx.extendFormState,
-              onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
+              onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
+              onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
+              onSubmitError: _cache[2] || (_cache[2] = (e) => _ctx.$emit("props-submit-error", e))
             }, {
               "props-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "props-panel-header")
@@ -10950,6 +10997,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         footer: withCtx(() => [
           renderSlot(_ctx.$slots, "footer")
         ]),
+        "page-bar": withCtx(() => [
+          renderSlot(_ctx.$slots, "page-bar")
+        ]),
         "page-bar-title": withCtx(({ page }) => [
           renderSlot(_ctx.$slots, "page-bar-title", { page })
         ]),