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

package/dist/src/page-designer/previews/add-form-item/Preview.js

@@ -0,0 +1,194 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, toDisplayString, createTextVNode, createCommentVNode, createBlock, withCtx, createVNode } from "vue";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-add-form-item--preview",
+  mixins: [previewMixin],
+  props: {
+    formConfigs: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    pageType: String
+  },
+  data() {
+    return {
+      isFold: false,
+      fieldsConfigs: [],
+      data: {}
+    };
+  },
+  computed: {
+    // 与运行时 AddFormItem 一致，从 store 取屏幕档位（此前未定义，渲染期报未定义属性）
+    isPcMd() {
+      return this.$store.state.config.isPcMd;
+    },
+    isPcLg() {
+      return this.$store.state.config.isPcLg;
+    },
+    componentType() {
+      const { componentType } = this.$configs;
+      if (this.isEdit) return "EDIT";
+      if (!componentType) {
+        return this.pageType;
+      } else {
+        return componentType;
+      }
+    },
+    currentMetaId() {
+      const { metaId = this.designer.page.metaId } = this.$configs;
+      return metaId;
+    },
+    column() {
+      let { column = this.formConfigs.column, columnAuto = false } = this.$configs;
+      if (columnAuto) {
+        if (this.isPcMd) {
+          column = column < 2 ? column : 2;
+        } else if (this.isPcLg) {
+          column = column < 3 ? column : 3;
+        }
+      }
+      return column;
+    },
+    labelWidth() {
+      const { labelWidthType, labelWidth } = this.$configs;
+      return labelWidthType === "auto" ? "auto" : labelWidth;
+    },
+    valueWidth() {
+      const { valueWidthType, valueWidth } = this.$configs;
+      return valueWidthType === "auto" ? "auto" : valueWidth;
+    }
+  },
+  watch: {
+    componentType() {
+      this.getFieldsConfigs();
+    },
+    "$configs.fields": {
+      handler(v) {
+        this.getFieldsConfigs();
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    init() {
+      this.getFieldsConfigs();
+    },
+    getFieldsConfigs() {
+      const { fields } = this.$configs;
+      this.$FieldFactory.createFields({
+        metaId: this.$metaId,
+        pageType: this.componentType,
+        fields,
+        type: "form"
+      }).then((data) => {
+        this.fieldsConfigs = [...data];
+      });
+    },
+    editFn() {
+      this.getFieldsConfigs("EDIT");
+      this.isEdit = true;
+      this.isFold = false;
+      this.loadForm = false;
+      this.$nextTick(() => {
+        this.loadForm = true;
+      });
+    },
+    cancel(finish) {
+      this.isEdit = false;
+      this.$emit("cancel-edit", finish);
+      this.getFieldsConfigs();
+      if (finish && this.form) {
+        this.form.$refesh();
+      }
+    }
+  },
+  created() {
+    this.init();
+  }
+};
+const _hoisted_1 = { class: "epx-add-form-item__title" };
+const _hoisted_2 = { class: "epx-add-form-item__title-operate fr" };
+const _hoisted_3 = {
+  key: 0,
+  class: "epx-add-form-item__note"
+};
+const _hoisted_4 = { class: "epx-add-form-item__note-html" };
+const _hoisted_5 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_epx_table_form = resolveComponent("epx-table-form");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["epx-add-form-item", { "is-fold": $data.isFold }]),
+    style: normalizeStyle(_ctx.$configs.style)
+  }, [
+    createElementVNode("p", {
+      class: normalizeClass(["epx-add-form-item__header", `epx-add-form-item__header--${_ctx.$configs.formTitleStyle}`])
+    }, [
+      createElementVNode("span", _hoisted_1, toDisplayString(_ctx.$configs.componentName || _ctx.widget.title), 1),
+      createElementVNode("span", _hoisted_2, [
+        $options.componentType !== "READONLY" && _ctx.$configs.editable ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "epx-add-form-item__title-edit",
+          onClick: _cache[0] || (_cache[0] = (...args) => $options.editFn && $options.editFn(...args))
+        }, [
+          _cache[2] || (_cache[2] = createElementVNode("i", { class: "el-icon-edit-outline" }, null, -1)),
+          createTextVNode(" " + toDisplayString(_ctx.$t("edit")), 1)
+        ])) : createCommentVNode("", true),
+        createElementVNode("i", {
+          class: normalizeClass(["epx-add-form-item__title-foldicon", "el-icon-caret-top"]),
+          onClick: _cache[1] || (_cache[1] = ($event) => $data.isFold = !$data.isFold)
+        })
+      ])
+    ], 2),
+    _ctx.$configs.note ? (openBlock(), createElementBlock("p", _hoisted_3, [
+      _cache[4] || (_cache[4] = createElementVNode("i", { class: "el-icon-info" }, null, -1)),
+      createElementVNode("span", _hoisted_4, [
+        createElementVNode("span", {
+          innerHTML: _ctx.xss.process(_ctx.$configs.note)
+        }, null, 8, _hoisted_5),
+        _ctx.$configs.help ? (openBlock(), createBlock(_component_el_button, {
+          key: 0,
+          size: "small",
+          type: "primary",
+          link: "",
+          class: "epx-add-form-item__help"
+        }, {
+          default: withCtx(() => [..._cache[3] || (_cache[3] = [
+            createTextVNode("了解更多", -1)
+          ])]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ])
+    ])) : createCommentVNode("", true),
+    createVNode(_component_epx_table_form, {
+      class: "epx-add-form-item__content",
+      ref: "form",
+      metaId: $options.currentMetaId,
+      fieldsConfigs: $data.fieldsConfigs,
+      pageType: "componentType",
+      value: $data.data,
+      showRelyFlag: false,
+      valueRelyFlag: false,
+      requiredRelyFlag: false,
+      fieldRelation: [],
+      column: $options.column,
+      labelAlign: _ctx.$configs.labelAlign,
+      lineSpace: _ctx.$configs.lineSpace,
+      labelWidth: $options.labelWidth,
+      labelFontSize: _ctx.$configs.labelFontSize,
+      valueWidth: $options.valueWidth,
+      valueFontSize: _ctx.$configs.valueFontSize,
+      mFormStyle: _ctx.$configs.mFormStyle,
+      mFormPadding: _ctx.$configs.mFormPadding
+    }, null, 8, ["metaId", "fieldsConfigs", "value", "column", "labelAlign", "lineSpace", "labelWidth", "labelFontSize", "valueWidth", "valueFontSize", "mFormStyle", "mFormPadding"])
+  ], 6);
+}
+const AddFormItemPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a3844688"]]);
+export {
+  AddFormItemPreview as default
+};

package/dist/src/page-designer/previews/button/Preview.js

@@ -0,0 +1,30 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from "vue";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-button--preview",
+  mixins: [previewMixin]
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  return openBlock(), createElementBlock("div", null, [
+    createVNode(_component_el_button, {
+      type: _ctx.$configs.type,
+      class: "button"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("i", {
+          class: normalizeClass(["button-icon", ["fa", _ctx.$configs.icon]])
+        }, null, 2),
+        createTextVNode(" " + toDisplayString(_ctx.$configs.name || _ctx.$t("operating button")), 1)
+      ]),
+      _: 1
+    }, 8, ["type"])
+  ]);
+}
+const ButtonPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-69cd9724"]]);
+export {
+  ButtonPreview as default
+};

package/dist/src/page-designer/previews/card/Preview.js

@@ -0,0 +1,87 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, createVNode, createElementBlock, Fragment, renderList, mergeProps, createCommentVNode, toDisplayString } from "vue";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-card--preview",
+  mixins: [previewMixin],
+  computed: {
+    colAttribute() {
+      return (component = {}) => {
+        const { xsspan = 24, span } = component;
+        return {
+          span: this.$isMobile ? xsspan : span || this.$configs.columnWidth || 24
+        };
+      };
+    }
+  }
+  // 所有拖拽方法已在 Mixin 中实现
+};
+const _hoisted_1 = {
+  key: 0,
+  class: /* @__PURE__ */ normalizeClass(["clearfix"])
+};
+const _hoisted_2 = { class: "epx-card__title" };
+const _hoisted_3 = { class: "epx-card__component-list epx-page-designer-widget-preview__drop-zone" };
+const _hoisted_4 = {
+  key: 0,
+  class: "epx-page-designer-widget-preview__no-widget"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_col = resolveComponent("el-col");
+  const _component_el_row = resolveComponent("el-row");
+  const _component_el_card = resolveComponent("el-card");
+  return openBlock(), createBlock(_component_el_card, {
+    class: normalizeClass(["epx-card", { "epx-card--split": _ctx.$configs.split }]),
+    style: normalizeStyle(_ctx.widgetStyle),
+    shadow: "never"
+  }, {
+    header: withCtx(() => [
+      _ctx.$configs.showHeader !== false ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("span", _hoisted_2, [
+          createElementVNode("i", {
+            class: normalizeClass(["epx-card__title-icon", _ctx.$configs.icon || "epx-icon-kapianmorentubiao"])
+          }, null, 2),
+          createElementVNode("span", null, toDisplayString(_ctx.widget.title || _ctx.$configs.componentName), 1)
+        ])
+      ])) : createCommentVNode("", true)
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "epx-card__component-content",
+        style: normalizeStyle({ padding: _ctx.$util.toPx(_ctx.$configs.padding) })
+      }, [
+        createElementVNode("div", _hoisted_3, [
+          createVNode(_component_el_row, null, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+                return openBlock(), createBlock(_component_el_col, mergeProps({
+                  key: childWidget.id,
+                  ref_for: true
+                }, $options.colAttribute(childWidget), { column: "false" }), {
+                  default: withCtx(() => [
+                    createVNode(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+                      designer: _ctx.designer,
+                      widget: childWidget,
+                      "parent-widget": _ctx.widget
+                    }), null, 16, ["designer", "widget", "parent-widget"])
+                  ]),
+                  _: 2
+                }, 1040);
+              }), 128))
+            ]),
+            _: 1
+          }),
+          _ctx.childWidgetList.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, "拖拽组件到这里")) : createCommentVNode("", true)
+        ])
+      ], 4)
+    ]),
+    _: 1
+  }, 8, ["class", "style"]);
+}
+const CardPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b600ed88"]]);
+export {
+  CardPreview as default
+};

package/dist/src/page-designer/previews/carousel/CarouselItemPreview.js

@@ -0,0 +1,33 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, mergeProps, createCommentVNode } from "vue";
+/* empty css                        */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-carousel-item--preview",
+  mixins: [previewMixin]
+  // 所有拖拽方法已在 Mixin 中实现
+};
+const _hoisted_1 = { class: "epx-page-designer-widget-preview__drop-zone" };
+const _hoisted_2 = {
+  key: 0,
+  class: "epx-page-designer-widget-preview__no-widget"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+      return openBlock(), createBlock(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+        key: childWidget.id,
+        widget: childWidget,
+        "parent-widget": _ctx.widget,
+        designer: _ctx.designer
+      }), null, 16, ["widget", "parent-widget", "designer"]);
+    }), 128)),
+    _ctx.childWidgetList.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, "拖拽组件到这里")) : createCommentVNode("", true)
+  ]);
+}
+const CarouselItemPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3f82d617"]]);
+export {
+  CarouselItemPreview as default
+};

package/dist/src/page-designer/previews/carousel/Preview.js

@@ -0,0 +1,61 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import Carousel from "@epxing/components/src/carousel/Carousel";
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, mergeProps, withModifiers, createCommentVNode, createElementVNode } from "vue";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-carousel--preview",
+  mixins: [previewMixin],
+  extends: Carousel
+};
+const _hoisted_1 = ["src", "onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_carousel_item = resolveComponent("el-carousel-item");
+  const _component_el_carousel = resolveComponent("el-carousel");
+  return openBlock(), createBlock(_component_el_carousel, {
+    type: _ctx.$configs.type,
+    height: _ctx.$configs.height + "px",
+    "indicator-position": _ctx.$configs.indicatorPosition,
+    trigger: _ctx.$configs.trigger,
+    direction: _ctx.$configs.type === "card" ? "horizontal" : _ctx.$configs.direction,
+    autoplay: false,
+    interval: _ctx.$configs.interval,
+    arrow: _ctx.$configs.arrow
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (item) => {
+        return openBlock(), createBlock(_component_el_carousel_item, {
+          key: item.id,
+          class: "carousel-item"
+        }, {
+          default: withCtx(() => [
+            item.renderContentType === "node" ? (openBlock(), createBlock(_component_widget_preview, mergeProps({
+              key: 0,
+              ref_for: true
+            }, _ctx.$forwardAttrs(_ctx.$attrs), {
+              widget: item,
+              "parent-widget": _ctx.widget,
+              designer: _ctx.designer
+            }), null, 16, ["widget", "parent-widget", "designer"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              item.imgUrl ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                class: "epx-carousel__img",
+                src: _ctx.$util.getFileUrl(item.imgUrl),
+                onClick: withModifiers(($event) => _ctx.clickItem(item), ["stop"])
+              }, null, 8, _hoisted_1)) : createCommentVNode("", true),
+              _cache[0] || (_cache[0] = createElementVNode("div", null, "请上传图片", -1))
+            ], 64))
+          ]),
+          _: 2
+        }, 1024);
+      }), 128))
+    ]),
+    _: 1
+  }, 8, ["type", "height", "indicator-position", "trigger", "direction", "interval", "arrow"]);
+}
+const CarouselPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b4730082"]]);
+export {
+  CarouselPreview as default
+};

package/dist/src/page-designer/previews/collapse/CollapseItemPreview.js

@@ -0,0 +1,118 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, mergeProps, createCommentVNode, withModifiers, normalizeClass, toDisplayString } from "vue";
+/* empty css                        */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const HEADER_SLOT = "header";
+const _sfc_main = {
+  name: "epx-collapse-item--preview",
+  mixins: [previewMixin],
+  computed: {
+    headerSlotWidget() {
+      return (this.widget.slots || {})[HEADER_SLOT] || null;
+    },
+    // 配置点「头部插槽」写在 widgetConfig 里，优先；
+    // 老可视化把 showTitleSlot 写在折叠项自身上，没配过配置点时兜底读它
+    // （与运行时 Collapse.vue 的判断保持一致，否则设计态和运行态会对不上）
+    showTitleSlot() {
+      const config = this.$configs.showTitleSlot;
+      if (config !== void 0 && config !== null) return !!config;
+      return !!this.widget.showTitleSlot;
+    }
+  },
+  methods: {
+    // Header slot 拖拽处理：统一走 designer.handleDrop，组件库 / 模板库 / 画布内拖动都支持
+    onHeaderDragEnter(e) {
+      if (!this.isDraggingFromLibrary(e)) return;
+      e.stopPropagation();
+      this.designer.setDragOverTarget({ type: "slot", widgetId: this.widget.id, slotName: HEADER_SLOT });
+      this.designer.setDragOverTargetElement(e.currentTarget);
+    },
+    onHeaderDragOver(e) {
+      if (!this.isDraggingFromLibrary(e)) return;
+      if (this.designer.updateDragGhostPosition) {
+        this.designer.updateDragGhostPosition(e.clientX, e.clientY);
+      }
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = this.isDraggingWidget() ? "move" : "copy";
+      this.designer.clearDragInsertLine();
+    },
+    onHeaderDragLeave(e) {
+      const dropZone = e.currentTarget;
+      if (dropZone && !dropZone.contains(e.relatedTarget)) {
+        this.designer.clearDragOverTarget();
+      }
+    },
+    onHeaderDrop(e) {
+      this.designer.clearDragOverTarget();
+      this.designer.clearDragInsertLine();
+      this.designer.clearPreviewDragTarget();
+      if (this.designer.vueInstance) {
+        this.designer.emitEvent("drag-end");
+      }
+      this.designer.handleDrop({
+        dataTransfer: e.dataTransfer,
+        target: { type: "slot", widgetId: this.widget.id, slotName: HEADER_SLOT }
+      });
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-collapse__header" };
+const _hoisted_2 = { class: "epx-collapse__header-title" };
+const _hoisted_3 = {
+  key: 1,
+  class: "epx-collapse__header-slot-tip"
+};
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = { class: "epx-page-designer-widget-preview__drop-zone" };
+const _hoisted_6 = {
+  key: 0,
+  class: "epx-page-designer-widget-preview__no-widget"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_collapse_item = resolveComponent("el-collapse-item");
+  return openBlock(), createBlock(_component_el_collapse_item, {
+    name: _ctx.widget.id
+  }, {
+    title: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        _cache[4] || (_cache[4] = createElementVNode("i", { class: "epx-collapse__header-icon el-icon-caret-right" }, null, -1)),
+        createElementVNode("div", _hoisted_2, [
+          $options.showTitleSlot ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["epx-collapse__header-slot", { "is-empty": !$options.headerSlotWidget }]),
+            onDragenter: _cache[0] || (_cache[0] = (...args) => $options.onHeaderDragEnter && $options.onHeaderDragEnter(...args)),
+            onDragover: _cache[1] || (_cache[1] = withModifiers((...args) => $options.onHeaderDragOver && $options.onHeaderDragOver(...args), ["prevent"])),
+            onDragleave: _cache[2] || (_cache[2] = (...args) => $options.onHeaderDragLeave && $options.onHeaderDragLeave(...args)),
+            onDrop: _cache[3] || (_cache[3] = withModifiers((...args) => $options.onHeaderDrop && $options.onHeaderDrop(...args), ["prevent", "stop"]))
+          }, [
+            $options.headerSlotWidget ? (openBlock(), createBlock(_component_widget_preview, mergeProps({ key: 0 }, _ctx.$forwardAttrs(_ctx.$attrs), {
+              widget: $options.headerSlotWidget,
+              "parent-widget": _ctx.widget,
+              designer: _ctx.designer
+            }), null, 16, ["widget", "parent-widget", "designer"])) : (openBlock(), createElementBlock("span", _hoisted_3, "拖拽组件到这里"))
+          ], 34)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.widget.title), 1))
+        ])
+      ])
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (childWidget) => {
+          return openBlock(), createBlock(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+            key: childWidget.id,
+            widget: childWidget,
+            "parent-widget": _ctx.widget,
+            designer: _ctx.designer
+          }), null, 16, ["widget", "parent-widget", "designer"]);
+        }), 128)),
+        _ctx.childWidgetList.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6, "拖拽组件到这里")) : createCommentVNode("", true)
+      ])
+    ]),
+    _: 1
+  }, 8, ["name"]);
+}
+const CollapseItemPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f68f46da"]]);
+export {
+  CollapseItemPreview as default
+};

package/dist/src/page-designer/previews/collapse/Preview.js

@@ -0,0 +1,35 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, mergeProps } from "vue";
+/* empty css            */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-collapse--preview",
+  mixins: [previewMixin]
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_widget_preview = resolveComponent("widget-preview");
+  const _component_el_collapse = resolveComponent("el-collapse");
+  return openBlock(), createBlock(_component_el_collapse, {
+    class: "epx-collapse",
+    modelValue: _ctx.activeCollapse,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.activeCollapse = $event),
+    accordion: ""
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.childWidgetList, (item) => {
+        return openBlock(), createBlock(_component_widget_preview, mergeProps({ ref_for: true }, _ctx.$forwardAttrs(_ctx.$attrs), {
+          key: item.id,
+          widget: item,
+          "parent-widget": _ctx.widget,
+          designer: _ctx.designer
+        }), null, 16, ["widget", "parent-widget", "designer"]);
+      }), 128))
+    ]),
+    _: 1
+  }, 8, ["modelValue"]);
+}
+const CollapsePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-94c54443"]]);
+export {
+  CollapsePreview as default
+};

package/dist/src/page-designer/previews/dropdown/Preview.js

@@ -0,0 +1,68 @@
+import '../../../../style.css';
+import previewMixin from "../../widget-preview/Mixin.js";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, toDisplayString, createElementVNode, normalizeClass } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-dropdown--preview",
+  mixins: [previewMixin]
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+  const _component_el_dropdown = resolveComponent("el-dropdown");
+  return openBlock(), createBlock(_component_el_dropdown, null, {
+    dropdown: withCtx(() => [
+      createVNode(_component_el_dropdown_menu, null, {
+        default: withCtx(() => [
+          createVNode(_component_el_dropdown_item, null, {
+            default: withCtx(() => [..._cache[0] || (_cache[0] = [
+              createTextVNode("黄金糕", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(_component_el_dropdown_item, null, {
+            default: withCtx(() => [..._cache[1] || (_cache[1] = [
+              createTextVNode("狮子头", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(_component_el_dropdown_item, null, {
+            default: withCtx(() => [..._cache[2] || (_cache[2] = [
+              createTextVNode("螺蛳粉", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(_component_el_dropdown_item, { divided: "" }, {
+            default: withCtx(() => [..._cache[3] || (_cache[3] = [
+              createTextVNode("蚵仔煎", -1)
+            ])]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    default: withCtx(() => [
+      createVNode(_component_el_button, {
+        class: "epx-dropdown__trigger",
+        type: "primary",
+        link: _ctx.$configs.type !== "button",
+        size: _ctx.$configs.size
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.$configs.name), 1),
+          createElementVNode("i", {
+            class: normalizeClass(`el-icon-arrow-down ${_ctx.$configs.icon || "el-icon--right"}`)
+          }, null, 2)
+        ]),
+        _: 1
+      }, 8, ["link", "size"])
+    ]),
+    _: 1
+  });
+}
+const DropdownPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DropdownPreview as default
+};