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

package/dist/src/page-designer/widget-tree/Item.js

@@ -0,0 +1,580 @@
+import '../../../style.css';
+import { getWidgetChildren, getWidgetSlots } from "../designer.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, normalizeStyle, createCommentVNode, toDisplayString, createBlock, withCtx, createVNode, Fragment, renderList } from "vue";
+/* empty css         */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-widget-tree-item",
+  props: {
+    designer: {
+      type: Object
+    },
+    widget: {
+      type: Object
+    },
+    parentWidget: {
+      type: Object
+    },
+    // 组件放在父组件的哪个插槽里（不在插槽里则为空）
+    slotName: {
+      type: String,
+      default: ""
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    // 当前正在拖拽的组件 id（来自 Tree）
+    draggingId: {
+      type: String,
+      default: null
+    },
+    // 当前占位信息（来自 Tree）
+    placeholder: {
+      type: Object,
+      default: () => null
+    },
+    // hover 提示（来自 Tree）
+    dropHint: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      fold: false,
+      isDragOver: false,
+      // 长按触发拖拽
+      pressTimer: null,
+      pressStart: null,
+      pressTriggered: false,
+      // 上一次的 position，用于防抖动
+      lastEmitPosition: null
+    };
+  },
+  computed: {
+    selected() {
+      return this.widget.id === this.designer.selectedId;
+    },
+    widgetInfo() {
+      return this.designer.getWidgetByType(this.widget.contentType) || {};
+    },
+    slotEntries() {
+      return getWidgetSlots(this.widget);
+    },
+    widgetList: {
+      get() {
+        return this.widget.items || [];
+      },
+      set(v) {
+        this.designer.updateWidget(this.widget.id, { items: v });
+      }
+    }
+  },
+  methods: {
+    clearPressTimer() {
+      if (this.pressTimer) {
+        clearTimeout(this.pressTimer);
+        this.pressTimer = null;
+      }
+      this.pressStart = null;
+      this.pressTriggered = false;
+    },
+    onPlaceholderDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      const isDraggingWidget = this.designer.dragState.dragSource === "preview";
+      e.dataTransfer.dropEffect = isDraggingWidget ? "move" : "copy";
+    },
+    onPlaceholderDragEnter(e) {
+      e.stopPropagation();
+    },
+    onPlaceholderDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!this.isDraggingFromLibrary(e)) {
+        return;
+      }
+      this.$emit("library-drop", {
+        widget: this.widget,
+        parentWidget: this.parentWidget,
+        index: this.index,
+        isContainer: this.widgetInfo.CONTAINER === "1",
+        event: e
+      });
+    },
+    isDraggingFromLibrary(e) {
+      return e && e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes("text/plain");
+    },
+    onHeaderDragEnter(e) {
+      if (this.slotName) return;
+      if (!this.isDraggingFromLibrary(e)) {
+        return;
+      }
+      e.stopPropagation();
+      this.isDragOver = true;
+    },
+    onHeaderDragOver(e) {
+      if (this.slotName) return;
+      if (!this.isDraggingFromLibrary(e)) {
+        return;
+      }
+      e.preventDefault();
+      if (this.designer && this.designer.updateDragGhostPosition) {
+        this.designer.updateDragGhostPosition(e.clientX, e.clientY);
+      }
+      e.stopPropagation();
+      const isDraggingWidget = this.designer.dragState.dragSource === "preview";
+      e.dataTransfer.dropEffect = isDraggingWidget ? "move" : "copy";
+      const rect = e.currentTarget.getBoundingClientRect();
+      const offsetY = e.clientY - rect.top;
+      const ratio = rect.height > 0 ? offsetY / rect.height : 0.5;
+      const isContainer = this.widgetInfo.CONTAINER === "1";
+      let position;
+      if (isContainer) {
+        if (ratio <= 0.3) {
+          position = "before";
+        } else if (ratio >= 0.7) {
+          position = "after";
+        } else {
+          position = "inside";
+        }
+      } else {
+        position = ratio <= 0.5 ? "before" : "after";
+      }
+      if (this.lastEmitPosition !== position) {
+        this.lastEmitPosition = position;
+        this.$emit("library-hover-for-drop", {
+          widget: this.widget,
+          parentWidget: this.parentWidget,
+          index: this.index,
+          isContainer,
+          position,
+          event: e,
+          // 传递元素位置信息用于计算占位符线
+          rect: {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height
+          }
+        });
+      }
+    },
+    onHeaderDragLeave() {
+      this.isDragOver = false;
+      this.lastEmitPosition = null;
+    },
+    onHeaderDrop(e) {
+      if (this.slotName) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (!this.isDraggingFromLibrary(e)) {
+        this.isDragOver = false;
+        return;
+      }
+      this.isDragOver = false;
+      this.$emit("library-drop", {
+        widget: this.widget,
+        parentWidget: this.parentWidget,
+        index: this.index,
+        isContainer: this.widgetInfo.CONTAINER === "1",
+        event: e
+      });
+    },
+    // 以下为大纲树内部拖拽排序相关
+    onHeaderMouseDown(e) {
+      if (this.slotName) return;
+      this.clearPressTimer();
+      this.pressStart = { x: e.clientX, y: e.clientY, time: Date.now() };
+      this.pressTimer = setTimeout(() => {
+        if (this.draggingId) return;
+        this.pressTriggered = true;
+        this.$emit("drag-start", {
+          widget: this.widget,
+          parentWidget: this.parentWidget
+        });
+      }, 220);
+    },
+    onHeaderMouseUp(e) {
+      if (this.draggingId) {
+        this.$emit("drag-end", { event: e });
+      }
+      if (!this.pressTriggered) {
+        this.clearPressTimer();
+      }
+    },
+    onHeaderMouseLeave() {
+      if (!this.draggingId) this.clearPressTimer();
+    },
+    // 判断当前容器在某个 index 位置是否显示占位虚线框
+    showChildPlaceholderAt(index) {
+      if (!this.placeholder) return false;
+      if (this.placeholder.parentId !== this.widget.id) return false;
+      return this.placeholder.index === index;
+    },
+    onHeaderMouseMove(e) {
+      if (this.slotName) return;
+      if (!this.draggingId && this.pressStart && this.pressTimer) {
+        const dx = e.clientX - this.pressStart.x;
+        const dy = e.clientY - this.pressStart.y;
+        if (Math.abs(dx) + Math.abs(dy) >= 6) {
+          this.pressTriggered = true;
+          this.clearPressTimer();
+          this.$emit("drag-start", {
+            widget: this.widget,
+            parentWidget: this.parentWidget
+          });
+          return;
+        }
+      }
+      if (!this.draggingId) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const offsetY = e.clientY - rect.top;
+      const ratio = rect.height > 0 ? offsetY / rect.height : 0.5;
+      const isContainer = this.widgetInfo.CONTAINER === "1";
+      let position;
+      if (isContainer) {
+        if (ratio <= 0.2) {
+          position = "before";
+        } else if (ratio >= 0.8) {
+          position = "after";
+        } else {
+          position = "inside";
+        }
+      } else {
+        if (ratio <= 0.3) {
+          position = "before";
+        } else if (ratio >= 0.7) {
+          position = "after";
+        } else {
+          return;
+        }
+      }
+      this.$emit("hover-for-drop", {
+        widget: this.widget,
+        parentWidget: this.parentWidget,
+        index: this.index,
+        isContainer,
+        position
+      });
+    },
+    copyComponent() {
+      this.designer.copyWidget(this.widget, this.parentWidget);
+    },
+    deleteComponent() {
+      this.designer.deleteWidget(this.widget, this.parentWidget);
+    },
+    addComponent() {
+      this.$emit("add", this.widget);
+    },
+    saveAsTemplate() {
+      const eventNameMap = {};
+      const widgetIds = [this.widget.id];
+      const events = [];
+      const widgetConfigs = {};
+      const js = this.designer.pageConfig.JS;
+      let widgetJs = "";
+      const getAllWidgetIds = (widgets) => {
+        if (!widgets) return;
+        for (const item of widgets) {
+          widgetIds.push(item.id);
+          getAllWidgetIds(getWidgetChildren(item));
+        }
+      };
+      getAllWidgetIds(getWidgetChildren(this.widget));
+      for (const widgetId of widgetIds) {
+        if (this.designer.widgetConfig[widgetId]) {
+          const config = this.$_.cloneDeep(this.designer.widgetConfig[widgetId]);
+          widgetConfigs[widgetId] = config;
+          if (config.componentEvents) {
+            for (const key in config.componentEvents) {
+              const arr = config.componentEvents[key];
+              events.push(...arr);
+              config.componentEvents[key] = arr.map((item) => {
+                const newEventName = `${item}_${this.$util.genId()}`;
+                eventNameMap[item] = newEventName;
+                return newEventName;
+              });
+            }
+          }
+          if (config.fields) {
+            for (const field of config.fields) {
+              if (field.events) {
+                for (const key in field.events) {
+                  const arr = field.events[key];
+                  events.push(...arr);
+                  field.events[key] = arr.map((item) => {
+                    const newEventName = `${item}_${this.$util.genId()}`;
+                    eventNameMap[item] = newEventName;
+                    return newEventName;
+                  });
+                }
+              }
+            }
+          }
+        }
+        if (js) {
+          const result = js.split(/export\s+function\s+/);
+          result.forEach((item) => {
+            const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, "");
+            if (funtionStr.replace(/[\n\s]+/g, "").length > 0) {
+              const funtionName = funtionStr.split(/\s+\(/)[0];
+              if (events.includes(funtionName)) {
+                widgetJs += "export function " + funtionStr.replace(/^\w+/, eventNameMap[funtionName]);
+              }
+            }
+          });
+        }
+      }
+      this.$emit("add-template", {
+        version: this.designer.version,
+        items: [this.widget],
+        itemConfigs: widgetConfigs,
+        JS: widgetJs
+      });
+    }
+  }
+};
+const _hoisted_1 = ["data-tree-widget-id"];
+const _hoisted_2 = { class: "epx-page-designer-widget-tree-item__container" };
+const _hoisted_3 = { class: "epx-page-designer-widget-tree-item__name" };
+const _hoisted_4 = ["title"];
+const _hoisted_5 = {
+  key: 1,
+  class: "epx-page-designer-widget-tree-item__slot-tag"
+};
+const _hoisted_6 = { class: "epx-page-designer-widget-tree-item__child" };
+const _hoisted_7 = {
+  key: 0,
+  class: "epx-page-designer-widget-tree__list epx-page-designer-widget-tree__list--drag-disable"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "epx-page-designer-widget-tree__list"
+};
+const _hoisted_9 = {
+  key: 2,
+  class: "epx-page-designer-widget-tree__list epx-page-designer-widget-tree__list--drag-disable"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  const _component_epx_page_designer_widget_tree_item = resolveComponent("epx-page-designer-widget-tree-item");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass([
+      "epx-page-designer-widget-tree-item",
+      { "is-active": $options.selected },
+      { "is-fold": $data.fold },
+      { "is-drop-over": $data.isDragOver },
+      // 大纲内部拖拽时的“拖拽中”样式
+      { "is-dragging": $props.draggingId === $props.widget.id },
+      // 不可放置目标标红
+      { "is-drop-invalid": $props.dropHint && $props.dropHint.invalid && $props.dropHint.widgetId === $props.widget.id }
+    ]),
+    "data-tree-widget-id": $props.widget.id
+  }, [
+    createElementVNode("div", _hoisted_2, [
+      createElementVNode("p", {
+        class: "epx-page-designer-widget-tree-item__header",
+        style: normalizeStyle({ paddingLeft: ($props.level + 1) * 16 + 8 + "px" }),
+        onClick: _cache[6] || (_cache[6] = ($event) => $props.designer.setSelected($props.widget)),
+        onDragenter: _cache[7] || (_cache[7] = (...args) => $options.onHeaderDragEnter && $options.onHeaderDragEnter(...args)),
+        onDragover: _cache[8] || (_cache[8] = (...args) => $options.onHeaderDragOver && $options.onHeaderDragOver(...args)),
+        onDragleave: _cache[9] || (_cache[9] = (...args) => $options.onHeaderDragLeave && $options.onHeaderDragLeave(...args)),
+        onDrop: _cache[10] || (_cache[10] = (...args) => $options.onHeaderDrop && $options.onHeaderDrop(...args)),
+        onMousedown: _cache[11] || (_cache[11] = withModifiers((...args) => $options.onHeaderMouseDown && $options.onHeaderMouseDown(...args), ["left", "stop", "prevent"])),
+        onMouseup: _cache[12] || (_cache[12] = withModifiers((...args) => $options.onHeaderMouseUp && $options.onHeaderMouseUp(...args), ["left", "stop"])),
+        onMouseleave: _cache[13] || (_cache[13] = (...args) => $options.onHeaderMouseLeave && $options.onHeaderMouseLeave(...args)),
+        onMousemove: _cache[14] || (_cache[14] = (...args) => $options.onHeaderMouseMove && $options.onHeaderMouseMove(...args))
+      }, [
+        createElementVNode("span", _hoisted_3, [
+          $options.widgetInfo.CONTAINER === "1" || $options.slotEntries.length > 0 || $props.widget.items && $props.widget.items.length > 0 && $props.widget.contentType !== "dashboard-widget" ? (openBlock(), createElementBlock("i", {
+            key: 0,
+            style: normalizeStyle({ left: $props.level * 16 + 8 + "px" }),
+            class: normalizeClass(["epx-page-designer-widget-tree-item__fold-icon", "el-icon-arrow-down"]),
+            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => $data.fold = !$data.fold, ["stop"]))
+          }, null, 4)) : createCommentVNode("", true),
+          createElementVNode("i", {
+            class: normalizeClass(["epx-page-designer-widget-tree-item__icon", "fa", $options.widgetInfo.ICON || "el-icon-box"])
+          }, null, 2),
+          createElementVNode("span", {
+            title: $props.widget.title
+          }, toDisplayString($props.widget.title), 9, _hoisted_4),
+          $props.slotName ? (openBlock(), createElementBlock("span", _hoisted_5, "插槽")) : createCommentVNode("", true),
+          $options.widgetInfo.STATUS === "deprecated" ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 2,
+            placement: "top",
+            content: $options.widgetInfo.REMARK
+          }, {
+            default: withCtx(() => [..._cache[42] || (_cache[42] = [
+              createElementVNode("i", { class: "epx-page-designer-widget-tree-item__warning-icon el-icon-warning-outline" }, null, -1)
+            ])]),
+            _: 1
+          }, 8, ["content"])) : $options.widgetInfo.STATUS === "abandon" ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 3,
+            placement: "top",
+            content: $options.widgetInfo.REMARK || "此组件已经废除，请替换新的组件使用"
+          }, {
+            default: withCtx(() => [..._cache[43] || (_cache[43] = [
+              createElementVNode("span", { class: "epx-page-designer-widget-tree-item__abandon-icon" }, "废", -1)
+            ])]),
+            _: 1
+          }, 8, ["content"])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("span", {
+          class: "epx-page-designer-widget-tree-item__operate",
+          onClick: _cache[5] || (_cache[5] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          $options.widgetInfo.CONTAINER === "1" ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 0,
+            placement: "top",
+            content: "添加"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("i", {
+                class: "el-icon-plus",
+                onClick: _cache[1] || (_cache[1] = withModifiers((...args) => $options.addComponent && $options.addComponent(...args), ["stop"]))
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          !$props.slotName ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 1,
+            placement: "top",
+            content: "复制"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("i", {
+                class: "el-icon-copy-document",
+                onClick: _cache[2] || (_cache[2] = (...args) => $options.copyComponent && $options.copyComponent(...args))
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          $props.designer.mode !== "template" ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 2,
+            placement: "top",
+            content: "保存为模板"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("i", {
+                class: "epx-icon-save",
+                onClick: _cache[3] || (_cache[3] = (...args) => $options.saveAsTemplate && $options.saveAsTemplate(...args))
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createVNode(_component_el_tooltip, {
+            placement: "top",
+            content: "删除"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("i", {
+                class: "el-icon-close",
+                onClick: _cache[4] || (_cache[4] = (...args) => $options.deleteComponent && $options.deleteComponent(...args))
+              })
+            ]),
+            _: 1
+          })
+        ])
+      ], 36),
+      createElementVNode("div", _hoisted_6, [
+        $options.slotEntries.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_7, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.slotEntries, (slot) => {
+            return openBlock(), createBlock(_component_epx_page_designer_widget_tree_item, {
+              key: slot.widget.id,
+              designer: $props.designer,
+              widget: slot.widget,
+              "slot-name": slot.name,
+              level: $props.level + 1,
+              "parent-widget": $props.widget,
+              "dragging-id": $props.draggingId,
+              placeholder: $props.placeholder,
+              "drop-hint": $props.dropHint,
+              onAdd: _cache[15] || (_cache[15] = (v) => _ctx.$emit("add", v)),
+              onAddTemplate: _cache[16] || (_cache[16] = (v) => _ctx.$emit("add-template", v)),
+              onDragStart: _cache[17] || (_cache[17] = (v) => _ctx.$emit("drag-start", v)),
+              onHoverForDrop: _cache[18] || (_cache[18] = (v) => _ctx.$emit("hover-for-drop", v)),
+              onDragEnd: _cache[19] || (_cache[19] = (v) => _ctx.$emit("drag-end", v)),
+              onLibraryHoverForDrop: _cache[20] || (_cache[20] = (v) => _ctx.$emit("library-hover-for-drop", v)),
+              onLibraryDrop: _cache[21] || (_cache[21] = (v) => _ctx.$emit("library-drop", v))
+            }, null, 8, ["designer", "widget", "slot-name", "level", "parent-widget", "dragging-id", "placeholder", "drop-hint"]);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        $options.widgetInfo.CONTAINER === "1" ? (openBlock(), createElementBlock("ul", _hoisted_8, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($props.widget.items || [], (child, idx) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: child.id
+            }, [
+              $options.showChildPlaceholderAt(idx) ? (openBlock(), createElementBlock("li", {
+                key: 0,
+                class: "epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder",
+                onDragover: _cache[22] || (_cache[22] = withModifiers((...args) => $options.onPlaceholderDragOver && $options.onPlaceholderDragOver(...args), ["prevent"])),
+                onDragenter: _cache[23] || (_cache[23] = (...args) => $options.onPlaceholderDragEnter && $options.onPlaceholderDragEnter(...args)),
+                onDrop: _cache[24] || (_cache[24] = (...args) => $options.onPlaceholderDrop && $options.onPlaceholderDrop(...args))
+              }, [..._cache[44] || (_cache[44] = [
+                createElementVNode("div", { class: "epx-page-designer-widget-tree-item__placeholder-box" }, null, -1)
+              ])], 32)) : createCommentVNode("", true),
+              createVNode(_component_epx_page_designer_widget_tree_item, {
+                designer: $props.designer,
+                widget: child,
+                level: $props.level + 1,
+                "parent-widget": $props.widget,
+                index: idx,
+                "dragging-id": $props.draggingId,
+                placeholder: $props.placeholder,
+                "drop-hint": $props.dropHint,
+                onAdd: _cache[25] || (_cache[25] = (v) => _ctx.$emit("add", v)),
+                onAddTemplate: _cache[26] || (_cache[26] = (v) => _ctx.$emit("add-template", v)),
+                onDragStart: _cache[27] || (_cache[27] = (v) => _ctx.$emit("drag-start", v)),
+                onHoverForDrop: _cache[28] || (_cache[28] = (v) => _ctx.$emit("hover-for-drop", v)),
+                onDragEnd: _cache[29] || (_cache[29] = (v) => _ctx.$emit("drag-end", v)),
+                onLibraryHoverForDrop: _cache[30] || (_cache[30] = (v) => _ctx.$emit("library-hover-for-drop", v)),
+                onLibraryDrop: _cache[31] || (_cache[31] = (v) => _ctx.$emit("library-drop", v))
+              }, null, 8, ["designer", "widget", "level", "parent-widget", "index", "dragging-id", "placeholder", "drop-hint"])
+            ], 64);
+          }), 128)),
+          $options.showChildPlaceholderAt(($props.widget.items || []).length) ? (openBlock(), createElementBlock("li", {
+            key: `placeholder-${$props.widget.id}-end`,
+            class: "epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder",
+            onDragover: _cache[32] || (_cache[32] = withModifiers((...args) => $options.onPlaceholderDragOver && $options.onPlaceholderDragOver(...args), ["prevent"])),
+            onDragenter: _cache[33] || (_cache[33] = (...args) => $options.onPlaceholderDragEnter && $options.onPlaceholderDragEnter(...args)),
+            onDrop: _cache[34] || (_cache[34] = (...args) => $options.onPlaceholderDrop && $options.onPlaceholderDrop(...args))
+          }, [..._cache[45] || (_cache[45] = [
+            createElementVNode("div", { class: "epx-page-designer-widget-tree-item__placeholder-box" }, null, -1)
+          ])], 32)) : createCommentVNode("", true)
+        ])) : $props.widget.items && $props.widget.items.length > 0 && $props.widget.contentType !== "dashboard-widget" ? (openBlock(), createElementBlock("ul", _hoisted_9, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($props.widget.items, (child, idx) => {
+            return openBlock(), createBlock(_component_epx_page_designer_widget_tree_item, {
+              key: child.id,
+              designer: $props.designer,
+              widget: child,
+              level: $props.level + 1,
+              "parent-widget": $props.widget,
+              index: idx,
+              "dragging-id": $props.draggingId,
+              placeholder: $props.placeholder,
+              "drop-hint": $props.dropHint,
+              onAdd: _cache[35] || (_cache[35] = (v) => _ctx.$emit("add", v)),
+              onAddTemplate: _cache[36] || (_cache[36] = (v) => _ctx.$emit("add-template", v)),
+              onDragStart: _cache[37] || (_cache[37] = (v) => _ctx.$emit("drag-start", v)),
+              onHoverForDrop: _cache[38] || (_cache[38] = (v) => _ctx.$emit("hover-for-drop", v)),
+              onDragEnd: _cache[39] || (_cache[39] = (v) => _ctx.$emit("drag-end", v)),
+              onLibraryHoverForDrop: _cache[40] || (_cache[40] = (v) => _ctx.$emit("library-hover-for-drop", v)),
+              onLibraryDrop: _cache[41] || (_cache[41] = (v) => _ctx.$emit("library-drop", v))
+            }, null, 8, ["designer", "widget", "level", "parent-widget", "index", "dragging-id", "placeholder", "drop-hint"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ])
+    ])
+  ], 10, _hoisted_1);
+}
+const WidgetItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  WidgetItem as default
+};