@kp-ui/lowcode 2.13.2 → 2.14.0-alpha.1

package/src/components/form-designer/designer.js

@@ -0,0 +1,573 @@
+import { deepClone as g, getDefaultFormConfig as F, generateId as p, overwriteObj as u } from "../../utils/util.js";
+import { containers as w, basicFields as y, advancedFields as b, customFields as L } from "./widget-panel/widgetsConfig.js";
+import D from "../../utils/event-bus.js";
+function E(T) {
+  const m = g(F());
+  return {
+    widgetList: [],
+    formConfig: { cssCode: "" },
+    selectedId: null,
+    selectedWidget: null,
+    selectedWidgetName: null,
+    //选中组件名称（唯一）
+    vueInstance: T,
+    formWidget: null,
+    //表单设计容器
+    cssClassList: [],
+    //自定义样式列表
+    historyData: {
+      index: -1,
+      //index: 0,
+      maxStep: 20,
+      steps: []
+    },
+    initDesigner(e) {
+      this.widgetList = [], this.formConfig = g(m), e || this.initHistoryData();
+    },
+    clearDesigner(e) {
+      const t = this.widgetList.length === 0;
+      this.widgetList = [], this.selectedId = null, this.selectedWidgetName = null, this.selectedWidget = {}, u(this.formConfig, m), e || (t ? this.saveCurrentHistoryStep() : this.emitHistoryChange());
+    },
+    loadPresetCssCode(e) {
+      this.formConfig.cssCode === "" && e && (this.formConfig.cssCode = e);
+    },
+    getLayoutType() {
+      return this.formConfig.layoutType || "PC";
+    },
+    changeLayoutType(e) {
+      this.formConfig.layoutType = e;
+    },
+    getImportTemplate() {
+      return {
+        widgetList: [],
+        //formConfig: deepClone(this.formConfig)
+        formConfig: g(m)
+      };
+    },
+    loadFormJson(e) {
+      let t = !1;
+      return e && e.widgetList && (this.widgetList = e.widgetList, t = !0), e && e.formConfig && (u(
+        this.formConfig,
+        e.formConfig
+      ), t = !0), t && this.emitEvent("form-json-imported", []), t;
+    },
+    setSelected(e) {
+      if (!e) {
+        this.clearSelected();
+        return;
+      }
+      this.selectedWidget = e, e.id && (this.selectedId = e.id, this.selectedWidgetName = e.options.name);
+    },
+    updateSelectedWidgetNameAndLabel(e, t, s) {
+      this.selectedWidgetName = t, s && Object.keys(e.options).indexOf("label") > -1 && (e.options.label = s);
+    },
+    clearSelected() {
+      this.selectedId = null, this.selectedWidgetName = null, this.selectedWidget = {};
+    },
+    checkWidgetMove(e) {
+      if (e.draggedContext && e.draggedContext.element) {
+        const t = e.draggedContext.element.category, s = e.draggedContext.element.type + "";
+        if (e.to && (e.to.className === "sub-form-table" && t === "container" || e.to.className === "grid-sub-form" && s !== "grid" || e.to.className === "vf-dialog-drop-zone" && (s === "vf-dialog" || s === "vf-drawer") || e.to.className === "vf-drawer-drop-zone" && (s === "vf-dialog" || s === "vf-drawer") || e.to.className !== "form-widget-canvas" && (s === "vf-dialog" || s === "vf-drawer")))
+          return !1;
+      }
+      return !0;
+    },
+    checkFieldMove(e) {
+      if (e.draggedContext && e.draggedContext.element) {
+        e.draggedContext.element.category;
+        const t = e.draggedContext.element.type + "";
+        if (e.to && ((e.to.className === "sub-form-table" || e.to.className === "grid-sub-form") && t === "slot" || e.to.className === "grid-sub-form" && t !== "grid"))
+          return !1;
+      }
+      return !0;
+    },
+    /**
+     * 追加表格新行
+     * @param widget
+     */
+    appendTableRow(e) {
+      const t = e.rows.length, s = g(e.rows[e.rows.length - 1]);
+      s.id = "table-row-" + p(), s.merged = !1, s.cols.forEach((i) => {
+        i.id = "table-cell-" + p(), i.options.name = i.id, i.merged = !1, i.options.colspan = 1, i.options.rowspan = 1, i.widgetList.length = 0;
+      }), e.rows.splice(t, 0, s), this.emitHistoryChange();
+    },
+    /**
+     * 追加表格新列
+     * @param widget
+     */
+    appendTableCol(e) {
+      const t = e.rows[0].cols.length;
+      e.rows.forEach((s) => {
+        const i = g(this.getContainerByType("table-cell"));
+        i.id = "table-cell-" + p(), i.options.name = i.id, i.merged = !1, i.options.colspan = 1, i.options.rowspan = 1, i.widgetList.length = 0, s.cols.splice(t, 0, i);
+      }), this.emitHistoryChange();
+    },
+    insertTableRow(e, t, s, i, l) {
+      let o = l ? t : t + 1;
+      if (!l) {
+        let h = o, r = !1;
+        for (; h < e.rows.length; )
+          if (e.rows[h].cols[i].merged)
+            h++;
+          else {
+            o = h, r = !0;
+            break;
+          }
+        r || (o = e.rows.length);
+      }
+      const n = g(e.rows[s]);
+      n.id = "table-row-" + p(), n.merged = !1, n.cols.forEach((h) => {
+        h.id = "table-cell-" + p(), h.options.name = h.id, h.merged = !1, h.options.colspan = 1, h.options.rowspan = 1, h.widgetList.length = 0;
+      }), e.rows.splice(o, 0, n);
+      let a = 0;
+      for (; o < e.rows.length - 1 && a < e.rows[0].cols.length; ) {
+        const h = e.rows[o + 1].cols[a];
+        if (h.merged) {
+          const f = e.rows;
+          let d = {}, C = null;
+          for (let c = o; c >= 0; c--)
+            if (!f[c].cols[a].merged && f[c].cols[a].options.rowspan > 1) {
+              C = c, d = f[c].cols[a];
+              break;
+            }
+          if (d.options) {
+            const c = d.options.rowspan + 1;
+            this.setPropsOfMergedRows(
+              e.rows,
+              C,
+              a,
+              d.options.colspan,
+              c
+            ), a += d.options.colspan;
+          } else
+            a += 1;
+        } else
+          a += h.options.colspan || 1;
+      }
+      this.emitHistoryChange();
+    },
+    insertTableCol(e, t, s, i) {
+      let l = i ? t : t + 1;
+      if (!i) {
+        let n = l, a = !1;
+        for (; n < e.rows[s].cols.length; ) {
+          if (e.rows[s].cols[n].merged)
+            n++;
+          else {
+            l = n, a = !0;
+            break;
+          }
+          a || (l = e.rows[s].cols.length);
+        }
+      }
+      e.rows.forEach((n) => {
+        const a = g(this.getContainerByType("table-cell"));
+        a.id = "table-cell-" + p(), a.options.name = a.id, a.merged = !1, a.options.colspan = 1, a.options.rowspan = 1, a.widgetList.length = 0, n.cols.splice(l, 0, a);
+      });
+      let o = 0;
+      for (; l < e.rows[0].cols.length - 1 && o < e.rows.length; ) {
+        const n = e.rows[o].cols[l + 1];
+        if (n.merged) {
+          const h = e.rows[o].cols;
+          let r = {}, f = null;
+          for (let d = l; d >= 0; d--)
+            if (!h[d].merged && h[d].options.colspan > 1) {
+              f = d, r = h[d];
+              break;
+            }
+          if (r.options) {
+            const d = r.options.colspan + 1;
+            this.setPropsOfMergedCols(
+              e.rows,
+              o,
+              f,
+              d,
+              r.options.rowspan
+            ), o += r.options.rowspan;
+          } else
+            o += 1;
+        } else
+          o += n.options.rowspan || 1;
+      }
+      this.emitHistoryChange();
+    },
+    setPropsOfMergedCols(e, t, s, i, l) {
+      for (let o = t; o < t + l; o++)
+        for (let n = s; n < s + i; n++) {
+          if (o === t && n === s) {
+            e[o].cols[n].options.colspan = i;
+            continue;
+          }
+          e[o].cols[n].merged = !0, e[o].cols[n].options.colspan = i, e[o].cols[n].widgetList = [];
+        }
+    },
+    setPropsOfMergedRows(e, t, s, i, l) {
+      for (let o = t; o < t + l; o++)
+        for (let n = s; n < s + i; n++) {
+          if (o === t && n === s) {
+            e[o].cols[n].options.rowspan = l;
+            continue;
+          }
+          e[o].cols[n].merged = !0, e[o].cols[n].options.rowspan = l, e[o].cols[n].widgetList = [];
+        }
+    },
+    setPropsOfSplitCol(e, t, s, i, l) {
+      for (let o = t; o < t + l; o++)
+        for (let n = s; n < s + i; n++)
+          e[o].cols[n].merged = !1, e[o].cols[n].options.rowspan = 1, e[o].cols[n].options.colspan = 1;
+    },
+    setPropsOfSplitRow(e, t, s, i, l) {
+      for (let o = t; o < t + l; o++)
+        for (let n = s; n < s + i; n++)
+          e[o].cols[n].merged = !1, e[o].cols[n].options.rowspan = 1, e[o].cols[n].options.colspan = 1;
+    },
+    mergeTableCol(e, t, s, i, l, o) {
+      const n = l ? i : i + t[i].options.colspan;
+      let a = l ? i - 1 : i;
+      if (l) {
+        let r = a;
+        for (; r >= 0; )
+          if (e[s].cols[r].merged)
+            r--;
+          else {
+            a = r;
+            break;
+          }
+      }
+      t[n].widgetList && t[n].widgetList.length > 0 && (!t[a].widgetList || t[a].widgetList.length === 0) && (t[a].widgetList = g(
+        t[n].widgetList
+      ));
+      const h = t[n].options.colspan * 1 + t[a].options.colspan * 1;
+      this.setPropsOfMergedCols(
+        e,
+        s,
+        a,
+        h,
+        o.options.rowspan
+      ), this.emitHistoryChange();
+    },
+    mergeTableWholeRow(e, t, s, i) {
+      const l = e[s].cols[0].options.rowspan;
+      let o = !1;
+      for (let a = 1; a < e[s].cols.length; a++)
+        if (e[s].cols[a].options.rowspan !== l) {
+          o = !0;
+          break;
+        }
+      if (o) {
+        this.vueInstance.$message.info(
+          this.vueInstance.i18nt("designer.hint.rowspanNotConsistentForMergeEntireRow")
+        );
+        return;
+      }
+      const n = t.filter((a) => !a.merged && !!a.widgetList && a.widgetList.length > 0);
+      n && n.length > 0 && n[0].id !== t[0].id && (!t[0].widgetList || t[0].widgetList.length <= 0) && (t[0].widgetList = g(n[0].widgetList)), this.setPropsOfMergedCols(
+        e,
+        s,
+        0,
+        t.length,
+        t[i].options.rowspan
+      ), this.emitHistoryChange();
+    },
+    mergeTableRow(e, t, s, i, l) {
+      const o = i ? t : t + l.options.rowspan;
+      let n = i ? t - 1 : t;
+      if (i) {
+        let h = n;
+        for (; h >= 0; )
+          if (e[h].cols[s].merged)
+            h--;
+          else {
+            n = h;
+            break;
+          }
+      }
+      e[o].cols[s].widgetList && e[o].cols[s].widgetList.length > 0 && (!e[n].cols[s].widgetList || e[n].cols[s].widgetList.length === 0) && (e[n].cols[s].widgetList = g(
+        e[o].cols[s].widgetList
+      ));
+      const a = e[o].cols[s].options.rowspan * 1 + e[n].cols[s].options.rowspan * 1;
+      this.setPropsOfMergedRows(
+        e,
+        n,
+        s,
+        l.options.colspan,
+        a
+      ), this.emitHistoryChange();
+    },
+    mergeTableWholeCol(e, t, s, i) {
+      const l = e[0].cols[i].options.colspan;
+      let o = !1;
+      for (let h = 1; h < e.length; h++)
+        if (e[h].cols[i].options.colspan !== l) {
+          o = !0;
+          break;
+        }
+      if (o) {
+        this.vueInstance.$message.info(
+          this.vueInstance.i18nt("designer.hint.colspanNotConsistentForMergeEntireColumn")
+        );
+        return;
+      }
+      const n = [];
+      e.forEach((h) => {
+        const r = h.cols[i];
+        !r.merged && r.widgetList && r.widgetList.length > 0 && n.push(r);
+      });
+      const a = e[0].cols[i];
+      n && n.length > 0 && n[0].id !== a.id && (!a.widgetList || a.widgetList.length <= 0) && (a.widgetList = g(n[0].widgetList)), this.setPropsOfMergedRows(
+        e,
+        0,
+        i,
+        a.options.colspan,
+        e.length
+      ), this.emitHistoryChange();
+    },
+    undoMergeTableCol(e, t, s, i, l) {
+      this.setPropsOfSplitCol(e, t, s, i, l), this.emitHistoryChange();
+    },
+    undoMergeTableRow(e, t, s, i, l) {
+      this.setPropsOfSplitRow(e, t, s, i, l), this.emitHistoryChange();
+    },
+    deleteTableWholeCol(e, t) {
+      let s = !0;
+      if (e.forEach((o) => {
+        o.cols[0].options.colspan !== e[0].cols.length && (s = !1);
+      }), s) {
+        this.vueInstance.$message.info(
+          this.vueInstance.i18nt("designer.hint.lastColCannotBeDeleted")
+        );
+        return;
+      }
+      const i = e[0].cols[t].options.colspan;
+      let l = !1;
+      for (let o = 1; o < e.length; o++)
+        if (e[o].cols[t].options.colspan !== i) {
+          l = !0;
+          break;
+        }
+      if (l) {
+        this.vueInstance.$message.info(
+          this.vueInstance.i18nt(
+            "designer.hint.colspanNotConsistentForDeleteEntireColumn"
+          )
+        );
+        return;
+      }
+      e.forEach((o) => {
+        o.cols.splice(t, i);
+      }), this.emitHistoryChange();
+    },
+    deleteTableWholeRow(e, t) {
+      let s = !0;
+      if (e[0].cols.forEach((o) => {
+        o.options.rowspan !== e.length && (s = !1);
+      }), s) {
+        this.vueInstance.$message.info(
+          this.vueInstance.i18nt("designer.hint.lastRowCannotBeDeleted")
+        );
+        return;
+      }
+      const i = e[t].cols[0].options.rowspan;
+      let l = !1;
+      for (let o = 1; o < e[t].cols.length; o++)
+        if (e[t].cols[o].options.rowspan !== i) {
+          l = !0;
+          break;
+        }
+      if (l) {
+        this.vueInstance.$message.info(
+          this.vueInstance.i18nt("designer.hint.rowspanNotConsistentForDeleteEntireRow")
+        );
+        return;
+      }
+      e.splice(t, i), this.emitHistoryChange();
+    },
+    getContainerByType(e) {
+      const t = [...w, ...y, ...b, ...L];
+      let s = null;
+      return t.forEach((i) => {
+        i.category && i.type && i.type === e && (s = i);
+      }), s;
+    },
+    getFieldWidgetByType(e) {
+      const t = [...w, ...y, ...b, ...L];
+      let s = null;
+      return t.forEach((i) => {
+        !i.category && i.type && i.type === e && (s = i);
+      }), s;
+    },
+    hasConfig(e, t) {
+      let s = null;
+      return e.category ? s = this.getContainerByType(e.type) : s = this.getFieldWidgetByType(e.type), !s || !s.options ? !1 : Object.keys(s.options).indexOf(t) > -1;
+    },
+    upgradeWidgetConfig(e) {
+      let t = null;
+      e.category ? t = this.getContainerByType(e.type) : t = this.getFieldWidgetByType(e.type), !(!t || !t.options) && Object.keys(t.options).forEach((s) => {
+        e.hasOwnProperty(s) || (e.options[s] = g(t.options[s]));
+      });
+    },
+    upgradeFormConfig(e) {
+      Object.keys(this.formConfig).forEach((t) => {
+        e.hasOwnProperty(t) || (e[t] = g(this.formConfig[t]));
+      });
+    },
+    cloneGridCol(e, t) {
+      const s = g(this.getContainerByType("grid-col"));
+      s.options.span = e.options.span;
+      const i = p();
+      s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t.cols.push(s);
+    },
+    cloneContainer(e) {
+      if (e.type === "grid") {
+        const t = g(this.getContainerByType("grid"));
+        return t.id = t.type + p(), t.options.name = t.id, e.cols.forEach((s) => {
+          const i = g(this.getContainerByType("grid-col")), l = p();
+          i.id = "grid-col-" + l, i.options.name = "gridCol" + l, i.options.span = s.options.span, t.cols.push(i);
+        }), t;
+      } else if (e.type === "table") {
+        const t = g(this.getContainerByType("table"));
+        return t.id = t.type + p(), t.options.name = t.id, e.rows.forEach((s) => {
+          const i = g(s);
+          i.id = "table-row-" + p(), i.cols.forEach((l) => {
+            l.id = "table-cell-" + p(), l.options.name = l.id, l.widgetList = [];
+          }), t.rows.push(i);
+        }), t;
+      } else
+        return null;
+    },
+    moveUpWidget(e, t) {
+      if (e) {
+        if (t === 0) {
+          this.vueInstance.$message(
+            this.vueInstance.i18nt("designer.hint.moveUpFirstChildHint")
+          );
+          return;
+        }
+        const s = e[t];
+        e.splice(t, 1), e.splice(t - 1, 0, s);
+      }
+    },
+    moveDownWidget(e, t) {
+      if (e) {
+        if (t === e.length - 1) {
+          this.vueInstance.$message(
+            this.vueInstance.i18nt("designer.hint.moveDownLastChildHint")
+          );
+          return;
+        }
+        const s = e[t];
+        e.splice(t, 1), e.splice(t + 1, 0, s);
+      }
+    },
+    copyNewFieldWidget(e) {
+      const t = g(e), s = p();
+      return t.id = t.type.replace(/-/g, "") + s, t.options.name = t.id, t.options.label = t.options.label || t.type.toLowerCase(), delete t.displayName, t;
+    },
+    copyNewContainerWidget(e) {
+      const t = g(e);
+      if (t.id = t.type.replace(/-/g, "") + p(), t.options.name = t.id, t.type === "grid") {
+        let s = g(this.getContainerByType("grid-col")), i = p();
+        s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t.cols.push(s), s = g(s), i = p(), s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t.cols.push(s);
+      } else if (t.type === "table") {
+        const s = { cols: [] };
+        s.id = "table-row-" + p(), s.merged = !1;
+        const i = g(this.getContainerByType("table-cell"));
+        i.id = "table-cell-" + p(), i.options.name = i.id, i.merged = !1, i.options.colspan = 1, i.options.rowspan = 1, s.cols.push(i), t.rows.push(s);
+      } else if (t.type === "tab") {
+        const s = g(this.getContainerByType("tab-pane"));
+        s.id = "tab-pane-" + p(), s.options.name = "tab1", s.options.label = "tab 1", t.tabs.push(s);
+      }
+      return delete t.displayName, t;
+    },
+    addContainerByDbClick(e) {
+      const t = this.copyNewContainerWidget(e);
+      this.widgetList.push(t), this.setSelected(t);
+    },
+    addFieldByDbClick(e) {
+      const t = this.copyNewFieldWidget(e);
+      if (this.selectedWidget && this.selectedWidget.type === "tab") {
+        let s = this.selectedWidget.tabs[0];
+        this.selectedWidget.tabs.forEach((i) => {
+          i.options.active && (s = i);
+        }), s && s.widgetList.push(t);
+      } else this.selectedWidget && this.selectedWidget.widgetList ? this.selectedWidget.widgetList.push(t) : this.widgetList.push(t);
+      this.setSelected(t), this.emitHistoryChange();
+    },
+    deleteColOfGrid(e, t) {
+      e && e.cols && e.cols.splice(t, 1);
+    },
+    addNewColOfGrid(e) {
+      const t = e.cols, s = g(this.getContainerByType("grid-col")), i = p();
+      if (s.id = "grid-col-" + i, s.options.name = "gridCol" + i, t && t.length > 0) {
+        let l = 0;
+        t.forEach((o) => {
+          l += o.options.span;
+        }), l >= 24 ? (console.log("列栅格之和超出24"), e.cols.push(s)) : (s.options.span = 24 - l > 12 ? 12 : 24 - l, e.cols.push(s));
+      } else
+        e.cols = [s];
+    },
+    addTabPaneOfTabs(e) {
+      const t = e.tabs, s = g(this.getContainerByType("tab-pane"));
+      s.id = "tab-pane-" + p(), s.options.name = s.id, s.options.label = "tab " + (t.length + 1), t.push(s);
+    },
+    deleteTabPaneOfTabs(e, t) {
+      e.tabs.splice(t, 1);
+    },
+    emitEvent(e, t) {
+      D.$emit(e, t);
+    },
+    handleEvent(e, t) {
+      D.$on(e, (s) => t(s));
+    },
+    setCssClassList(e) {
+      this.cssClassList = e;
+    },
+    getCssClassList() {
+      return this.cssClassList;
+    },
+    registerFormWidget(e) {
+      this.formWidget = e;
+    },
+    initHistoryData() {
+      this.loadFormContentFromStorage(), this.historyData.index++, this.historyData.steps[this.historyData.index] = {
+        widgetList: g(this.widgetList),
+        formConfig: g(this.formConfig)
+      };
+    },
+    emitHistoryChange() {
+      this.historyData.index === this.historyData.maxStep - 1 ? this.historyData.steps.shift() : this.historyData.index++, this.historyData.steps[this.historyData.index] = {
+        widgetList: g(this.widgetList),
+        formConfig: g(this.formConfig)
+      }, this.saveFormContentToStorage(), this.historyData.index < this.historyData.steps.length - 1 && (this.historyData.steps = this.historyData.steps.slice(
+        0,
+        this.historyData.index + 1
+      ));
+    },
+    saveCurrentHistoryStep() {
+      this.historyData.steps[this.historyData.index] = g({
+        widgetList: this.widgetList,
+        formConfig: this.formConfig
+      }), this.saveFormContentToStorage();
+    },
+    undoHistoryStep() {
+      this.historyData.index !== 0 && this.historyData.index--, this.widgetList = g(this.historyData.steps[this.historyData.index].widgetList), this.formConfig = g(this.historyData.steps[this.historyData.index].formConfig);
+    },
+    redoHistoryStep() {
+      this.historyData.index !== this.historyData.steps.length - 1 && this.historyData.index++, this.widgetList = g(this.historyData.steps[this.historyData.index].widgetList), this.formConfig = g(this.historyData.steps[this.historyData.index].formConfig);
+    },
+    undoEnabled() {
+      return this.historyData.index > 0 && this.historyData.steps.length > 0;
+    },
+    redoEnabled() {
+      return this.historyData.index < this.historyData.steps.length - 1;
+    },
+    saveFormContentToStorage() {
+      window.localStorage.setItem("widget__list__backup", JSON.stringify(this.widgetList)), window.localStorage.setItem("form__config__backup", JSON.stringify(this.formConfig));
+    },
+    loadFormContentFromStorage() {
+    }
+  };
+}
+export {
+  E as createDesigner
+};

package/src/components/form-designer/form-widget/container-widget/container-wrapper.vue.js

@@ -0,0 +1,106 @@
+import c from "../../../../utils/i18n.js";
+import w from "./containerMixin.js";
+import u from "../../../svg-icon/index.vue.js";
+import { resolveComponent as v, createElementBlock as o, openBlock as s, normalizeClass as k, renderSlot as C, createCommentVNode as l, createElementVNode as g, withModifiers as a, createVNode as d, toDisplayString as y } from "vue";
+/* empty css                       */
+import f from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const h = {
+  name: "container-wrapper",
+  mixins: [c, w],
+  components: {
+    SvgIcon: u
+  },
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object
+  },
+  computed: {
+    customClass() {
+      return this.widget.options.customClass ? this.widget.options.customClass.join(" ") : "";
+    }
+  }
+}, b = {
+  key: 0,
+  class: "container-action"
+}, p = ["title"], W = ["title"], L = ["title"], N = ["title"], j = ["title"], I = ["title"], O = ["title"], D = {
+  key: 1,
+  class: "drag-handler"
+}, P = ["title"], S = { key: 0 };
+function V(t, i, e, _, B, m) {
+  const n = v("svg-icon");
+  return s(), o("div", {
+    class: k(["container-wrapper", [m.customClass]])
+  }, [
+    C(t.$slots, "default", {}, void 0, !0),
+    e.designer.selectedId === e.widget.id && !e.widget.internal ? (s(), o("div", b, [
+      g("i", {
+        title: t.i18nt("designer.hint.selectParentWidget"),
+        onClick: i[0] || (i[0] = a((r) => t.selectParentWidget(e.widget), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-back" })
+      ], 8, p),
+      e.parentList && e.parentList.length > 1 ? (s(), o("i", {
+        key: 0,
+        title: t.i18nt("designer.hint.moveUpWidget"),
+        onClick: i[1] || (i[1] = a((r) => t.moveUpWidget(), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-move-up" })
+      ], 8, W)) : l("", !0),
+      e.parentList && e.parentList.length > 1 ? (s(), o("i", {
+        key: 1,
+        title: t.i18nt("designer.hint.moveDownWidget"),
+        onClick: i[2] || (i[2] = a((r) => t.moveDownWidget(), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-move-down" })
+      ], 8, L)) : l("", !0),
+      e.widget.type === "table" ? (s(), o("i", {
+        key: 2,
+        title: t.i18nt("designer.hint.insertRow"),
+        onClick: i[3] || (i[3] = a((r) => t.appendTableRow(e.widget), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-insert-row" })
+      ], 8, N)) : l("", !0),
+      e.widget.type === "table" ? (s(), o("i", {
+        key: 3,
+        title: t.i18nt("designer.hint.insertColumn"),
+        onClick: i[4] || (i[4] = a((r) => t.appendTableCol(e.widget), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-insert-column" })
+      ], 8, j)) : l("", !0),
+      e.widget.type === "grid" || e.widget.type === "table" ? (s(), o("i", {
+        key: 4,
+        title: t.i18nt("designer.hint.cloneWidget"),
+        onClick: i[5] || (i[5] = a((r) => t.cloneContainer(e.widget), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-clone" })
+      ], 8, I)) : l("", !0),
+      g("i", {
+        title: t.i18nt("designer.hint.remove"),
+        onClick: i[6] || (i[6] = a((...r) => t.removeWidget && t.removeWidget(...r), ["stop"]))
+      }, [
+        d(n, { "icon-class": "el-delete" })
+      ], 8, O)
+    ])) : l("", !0),
+    e.designer.selectedId === e.widget.id && !e.widget.internal ? (s(), o("div", D, [
+      g("i", {
+        title: t.i18nt("designer.hint.dragHandler")
+      }, [
+        d(n, { "icon-class": "el-drag-move" })
+      ], 8, P),
+      g("i", null, y(e.widget.showName || t.i18n2t(
+        `designer.widgetLabel.${e.widget.type}`,
+        `extension.widgetLabel.${e.widget.type}`
+      )), 1),
+      e.widget.options.hidden === !0 ? (s(), o("i", S, [
+        d(n, { "icon-class": "el-hide" })
+      ])) : l("", !0)
+    ])) : l("", !0)
+  ], 2);
+}
+const A = /* @__PURE__ */ f(h, [["render", V], ["__scopeId", "data-v-4b4d3f4d"]]);
+export {
+  A as default
+};