@tmagic/editor 1.1.0-beta.6 → 1.1.0-beta.7

package/dist/tmagic-editor.umd.js

@@ -37,7 +37,7 @@
     window.globalThis = window;
   }
 
-  const _sfc_main$m = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -72,9 +72,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$g]]);
+  const Code = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$g]]);
 
-  const _sfc_main$l = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -139,13 +139,12 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$f]]);
+  const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$f]]);
 
   const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
-      labelWidth: null,
       config: null,
       model: null,
       prop: null,
@@ -269,7 +268,7 @@
     }
     return value;
   };
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -384,7 +383,7 @@
   function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
   }
-  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$e]]);
+  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -1852,7 +1851,7 @@
     }
   };
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1872,7 +1871,7 @@
 
   const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  const _hoisted_3$1 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
   function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -1890,14 +1889,14 @@
               _: 1
             })
           ]),
-          _hoisted_3$2
+          _hoisted_3$1
         ])
       ])
     ]);
   }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$d]]);
+  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -1949,9 +1948,9 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$c]]);
+  const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c]]);
 
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -2032,9 +2031,9 @@
       ]))
     ]);
   }
-  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$b]]);
+  const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     name: "m-icon",
     components: { Edit: iconsVue.Edit },
     props: {
@@ -2071,7 +2070,7 @@
       _: 1
     }));
   }
-  const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$a]]);
+  const MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$a]]);
 
   const _hoisted_1$7 = {
     key: 1,
@@ -2081,8 +2080,8 @@
     class: "menu-item-text",
     style: { "margin": "0 5px" }
   };
-  const _hoisted_3$1 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "ToolButton",
     props: {
       data: {
@@ -2325,7 +2324,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_3$1, [
+              vue.createElementVNode("span", _hoisted_3, [
                 vue.createTextVNode(vue.toDisplayString(vue.unref(item).text), 1),
                 vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -2342,9 +2341,9 @@
     }
   });
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     name: "nav-menu",
-    components: { ToolButton: _sfc_main$e },
+    components: { ToolButton: _sfc_main$f },
     props: {
       data: {
         type: Object,
@@ -2385,9 +2384,9 @@
       }), 128))
     ], 4);
   }
-  const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$9]]);
+  const NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -2451,9 +2450,9 @@
       }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"])
     ]);
   }
-  const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$8]]);
+  const PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -2594,9 +2593,9 @@
       _: 3
     });
   }
-  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$7]]);
+  const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
 
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "ContentMenu",
     props: {
       menuData: { default: () => [] },
@@ -2685,7 +2684,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$e, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$f, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -2709,8 +2708,8 @@
     }
   });
 
-  const _sfc_main$9 = vue.defineComponent({
-    components: { ContentMenu: _sfc_main$a },
+  const _sfc_main$a = vue.defineComponent({
+    components: { ContentMenu: _sfc_main$b },
     setup() {
       const services = vue.inject("services");
       const menu = vue.ref();
@@ -2801,7 +2800,7 @@
       style: { "overflow": "initial" }
     }, null, 8, ["menu-data"]);
   }
-  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$6]]);
+  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
 
   const throttleTime = 150;
   const select = async (data, editorService) => {
@@ -2901,7 +2900,7 @@
       tree.value?.filter(val);
     }
   });
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
@@ -3012,9 +3011,9 @@
       _: 3
     });
   }
-  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$5]]);
+  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
 
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     components: { MIcon },
     props: {
       data: {
@@ -3102,9 +3101,9 @@
       _: 3
     }, 8, ["name"])) : vue.createCommentVNode("", true);
   }
-  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$4]]);
+  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
 
-  const _sfc_main$6 = vue.defineComponent({
+  const _sfc_main$7 = vue.defineComponent({
     components: { TabPane },
     name: "m-sidebar",
     props: {
@@ -3159,89 +3158,69 @@
       _: 3
     }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
   }
-  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$3]]);
+  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$3]]);
 
-  const _hoisted_1$2 = {
-    class: "m-editor-page-bar",
-    ref: "pageBar"
-  };
-  const _hoisted_2 = ["onClick"];
-  const _hoisted_3 = { class: "m-editor-page-bar-title" };
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PageBar",
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PageBarScrollContainer",
     setup(__props) {
-      const useScroll = (root2) => {
-        const pageBar = vue.ref();
-        const itemsContainer = vue.ref();
-        const pageBarWidth = vue.ref(0);
-        const canScroll = vue.ref(false);
-        const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 105);
-        let translateLeft = 0;
-        const resizeObserver = new ResizeObserver((entries) => {
-          for (const { contentRect } of entries) {
-            const { width } = contentRect;
-            pageBarWidth.value = width || 0;
-            setCanScroll();
-          }
-        });
-        const setCanScroll = () => {
-          if (itemsContainer.value) {
-            canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
-          }
-        };
-        const scroll = (type) => {
-          if (!itemsContainer.value)
-            return;
-          const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
-          if (type === "left") {
-            translateLeft += 100;
-            if (translateLeft > 0) {
-              translateLeft = 0;
-            }
-          } else if (type === "right") {
-            translateLeft -= 100;
-            if (-translateLeft > maxScrollLeft) {
-              translateLeft = -maxScrollLeft;
-            }
-          } else if (type === "start") {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const pageBar = vue.ref();
+      const itemsContainer = vue.ref();
+      const pageBarWidth = vue.ref(0);
+      const canScroll = vue.ref(false);
+      const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 105);
+      let translateLeft = 0;
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          const { width } = contentRect;
+          pageBarWidth.value = width || 0;
+          setCanScroll();
+        }
+      });
+      const setCanScroll = () => {
+        if (itemsContainer.value) {
+          canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+        }
+      };
+      const scroll = (type) => {
+        if (!itemsContainer.value)
+          return;
+        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (type === "left") {
+          translateLeft += 100;
+          if (translateLeft > 0) {
             translateLeft = 0;
-          } else if (type === "end") {
+          }
+        } else if (type === "right") {
+          translateLeft -= 100;
+          if (-translateLeft > maxScrollLeft) {
             translateLeft = -maxScrollLeft;
           }
-          itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-        };
-        vue.onMounted(() => {
-          pageBar.value && resizeObserver.observe(pageBar.value);
-        });
-        vue.onUnmounted(() => {
-          resizeObserver.disconnect();
-        });
-        vue.watch(() => root2.value?.items.length, (length = 0, preLength = 0) => {
-          setTimeout(() => {
-            setCanScroll();
-            if (length < preLength) {
-              scroll("start");
-            } else {
-              scroll("end");
-            }
-          });
-        });
-        return {
-          pageBar,
-          itemsContainer,
-          canScroll,
-          itemsContainerWidth,
-          scroll
-        };
+        } else if (type === "start") {
+          translateLeft = 0;
+        } else if (type === "end") {
+          translateLeft = -maxScrollLeft;
+        }
+        itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
+      vue.onMounted(() => {
+        pageBar.value && resizeObserver.observe(pageBar.value);
+      });
+      vue.onUnmounted(() => {
+        resizeObserver.disconnect();
+      });
       const root = vue.computed(() => editorService?.get("root"));
-      const scrollState = useScroll(root);
-      const page = vue.computed(() => editorService?.get("page"));
-      const switchPage = (page2) => {
-        editorService?.select(page2);
-      };
+      vue.watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+        setTimeout(() => {
+          setCanScroll();
+          if (length < preLength) {
+            scroll("start");
+          } else {
+            scroll("end");
+          }
+        });
+      });
       const addPage = () => {
         if (!editorService)
           return;
@@ -3251,21 +3230,13 @@
         };
         editorService.add(pageConfig);
       };
-      const copy = (node) => {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0
-        });
-      };
-      const remove = (node) => {
-        editorService?.remove(node);
-      };
       return (_ctx, _cache) => {
         const _component_el_icon = vue.resolveComponent("el-icon");
-        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
-        const _component_el_popover = vue.resolveComponent("el-popover");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-page-bar",
+          ref_key: "pageBar",
+          ref: pageBar
+        }, [
           vue.createElementVNode("div", {
             id: "m-editor-page-bar-add-icon",
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
@@ -3278,10 +3249,10 @@
               _: 1
             })
           ]),
-          vue.unref(scrollState).canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(scrollState).scroll("left"))
+            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
             vue.createVNode(_component_el_icon, null, {
               default: vue.withCtx(() => [
@@ -3293,16 +3264,64 @@
           vue.unref(root) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: "m-editor-page-bar-items",
-            ref: "itemsContainer",
-            style: vue.normalizeStyle(`width: ${vue.unref(scrollState).itemsContainerWidth}px`)
+            ref_key: "itemsContainer",
+            ref: itemsContainer,
+            style: vue.normalizeStyle(`width: ${vue.unref(itemsContainerWidth)}px`)
           }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root).items, (item) => {
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+          }, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
+              ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true)
+        ], 512);
+      };
+    }
+  });
+
+  const _hoisted_1$2 = ["onClick"];
+  const _hoisted_2 = { class: "m-editor-page-bar-title" };
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PageBar",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
+      const page = vue.computed(() => editorService?.get("page"));
+      const switchPage = (page2) => {
+        editorService?.select(page2);
+      };
+      const copy = (node) => {
+        node && editorService?.copy(node);
+        editorService?.paste({
+          left: 0,
+          top: 0
+        });
+      };
+      const remove = (node) => {
+        editorService?.remove(node);
+      };
+      return (_ctx, _cache) => {
+        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+        const _component_el_icon = vue.resolveComponent("el-icon");
+        const _component_el_popover = vue.resolveComponent("el-popover");
+        return vue.openBlock(), vue.createBlock(_sfc_main$6, null, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root) && vue.unref(root).items || [], (item) => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                key: item.key,
                 class: vue.normalizeClass(["m-editor-page-bar-item", { active: vue.unref(page)?.id === item.id }]),
+                key: item.key,
                 onClick: ($event) => switchPage(item)
               }, [
-                vue.createElementVNode("div", _hoisted_3, [
+                vue.createElementVNode("div", _hoisted_2, [
                   vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                     vue.createVNode(_component_el_tooltip, {
                       effect: "dark",
@@ -3333,7 +3352,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$e, {
+                        vue.createVNode(_sfc_main$f, {
                           data: {
                             type: "button",
                             text: "\u590D\u5236",
@@ -3341,7 +3360,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$e, {
+                        vue.createVNode(_sfc_main$f, {
                           data: {
                             type: "button",
                             text: "\u5220\u9664",
@@ -3354,22 +3373,11 @@
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_2);
+              ], 10, _hoisted_1$2);
             }), 128))
-          ], 4)) : vue.createCommentVNode("", true),
-          vue.unref(scrollState).canScroll ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(scrollState).scroll("right"))
-          }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
-              ]),
-              _: 1
-            })
-          ])) : vue.createCommentVNode("", true)
-        ], 512);
+          ]),
+          _: 3
+        });
       };
     }
   });
@@ -3732,7 +3740,7 @@
       };
       expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$b, {
           "menu-data": menuData,
           ref_key: "menu",
           ref: menu
@@ -4427,7 +4435,7 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component(_sfc_main$k.name, _sfc_main$k);
+      app.component("m-fields-ui-select", _sfc_main$l);
       app.component(CodeLink.name, CodeLink);
       app.component(Code.name, Code);
       app.component(CodeEditor.name, CodeEditor);
@@ -4446,7 +4454,7 @@
   exports.PropsPanel = PropsPanel;
   exports.TMagicCodeEditor = CodeEditor;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$e;
+  exports.ToolButton = _sfc_main$f;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.change2Fixed = change2Fixed;
   exports.debug = debug;