@tmagic/editor 1.2.0-beta.13 → 1.2.0-beta.14

package/dist/tmagic-editor.umd.js

@@ -531,8 +531,9 @@
     props: {
       left: null,
       right: null,
-      minLeft: { default: 1 },
+      minLeft: { default: 46 },
       minRight: { default: 1 },
+      minCenter: { default: 1 },
       leftClass: null,
       rightClass: null,
       centerClass: null
@@ -541,15 +542,42 @@
     setup(__props, { emit }) {
       const props = __props;
       const el = vue.ref();
+      const hasLeft = vue.computed(() => typeof props.left !== "undefined");
+      const hasRight = vue.computed(() => typeof props.left !== "undefined");
+      const getCenterWidth = (clientWidth2, left, right) => {
+        let center2 = clientWidth2 - left - right;
+        if (center2 < props.minCenter) {
+          center2 = props.minCenter;
+          if (left < right) {
+            right = clientWidth2 - left - props.minCenter;
+          } else {
+            left = clientWidth2 - right - props.minCenter;
+          }
+        }
+        return {
+          center: center2,
+          left,
+          right
+        };
+      };
       let clientWidth = 0;
       const resizerObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
           clientWidth = contentRect.width;
-          center.value = clientWidth - (props.left || 0) - (props.right || 0);
+          let left = props.left || 0;
+          let right = props.right || 0;
+          if (left > clientWidth) {
+            left = clientWidth / 3;
+          }
+          if (right > clientWidth) {
+            right = clientWidth / 3;
+          }
+          const columnWidth = getCenterWidth(clientWidth, left, right);
+          center.value = columnWidth.center;
           emit("change", {
-            left: props.left,
+            left: columnWidth.left,
             center: center.value,
-            right: props.right
+            right: columnWidth.right
           });
         }
       });
@@ -570,11 +598,12 @@
         if (clientWidth - left - (props.right || 0) <= 0) {
           left = props.left;
         }
-        center.value = clientWidth - left - (props.right || 0);
+        const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+        center.value = columnWidth.center;
         emit("change", {
-          left,
+          left: columnWidth.left,
           center: center.value,
-          right: props.right
+          right: columnWidth.right
         });
       };
       const changeRight = (deltaX) => {
@@ -585,11 +614,12 @@
         if (clientWidth - (props.left || 0) - right <= 0) {
           right = props.right;
         }
-        center.value = clientWidth - (props.left || 0) - right;
+        const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+        center.value = columnWidth.center;
         emit("change", {
-          left: props.left,
+          left: columnWidth.left,
           center: center.value,
-          right
+          right: columnWidth.right
         });
       };
       return (_ctx, _cache) => {
@@ -598,7 +628,7 @@
           ref: el,
           class: "m-editor-layout"
         }, [
-          typeof props.left !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.unref(hasLeft) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
               style: vue.normalizeStyle(`width: ${__props.left}px`)
@@ -613,7 +643,7 @@
           }, [
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
-          typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createVNode(_sfc_main$p, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
@@ -3145,18 +3175,17 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "m-editor-wrapper" };
-  const _hoisted_2$5 = {
+  const _hoisted_1$9 = {
     key: 0,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("\u4FDD\u5B58");
-  const _hoisted_4$2 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
-  const _hoisted_5$1 = {
+  const _hoisted_2$5 = /* @__PURE__ */ vue.createTextVNode("\u4FDD\u5B58");
+  const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_4$2 = {
     key: 1,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_6$1 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
   const __default__$g = vue.defineComponent({
     name: "MEditorCodeDraftEditor"
   });
@@ -3178,6 +3207,7 @@
       const editorContent = vue.ref("");
       const codeEditor = vue.ref();
       const originCodeContent = vue.ref("");
+      const isFullScreen = vue.ref(false);
       const codeOptions = vue.computed(() => ({
         ...props.codeOptions,
         readOnly: !props.editable
@@ -3231,8 +3261,16 @@
           emit("close");
         }
       };
+      const toggleFullScreen = () => {
+        isFullScreen.value = !isFullScreen.value;
+        if (codeEditor.value) {
+          codeEditor.value.focus();
+        }
+      };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
+        }, [
           vue.createVNode(_sfc_main$q, {
             ref_key: "codeEditor",
             ref: codeEditor,
@@ -3242,14 +3280,24 @@
             language: __props.language,
             options: vue.unref(codeOptions)
           }, null, 8, ["init-values", "language", "options"]),
-          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
+          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: toggleFullScreen
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+              ]),
+              _: 1
+            }),
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
               onClick: saveCode
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$3
+                _hoisted_2$5
               ]),
               _: 1
             }),
@@ -3259,23 +3307,33 @@
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_4$2
+                _hoisted_3$3
               ]),
               _: 1
             })
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              class: "button",
+              onClick: toggleFullScreen
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+              ]),
+              _: 1
+            }),
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_6$1
+                _hoisted_5$1
               ]),
               _: 1
             })
           ]))
-        ]);
+        ], 2);
       };
     }
   });
@@ -3304,6 +3362,7 @@
         border: true,
         enableFullscreen: false,
         name: "params",
+        maxHeight: "150px",
         items: [
           {
             type: "text",
@@ -4122,7 +4181,7 @@
         {
           type: "button",
           text: "\u590D\u5236",
-          icon: vue.markRaw(iconsVue.DocumentCopy),
+          icon: vue.markRaw(iconsVue.CopyDocument),
           display: () => !isRoot.value,
           handler: () => {
             node.value && services?.editorService.copy(node.value);
@@ -5252,7 +5311,7 @@
         {
           type: "button",
           text: "\u590D\u5236",
-          icon: vue.markRaw(iconsVue.DocumentCopy),
+          icon: vue.markRaw(iconsVue.CopyDocument),
           handler: () => {
             nodes.value && editorService?.copy(nodes.value);
             canPaste.value = true;
@@ -5261,6 +5320,7 @@
         {
           type: "button",
           text: "\u7C98\u8D34",
+          icon: vue.markRaw(iconsVue.DocumentCopy),
           display: () => canPaste.value,
           handler: () => {
             const rect = menu.value?.$el.getBoundingClientRect();