@kp-ui/lowcode 1.0.107 → 2.13.0

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

@@ -1,574 +0,0 @@
-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
-};
-//# sourceMappingURL=designer.js.map