@tmagic/editor 1.3.0-alpha.21 → 1.3.0-alpha.22

package/dist/tmagic-editor.umd.cjs

@@ -543,7 +543,7 @@
     }
   });
 
-  function BaseFormConfig(datasourceTypeList = []) {
+  function BaseFormConfig() {
     return [
       {
         name: "id",
@@ -552,12 +552,7 @@
       {
         name: "type",
         text: "类型",
-        type: "select",
-        options: [
-          { text: "基础", value: "base" },
-          { text: "HTTP", value: "http" },
-          ...datasourceTypeList.map((item) => ({ text: item.text, value: item.type }))
-        ],
+        type: "hidden",
         defaultValue: "base"
       },
       {
@@ -626,8 +621,8 @@
     }
   ];
 
-  const fillConfig$1 = (config, datasourceTypeList) => [
-    ...BaseFormConfig(datasourceTypeList),
+  const fillConfig$1 = (config) => [
+    ...BaseFormConfig(),
     ...config,
     {
       type: "panel",
@@ -636,7 +631,7 @@
         {
           name: "fields",
           type: "data-source-fields",
-          defaultValue: []
+          defaultValue: () => []
         }
       ]
     },
@@ -647,19 +642,19 @@
         {
           name: "methods",
           type: "data-source-methods",
-          defaultValue: []
+          defaultValue: () => []
         }
       ]
     }
   ];
-  const getFormConfig = (type, datasourceTypeList, configs) => {
+  const getFormConfig = (type, configs) => {
     switch (type) {
       case "base":
-        return fillConfig$1([], datasourceTypeList);
+        return fillConfig$1([]);
       case "http":
-        return fillConfig$1(HttpFormConfig, datasourceTypeList);
+        return fillConfig$1(HttpFormConfig);
       default:
-        return fillConfig$1(configs[type] || [], datasourceTypeList);
+        return fillConfig$1(configs[type] || []);
     }
   };
   const getDisplayField = (dataSources, key) => {
@@ -839,7 +834,7 @@
       return this.state[name];
     }
     getFormConfig(type = "base") {
-      return getFormConfig(type, this.get("datasourceTypeList"), this.get("configs"));
+      return getFormConfig(type, this.get("configs"));
     }
     setFormConfig(type, config) {
       this.get("configs")[type] = config;
@@ -2757,7 +2752,7 @@
   };
 
   const _hoisted_1$p = { class: "m-fields-code-select-col" };
-  const _hoisted_2$g = { class: "code-select-container" };
+  const _hoisted_2$h = { class: "code-select-container" };
   const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
@@ -2825,7 +2820,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -2861,7 +2856,7 @@
   });
 
   const _hoisted_1$o = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
@@ -2881,9 +2876,11 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
+      const services = vue.inject("services");
       const addDialog = vue.ref();
       const fieldValues = vue.ref({});
       const filedTitle = vue.ref("");
+      const width = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
       const newHandler = () => {
         fieldValues.value = {};
         filedTitle.value = "新增属性";
@@ -3016,7 +3013,7 @@
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$f, [
+          vue.createElementVNode("div", _hoisted_2$g, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3039,8 +3036,9 @@
             values: fieldValues.value,
             parentValues: _ctx.model[_ctx.name],
             disabled: _ctx.disabled,
+            width: width.value,
             onSubmit: fieldChange
-          }, null, 8, ["title", "values", "parentValues", "disabled"])
+          }, null, 8, ["title", "values", "parentValues", "disabled", "width"])
         ]);
       };
     }
@@ -3094,7 +3092,7 @@
   });
 
   const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-  const _hoisted_2$e = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_2$f = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$5 = { class: "el-input__inner" };
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -3141,6 +3139,7 @@
       const blurHandler = () => {
         isFocused.value = false;
         setDisplayState();
+        emit("change", state.value);
       };
       const changeHandler = (v) => {
         emit("change", v);
@@ -3257,6 +3256,7 @@
           newSelectionStart = dotIndex + suggestText.length + 1;
         }
         input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+        changeHandler(state.value);
       };
       return (_ctx, _cache) => {
         return _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(design.getConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
@@ -3278,7 +3278,6 @@
           {
             style: { "width": "100%" },
             onBlur: blurHandler,
-            onChange: changeHandler,
             onInput: inputHandler,
             onSelect: selectHandler
           }
@@ -3289,7 +3288,7 @@
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$n, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$e, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$f, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -3403,7 +3402,7 @@
   };
 
   const _hoisted_1$m = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$d = { class: "m-editor-data-source-methods-footer" };
+  const _hoisted_2$e = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
@@ -3478,7 +3477,7 @@
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$d, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3507,7 +3506,7 @@
   });
 
   const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$c = { class: "data-source-method-select-container" };
+  const _hoisted_2$d = { class: "data-source-method-select-container" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
@@ -3587,7 +3586,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          vue.createElementVNode("div", _hoisted_2$c, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: cascaderConfig,
@@ -3679,7 +3678,7 @@
   });
 
   const _hoisted_1$k = { class: "m-fields-event-select" };
-  const _hoisted_2$b = {
+  const _hoisted_2$c = {
     key: 1,
     class: "fullWidth"
   };
@@ -3883,7 +3882,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -3933,7 +3932,7 @@
   });
 
   const _hoisted_1$j = { class: "m-fields-key-value" };
-  const _hoisted_2$a = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
@@ -3993,7 +3992,7 @@
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_2$a,
+              _hoisted_2$b,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -4372,7 +4371,7 @@
   });
 
   const _hoisted_1$h = { class: "m-editor-empty-panel" };
-  const _hoisted_2$9 = { class: "m-editor-empty-content" };
+  const _hoisted_2$a = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -4395,7 +4394,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$9, [
+          vue.createElementVNode("div", _hoisted_2$a, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
@@ -4546,7 +4545,7 @@
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -4690,7 +4689,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$8, [
+              vue.createElementVNode("span", _hoisted_2$9, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -4991,7 +4990,7 @@
   });
 
   const _hoisted_1$e = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$7 = /* @__PURE__ */ vue.createElementVNode("g", {
+  const _hoisted_2$8 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
@@ -5002,7 +5001,7 @@
     /* @__PURE__ */ vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
   ], -1);
   const _hoisted_3$3 = [
-    _hoisted_2$7
+    _hoisted_2$8
   ];
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5022,9 +5021,9 @@
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$6 = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_2$7 = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
   const _hoisted_4$1 = [
-    _hoisted_2$6
+    _hoisted_2$7
   ];
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -5039,7 +5038,7 @@
   });
 
   const _hoisted_1$c = ["id"];
-  const _hoisted_2$5 = { class: "list-item" };
+  const _hoisted_2$6 = { class: "list-item" };
   const _hoisted_3$2 = {
     key: 2,
     class: "right-tool"
@@ -5145,7 +5144,7 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$5, [
+              vue.createElementVNode("div", _hoisted_2$6, [
                 data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
                   key: 0,
                   class: "codeIcon"
@@ -5235,7 +5234,8 @@
                     vue.createTextVNode("新增")
                   ]),
                   _: 1
-                }, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                }, 8, ["onClick"])) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
             vue.createVNode(_sfc_main$k, {
@@ -5340,7 +5340,7 @@
   });
 
   const _hoisted_1$a = ["id"];
-  const _hoisted_2$4 = { class: "list-item" };
+  const _hoisted_2$5 = { class: "list-item" };
   const _hoisted_3$1 = {
     key: 2,
     class: "right-tool"
@@ -5440,7 +5440,7 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$4, [
+              vue.createElementVNode("div", _hoisted_2$5, [
                 data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: 0,
                   class: "codeIcon",
@@ -5499,6 +5499,7 @@
   });
 
   const _hoisted_1$9 = { class: "search-wrapper" };
+  const _hoisted_2$4 = { class: "data-source-list-panel-add-menu" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -5508,11 +5509,22 @@
       const { dataSourceService } = vue.inject("services") || {};
       const editDialog = vue.ref();
       const dataSourceValues = vue.ref({});
+      const dialogTitle = vue.ref("");
       const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
-      const addHandler = () => {
+      const datasourceTypeList = vue.computed(
+        () => [
+          { text: "基础", type: "base" },
+          { text: "HTTP", type: "http" }
+        ].concat(dataSourceService?.get("datasourceTypeList") ?? [])
+      );
+      const addHandler = (type) => {
         if (!editDialog.value)
           return;
-        dataSourceValues.value = {};
+        dataSourceValues.value = {
+          type
+        };
+        const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
+        dialogTitle.value = `新增${datasourceType?.text || ""}`;
         editDialog.value.show();
       };
       const editHandler = (id) => {
@@ -5521,6 +5533,7 @@
         dataSourceValues.value = {
           ...dataSourceService?.getDataSourceById(id)
         };
+        dialogTitle.value = `新增${dataSourceValues.value.title || ""}`;
         editDialog.value.show();
       };
       const removeHandler = (id) => {
@@ -5543,14 +5556,36 @@
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$9, [
               vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
-              editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                 key: 0,
-                type: "primary",
-                size: "small",
-                onClick: addHandler
+                placement: "right"
               }, {
+                reference: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(design.TMagicButton), {
+                    type: "primary",
+                    size: "small"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("新增")
+                    ]),
+                    _: 1
+                  })
+                ]),
                 default: vue.withCtx(() => [
-                  vue.createTextVNode("新增")
+                  vue.createElementVNode("div", _hoisted_2$4, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$q, {
+                        data: {
+                          type: "button",
+                          text: item.text,
+                          handler: () => {
+                            addHandler(item.type);
+                          }
+                        },
+                        key: index
+                      }, null, 8, ["data"]);
+                    }), 128))
+                  ])
                 ]),
                 _: 1
               })) : vue.createCommentVNode("", true)
@@ -5564,7 +5599,7 @@
               ref: editDialog,
               disabled: !editable.value,
               values: dataSourceValues.value,
-              title: typeof dataSourceValues.value.id !== "undefined" ? `编辑${dataSourceValues.value.title}` : "新增",
+              title: dialogTitle.value,
               onSubmit: submitDataSourceHandler
             }, null, 8, ["disabled", "values", "title"])
           ]),