@maketribe/ms-app 3.2.23 → 3.2.24

package/dist/cjs/components/basic/visual-page-editor/components/BlockRender.js

@@ -0,0 +1,31 @@
+"use strict";
+const vue = require("vue");
+const index = require("../core/index.js");
+const BlockRender = vue.defineComponent({
+  name: "BlockRender",
+  emits: ["click"],
+  props: {
+    node: { type: Object },
+    parent: { type: Object },
+    index: { type: Number },
+    active: { type: Boolean }
+  },
+  setup: (props, { emit }) => {
+    const { RenderComponents } = index.useRenderComponent();
+    return () => {
+      const content = props.node;
+      const renderComponent = RenderComponents.find((item) => item.name == content.componentInfo);
+      return vue.h("div", { class: "mk-visual-page-editor__stage_block" }, [
+        vue.h(renderComponent == null ? void 0 : renderComponent.component, content.componentProps),
+        vue.h("div", {
+          class: { "mk-visual-page-editor__stage_block_mask": true, active: props.active },
+          onClick: (ev) => {
+            emit("click", { node: content, options: renderComponent, index: props.index, parent: props.parent, event: ev });
+          }
+        })
+      ]);
+    };
+  }
+});
+module.exports = BlockRender;
+//# sourceMappingURL=BlockRender.js.map

package/dist/cjs/components/basic/visual-page-editor/components/BlockRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRender.js","sources":["../../../../../../src/components/basic/visual-page-editor/components/BlockRender.ts"],"sourcesContent":["import { defineComponent,defineProps,defineEmits,computed,ref,onMounted,watch,h } from \"vue\"\r\nimport { ContentBlockType } from \"../core/ContentConfig\"\r\nimport { useRenderComponent } from \"../core\"\r\n\r\nexport default defineComponent({\r\n  name:\"BlockRender\",\r\n  emits:[\"click\"],\r\n  props:{\r\n    node:{type:Object},\r\n    parent:{type:Object},\r\n    index:{type:Number},\r\n    active:{type:Boolean}\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    const { RenderComponents } = useRenderComponent();\r\n\r\n    return ()=>{\r\n\r\n      const content = props.node as ContentBlockType;\r\n      const renderComponent = RenderComponents.find(item=>item.name == content.componentInfo);\r\n\r\n      return h(\"div\",{class:\"mk-visual-page-editor__stage_block\"},[\r\n        h(renderComponent?.component as any,content.componentProps),\r\n        h(\"div\",{ \r\n          class:{\"mk-visual-page-editor__stage_block_mask\":true,active:props.active},\r\n          onClick:ev=>{\r\n            emit(\"click\",{ node:content,options:renderComponent,index:props.index,parent:props.parent,event:ev })\r\n          }\r\n        })\r\n      ])\r\n    }\r\n  }\r\n});\r\n"],"names":["defineComponent","useRenderComponent","h"],"mappings":";;;AAIA,MAAA,cAAeA,oBAAgB;AAAA,EAC7B,MAAK;AAAA,EACL,OAAM,CAAC,OAAO;AAAA,EACd,OAAM;AAAA,IACJ,MAAK,EAAC,MAAK,OAAM;AAAA,IACjB,QAAO,EAAC,MAAK,OAAM;AAAA,IACnB,OAAM,EAAC,MAAK,OAAM;AAAA,IAClB,QAAO,EAAC,MAAK,QAAO;AAAA,EACtB;AAAA,EACA,OAAM,CAAC,OAAM,EAAE,WAAS;AAEhB,UAAA,EAAE,qBAAqBC,MAAAA;AAE7B,WAAO,MAAI;AAET,YAAM,UAAU,MAAM;AACtB,YAAM,kBAAkB,iBAAiB,KAAK,UAAM,KAAK,QAAQ,QAAQ,aAAa;AAEtF,aAAOC,IAAE,EAAA,OAAM,EAAC,OAAM,wCAAsC;AAAA,QAC1DA,IAAAA,EAAE,mDAAiB,WAAiB,QAAQ,cAAc;AAAA,QAC1DA,IAAAA,EAAE,OAAM;AAAA,UACN,OAAM,EAAC,2CAA0C,MAAK,QAAO,MAAM,OAAM;AAAA,UACzE,SAAQ,CAAI,OAAA;AACV,iBAAK,SAAQ,EAAE,MAAK,SAAQ,SAAQ,iBAAgB,OAAM,MAAM,OAAM,QAAO,MAAM,QAAO,OAAM,IAAI;AAAA,UACtG;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAEL;AACF,CAAC;;"}

package/dist/cjs/components/basic/visual-page-editor/content-editable.vue.js

@@ -0,0 +1,196 @@
+"use strict";
+const vue = require("vue");
+const index = require("./core/index.js");
+const BlockRender = require("./components/BlockRender.js");
+const Dialog = require("./utils/Dialog.js");
+const _hoisted_1 = { class: "mk-visual-page-editor__stage_editable_addblock" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "content-editable",
+  setup(__props) {
+    const { PageEditor, ViewDevice } = index.usePageEditor();
+    const editableRef = vue.ref(null);
+    const selectIndex = vue.ref(null);
+    const clickHandle = (data) => {
+      data.event.stopPropagation();
+      updateToolsPos();
+      selectIndex.value = data.index;
+    };
+    const clickStageHandle = () => {
+      selectIndex.value = null;
+    };
+    const toolsPos = vue.reactive({ top: "0px" });
+    const updateToolsPos = () => {
+      if (editableRef.value != null) {
+        toolsPos.top = Math.max(editableRef.value.parentElement.scrollTop + editableRef.value.parentElement.offsetHeight / 2 - 100, 5) + "px";
+      }
+    };
+    const addHandle = async (pos, index2) => {
+      await Dialog.ShowComponentSelectPanel();
+    };
+    const editHandle = async (index2) => {
+      const item = PageEditor.get(index2);
+      await Dialog.ShowEditPanel(item, {});
+    };
+    vue.onMounted(() => {
+      var _a;
+      (_a = editableRef.value) == null ? void 0 : _a.parentElement.addEventListener("scroll", updateToolsPos, false);
+      vue.onBeforeUnmount(() => {
+        var _a2;
+        (_a2 = editableRef.value) == null ? void 0 : _a2.parentElement.removeEventListener("scroll", updateToolsPos);
+      });
+      PageEditor.setContent({
+        version: "1.0.0",
+        contents: [
+          { componentInfo: "vp-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg", id: 1 } },
+          { componentInfo: "vp-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg", id: 2 } }
+        ]
+      });
+    });
+    return (_ctx, _cache) => {
+      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_button_group = vue.resolveComponent("el-button-group");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "mk-visual-page-editor__stage_body",
+        onClick: clickStageHandle
+      }, [
+        vue.createElementVNode("div", {
+          class: "mk-visual-page-editor__stage_editable",
+          style: vue.normalizeStyle({ width: vue.unref(ViewDevice) == "pc" ? "900px" : "640px" }),
+          ref_key: "editableRef",
+          ref: editableRef
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(PageEditor).getContent().contents, (item, index2) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(BlockRender), {
+              key: index2,
+              index: index2,
+              node: item,
+              active: selectIndex.value == index2,
+              onClick: clickHandle
+            }, null, 8, ["index", "node", "active"]);
+          }), 128)),
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(_component_el_button, {
+              text: "",
+              type: "primary",
+              size: "large",
+              onClick: _cache[0] || (_cache[0] = ($event) => addHandle())
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, {
+                  iconClass: "Plus",
+                  style: { "margin-right": "10px" }
+                }),
+                vue.createTextVNode(" 添加 ")
+              ]),
+              _: 1
+            })
+          ]),
+          selectIndex.value != null ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "mk-visual-page-editor-inline-toolbar",
+            onClick: _cache[7] || (_cache[7] = vue.withModifiers(() => {
+            }, ["stop"])),
+            style: vue.normalizeStyle(toolsPos)
+          }, [
+            vue.createVNode(_component_el_button_group, null, {
+              default: vue.withCtx(() => [
+                selectIndex.value > 0 ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                  key: 0,
+                  text: "",
+                  onClick: _cache[1] || (_cache[1] = ($event) => {
+                    vue.unref(PageEditor).exchange(selectIndex.value, selectIndex.value - 1);
+                    selectIndex.value--;
+                  })
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_MKSvgIcon, {
+                      iconClass: "CaretTop",
+                      style: { "margin-right": "10px" }
+                    }),
+                    vue.createTextVNode(" 上移 ")
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("", true),
+                selectIndex.value < vue.unref(PageEditor).size() - 1 ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                  key: 1,
+                  text: "",
+                  onClick: _cache[2] || (_cache[2] = ($event) => {
+                    vue.unref(PageEditor).exchange(selectIndex.value, selectIndex.value + 1);
+                    selectIndex.value++;
+                  })
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_MKSvgIcon, {
+                      iconClass: "CaretBottom",
+                      style: { "margin-right": "10px" }
+                    }),
+                    vue.createTextVNode(" 下移 ")
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("", true),
+                vue.createVNode(_component_el_button, {
+                  text: "",
+                  onClick: _cache[3] || (_cache[3] = ($event) => addHandle(selectIndex.value, selectIndex.value - 1))
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_MKSvgIcon, {
+                      iconClass: "Fold",
+                      style: { "margin-right": "10px" }
+                    }),
+                    vue.createTextVNode(" 插入 ")
+                  ]),
+                  _: 1
+                }),
+                vue.createVNode(_component_el_button, {
+                  text: "",
+                  onClick: _cache[4] || (_cache[4] = ($event) => addHandle(selectIndex.value, selectIndex.value + 1))
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_MKSvgIcon, {
+                      iconClass: "Plus",
+                      style: { "margin-right": "10px" }
+                    }),
+                    vue.createTextVNode(" 添加 ")
+                  ]),
+                  _: 1
+                }),
+                vue.createVNode(_component_el_button, { text: "" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_MKSvgIcon, {
+                      iconClass: "Edit",
+                      onClick: _cache[5] || (_cache[5] = ($event) => editHandle(selectIndex.value)),
+                      style: { "margin-right": "10px" }
+                    }),
+                    vue.createTextVNode(" 编辑 ")
+                  ]),
+                  _: 1
+                }),
+                vue.createVNode(_component_el_button, {
+                  text: "",
+                  type: "danger",
+                  onClick: _cache[6] || (_cache[6] = ($event) => {
+                    vue.unref(PageEditor).remove(selectIndex.value);
+                    selectIndex.value = null;
+                  })
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_MKSvgIcon, {
+                      iconClass: "Delete",
+                      style: { "margin-right": "10px" }
+                    }),
+                    vue.createTextVNode(" 删除 ")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ], 4)) : vue.createCommentVNode("", true)
+        ], 4)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=content-editable.vue.js.map

package/dist/cjs/components/basic/visual-page-editor/content-editable.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-editable.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/content-editable.vue"],"sourcesContent":["<template>\r\n  <div class=\"mk-visual-page-editor__stage_body\" @click=\"clickStageHandle\">\r\n    <div class=\"mk-visual-page-editor__stage_editable\" :style=\"{width:(ViewDevice=='pc'?'900px':'640px')}\" ref=\"editableRef\">\r\n      <BlockRender v-for=\"(item,index) in PageEditor.getContent().contents\" :key=\"index\" :index=\"index\" :node=\"item\" :active=\"selectIndex==index\" @click=\"clickHandle\"></BlockRender>\r\n      <div  class=\"mk-visual-page-editor__stage_editable_addblock\">\r\n        <el-button text type=\"primary\" size=\"large\" @click=\"addHandle()\">\r\n          <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" /> \r\n          添加\r\n        </el-button>\r\n      </div>\r\n      <div class=\"mk-visual-page-editor-inline-toolbar\" @click..stop :style=\"toolsPos\"  v-if=\"selectIndex!=null\">\r\n        <el-button-group>\r\n          <el-button text v-if=\"selectIndex > 0\" @click=\"PageEditor.exchange(selectIndex,selectIndex-1);selectIndex--\" >\r\n            <MKSvgIcon iconClass=\"CaretTop\"  style=\"margin-right:10px\"/> \r\n            上移\r\n          </el-button>\r\n          <el-button text @click=\"PageEditor.exchange(selectIndex,selectIndex+1);selectIndex++\" v-if=\"selectIndex < PageEditor.size() - 1\">\r\n            <MKSvgIcon iconClass=\"CaretBottom\"  style=\"margin-right:10px\"/> \r\n            下移\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex,selectIndex-1)\">\r\n            <MKSvgIcon iconClass=\"Fold\"  style=\"margin-right:10px\" /> \r\n            插入\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex,selectIndex+1)\">\r\n            <MKSvgIcon iconClass=\"Plus\"  style=\"margin-right:10px\"/> \r\n            添加\r\n          </el-button>\r\n          <el-button text>\r\n            <MKSvgIcon iconClass=\"Edit\" @click=\"editHandle(selectIndex)\" style=\"margin-right:10px\"/> \r\n            编辑\r\n          </el-button>\r\n          <el-button text type=\"danger\" @click=\"PageEditor.remove(selectIndex);selectIndex=null\">\r\n            <MKSvgIcon iconClass=\"Delete\"  style=\"margin-right:10px\"/> \r\n            删除\r\n          </el-button>\r\n        </el-button-group>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { nextTick,defineProps,defineEmits,computed,ref,onMounted,onBeforeUnmount,reactive,watch } from \"vue\"\r\nimport { usePageEditor,useRenderComponent } from \"./core\"\r\nimport BlockRender from \"./components/BlockRender\"\r\nimport { RenderComponentType } from \"./core/RenderComponent\"\r\nimport { ShowEditPanel,ShowComponentSelectPanel } from \"./utils/Dialog\"\r\n\r\nconst { PageEditor,ViewDevice } = usePageEditor();\r\nconst editableRef = ref<HTMLDivElement|null>(null);\r\nconst selectIndex = ref(null);\r\n\r\n// 点击块\r\nconst clickHandle = (data:any)=>{\r\n  data.event.stopPropagation();\r\n  updateToolsPos();\r\n  selectIndex.value = data.index;\r\n}\r\nconst clickStageHandle = ()=>{\r\n  selectIndex.value = null;\r\n}\r\n// 工具条位置\r\nconst toolsPos = reactive({ top:\"0px\" });\r\n// 更新工具条位置\r\nconst updateToolsPos = ()=>{\r\n  if(editableRef.value != null){\r\n    toolsPos.top = Math.max(editableRef.value.parentElement!.scrollTop + editableRef.value.parentElement!.offsetHeight / 2 - 100,5) + \"px\"\r\n  }\r\n}\r\n\r\n// 编辑\r\nconst addHandle =  async (pos?:any,index?:any) => {\r\n  const result = await ShowComponentSelectPanel();\r\n}\r\n\r\n// 编辑\r\nconst editHandle =  async (index:any) => {\r\n\r\n  const item = PageEditor.get(index)\r\n  \r\n  const result = await ShowEditPanel(item as any,{});\r\n}\r\n\r\nonMounted(()=>{\r\n  editableRef.value?.parentElement!.addEventListener(\"scroll\",updateToolsPos,false);\r\n  onBeforeUnmount(()=>{\r\n    editableRef.value?.parentElement!.removeEventListener(\"scroll\",updateToolsPos);\r\n  });\r\n\r\n  PageEditor.setContent({\r\n    version:\"1.0.0\",\r\n    contents:[\r\n      {componentInfo:\"vp-image\",componentProps:{src:\"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg\",id:1}},\r\n      {componentInfo:\"vp-image\",componentProps:{src:\"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg\",id:2}}\r\n    ]\r\n  })\r\n\r\n});\r\n</script>\r\n"],"names":["usePageEditor","ref","reactive","index","ShowComponentSelectPanel","ShowEditPanel","onMounted","onBeforeUnmount","_a"],"mappings":";;;;;;;;;AAiDA,UAAM,EAAE,YAAW,WAAW,IAAIA,MAAc,cAAA;AAC1C,UAAA,cAAcC,QAAyB,IAAI;AAC3C,UAAA,cAAcA,QAAI,IAAI;AAGtB,UAAA,cAAc,CAAC,SAAW;AAC9B,WAAK,MAAM;AACI;AACf,kBAAY,QAAQ,KAAK;AAAA,IAAA;AAE3B,UAAM,mBAAmB,MAAI;AAC3B,kBAAY,QAAQ;AAAA,IAAA;AAGtB,UAAM,WAAWC,IAAA,SAAS,EAAE,KAAI,MAAO,CAAA;AAEvC,UAAM,iBAAiB,MAAI;AACtB,UAAA,YAAY,SAAS,MAAK;AAC3B,iBAAS,MAAM,KAAK,IAAI,YAAY,MAAM,cAAe,YAAY,YAAY,MAAM,cAAe,eAAe,IAAI,KAAI,CAAC,IAAI;AAAA,MACpI;AAAA,IAAA;AAII,UAAA,YAAa,OAAO,KAASC,WAAe;AACjC,YAAMC,gCAAyB;AAAA,IAAA;AAI1C,UAAA,aAAc,OAAOD,WAAc;AAEjC,YAAA,OAAO,WAAW,IAAIA,MAAK;AAElB,YAAME,OAAc,cAAA,MAAY,EAAE;AAAA,IAAA;AAGnDC,QAAAA,UAAU,MAAI;;AACZ,wBAAY,UAAZ,mBAAmB,cAAe,iBAAiB,UAAS,gBAAe;AAC3EC,UAAAA,gBAAgB,MAAI;;AAClB,SAAAC,MAAA,YAAY,UAAZ,gBAAAA,IAAmB,cAAe,oBAAoB,UAAS;AAAA,MAAc,CAC9E;AAED,iBAAW,WAAW;AAAA,QACpB,SAAQ;AAAA,QACR,UAAS;AAAA,UACP,EAAC,eAAc,YAAW,gBAAe,EAAC,KAAI,6GAA4G,IAAG,IAAE;AAAA,UAC/J,EAAC,eAAc,YAAW,gBAAe,EAAC,KAAI,6GAA4G,IAAG,IAAE;AAAA,QACjK;AAAA,MAAA,CACD;AAAA,IAAA,CAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/visual-page-editor/content-editable.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+const contentEditable_vue_vue_type_script_setup_true_lang = require("./content-editable.vue.js");
+module.exports = contentEditable_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=content-editable.vue2.js.map

package/dist/cjs/components/basic/visual-page-editor/content-editable.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-editable.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/components/basic/visual-page-editor/core/VisvalPageEditor.js

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const vue = require("vue");
+class VisualPageEditor {
+  constructor() {
+    __publicField(this, "_version");
+    __publicField(this, "_content");
+    this._version = "1.0.0";
+    this._content = null;
+  }
+  /**
+   * 内容大小
+   * @returns 
+   */
+  size() {
+    var _a;
+    return (_a = this._content) == null ? void 0 : _a.contents.length;
+  }
+  /**
+   * 删除
+   * @param index 
+   */
+  remove(index) {
+    var _a;
+    (_a = this._content) == null ? void 0 : _a.contents.splice(index, 1);
+  }
+  /**
+   * 交换
+   * @param index 
+   * @param exchangeIndex 
+   */
+  exchange(index, exchangeIndex) {
+    var _a, _b;
+    const item = (_a = this._content) == null ? void 0 : _a.contents.splice(index, 1);
+    (_b = this._content) == null ? void 0 : _b.contents.splice(exchangeIndex, 0, item[0]);
+  }
+  /**
+   * 设置内容
+   * @param content 
+   */
+  setContent(content) {
+    this._content = vue.shallowReactive(content);
+  }
+  /**
+   * 获取内容
+   * @returns 
+   */
+  get(index) {
+    var _a;
+    return (_a = this._content) == null ? void 0 : _a.contents[index];
+  }
+  /**
+   * 获取内容
+   * @returns 
+   */
+  getContent() {
+    return this._content || { version: this._version, contents: [] };
+  }
+}
+module.exports = VisualPageEditor;
+//# sourceMappingURL=VisvalPageEditor.js.map

package/dist/cjs/components/basic/visual-page-editor/core/VisvalPageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisvalPageEditor.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/VisvalPageEditor.ts"],"sourcesContent":["import { type ContentConfigType,type ContentBlockType } from \"./ContentConfig\"\r\n\r\nimport { shallowReactive } from \"vue\"\r\n\r\n\r\n/**\r\n * 页面编辑器\r\n */\r\nexport default class VisualPageEditor{\r\n\r\n  _version:string\r\n  _content:ContentConfigType|null\r\n\r\n  constructor(){\r\n    this._version = \"1.0.0\"\r\n    this._content = null;\r\n  }\r\n\r\n  /**\r\n   * 内容大小\r\n   * @returns \r\n   */\r\n  size(){\r\n    return this._content?.contents.length as number;\r\n  }\r\n\r\n  /**\r\n   * 删除\r\n   * @param index \r\n   */\r\n  remove(index:number){\r\n    this._content?.contents.splice(index,1)\r\n  }\r\n\r\n  /**\r\n   * 交换\r\n   * @param index \r\n   * @param exchangeIndex \r\n   */\r\n  exchange(index:number,exchangeIndex:number){\r\n    const item = this._content?.contents.splice(index,1)\r\n    this._content?.contents.splice(exchangeIndex,0,item![0])\r\n  }\r\n\r\n  /**\r\n   * 设置内容\r\n   * @param content \r\n   */\r\n  setContent(content:ContentConfigType){\r\n    this._content = shallowReactive(content);\r\n  }\r\n\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  get(index:any):ContentBlockType {\r\n    return this._content?.contents[index] as ContentBlockType;\r\n  }\r\n\r\n  /**\r\n   * 获取内容\r\n   * @returns \r\n   */\r\n  getContent():ContentConfigType {\r\n    return this._content || {version:this._version ,contents:[]}\r\n  }\r\n\r\n}\r\n"],"names":["shallowReactive"],"mappings":";;;;;AAQA,MAAqB,iBAAgB;AAAA,EAKnC,cAAa;AAHb;AACA;AAGE,SAAK,WAAW;AAChB,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAM;;AACG,YAAA,UAAK,aAAL,mBAAe,SAAS;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,OAAa;;AAClB,eAAK,aAAL,mBAAe,SAAS,OAAO,OAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,OAAa,eAAqB;;AACzC,UAAM,QAAO,UAAK,aAAL,mBAAe,SAAS,OAAO,OAAM;AAClD,eAAK,aAAL,mBAAe,SAAS,OAAO,eAAc,GAAE,KAAM,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,SAA0B;AAC9B,SAAA,WAAWA,oBAAgB,OAAO;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAA4B;;AACvB,YAAA,UAAK,aAAL,mBAAe,SAAS;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAA+B;AACtB,WAAA,KAAK,YAAY,EAAC,SAAQ,KAAK,UAAU,UAAS,CAAA;EAC3D;AAEF;;"}

package/dist/cjs/components/basic/visual-page-editor/core/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const VisvalPageEditor = require("./VisvalPageEditor.js");
+const RenderComponents = vue.shallowReactive([]);
+const PageEditor = vue.shallowReactive(new VisvalPageEditor());
+const ViewDevice = vue.ref("pc");
+const RegisterRenderComponent = (options) => {
+  RenderComponents.push(options);
+};
+const useRenderComponent = () => {
+  return {
+    RenderComponents,
+    RegisterRenderComponent
+  };
+};
+const usePageEditor = () => {
+  return { PageEditor, ViewDevice };
+};
+exports.usePageEditor = usePageEditor;
+exports.useRenderComponent = useRenderComponent;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/basic/visual-page-editor/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/index.ts"],"sourcesContent":["\r\nimport { shallowReactive,ref } from \"vue\"\r\n\r\nimport { RenderComponentType } from \"./RenderComponent\"\r\n\r\nimport VisualPageEditor from \"./VisvalPageEditor\"\r\n\r\n\r\nconst RenderComponents = shallowReactive<RenderComponentType[]>([]);\r\n\r\n// 页面编辑器\r\nconst PageEditor = shallowReactive<VisualPageEditor>(new VisualPageEditor())\r\n// pc | mobile\r\nconst ViewDevice = ref('pc')\r\n/**\r\n * 注册渲染组件\r\n * @param options \r\n */\r\nconst RegisterRenderComponent = (options:RenderComponentType)=>{\r\n  RenderComponents.push(options);\r\n}\r\n\r\n/**\r\n * \r\n * @returns \r\n */\r\nexport const useRenderComponent = ()=>{\r\n\r\n  return {\r\n    RenderComponents,\r\n    RegisterRenderComponent\r\n  }\r\n}\r\n\r\n\r\n/**\r\n * \r\n * @returns \r\n */\r\nexport const usePageEditor = ()=>{\r\n  return { PageEditor, ViewDevice }\r\n}\r\n\r\n"],"names":["shallowReactive","VisualPageEditor","ref"],"mappings":";;;;AAQA,MAAM,mBAAmBA,IAAAA,gBAAuC,CAAA,CAAE;AAGlE,MAAM,aAAaA,IAAA,gBAAkC,IAAIC,iBAAA,CAAkB;AAE3E,MAAM,aAAaC,IAAAA,IAAI,IAAI;AAK3B,MAAM,0BAA0B,CAAC,YAA8B;AAC7D,mBAAiB,KAAK,OAAO;AAC/B;AAMO,MAAM,qBAAqB,MAAI;AAE7B,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;AAOO,MAAM,gBAAgB,MAAI;AACxB,SAAA,EAAE,YAAY;AACvB;;;"}

package/dist/cjs/components/basic/visual-page-editor/editor.vue.js

@@ -0,0 +1,61 @@
+"use strict";
+const vue = require("vue");
+const toolbar_vue_vue_type_script_setup_true_lang = require("./toolbar.vue.js");
+const contentEditable_vue_vue_type_script_setup_true_lang = require("./content-editable.vue.js");
+const index = require("./core/index.js");
+const _hoisted_1 = { class: "mk-visual-page-editor" };
+const _hoisted_2 = { class: "mk-visual-page-editor__stage" };
+const _hoisted_3 = { class: "mk-visual-page-editor__stage_right" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "editor",
+  props: { device: { type: String, default: "mobile" } },
+  setup(__props) {
+    const { ViewDevice } = index.usePageEditor();
+    const props = __props;
+    vue.onMounted(() => {
+      ViewDevice.value = props.device;
+    });
+    return (_ctx, _cache) => {
+      const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
+      const _component_el_collapse = vue.resolveComponent("el-collapse");
+      const _component_el_card = vue.resolveComponent("el-card");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.renderSlot(_ctx.$slots, "toolbar", {}, () => [
+          vue.createVNode(toolbar_vue_vue_type_script_setup_true_lang)
+        ]),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(contentEditable_vue_vue_type_script_setup_true_lang),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createVNode(_component_el_card, null, {
+              header: vue.withCtx(() => [
+                vue.createTextVNode(" 页面设置 ")
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_el_collapse, null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_el_collapse_item, {
+                      title: "基础组件",
+                      name: "base"
+                    }),
+                    vue.createVNode(_component_el_collapse_item, {
+                      title: "业务组件",
+                      name: "business"
+                    }),
+                    vue.createVNode(_component_el_collapse_item, {
+                      title: "自定义组件",
+                      name: "custom"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ])
+        ])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=editor.vue.js.map

package/dist/cjs/components/basic/visual-page-editor/editor.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/editor.vue"],"sourcesContent":["<template>\r\n     <div class=\"mk-visual-page-editor\">\r\n      <slot name=\"toolbar\">\r\n        <Toolbar />\r\n      </slot>\r\n      <div class=\"mk-visual-page-editor__stage\"> \r\n        <ContentEditable></ContentEditable> \r\n        <div class=\"mk-visual-page-editor__stage_right\">\r\n          <el-card>\r\n              <template #header>\r\n                页面设置\r\n              </template>\r\n              <el-collapse>\r\n                  <el-collapse-item title=\"基础组件\" name=\"base\">\r\n                    \r\n                  </el-collapse-item>\r\n                  <el-collapse-item title=\"业务组件\" name=\"business\">\r\n                   \r\n                  </el-collapse-item>\r\n                  <el-collapse-item title=\"自定义组件\" name=\"custom\">\r\n                    \r\n                  </el-collapse-item>\r\n                </el-collapse>\r\n            </el-card>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { defineOptions,defineProps,defineEmits,computed,ref,onMounted,watch } from \"vue\"\r\nimport Toolbar from \"./toolbar.vue\"\r\nimport ContentEditable from \"./content-editable.vue\";\r\nimport { usePageEditor } from \"./core\"\r\nconst { ViewDevice } = usePageEditor();\r\n\r\n\r\nconst props = defineProps({ device:{type:String,default:\"mobile\"} })\r\n\r\n\r\nonMounted(()=>{\r\n\r\n  ViewDevice.value = props.device;\r\n\r\n});\r\n</script>\r\n"],"names":["usePageEditor","onMounted"],"mappings":";;;;;;;;;;;;AAkCM,UAAA,EAAE,eAAeA,MAAAA;AAGvB,UAAM,QAAQ;AAGdC,QAAAA,UAAU,MAAI;AAEZ,iBAAW,QAAQ,MAAM;AAAA,IAAA,CAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/visual-page-editor/editor.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+const editor_vue_vue_type_script_setup_true_lang = require("./editor.vue.js");
+module.exports = editor_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=editor.vue2.js.map

package/dist/cjs/components/basic/visual-page-editor/editor.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/components/basic/visual-page-editor/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const utils = require("@maketribe/utils");
+const editor_vue_vue_type_script_setup_true_lang = require("./editor.vue.js");
+require("./visual-components/ImageRenderComponent.js");
+const MKVisualPageEditor = utils.withInstall(editor_vue_vue_type_script_setup_true_lang);
+exports.MKVisualPageEditor = MKVisualPageEditor;
+exports.default = MKVisualPageEditor;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/basic/visual-page-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/basic/visual-page-editor/index.ts"],"sourcesContent":["import { withInstall } from \"@maketribe/utils\";\r\nimport VisualPageEditor from \"./editor.vue\";\r\nimport \"./visual-components\"\r\n\r\nexport const MKVisualPageEditor = withInstall(VisualPageEditor);\r\n\r\nexport default MKVisualPageEditor;\r\n\r\n"],"names":["withInstall","VisualPageEditor"],"mappings":";;;;;AAIa,MAAA,qBAAqBA,kBAAYC,0CAAgB;;;"}

package/dist/cjs/components/basic/visual-page-editor/toolbar.vue.js

@@ -0,0 +1,50 @@
+"use strict";
+const vue = require("vue");
+const index = require("./core/index.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "toolbar",
+  setup(__props) {
+    const { ViewDevice } = index.usePageEditor();
+    const toolbarRef = vue.ref(null);
+    vue.onMounted(() => {
+    });
+    return (_ctx, _cache) => {
+      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_button_group = vue.resolveComponent("el-button-group");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "toolbarRef",
+        ref: toolbarRef,
+        class: "mk-visual-page-editor-toolbar"
+      }, [
+        vue.createVNode(_component_el_button_group, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_el_button, {
+              text: "",
+              class: vue.normalizeClass(`${vue.unref(ViewDevice) == "pc" ? "active" : ""}`),
+              onClick: _cache[0] || (_cache[0] = ($event) => ViewDevice.value = "pc")
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "Platform" })
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            vue.createVNode(_component_el_button, {
+              text: "",
+              class: vue.normalizeClass(`${vue.unref(ViewDevice) == "mobile" ? "active" : ""}`),
+              onClick: _cache[1] || (_cache[1] = ($event) => ViewDevice.value = "mobile")
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "Iphone" })
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          _: 1
+        })
+      ], 512);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=toolbar.vue.js.map

package/dist/cjs/components/basic/visual-page-editor/toolbar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onMounted, onUnmounted, ref,defineProps } from 'vue'\r\nimport { usePageEditor } from \"./core\"\r\nconst { ViewDevice } = usePageEditor();\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\n\r\nonMounted(() => {\r\n \r\n})\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"toolbarRef\" class=\"mk-visual-page-editor-toolbar\">\r\n    <el-button-group>\r\n      <el-button text :class=\"`${ViewDevice=='pc' ? 'active' : ''}`\" @click=\"ViewDevice='pc'\">\r\n        <MKSvgIcon iconClass=\"Platform\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${ViewDevice=='mobile' ? 'active' : ''}`\" @click=\"ViewDevice='mobile'\">\r\n        <MKSvgIcon iconClass=\"Iphone\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n  </div>\r\n</template>\r\n"],"names":["usePageEditor","ref","onMounted"],"mappings":";;;;;;AAGM,UAAA,EAAE,eAAeA,MAAAA;AACjB,UAAA,aAAaC,QAA2B,IAAI;AAElDC,QAAAA,UAAU,MAAM;AAAA,IAAA,CAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/visual-page-editor/toolbar.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+const toolbar_vue_vue_type_script_setup_true_lang = require("./toolbar.vue.js");
+module.exports = toolbar_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=toolbar.vue2.js.map

package/dist/cjs/components/basic/visual-page-editor/toolbar.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/components/basic/visual-page-editor/utils/Dialog.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const dm = require("@maketribe/dm");
+const elementPlus = require("element-plus");
+require("../core/index.js");
+const ShowEditPanel = async (componentOptions, props) => {
+  return new Promise((resolve) => {
+    const isAdd = props == null;
+    if (isAdd) {
+      props = {};
+      componentOptions.options.forEach((item) => {
+        props[item.name] = item.defaultValue;
+      });
+    }
+    const propsReactive = vue.reactive(props);
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve(props);
+    };
+    const dialogInstance = dm.Dialoger.customRender({
+      title: isAdd ? `添加${componentOptions.desc}` : `编辑${componentOptions.desc}`,
+      class: "mk-html-editor-dialog",
+      width: "70%",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        return vue.h(elementPlus.ElForm, {
+          labelPosition: "top",
+          model: propsReactive,
+          labelWidth: "auto"
+        }, componentOptions.options.map((item) => {
+          const component = typeof item.component == "string" ? vue.resolveComponent(item.component) : item.component;
+          return vue.h(elementPlus.ElFormItem, {
+            label: item.desc,
+            prop: item.name
+          }, [vue.h(component, {
+            ...item.props,
+            modelValue: propsReactive[item.name],
+            "update:modelValue": (v) => propsReactive[item.name] = v
+          })]);
+        }));
+      },
+      footer: () => {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [vue.createTextVNode("取消")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick
+        }, {
+          default: () => [vue.createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+const ShowComponentSelectPanel = async () => {
+  return new Promise((resolve) => {
+    const selectComponentOption = vue.ref(null);
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve(selectComponentOption.value);
+    };
+    const dialogInstance = dm.Dialoger.customRender({
+      title: "组件库",
+      class: "mk-html-editor-dialog",
+      width: "70%",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        return vue.createVNode("div", null, [vue.createVNode(elementPlus.ElInput, null, null), vue.createVNode(elementPlus.ElCollapse, null, {
+          default: () => [vue.createVNode(elementPlus.ElCollapseItem, {
+            "title": "基础组件",
+            "name": "base"
+          }, null), vue.createVNode(elementPlus.ElCollapseItem, {
+            "title": "业务组件",
+            "name": "business"
+          }, null), vue.createVNode(elementPlus.ElCollapseItem, {
+            "title": "自定义组件",
+            "name": "custom"
+          }, null)]
+        })]);
+      },
+      footer: () => {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [vue.createTextVNode("取消")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick
+        }, {
+          default: () => [vue.createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+exports.ShowComponentSelectPanel = ShowComponentSelectPanel;
+exports.ShowEditPanel = ShowEditPanel;
+//# sourceMappingURL=Dialog.js.map