@tmagic/editor 1.3.7 → 1.3.9

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('monaco-editor'), require('serialize-javascript'), require('@tmagic/design'), require('@tmagic/schema'), require('@tmagic/form'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('moveable'), require('@tmagic/dep'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', 'serialize-javascript', '@tmagic/design', '@tmagic/schema', '@tmagic/form', '@tmagic/table', '@tmagic/utils', 'gesto', 'moveable', '@tmagic/dep', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.monaco, global.serialize, global.design, global.schema, global.form, global.table, global.utils, global.Gesto, global.Moveable, global.dep, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, monaco, serialize, design, schema, form, table, utils, Gesto, Moveable, dep, StageCore, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('moveable'), require('@tmagic/dep'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', '@tmagic/table', '@tmagic/utils', 'gesto', 'moveable', '@tmagic/dep', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.table, global.utils, global.Gesto, global.Moveable, global.dep, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, table, utils, Gesto, Moveable, dep, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,6 +29,9 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
+  emmetMonacoEs.emmetHTML(monaco__namespace);
+  emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
+
   const _hoisted_1$t = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
@@ -1139,6 +1142,22 @@
       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;
     }
@@ -1824,6 +1843,9 @@
     clear(nodes) {
       return this.watcher.clear(nodes);
     }
+    clearByType(type, nodes) {
+      return this.watcher.clearByType(type, nodes);
+    }
     hasTarget(id, type = dep.DepTargetType.DEFAULT) {
       return this.watcher.hasTarget(id, type);
     }
@@ -2240,11 +2262,11 @@
         if (!targetConfig)
           return;
         target.deps[config.id]?.keys?.forEach((fullKey) => {
-          const relateOriginId = lodashEs.get(config, fullKey);
+          const relateOriginId = utils.getValueByKeyPath(fullKey, config);
           const relateTargetId = relateIdMap[relateOriginId];
           if (!relateTargetId)
             return;
-          lodashEs.set(targetConfig, fullKey, relateTargetId);
+          utils.setValueByKeyPath(fullKey, relateTargetId, targetConfig);
         });
       });
     }
@@ -2770,7 +2792,7 @@
      */
     copyWithRelated(config) {
       const copyNodes = Array.isArray(config) ? config : [config];
-      depService.getTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+      depService.clearByType(dep.DepTargetType.RELATED_COMP_WHEN_COPY);
       depService.collect(copyNodes, true, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
       const customTarget = depService.getTarget(
         dep.DepTargetType.RELATED_COMP_WHEN_COPY,
@@ -2884,14 +2906,19 @@
       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: lodashEs.cloneDeep(vue.toRaw(parent)),
@@ -2900,6 +2927,7 @@
       });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
+      this.emit("move-layer", offset);
     }
     /**
      * 移动到指定容器中
@@ -5091,8 +5119,8 @@
         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
             }));
           }
@@ -5102,6 +5130,9 @@
       const changeHandler = async () => {
         emit("change", props.model[props.name]);
       };
+      const editPageFragment = (id) => {
+        services?.editorService.select(id);
+      };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
@@ -5112,7 +5143,13 @@
               model: _ctx.model,
               size: _ctx.size,
               onChange: changeHandler
-            }, null, 8, ["model", "size"])
+            }, null, 8, ["model", "size"]),
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+              key: 0,
+              class: "icon",
+              icon: vue.unref(iconsVue.Edit),
+              onClick: _cache[0] || (_cache[0] = ($event) => editPageFragment(_ctx.model[_ctx.name]))
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ])
         ]);
       };
@@ -6188,15 +6225,17 @@
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
                 vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
-              vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
-                "page-bar-title": vue.withCtx(({ page: page2 }) => [
-                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
-                ]),
-                "page-bar-popover": vue.withCtx(({ page: page2 }) => [
-                  vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
-                ]),
-                _: 3
-              }, 8, ["disabled-page-fragment"])
+              vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
+                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                  "page-bar-title": vue.withCtx(({ page: page2 }) => [
+                    vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
+                  ]),
+                  "page-bar-popover": vue.withCtx(({ page: page2 }) => [
+                    vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: page2 })
+                  ]),
+                  _: 3
+                }, 8, ["disabled-page-fragment"])
+              ])
             ]),
             _: 2
           }, [
@@ -6405,7 +6444,7 @@
     props: {
       extendState: { type: Function }
     },
-    emits: ["mounted"],
+    emits: ["mounted", "submit-error", "form-error"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const internalInstance = vue.getCurrentInstance();
@@ -6444,11 +6483,12 @@
           const values2 = await configForm.value?.submitForm();
           services?.editorService.update(values2);
         } catch (e) {
-          console.error(e);
-          design.tMagicMessage.closeAll();
-          design.tMagicMessage.error(e.message);
+          emit("submit-error", e);
         }
       };
+      const errorHandler = (e) => {
+        emit("form-error", e);
+      };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
@@ -6462,7 +6502,8 @@
             "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)), [
           [vue.vShow, nodes.value.length === 1]
@@ -6777,7 +6818,10 @@
     }
   });
 
-  const _hoisted_1$9 = { key: 1 };
+  const _hoisted_1$9 = {
+    key: 1,
+    class: "m-editor-tree-empty"
+  };
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
@@ -10818,7 +10862,7 @@
       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;
@@ -10938,7 +10982,9 @@
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
               vue.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": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "props-panel-header")
@@ -10956,6 +11002,9 @@
           footer: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "footer")
           ]),
+          "page-bar": vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "page-bar")
+          ]),
           "page-bar-title": vue.withCtx(({ page }) => [
             vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
           ]),