@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/visual/widgets/CarouselVisual.vue.js

@@ -0,0 +1,303 @@
+import { createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
+import _sfc_main$1 from "../Component.vue.js";
+/* empty css                */
+import draggable from "@epxing/core/src/components/draggable";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-carousel-visual",
+  extends: _sfc_main$1,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      editCarouselDialog: false,
+      editCarousel: {}
+    };
+  },
+  computed: {
+    carouselList: {
+      get() {
+        const {
+          items = []
+        } = this.widget;
+        return items;
+      },
+      set(v) {
+        this.designer.updateWidget(this.id, {
+          items: v
+        });
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs() {
+      let label = "";
+      if (this.currentMeta) {
+        label = this.currentMeta.getLabel();
+      }
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        showTitle: "none",
+        fields: label ? [label] : [],
+        operateColumnEllipsis: 0,
+        operateColumnPosition: "start",
+        span: 24
+      };
+    },
+    initConfigs() {
+      const config = {
+        ...this.compConfig
+      };
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span;
+      }
+      this.config = config;
+    },
+    changeMetaFn(v) {
+      this.componentMetaId = v.metaId;
+      this.metaViewId = v.metaViewId;
+    },
+    renderCarousel(item) {
+      let _slot;
+      return createVNode("div", {
+        "class": ""
+      }, [createVNode(draggable, {
+        "modelValue": this.carouselList,
+        "onUpdate:modelValue": ($event) => this.carouselList = $event,
+        "tag": "ul",
+        "group": "carousel-pane",
+        "handle": ".carousel-item__drag-icon",
+        "class": "carousel__list"
+      }, _isSlot(_slot = this.carouselList.map((item2, index) => createVNode("li", {
+        "class": {
+          carousel__item: true
+        }
+      }, [createVNode("i", {
+        "class": "carousel-item__drag-icon epx-icon-tuozhuai"
+      }, null), createVNode("span", {
+        "class": "carousel-item__name"
+      }, [item2.title]), createVNode("span", {
+        "class": "carousel-item__operates"
+      }, [createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "size": "default",
+        "icon": "el-icon-setting",
+        "onClick": this.editCarouselItem.bind(this, item2, index)
+      }, null), createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "size": "default",
+        "icon": "el-icon-delete",
+        "onClick": this.deleteCarouselItem.bind(this, item2)
+      }, null)])]))) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "onClick": this.addCarouselItem
+      }, {
+        default: () => [createTextVNode("+ 添加轮播项")]
+      }), createVNode(resolveComponent("el-dialog"), {
+        "title": "修改轮播项",
+        "modelValue": this.editCarouselDialog,
+        "width": "420px",
+        "append-to-body": true,
+        "destroy-on-close": true,
+        "onClose": () => {
+          this.editCarouselDialog = false;
+        }
+      }, {
+        default: () => [this.editCarouselDialog && createVNode(resolveComponent("el-form"), {
+          "inline": true,
+          "label-position": "left",
+          "label-width": "100px"
+        }, {
+          default: () => [createVNode(resolveComponent("el-form-item"), {
+            "label": "名称",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-input"), {
+              "label": "名称",
+              "value": this.editCarousel.title,
+              "i18nValue": this.editCarousel["name.i18n"]
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "内容显示",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("el-radio-group"), {
+              "modelValue": this.editCarousel.renderContentType || "image",
+              "onUpdate:modelValue": (v) => this.editCarousel.renderContentType = v
+            }, {
+              default: () => [createVNode(resolveComponent("el-radio"), {
+                "label": "image",
+                "value": "image"
+              }, {
+                default: () => [createTextVNode("图片")]
+              }), createVNode(resolveComponent("el-radio"), {
+                "label": "node",
+                "value": "node"
+              }, {
+                default: () => [createTextVNode("自定义内容")]
+              })]
+            })]
+          }), this.editCarousel.renderContentType !== "node" && createVNode(resolveComponent("el-form-item"), {
+            "label": "图片地址",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-image"), {
+              "value": this.editCarousel.imgUrl,
+              "onChange": (v) => this.editCarousel.imgUrl = v
+            }, null)]
+          }), createVNode(resolveComponent("el-form-item"), {
+            "label": "链接",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("el-radio-group"), {
+              "modelValue": this.editCarousel.link,
+              "onUpdate:modelValue": ($event) => this.editCarousel.link = $event
+            }, {
+              default: () => [createVNode(resolveComponent("el-radio"), {
+                "label": "none",
+                "value": "none"
+              }, {
+                default: () => [createTextVNode("无")]
+              }), createVNode(resolveComponent("el-radio"), {
+                "label": "menu",
+                "value": "menu"
+              }, {
+                default: () => [createTextVNode("菜单")]
+              }), createVNode(resolveComponent("el-radio"), {
+                "label": "page",
+                "value": "page"
+              }, {
+                default: () => [createTextVNode("页面")]
+              })]
+            })]
+          }), this.editCarousel.link === "menu" && createVNode(resolveComponent("el-form-item"), {
+            "label": "打开菜单",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-object"), {
+              "value": this.editCarousel.menuId,
+              "object": "FM_MODULE",
+              "label": "菜单",
+              "flag": "config_menu",
+              "objectWay": "option",
+              "isTree": "1",
+              "onChangeConfigs": (v) => this.editCarousel.menuId = v
+            }, null)]
+          }), this.editCarousel.link === "page" && createVNode(resolveComponent("el-form-item"), {
+            "label": "打开页面",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-object"), {
+              "value": this.editCarousel.pageId,
+              "object": "FM_PAGE_CONFIG",
+              "label": "页面",
+              "onChangeConfigs": (v) => this.editCarousel.pageId = v
+            }, null)]
+          }), this.editCarousel.link === "page" && createVNode(resolveComponent("el-form-item"), {
+            "label": "页面打开方式",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("el-radio-group"), {
+              "modelValue": this.editCarousel.openMode,
+              "onUpdate:modelValue": ($event) => this.editCarousel.openMode = $event
+            }, {
+              default: () => [createVNode(resolveComponent("el-radio"), {
+                "label": "3",
+                "value": "3"
+              }, {
+                default: () => [createTextVNode("直接打开")]
+              }), createVNode(resolveComponent("el-radio"), {
+                "label": "2",
+                "value": "2"
+              }, {
+                default: () => [createTextVNode("弹窗")]
+              }), createVNode(resolveComponent("el-radio"), {
+                "label": "1",
+                "value": "1"
+              }, {
+                default: () => [createTextVNode("新页面")]
+              })]
+            })]
+          }), (this.editCarousel.link === "page" || this.editCarousel.link === "menu") && createVNode(resolveComponent("el-form-item"), {
+            "label": "参数传递",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-params"), {
+              "value": this.editCarousel.params,
+              "onChangeConfigs": (v) => this.editCarousel.params = v
+            }, null)]
+          })]
+        }), createVNode("div", {
+          "class": "button-group"
+        }, [createVNode(resolveComponent("el-button"), {
+          "type": "primary",
+          "size": "default",
+          "onClick": this.saveCarouselItem
+        }, {
+          default: () => [createTextVNode("确定")]
+        }), createVNode(resolveComponent("el-button"), {
+          "size": "default",
+          "onClick": () => {
+            this.editCarouselDialog = false;
+          }
+        }, {
+          default: () => [createTextVNode("取消")]
+        })])]
+      })]);
+    },
+    addCarouselItem() {
+      const {
+        items = []
+      } = this.widget;
+      const id = "carouselItem_" + this.$util.genId();
+      const name = "轮播项" + (items.length + 1);
+      const newCarouselItem = {
+        id,
+        title: name,
+        contentType: "carousel-item"
+      };
+      this.designer.addWidget(newCarouselItem, this.widget, {
+        defaultSelected: false
+      });
+    },
+    editCarouselItem(item, index) {
+      this.editCarousel = {
+        ...item
+      };
+      this.editCarouselIndex = index;
+      this.editCarouselDialog = true;
+    },
+    deleteCarouselItem(item, index) {
+      this.designer.deleteWidget(item, this.widget);
+    },
+    saveCarouselItem() {
+      const carouselList = [...this.carouselList];
+      const index = carouselList.findIndex((component) => component.id === this.editCarousel.id);
+      if (index !== -1) {
+        carouselList.splice(index, 1, {
+          ...this.editCarousel
+        });
+        this.carouselList = carouselList;
+      }
+      this.editCarouselDialog = false;
+    }
+  },
+  mounted() {
+    if (this.upComponentInstance) {
+      const upComponent = this.upComponentInstance.$refs.component;
+      upComponent.$epxOn("change-meta-id", this.changeMetaFn);
+    }
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/src/visual/widgets/CollapseVisual.js

@@ -0,0 +1,8 @@
+import '../../../style.css';
+import _sfc_main from "./CollapseVisual.vue.js";
+/* empty css                    */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const CollapseVisual = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-151c09c2"]]);
+export {
+  CollapseVisual as default
+};

package/dist/src/visual/widgets/CollapseVisual.vue.js

@@ -0,0 +1,202 @@
+import { createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
+import _sfc_main$1 from "../Component.vue.js";
+/* empty css                */
+import draggable from "@epxing/core/src/components/draggable";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-collapse-visual",
+  extends: _sfc_main$1,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      collapseName: {},
+      editCollapseDialog: false,
+      editCollapse: {}
+    };
+  },
+  computed: {
+    collapseList: {
+      get() {
+        const {
+          items = []
+        } = this.widget;
+        return items;
+      },
+      set(v) {
+        this.designer.updateWidget(this.id, {
+          items: v
+        });
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs() {
+      if (this.collapseList) {
+        this.collapseList.forEach((item) => {
+          this.collapseName[item.id] = item.title;
+        });
+      }
+      let label = "";
+      if (this.currentMeta) {
+        label = this.currentMeta.getLabel();
+      }
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        showTitle: "none",
+        fields: label ? [label] : [],
+        operateColumnEllipsis: 0,
+        operateColumnPosition: "start",
+        span: 24
+      };
+    },
+    changeMetaFn(v) {
+      this.componentMetaId = v.metaId;
+      this.metaViewId = v.metaViewId;
+    },
+    renderCollapse(item) {
+      let _slot;
+      return createVNode("div", {
+        "class": ""
+      }, [createVNode(draggable, {
+        "modelValue": this.collapseList,
+        "onUpdate:modelValue": ($event) => this.collapseList = $event,
+        "tag": "ul",
+        "group": "collapse-pane",
+        "handle": ".collapse-item__drag-icon",
+        "class": "collapse__list"
+      }, _isSlot(_slot = this.collapseList.map((item2, index) => createVNode("li", {
+        "class": {
+          collapse__item: true
+        }
+      }, [createVNode("i", {
+        "class": "collapse-item__drag-icon epx-icon-tuozhuai"
+      }, null), createVNode(resolveComponent("el-input"), {
+        "class": "collapse-item__input",
+        "size": "small",
+        "type": "text",
+        "modelValue": this.collapseName[item2.id],
+        "onUpdate:modelValue": ($event) => this.collapseName[item2.id] = $event,
+        "onChange": this.changeCollapseName.bind(this, item2)
+      }, null), createVNode("span", {
+        "class": "collapse-item__operates"
+      }, [createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "size": "default",
+        "icon": "el-icon-setting",
+        "onClick": this.editCollapseItem.bind(this, item2, index)
+      }, null), createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "size": "default",
+        "icon": "el-icon-delete",
+        "onClick": this.deleteCollapseItem.bind(this, item2)
+      }, null)])]))) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(resolveComponent("el-button"), {
+        "type": "primary",
+        "link": true,
+        "onClick": this.addCollapseItem
+      }, {
+        default: () => [createTextVNode("+ 添加折叠项")]
+      }), createVNode(resolveComponent("el-dialog"), {
+        "title": "修改折叠项",
+        "modelValue": this.editCollapseDialog,
+        "width": "420px",
+        "append-to-body": true,
+        "destroy-on-close": true,
+        "onClose": () => {
+          this.editCollapseDialog = false;
+        }
+      }, {
+        default: () => [this.editCollapseDialog && createVNode(resolveComponent("el-form"), {
+          "inline": true,
+          "label-position": "left",
+          "label-width": "100px"
+        }, {
+          default: () => [createVNode(resolveComponent("el-form-item"), {
+            "label": "名称",
+            "class": "epx-visual-component__form-item"
+          }, {
+            default: () => [createVNode(resolveComponent("epx-visual-config-input"), {
+              "label": "名称",
+              "value": this.editCollapse.title,
+              "i18nValue": this.editCollapse["name.i18n"]
+            }, null)]
+          })]
+        }), createVNode("div", {
+          "class": "button-group"
+        }, [createVNode(resolveComponent("el-button"), {
+          "type": "primary",
+          "size": "default",
+          "onClick": this.saveCollapseItem
+        }, {
+          default: () => [createTextVNode("确定")]
+        }), createVNode(resolveComponent("el-button"), {
+          "size": "default",
+          "onClick": () => {
+            this.editCollapseDialog = false;
+          }
+        }, {
+          default: () => [createTextVNode("取消")]
+        })])]
+      })]);
+    },
+    addCollapseItem() {
+      const {
+        items = []
+      } = this.widget;
+      const id = "collapseItem_" + this.$util.genId();
+      const name = "折叠项" + (items.length + 1);
+      const newCollapseItem = {
+        id,
+        title: name,
+        contentType: "collapse-item"
+      };
+      this.collapseName[id] = name;
+      this.designer.addWidget(newCollapseItem, this.widget, {
+        defaultSelected: false
+      });
+    },
+    changeCollapseName(item) {
+      this.designer.updateWidget(item.id, {
+        title: this.collapseName[item.id]
+      });
+    },
+    editCollapseItem(item, index) {
+      this.editCollapse = {
+        ...item
+      };
+      this.editCollapseIndex = index;
+      this.editCollapseDialog = true;
+    },
+    deleteCollapseItem(item, index) {
+      this.designer.deleteWidget(item, this.widget);
+    },
+    saveCollapseItem() {
+      const collapseList = [...this.collapseList];
+      const index = collapseList.findIndex((component) => component.id === this.editCollapse.id);
+      if (index !== -1) {
+        collapseList.splice(index, 1, {
+          ...this.editCollapse
+        });
+        this.collapseList = collapseList;
+      }
+      this.editCollapseDialog = false;
+    }
+  },
+  mounted() {
+    if (this.upComponentInstance) {
+      const upComponent = this.upComponentInstance.$refs.component;
+      upComponent.$epxOn("change-meta-id", this.changeMetaFn);
+    }
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/src/visual/widgets/DropdownVisual.js

@@ -0,0 +1,8 @@
+import '../../../style.css';
+import _sfc_main from "./DropdownVisual.vue.js";
+/* empty css                    */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const DropdownVisual = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-81e58421"]]);
+export {
+  DropdownVisual as default
+};