@tmagic/editor 1.3.0-alpha.7 → 1.3.0-alpha.8

package/dist/tmagic-editor.umd.cjs

@@ -572,7 +572,7 @@
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const setDisplayState = () => {
         displayState.value = [];
-        const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+        const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
         let index = 0;
         for (const match of matches) {
           if (typeof match.index === "undefined")
@@ -645,13 +645,13 @@
         }
         return selectionStart;
       };
-      const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+      const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
       const curCharIsDot = (dotIndex) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
       const dsQuerySearch = (queryString, leftCurlyBracketIndex, cb) => {
         let result = [];
         if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
           result = dataSources.value;
-        } else if (leftCurlyBracketIndex > -1) {
+        } else if (leftCurlyBracketIndex > 0) {
           const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
           result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
         }
@@ -703,7 +703,7 @@
         const selectionStart = getSelectionStart();
         const curQueryString = queryString.substring(0, selectionStart);
         const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
-        const dsKeyStringLastIndex = curQueryString.lastIndexOf("{");
+        const dsKeyStringLastIndex = curQueryString.lastIndexOf("${") + 1;
         const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
         if (isFieldTip) {
           fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
@@ -716,7 +716,7 @@
         const selectionStart = input.value?.selectionStart || 0;
         let startText = inputText.substring(0, selectionStart);
         const dotIndex = startText.lastIndexOf(".");
-        const leftCurlyBracketIndex = startText.lastIndexOf("{");
+        const leftCurlyBracketIndex = startText.lastIndexOf("${") + 1;
         const endText = inputText.substring(selectionStart);
         let suggestText = value;
         if (isDataSource) {
@@ -726,7 +726,6 @@
           if (!isRightCurlyBracket(selectionStart + 1)) {
             suggestText = `${suggestText}}`;
           }
-          suggestText = `{${suggestText}}`;
         } else if (!curCharIsDot(dotIndex)) {
           startText = startText.substring(0, dotIndex + 1);
         }
@@ -734,7 +733,7 @@
         await vue.nextTick();
         let newSelectionStart = 0;
         if (isDataSource) {
-          newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+          newSelectionStart = leftCurlyBracketIndex + suggestText.length;
         } else {
           newSelectionStart = dotIndex + suggestText.length + 1;
         }
@@ -777,11 +776,11 @@
           _: 1
         }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
-          class: vue.normalizeClass(`el-input el-input--${_ctx.size}`),
+          class: vue.normalizeClass(`tmagic-data-source-input-text el-input el-input--${_ctx.size}`),
           onMouseup: mouseupHandler
         }, [
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(`el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+            class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
             vue.createElementVNode("div", _hoisted_3$5, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
@@ -800,7 +799,11 @@
                     _: 2
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
-              }), 256))
+              }), 256)),
+              vue.createVNode(_sfc_main$B, {
+                class: "tmagic-data-source-input-icon",
+                icon: vue.unref(iconsVue.Coin)
+              }, null, 8, ["icon"])
             ])
           ], 2)
         ], 34));
@@ -1510,7 +1513,7 @@
           ref: el,
           class: "m-editor-layout"
         }, [
-          hasLeft.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          hasLeft.value && _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
               style: vue.normalizeStyle(`width: ${_ctx.left}px`)
@@ -1525,7 +1528,7 @@
           }, [
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
-          hasRight.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createVNode(_sfc_main$t, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
@@ -1619,6 +1622,40 @@
                     }
                   ]
                 },
+                {
+                  type: "fieldset",
+                  legend: "边框",
+                  items: [
+                    {
+                      name: "borderWidth",
+                      text: "宽度",
+                      defaultValue: "0"
+                    },
+                    {
+                      name: "borderColor",
+                      text: "颜色",
+                      type: "colorPicker"
+                    },
+                    {
+                      name: "borderStyle",
+                      text: "样式",
+                      type: "select",
+                      defaultValue: "none",
+                      options: [
+                        { text: "none", value: "none" },
+                        { text: "hidden", value: "hidden" },
+                        { text: "dotted", value: "dotted" },
+                        { text: "dashed", value: "dashed" },
+                        { text: "solid", value: "solid" },
+                        { text: "double", value: "double" },
+                        { text: "groove", value: "groove" },
+                        { text: "ridge", value: "ridge" },
+                        { text: "inset", value: "inset" },
+                        { text: "outset", value: "outset" }
+                      ]
+                    }
+                  ]
+                },
                 {
                   type: "fieldset",
                   legend: "背景",
@@ -3469,7 +3506,6 @@
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
       const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
@@ -3562,7 +3598,7 @@
             ]),
             _: 2
           }, [
-            pageLength.value > 0 && nodes.value.length === 1 ? {
+            pageLength.value > 0 ? {
               name: "right",
               fn: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
@@ -3921,7 +3957,10 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-props-panel" };
+  const _hoisted_1$e = {
+    key: 0,
+    class: "m-editor-props-panel"
+  };
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
@@ -3935,6 +3974,7 @@
       const curFormConfig = vue.ref([]);
       const services = vue.inject("services");
       const node = vue.computed(() => services?.editorService.get("node"));
+      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const stage = vue.computed(() => services?.editorService.get("stage"));
       const init = async () => {
@@ -3971,7 +4011,7 @@
       };
       __expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -3983,7 +4023,7 @@
             config: curFormConfig.value,
             onChange: submit
           }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
-        ]);
+        ])) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -5228,6 +5268,7 @@
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
+      const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
@@ -5279,7 +5320,7 @@
           type: "button",
           text: "新增",
           icon: vue.markRaw(iconsVue.Plus),
-          display: () => node.value?.items,
+          display: () => node.value?.items && nodes.value?.length === 1,
           items: getSubMenuData.value
         },
         {
@@ -5288,7 +5329,7 @@
           icon: vue.markRaw(iconsVue.CopyDocument),
           display: () => !isRoot.value,
           handler: () => {
-            node.value && services?.editorService.copy(node.value);
+            node.value && services?.editorService.copy(nodes.value || []);
           }
         },
         {
@@ -5297,7 +5338,7 @@
           icon: vue.markRaw(iconsVue.Delete),
           display: () => !isRoot.value && !isPage.value,
           handler: () => {
-            node.value && services?.editorService.remove(node.value);
+            node.value && services?.editorService.remove(nodes.value || []);
           }
         },
         ...props.layerContentMenu
@@ -5550,7 +5591,9 @@
       };
       const contextmenu = async (event, data) => {
         event.preventDefault();
-        await select(data);
+        if (nodes.value.length < 2) {
+          await select(data);
+        }
         menu.value?.show(event);
       };
       return (_ctx, _cache) => {
@@ -8309,6 +8352,7 @@
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$s;
   exports.PropsPanel = _sfc_main$n;
+  exports.Resizer = _sfc_main$t;
   exports.SplitView = _sfc_main$s;
   exports.TMagicCodeEditor = _sfc_main$u;
   exports.TMagicEditor = Editor;