super-page-designer 0.0.2-tmp8 → 1.0.1

package/dist/lib/components/design/views/design/view/assemblys-container-list.vue.js

@@ -0,0 +1,216 @@
+"use strict";
+const vue = require("vue");
+const Icons = require("@element-plus/icons");
+const assemblysConfig = require("../../../utils/assemblys-config.js");
+const commonUtil = require("../../../utils/common-util.js");
+const vueDraggablePlus = require("vue-draggable-plus");
+const _hoisted_1 = { class: "amb-assembly-header-search" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["title"];
+const _hoisted_4 = ["src"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "assemblys-container-list",
+  emits: ["handleMoveEnd", "handleMoveEnd", "handleMoveStart"],
+  setup(__props, { emit: __emit }) {
+    const asearchGroupName = vue.ref("");
+    const searchItemName = vue.ref("");
+    const openGroupNames = vue.ref([]);
+    openGroupNames.value.length = 0;
+    const groupOptions = vue.ref([]);
+    for (let index in assemblysConfig.assemblyGroups) {
+      let groupObj = assemblysConfig.assemblyGroups[index];
+      openGroupNames.value.push(groupObj.name);
+      groupOptions.value.push({
+        name: groupObj.name,
+        label: groupObj.label
+      });
+    }
+    const showAssemblyGroups = vue.computed(() => {
+      if (!asearchGroupName.value && !searchItemName.value) {
+        return assemblysConfig.assemblyGroups;
+      } else {
+        openGroupNames.value.length = 0;
+        const newGroups = [];
+        for (let index = 0; index < assemblysConfig.assemblyGroups.length; index++) {
+          let tempGroup = assemblysConfig.assemblyGroups[index];
+          if (asearchGroupName.value) {
+            let gName = tempGroup.name;
+            let gLabel = tempGroup.label;
+            console.log(gName, gLabel, asearchGroupName);
+            if (gName && gName.indexOf(asearchGroupName.value) == -1 && gLabel && gLabel.indexOf(asearchGroupName.value) == -1) {
+              continue;
+            }
+          }
+          let items = tempGroup.items;
+          let tempItems = [];
+          if (searchItemName.value) {
+            for (let iIndex = 0; iIndex < items.length; iIndex++) {
+              let item = items[iIndex];
+              let iName = item.name;
+              let iLabel = item.label;
+              if (iName && iName.indexOf(searchItemName.value) == -1 && iLabel && iLabel.indexOf(searchItemName.value) == -1) {
+                continue;
+              }
+              tempItems.push(item);
+            }
+          } else {
+            tempItems = items;
+          }
+          if (tempItems.length > 0) {
+            let groupObj = {
+              name: tempGroup.name,
+              label: tempGroup.label,
+              icon: tempGroup.icon,
+              items: tempItems
+            };
+            newGroups.push(groupObj);
+            openGroupNames.value.push(groupObj.name);
+          }
+        }
+        return newGroups;
+      }
+    });
+    function cloneItem(evt) {
+      const newItem = vue.reactive(commonUtil.deepCopy(evt));
+      delete newItem.designComponent;
+      delete newItem.attrComponent;
+      delete newItem.renderComponent;
+      if (!newItem.props) {
+        newItem.props = {};
+      }
+      newItem.uuid = commonUtil.getUuidv4();
+      newItem.props.isInit = true;
+      return newItem;
+    }
+    return (_ctx, _cache) => {
+      const _component_el_option = vue.resolveComponent("el-option");
+      const _component_el_select = vue.resolveComponent("el-select");
+      const _component_el_input = vue.resolveComponent("el-input");
+      const _component_el_icon = vue.resolveComponent("el-icon");
+      const _component_el_col = vue.resolveComponent("el-col");
+      const _component_el_row = vue.resolveComponent("el-row");
+      const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
+      const _component_el_collapse = vue.resolveComponent("el-collapse");
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createVNode(_component_el_input, {
+            modelValue: searchItemName.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchItemName.value = $event),
+            style: { "height": "36px" },
+            placeholder: "Search...",
+            clearable: "",
+            class: "input-with-select",
+            "suffix-icon": vue.unref(Icons.Search)
+          }, {
+            prepend: vue.withCtx(() => [
+              vue.createVNode(_component_el_select, {
+                class: "amb-assembly-search-select",
+                style: { "width": "90px" },
+                clearable: "",
+                modelValue: asearchGroupName.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => asearchGroupName.value = $event),
+                placeholder: "全部"
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(groupOptions.value, (item) => {
+                    return vue.openBlock(), vue.createBlock(_component_el_option, {
+                      label: item.label,
+                      value: item.name
+                    }, null, 8, ["label", "value"]);
+                  }), 256))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "suffix-icon"])
+        ]),
+        vue.createVNode(_component_el_collapse, {
+          modelValue: openGroupNames.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => openGroupNames.value = $event),
+          style: { "margin-top": "45px" }
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(showAssemblyGroups.value, (showGroup, index) => {
+              return vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
+                class: "amb-assembly-collapse-header",
+                name: showGroup.name
+              }, {
+                title: vue.withCtx(() => [
+                  showGroup.icon ? (vue.openBlock(), vue.createElementBlock("img", {
+                    key: 0,
+                    class: "amb-assembly-group-img",
+                    src: vue.unref(commonUtil.getSrcFileUrl)(showGroup.icon)
+                  }, null, 8, _hoisted_2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                    key: 1,
+                    style: { "width": "16px", "height": "16px", "color": "#5893EF" }
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(Icons.HelpFilled))
+                    ]),
+                    _: 1
+                  })),
+                  vue.createTextVNode("   " + vue.toDisplayString(showGroup.label), 1)
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_el_row, { gutter: 14 }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(vueDraggablePlus.VueDraggable), {
+                        group: { name: "amb-assembly-item", pull: "clone", put: false, revertClone: true },
+                        modelValue: showGroup.items,
+                        "onUpdate:modelValue": ($event) => showGroup.items = $event,
+                        "force-fallback": true,
+                        sort: false,
+                        animation: 300,
+                        style: { "width": "100%" },
+                        clone: cloneItem,
+                        "fallback-class": true,
+                        class: "el-row"
+                      }, {
+                        default: vue.withCtx(() => [
+                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(showGroup.items, (showItem, index2) => {
+                            return vue.openBlock(), vue.createBlock(_component_el_col, { span: 8 }, {
+                              default: vue.withCtx(() => [
+                                vue.createElementVNode("div", {
+                                  class: "amb-assembly-item",
+                                  title: showItem.name
+                                }, [
+                                  vue.createElementVNode("div", null, [
+                                    showItem.icon ? (vue.openBlock(), vue.createElementBlock("img", {
+                                      key: 0,
+                                      class: "amb-assembly-item-img",
+                                      src: vue.unref(commonUtil.getSrcFileUrl)(showItem.icon)
+                                    }, null, 8, _hoisted_4)) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                                      key: 1,
+                                      style: { "width": "16px", "height": "16px", "color": "#5893EF" }
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createVNode(vue.unref(Icons.HelpFilled))
+                                      ]),
+                                      _: 1
+                                    }))
+                                  ]),
+                                  vue.createTextVNode(" " + vue.toDisplayString(showItem.label), 1)
+                                ], 8, _hoisted_3)
+                              ]),
+                              _: 2
+                            }, 1024);
+                          }), 256))
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "onUpdate:modelValue"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1032, ["name"]);
+            }), 256))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/dist/lib/components/design/views/design/view/assemblys-container-list.vue2.js

@@ -0,0 +1,3 @@
+"use strict";
+const assemblysContainerList_vue_vue_type_script_setup_true_lang = require("./assemblys-container-list.vue.js");
+module.exports = assemblysContainerList_vue_vue_type_script_setup_true_lang;

package/dist/lib/components/design/views/design/view/assemblys-container-template.vue.js

@@ -0,0 +1,69 @@
+"use strict";
+const vue = require("vue");
+const Icons = require("@element-plus/icons");
+const _hoisted_1 = { class: "amb-assembly-header-search" };
+const _hoisted_2 = ["title"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "assemblys-container-template",
+  setup(__props) {
+    const searchItemName = vue.ref("");
+    const templates = [{
+      name: "grid",
+      label: "标准表格"
+    }, {
+      name: "basicform",
+      label: "标准表单"
+    }, {
+      name: "workflowform",
+      label: "带流程表单"
+    }];
+    return (_ctx, _cache) => {
+      const _component_el_input = vue.resolveComponent("el-input");
+      const _component_el_icon = vue.resolveComponent("el-icon");
+      const _component_el_col = vue.resolveComponent("el-col");
+      const _component_el_row = vue.resolveComponent("el-row");
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createVNode(_component_el_input, {
+            modelValue: searchItemName.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchItemName.value = $event),
+            style: { "height": "36px" },
+            placeholder: "Search...",
+            class: "input-with-select",
+            "suffix-icon": vue.unref(Icons.Search)
+          }, null, 8, ["modelValue", "suffix-icon"])
+        ]),
+        vue.createVNode(_component_el_row, {
+          gutter: 14,
+          style: { "margin-top": "30px" }
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(templates, (showItem, index) => {
+              return vue.createVNode(_component_el_col, { span: 24 }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", {
+                    class: "amb-assembly-item",
+                    title: showItem.label
+                  }, [
+                    vue.createElementVNode("div", null, [
+                      vue.createVNode(_component_el_icon, { style: { "width": "16px", "height": "16px", "color": "#5893EF" } }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(Icons.HelpFilled))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    vue.createTextVNode(" " + vue.toDisplayString(showItem.label), 1)
+                  ], 8, _hoisted_2)
+                ]),
+                _: 2
+              }, 1024);
+            }), 64))
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/dist/lib/components/design/views/design/view/assemblys-container-template.vue2.js

@@ -0,0 +1,3 @@
+"use strict";
+const assemblysContainerTemplate_vue_vue_type_script_setup_true_lang = require("./assemblys-container-template.vue.js");
+module.exports = assemblysContainerTemplate_vue_vue_type_script_setup_true_lang;

package/dist/lib/components/design/views/design/view/assemblys-container.vue.js

@@ -0,0 +1,165 @@
+"use strict";
+const vue = require("vue");
+const assemblysContainerList_vue_vue_type_script_setup_true_lang = require("./assemblys-container-list.vue.js");
+const assemblysContainerExplore_vue_vue_type_script_setup_true_lang = require("./assemblys-container-explore.vue.js");
+const assemblysContainerTemplate_vue_vue_type_script_setup_true_lang = require("./assemblys-container-template.vue.js");
+const pageEventContainer_vue_vue_type_script_setup_true_lang = require("../page-event/page-event-container.vue.js");
+const eventBus = require("../../../utils/eventBus.js");
+const _hoisted_1 = { class: "amb-assembly-header" };
+const _hoisted_2 = { class: "amb-assembly-header-type" };
+const _hoisted_3 = { class: "amb-design-assembly-list" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "assemblys-container",
+  props: {
+    designItems: Array,
+    selectWidget: Object,
+    configure: Object
+  },
+  emits: ["onSelectWidget", "addEvent", "changeEvent", "onSelectEvent"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const $emit = __emit;
+    const configure = props.configure;
+    let selAsselbyType = "assembly";
+    const typeAssemblyClass = vue.ref("selected");
+    const typeExplorerClass = vue.ref("");
+    const typeTemplateClass = vue.ref("");
+    const typeEventClass = vue.ref("");
+    const configureObjVal = vue.ref(null);
+    const editEventVal = vue.ref(null);
+    function changeType(typeName) {
+      if (typeName == "assembly") {
+        typeAssemblyClass.value = "selected";
+        typeExplorerClass.value = "";
+        typeTemplateClass.value = "";
+        typeEventClass.value = "";
+      } else if (typeName == "pageEvent") {
+        selectPageEventTab();
+      } else if (typeName == "explorer") {
+        typeExplorerClass.value = "selected";
+        typeAssemblyClass.value = "";
+        typeTemplateClass.value = "";
+        typeEventClass.value = "";
+      } else {
+        typeExplorerClass.value = "";
+        typeAssemblyClass.value = "";
+        typeTemplateClass.value = "selected";
+        typeEventClass.value = "";
+      }
+    }
+    function selectPageEventTab() {
+      typeExplorerClass.value = "";
+      typeAssemblyClass.value = "";
+      typeTemplateClass.value = "";
+      typeEventClass.value = "selected";
+    }
+    const ambDesignAssemblyContent = vue.ref(null);
+    const winHeight = vue.ref();
+    const containerHeightStyle = vue.computed(() => {
+      return {
+        height: winHeight.value + "px"
+      };
+    });
+    vue.onMounted(() => {
+      if (ambDesignAssemblyContent.value) {
+        const rect = ambDesignAssemblyContent.value.getBoundingClientRect();
+        if (rect.y) {
+          winHeight.value = window.innerHeight - rect.y;
+        }
+      }
+    });
+    vue.watch(typeEventClass, (newValue) => {
+      $emit("onSelectEvent", newValue);
+    });
+    function onSelectWidget(selIndex, selConfigure) {
+      $emit("onSelectWidget", selIndex, selConfigure);
+    }
+    const isShowEvent = vue.ref(true);
+    eventBus.$on("editEvent", ({ configureObj, event }) => {
+      selectPageEventTab();
+      configureObjVal.value = configureObj;
+      editEventVal.value = event;
+      refreshEventContainer();
+    });
+    function refreshEventContainer() {
+      isShowEvent.value = false;
+      setTimeout(() => {
+        isShowEvent.value = true;
+      }, 1);
+    }
+    function addEvent(eventForm, handleType) {
+      $emit("addEvent", eventForm, handleType);
+    }
+    function changeEvent(eventForm) {
+      $emit("changeEvent", eventForm);
+    }
+    const pageEventContainerRef = vue.ref(null);
+    function changeSelectEvent(customEvent) {
+      pageEventContainerRef.value.changeSelectEvent(customEvent);
+    }
+    function doCreateEvent(eventForm) {
+      pageEventContainerRef.value.doCreateEvent(eventForm);
+    }
+    function changeSelectStandardEvent(eventName, eventLabel) {
+      pageEventContainerRef.value.changeSelectStandardEvent(eventName, eventLabel);
+    }
+    __expose({ changeSelectEvent, doCreateEvent, changeSelectStandardEvent, selAsselbyType });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "amb-design-assembly-content",
+        ref_key: "ambDesignAssemblyContent",
+        ref: ambDesignAssemblyContent,
+        style: vue.normalizeStyle(containerHeightStyle.value)
+      }, [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createElementVNode("label", {
+              class: vue.normalizeClass(typeAssemblyClass.value),
+              onClick: _cache[0] || (_cache[0] = ($event) => changeType("assembly"))
+            }, "组件", 2),
+            vue.createElementVNode("label", {
+              class: vue.normalizeClass(typeEventClass.value),
+              onClick: _cache[1] || (_cache[1] = ($event) => changeType("pageEvent"))
+            }, "事件", 2),
+            vue.createElementVNode("label", {
+              class: vue.normalizeClass(typeExplorerClass.value),
+              onClick: _cache[2] || (_cache[2] = ($event) => changeType("explorer"))
+            }, "大纲", 2),
+            vue.createElementVNode("label", {
+              class: vue.normalizeClass(typeTemplateClass.value),
+              onClick: _cache[3] || (_cache[3] = ($event) => changeType("template"))
+            }, "模板库", 2)
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.withDirectives(vue.createVNode(assemblysContainerList_vue_vue_type_script_setup_true_lang, null, null, 512), [
+            [vue.vShow, typeAssemblyClass.value]
+          ]),
+          vue.withDirectives(vue.createVNode(assemblysContainerExplore_vue_vue_type_script_setup_true_lang, {
+            onOnSelectWidget: onSelectWidget,
+            designItems: __props.designItems,
+            selectWidget: __props.selectWidget
+          }, null, 8, ["designItems", "selectWidget"]), [
+            [vue.vShow, typeExplorerClass.value]
+          ]),
+          vue.withDirectives(vue.createVNode(assemblysContainerTemplate_vue_vue_type_script_setup_true_lang, null, null, 512), [
+            [vue.vShow, typeTemplateClass.value]
+          ]),
+          isShowEvent.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(pageEventContainer_vue_vue_type_script_setup_true_lang, {
+            key: 0,
+            ref_key: "pageEventContainerRef",
+            ref: pageEventContainerRef,
+            configure: vue.unref(configure),
+            configureObj: configureObjVal.value,
+            editEvent: editEventVal.value,
+            onAddEvent: addEvent,
+            onChangeEvent: changeEvent
+          }, null, 8, ["configure", "configureObj", "editEvent"])), [
+            [vue.vShow, typeEventClass.value]
+          ]) : vue.createCommentVNode("", true)
+        ])
+      ], 4);
+    };
+  }
+});
+module.exports = _sfc_main;

package/dist/lib/components/design/views/design/view/assemblys-container.vue2.js

@@ -0,0 +1,3 @@
+"use strict";
+const assemblysContainer_vue_vue_type_script_setup_true_lang = require("./assemblys-container.vue.js");
+module.exports = assemblysContainer_vue_vue_type_script_setup_true_lang;

package/dist/lib/components/design/views/design/view/attr-container.vue.js

@@ -0,0 +1,76 @@
+"use strict";
+const vue = require("vue");
+const pageAttr_vue_vue_type_script_setup_true_lang = require("../../assemblys/page/page-attr.vue.js");
+const errorAttr_vue_vue_type_script_setup_true_lang = require("../../assemblys/error-attr.vue.js");
+const assemblysConfig = require("../../../utils/assemblys-config.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "attr-container",
+  props: {
+    pageInfo: Object
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const dynamicConfigure = vue.ref({});
+    const dynamicComponent = vue.ref({});
+    dynamicConfigure.value = props.pageInfo;
+    dynamicComponent.value = pageAttr_vue_vue_type_script_setup_true_lang;
+    const indexObj = vue.ref({
+      index: 1
+    });
+    const ambDesignAttrContent = vue.ref(null);
+    const winHeight = vue.ref();
+    const containerHeightStyle = vue.computed(() => {
+      return {
+        height: winHeight.value + "px"
+      };
+    });
+    vue.onMounted(() => {
+      if (ambDesignAttrContent.value) {
+        const rect = ambDesignAttrContent.value.getBoundingClientRect();
+        if (rect.y) {
+          winHeight.value = window.innerHeight - rect.y;
+        }
+      }
+    });
+    const cacheComponent = {};
+    function changeAssembly(configure) {
+      if (!configure || !configure.name || configure.name == "page") {
+        dynamicConfigure.value = props.pageInfo;
+        dynamicComponent.value = pageAttr_vue_vue_type_script_setup_true_lang;
+      } else {
+        dynamicConfigure.value = configure;
+        let newComponent = cacheComponent[configure.name];
+        if (newComponent == null) {
+          newComponent = assemblysConfig.getAttrComponentByName(configure.name);
+        }
+        if (newComponent == null) {
+          newComponent = errorAttr_vue_vue_type_script_setup_true_lang;
+        }
+        cacheComponent[configure.name] = newComponent;
+        dynamicComponent.value = newComponent;
+      }
+    }
+    function changeAssemblyByComponent(configure, component) {
+      dynamicConfigure.value = configure;
+      dynamicComponent.value = component;
+    }
+    __expose({
+      changeAssembly,
+      changeAssemblyByComponent
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        style: vue.normalizeStyle([{ "height": "100%" }, containerHeightStyle.value]),
+        ref_key: "ambDesignAttrContent",
+        ref: ambDesignAttrContent
+      }, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(dynamicComponent.value), {
+          indexObj: indexObj.value,
+          pageDesign: __props.pageInfo,
+          configure: dynamicConfigure.value
+        }, null, 8, ["indexObj", "pageDesign", "configure"]))
+      ], 4);
+    };
+  }
+});
+module.exports = _sfc_main;

package/dist/lib/components/design/views/design/view/attr-container.vue2.js

@@ -0,0 +1,3 @@
+"use strict";
+const attrContainer_vue_vue_type_script_setup_true_lang = require("./attr-container.vue.js");
+module.exports = attrContainer_vue_vue_type_script_setup_true_lang;