@kp-ui/lowcode 1.0.20 → 1.0.21

package/es/components/form-designer/setting-panel/index.vue.js

@@ -0,0 +1,438 @@
+import R from "../../code-editor/index.vue.js";
+import j from "./property-editor/index.js";
+import U from "./form-setting.vue.js";
+import I from "./form-crud-setting.vue.js";
+import x, { propertyRegistered as z } from "./propertyRegister.js";
+import { addWindowResizeHandler as B } from "../../../utils/util.js";
+import L from "../../../utils/i18n.js";
+import q from "../../../utils/emitter.js";
+import { resolveComponent as c, createBlock as a, openBlock as o, withCtx as d, createVNode as u, createCommentVNode as g, createElementVNode as C, normalizeStyle as w, withModifiers as H, createElementBlock as m, Fragment as h, renderList as p, resolveDynamicComponent as y, createTextVNode as k, toDisplayString as F } from "vue";
+/* empty css           */
+/* empty css           */
+import G from "../../../_virtual/_plugin-vue_export-helper.js";
+const { COMMON_PROPERTIES: J, ADVANCED_PROPERTIES: Q, EVENT_PROPERTIES: X } = x, Y = {
+  name: "SettingPanel",
+  componentName: "SettingPanel",
+  mixins: [L, q],
+  components: {
+    CodeEditor: R,
+    FormSetting: U,
+    // DataSourceSetting,
+    FormCrudSetting: I,
+    ...j
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    formConfig: Object,
+    globalDsv: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  provide() {
+    return {
+      isSubFormChildWidget: () => this.subFormChildWidgetFlag,
+      getGlobalDsv: () => this.globalDsv
+      // 全局数据源变量
+    };
+  },
+  inject: ["getDesignerConfig"],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+      scrollerHeight: 0,
+      activeTab: "2",
+      widgetActiveCollapseNames: ["1", "2", "3"],
+      formActiveCollapseNames: ["1", "2"],
+      commonProps: J,
+      advProps: Q,
+      eventProps: X,
+      showWidgetEventDialogFlag: !1,
+      eventHandlerCode: "",
+      curEventName: "",
+      eventHeader: "",
+      subFormChildWidgetFlag: !1
+    };
+  },
+  computed: {
+    optionModel: {
+      get() {
+        return this.selectedWidget.options;
+      },
+      set(e) {
+        this.selectedWidget.options = e;
+      }
+    }
+  },
+  watch: {
+    "designer.selectedWidget": {
+      handler(e) {
+        e && (this.activeTab = "1");
+      }
+    },
+    "selectedWidget.options": {
+      //组件属性变动后，立即保存表单JSON！！
+      deep: !0,
+      handler() {
+        this.designer.saveCurrentHistoryStep();
+      }
+    },
+    formConfig: {
+      deep: !0,
+      handler() {
+        this.designer.saveCurrentHistoryStep();
+      }
+    }
+  },
+  created() {
+    this.on$("editEventHandler", (e) => {
+      this.editEventHandler(e[0], e[1]);
+    }), this.designer.handleEvent("form-css-updated", (e) => {
+      this.designer.setCssClassList(e);
+    }), this.designer.handleEvent("field-selected", (e) => {
+      this.subFormChildWidgetFlag = !!e && e.type === "sub-form";
+    });
+  },
+  mounted() {
+    this.designer.selectedWidget ? this.activeTab = "1" : this.activeTab = "2", this.scrollerHeight = window.innerHeight - 56 - 48 + "px", B(() => {
+      this.$nextTick(() => {
+        this.scrollerHeight = window.innerHeight - 56 - 48 + "px";
+      });
+    });
+  },
+  methods: {
+    getEventHandled(e) {
+      return !!this.optionModel[e] && this.optionModel[e].length > 0;
+    },
+    showEventCollapse() {
+      return this.designerConfig.eventCollapse === void 0 ? !0 : !!this.designerConfig.eventCollapse;
+    },
+    hasPropEditor(e, l) {
+      if (!l)
+        return !1;
+      if (e.indexOf("-") <= -1) {
+        const n = this.selectedWidget.type + "-" + e;
+        if (z(n))
+          return !1;
+      }
+      const t = e.replace(this.selectedWidget.type + "-", "");
+      return this.designer.hasConfig(this.selectedWidget, t);
+    },
+    getPropEditor(e, l) {
+      const t = e.replace(this.selectedWidget.type + "-", ""), f = `${this.selectedWidget.type}-${t}-editor`;
+      return this.$options.components[f] || this.$root.$.appContext.components[f] ? f : l;
+    },
+    showCollapse(e) {
+      let l = !1;
+      for (const t in e)
+        if (e.hasOwnProperty(t) && this.hasPropEditor(t, e[t])) {
+          l = !0;
+          break;
+        }
+      return l;
+    },
+    editEventHandler(e, l) {
+      this.curEventName = e, this.eventHeader = `${this.optionModel.name}.${e}(${l.join(", ")}) {`, this.eventHandlerCode = this.selectedWidget.options[e] || "", e === "onValidate" && !this.optionModel.onValidate && (this.eventHandlerCode = `  /* sample code */
+  /*
+  if ((value > 100) || (value < 0)) {
+    return Promise.reject('error message')  //fail
+  } else {
+    return Promise.resolve();  //pass
+  }
+  */`), this.showWidgetEventDialogFlag = !0;
+    },
+    saveEventHandler() {
+      const e = this.$refs.ecEditor.getEditorAnnotations();
+      let l = !1;
+      if (e && e.length > 0 && (e.forEach((t) => {
+        t.type === "error" && (l = !0);
+      }), l)) {
+        this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
+        return;
+      }
+      if (this.curEventName.includes(".")) {
+        const [t, f] = this.curEventName.split(".");
+        this.selectedWidget.options[t][f] = this.eventHandlerCode;
+      } else
+        this.selectedWidget.options[this.curEventName] = this.eventHandlerCode;
+      this.showWidgetEventDialogFlag = !1;
+    }
+  }
+}, Z = { class: "dialog-footer" };
+function N(e, l, t, f, n, i) {
+  const v = c("a-collapse-panel"), _ = c("a-collapse"), P = c("a-form"), S = c("a-empty"), E = c("a-tab-pane"), M = c("form-setting"), D = c("FormCrudSetting"), T = c("a-tabs"), b = c("a-alert"), A = c("code-editor"), W = c("a-button"), V = c("a-modal"), K = c("a-layout"), O = c("a-config-provider");
+  return o(), a(O, {
+    "component-size": "small",
+    input: { autocomplete: "off" }
+  }, {
+    default: d(() => [
+      u(K, { class: "panel-container" }, {
+        default: d(() => [
+          u(T, {
+            activeKey: n.activeTab,
+            "onUpdate:activeKey": l[4] || (l[4] = (s) => n.activeTab = s),
+            style: { height: "100%", width: "100%", overflow: "hidden" }
+          }, {
+            default: d(() => [
+              u(E, {
+                tab: e.i18nt("designer.hint.widgetSetting"),
+                key: "1"
+              }, {
+                default: d(() => [
+                  C("div", {
+                    class: "setting-scrollbar",
+                    style: w({ height: n.scrollerHeight })
+                  }, [
+                    t.designer.selectedWidget && !t.designer.selectedWidget.category ? (o(), a(P, {
+                      key: 0,
+                      model: i.optionModel,
+                      labelAlign: "left",
+                      "label-width": "120px",
+                      class: "setting-form tpf-form",
+                      onSubmit: l[1] || (l[1] = H(() => {
+                      }, ["prevent"]))
+                    }, {
+                      default: d(() => [
+                        u(_, {
+                          activeKey: n.widgetActiveCollapseNames,
+                          "onUpdate:activeKey": l[0] || (l[0] = (s) => n.widgetActiveCollapseNames = s),
+                          class: "setting-collapse"
+                        }, {
+                          default: d(() => [
+                            i.showCollapse(n.commonProps) ? (o(), a(v, {
+                              key: "1",
+                              header: e.i18nt("designer.setting.常见属性")
+                            }, {
+                              default: d(() => [
+                                (o(!0), m(h, null, p(n.commonProps, (s, r) => (o(), m(h, null, [
+                                  i.hasPropEditor(r, s) ? (o(), a(y(i.getPropEditor(r, s)), {
+                                    key: r,
+                                    designer: t.designer,
+                                    "selected-widget": t.selectedWidget,
+                                    "option-model": i.optionModel
+                                  }, null, 8, ["designer", "selected-widget", "option-model"])) : g("", !0)
+                                ], 64))), 256))
+                              ]),
+                              _: 1
+                            }, 8, ["header"])) : g("", !0),
+                            i.showCollapse(n.advProps) ? (o(), a(v, {
+                              key: "2",
+                              header: e.i18nt("designer.setting.高级属性")
+                            }, {
+                              default: d(() => [
+                                (o(!0), m(h, null, p(n.advProps, (s, r) => (o(), m(h, null, [
+                                  i.hasPropEditor(r, s) ? (o(), a(y(i.getPropEditor(r, s)), {
+                                    key: r,
+                                    designer: t.designer,
+                                    "selected-widget": t.selectedWidget,
+                                    "option-model": i.optionModel
+                                  }, null, 8, ["designer", "selected-widget", "option-model"])) : g("", !0)
+                                ], 64))), 256))
+                              ]),
+                              _: 1
+                            }, 8, ["header"])) : g("", !0),
+                            i.showEventCollapse() && i.showCollapse(n.eventProps) ? (o(), a(v, {
+                              key: "3",
+                              header: e.i18nt("designer.setting.事件属性")
+                            }, {
+                              default: d(() => [
+                                (o(!0), m(h, null, p(n.eventProps, (s, r) => (o(), m(h, null, [
+                                  i.hasPropEditor(r, s) ? (o(), a(y(i.getPropEditor(r, s)), {
+                                    key: r,
+                                    designer: t.designer,
+                                    "selected-widget": t.selectedWidget,
+                                    "option-model": i.optionModel,
+                                    "event-handled": i.getEventHandled(r)
+                                  }, null, 8, ["designer", "selected-widget", "option-model", "event-handled"])) : g("", !0)
+                                ], 64))), 256))
+                              ]),
+                              _: 1
+                            }, 8, ["header"])) : g("", !0)
+                          ]),
+                          _: 1
+                        }, 8, ["activeKey"])
+                      ]),
+                      _: 1
+                    }, 8, ["model"])) : g("", !0),
+                    t.designer.selectedWidget && t.designer.selectedWidget.category ? (o(), a(P, {
+                      key: 1,
+                      model: i.optionModel,
+                      labelAlign: "left",
+                      "label-width": "120px",
+                      class: "setting-form tpf-form",
+                      onSubmit: l[3] || (l[3] = H(() => {
+                      }, ["prevent"]))
+                    }, {
+                      default: d(() => [
+                        u(_, {
+                          activeKey: n.widgetActiveCollapseNames,
+                          "onUpdate:activeKey": l[2] || (l[2] = (s) => n.widgetActiveCollapseNames = s),
+                          class: "setting-collapse"
+                        }, {
+                          default: d(() => [
+                            i.showCollapse(n.commonProps) ? (o(), a(v, {
+                              key: "1",
+                              header: e.i18nt("designer.setting.常见属性")
+                            }, {
+                              default: d(() => [
+                                (o(!0), m(h, null, p(n.commonProps, (s, r) => (o(), m(h, null, [
+                                  i.hasPropEditor(r, s) ? (o(), a(y(i.getPropEditor(r, s)), {
+                                    key: r,
+                                    designer: t.designer,
+                                    "selected-widget": t.selectedWidget,
+                                    "option-model": i.optionModel
+                                  }, null, 8, ["designer", "selected-widget", "option-model"])) : g("", !0)
+                                ], 64))), 256))
+                              ]),
+                              _: 1
+                            }, 8, ["header"])) : g("", !0),
+                            i.showCollapse(n.advProps) ? (o(), a(v, {
+                              key: "2",
+                              header: e.i18nt("designer.setting.高级属性")
+                            }, {
+                              default: d(() => [
+                                (o(!0), m(h, null, p(n.advProps, (s, r) => (o(), m(h, null, [
+                                  i.hasPropEditor(r, s) ? (o(), a(y(i.getPropEditor(r, s)), {
+                                    key: r,
+                                    designer: t.designer,
+                                    "selected-widget": t.selectedWidget,
+                                    "option-model": i.optionModel
+                                  }, null, 8, ["designer", "selected-widget", "option-model"])) : g("", !0)
+                                ], 64))), 256))
+                              ]),
+                              _: 1
+                            }, 8, ["header"])) : g("", !0),
+                            i.showEventCollapse() && i.showCollapse(n.eventProps) ? (o(), a(v, {
+                              key: "3",
+                              header: e.i18nt("designer.setting.事件属性")
+                            }, {
+                              default: d(() => [
+                                (o(!0), m(h, null, p(n.eventProps, (s, r) => (o(), m(h, null, [
+                                  i.hasPropEditor(r, s) ? (o(), a(y(i.getPropEditor(r, s)), {
+                                    key: r,
+                                    designer: t.designer,
+                                    "selected-widget": t.selectedWidget,
+                                    "option-model": i.optionModel,
+                                    "event-handled": i.getEventHandled(r)
+                                  }, null, 8, ["designer", "selected-widget", "option-model", "event-handled"])) : g("", !0)
+                                ], 64))), 256))
+                              ]),
+                              _: 1
+                            }, 8, ["header"])) : g("", !0)
+                          ]),
+                          _: 1
+                        }, 8, ["activeKey"])
+                      ]),
+                      _: 1
+                    }, 8, ["model"])) : g("", !0),
+                    t.designer.selectedWidget ? g("", !0) : (o(), a(S, {
+                      key: 2,
+                      description: e.i18nt("designer.hint.noSelectedWidgetHint")
+                    }, null, 8, ["description"]))
+                  ], 4)
+                ]),
+                _: 1
+              }, 8, ["tab"]),
+              t.designer ? (o(), a(E, {
+                tab: e.i18nt("designer.hint.表单设置"),
+                key: "2"
+              }, {
+                default: d(() => [
+                  C("div", {
+                    class: "setting-scrollbar",
+                    style: w({ height: n.scrollerHeight })
+                  }, [
+                    u(M, {
+                      designer: t.designer,
+                      "form-config": t.formConfig
+                    }, null, 8, ["designer", "form-config"])
+                  ], 4)
+                ]),
+                _: 1
+              }, 8, ["tab"])) : g("", !0),
+              u(E, {
+                tab: "表单api配置",
+                key: "3"
+              }, {
+                default: d(() => [
+                  C("div", {
+                    class: "ds-setting-scrollbar",
+                    style: w({ height: n.scrollerHeight })
+                  }, [
+                    u(D, {
+                      designer: t.designer,
+                      "form-config": t.formConfig
+                    }, null, 8, ["designer", "form-config"])
+                  ], 4)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["activeKey"]),
+          u(V, {
+            title: e.i18nt("designer.setting.editWidgetEventHandler"),
+            visible: n.showWidgetEventDialogFlag,
+            "onUpdate:visible": l[7] || (l[7] = (s) => n.showWidgetEventDialogFlag = s),
+            "show-close": !0,
+            "custom-class": "drag-dialog small-padding-dialog",
+            "append-to-body": "",
+            "close-on-click-modal": !1,
+            "close-on-press-escape": !1,
+            "destroy-on-close": !0,
+            width: 800
+          }, {
+            footer: d(() => [
+              C("div", Z, [
+                u(W, {
+                  onClick: l[6] || (l[6] = (s) => n.showWidgetEventDialogFlag = !1)
+                }, {
+                  default: d(() => [
+                    k(F(e.i18nt("designer.hint.cancel")), 1)
+                  ]),
+                  _: 1
+                }),
+                u(W, {
+                  type: "primary",
+                  onClick: i.saveEventHandler
+                }, {
+                  default: d(() => [
+                    k(F(e.i18nt("designer.hint.confirm")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ])
+            ]),
+            default: d(() => [
+              u(b, {
+                type: "info",
+                closable: !1,
+                message: n.eventHeader
+              }, null, 8, ["message"]),
+              u(A, {
+                mode: "javascript",
+                readonly: !1,
+                modelValue: n.eventHandlerCode,
+                "onUpdate:modelValue": l[5] || (l[5] = (s) => n.eventHandlerCode = s),
+                ref: "ecEditor"
+              }, null, 8, ["modelValue"]),
+              u(b, {
+                type: "info",
+                closable: !1,
+                message: "}"
+              })
+            ]),
+            _: 1
+          }, 8, ["title", "visible"])
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const ce = /* @__PURE__ */ G(Y, [["render", N], ["__scopeId", "data-v-485f8d38"]]);
+export {
+  ce as default
+};