@kp-ui/lowcode 2.13.1 → 2.14.0-alpha

package/src/components/form-designer/setting-panel/form-setting.vue2.js

@@ -0,0 +1,325 @@
+import { defineComponent as Y, inject as Z, ref as f, onMounted as x, resolveComponent as u, createElementBlock as D, openBlock as S, Fragment as P, createVNode as n, withModifiers as ee, withCtx as t, createBlock as ne, createCommentVNode as oe, unref as a, createTextVNode as p, toDisplayString as C, normalizeClass as j, renderList as te } from "vue";
+import { useI18n as le } from "../../../utils/i18n.js";
+import { insertCustomCssToHead as I, deepClone as T } from "../../../utils/util.js";
+import ae from "../../public/methoad-item.vue.js";
+import se from "./property-editor/container-vf-dialog/okButtonHidden-editor.vue.js";
+import ie from "./property-editor/container-vf-dialog/cancelButtonHidden-editor.vue.js";
+import { TpfCodeEditor as re } from "tmgc2-share";
+import { Switch as de } from "ant-design-vue";
+const be = /* @__PURE__ */ Y({
+  name: "form-setting",
+  __name: "form-setting",
+  props: {
+    designer: {},
+    formConfig: {}
+  },
+  setup(K) {
+    const m = K, { i18nt: s } = le(), B = Z("getDesignerConfig"), H = B ? B() : {}, F = f("javascript"), O = f(""), U = f(""), y = f(!1), N = f(""), M = f(["1", "2"]), c = f(""), E = f([]), w = f(""), A = f(null), R = [
+      { label: "default", value: "middle" },
+      { label: "large", value: "large" },
+      { label: "small", value: "small" }
+    ], z = {
+      onFormCreated: "onFormCreated() {",
+      onFormMounted: "onFormMounted() {",
+      onOkButtonClick: "onOkButtonClick() {",
+      onCancelButtonClick: "onCancelButtonClick() {",
+      onFormDataChange: "onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {"
+      //'onFormValidate': 'onFormValidate() {',
+    }, W = (e) => {
+      m.formConfig[O.value] = e;
+    }, k = (e) => {
+      O.value = e.eventName, F.value = e.mode, y.value = e.isShowEventHeader, w.value = m.formConfig[e.eventName], U.value = e.title, N.value = e.eventHeader || "", A.value.open();
+    }, $ = (e) => !!m.formConfig[e] && m.formConfig[e].length > 0, q = () => H.eventCollapse === void 0 ? !0 : !!H.eventCollapse, _ = () => {
+      const e = /\..*{/g, o = c.value.match(e), g = [];
+      o && o.length > 0 && o.forEach((r) => {
+        const v = r.split(",");
+        v.length > 0 && v.forEach((b) => {
+          const i = b.trim();
+          if (i.indexOf(".", 1) !== -1) {
+            const d = i.substring(
+              i.indexOf(".") + 1,
+              i.indexOf(".", 1)
+            );
+            d && g.push(d.trim());
+          } else if (i.indexOf(" ") !== -1) {
+            const d = i.substring(
+              i.indexOf(".") + 1,
+              i.indexOf(" ")
+            );
+            d && g.push(d.trim());
+          } else if (i.indexOf("{") !== -1) {
+            const d = i.substring(
+              i.indexOf(".") + 1,
+              i.indexOf("{")
+            );
+            g.push(d.trim());
+          } else {
+            const d = i.substring(i.indexOf(".") + 1);
+            g.push(d.trim());
+          }
+        });
+      });
+    };
+    return x(() => {
+      m.designer.handleEvent("form-json-imported", () => {
+        c.value = m.formConfig.cssCode, I(c.value), _(), m.designer.emitEvent("form-css-updated", T(E.value));
+      }), setTimeout(() => {
+        c.value = m.formConfig.cssCode, I(c.value), _(), m.designer.emitEvent("form-css-updated", T(E.value));
+      }, 1200);
+    }), (e, o) => {
+      const g = u("a-select"), r = u("a-form-item"), v = u("a-radio-button"), b = u("a-radio-group"), i = u("a-input-number"), d = u("a-button"), L = u("a-input"), V = u("a-collapse-panel"), G = u("a-collapse"), J = u("a-form"), Q = u("a-config-provider");
+      return S(), D(P, null, [
+        n(J, {
+          model: e.formConfig,
+          labelAlign: "left",
+          "label-width": "120px",
+          class: "setting-form",
+          onSubmit: o[11] || (o[11] = ee(() => {
+          }, ["prevent"]))
+        }, {
+          default: t(() => [
+            n(G, {
+              activeKey: M.value,
+              "onUpdate:activeKey": o[10] || (o[10] = (l) => M.value = l),
+              class: "setting-collapse"
+            }, {
+              default: t(() => [
+                n(V, {
+                  key: "1",
+                  header: a(s)("designer.setting.基本属性")
+                }, {
+                  default: t(() => [
+                    n(r, {
+                      label: a(s)("designer.setting.formSize")
+                    }, {
+                      default: t(() => [
+                        n(g, {
+                          value: e.formConfig.size,
+                          "onUpdate:value": o[0] || (o[0] = (l) => e.formConfig.size = l),
+                          options: R,
+                          allowClear: "",
+                          style: { width: "120px" }
+                        }, null, 8, ["value"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.labelPosition")
+                    }, {
+                      default: t(() => [
+                        n(b, {
+                          value: e.formConfig.labelPosition,
+                          "onUpdate:value": o[1] || (o[1] = (l) => e.formConfig.labelPosition = l),
+                          class: "radio-group-custom"
+                        }, {
+                          default: t(() => [
+                            n(v, { value: "horizontal" }, {
+                              default: t(() => [
+                                p(C(a(s)("designer.setting.horizontal")), 1)
+                              ]),
+                              _: 1
+                            }),
+                            n(v, { value: "vertical" }, {
+                              default: t(() => [
+                                p(C(a(s)("designer.setting.vertical")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["value"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.labelAlign")
+                    }, {
+                      default: t(() => [
+                        n(b, {
+                          value: e.formConfig.labelAlign,
+                          "onUpdate:value": o[2] || (o[2] = (l) => e.formConfig.labelAlign = l),
+                          class: "radio-group-custom"
+                        }, {
+                          default: t(() => [
+                            n(v, { value: "left" }, {
+                              default: t(() => [
+                                p(C(a(s)("designer.setting.leftAlign")), 1)
+                              ]),
+                              _: 1
+                            }),
+                            n(v, { value: "right" }, {
+                              default: t(() => [
+                                p(C(a(s)("designer.setting.rightAlign")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["value"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.labelWidth")
+                    }, {
+                      default: t(() => [
+                        n(i, {
+                          value: e.formConfig.labelWidth,
+                          "onUpdate:value": o[3] || (o[3] = (l) => e.formConfig.labelWidth = l),
+                          min: 0,
+                          style: { width: "100%" },
+                          allowClear: ""
+                        }, null, 8, ["value"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.formCss")
+                    }, {
+                      default: t(() => [
+                        n(d, {
+                          shape: "round",
+                          onClick: o[4] || (o[4] = (l) => k({
+                            eventName: "formCss",
+                            isShowEventHeader: !1,
+                            mode: "css",
+                            title: a(s)("designer.setting.formCss")
+                          })),
+                          class: j([{ "button-text-highlight": !!e.formConfig.cssCode }])
+                        }, {
+                          default: t(() => [
+                            p(C(a(s)("designer.setting.addCss")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["class"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.customClass")
+                    }, {
+                      default: t(() => [
+                        n(g, {
+                          value: e.formConfig.customClass,
+                          "onUpdate:value": o[5] || (o[5] = (l) => e.formConfig.customClass = l),
+                          allowClear: "",
+                          mode: "tags",
+                          onChange: _,
+                          options: E.value
+                        }, null, 8, ["value", "options"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.globalFunctions")
+                    }, {
+                      default: t(() => [
+                        n(d, {
+                          class: j([{ "button-text-highlight": !!e.formConfig.functions }]),
+                          shape: "round",
+                          onClick: o[6] || (o[6] = (l) => k({
+                            eventName: "functions",
+                            isShowEventHeader: !1,
+                            mode: "javascript",
+                            title: a(s)("designer.setting.globalFunctions")
+                          }))
+                        }, {
+                          default: t(() => [
+                            p(C(a(s)("designer.setting.addEventHandler")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["class"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(r, {
+                      label: a(s)("designer.setting.cancelButtonLabel")
+                    }, {
+                      default: t(() => [
+                        n(L, {
+                          type: "text",
+                          value: e.formConfig.cancelButtonLabel,
+                          "onUpdate:value": o[7] || (o[7] = (l) => e.formConfig.cancelButtonLabel = l)
+                        }, null, 8, ["value"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(ie, { optionModel: e.formConfig }, null, 8, ["optionModel"]),
+                    n(r, {
+                      label: a(s)("designer.setting.okButtonLabel")
+                    }, {
+                      default: t(() => [
+                        n(L, {
+                          type: "text",
+                          value: e.formConfig.okButtonLabel,
+                          "onUpdate:value": o[8] || (o[8] = (l) => e.formConfig.okButtonLabel = l)
+                        }, null, 8, ["value"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    n(se, { optionModel: e.formConfig }, null, 8, ["optionModel"]),
+                    n(r, {
+                      label: a(s)("designer.setting.isEnterSubmit")
+                    }, {
+                      default: t(() => [
+                        n(a(de), {
+                          checked: e.formConfig.isEnterSubmit,
+                          "onUpdate:checked": o[9] || (o[9] = (l) => e.formConfig.isEnterSubmit = l),
+                          "checked-value": 1,
+                          "un-checked-value": 0
+                        }, null, 8, ["checked"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"])
+                  ]),
+                  _: 1
+                }, 8, ["header"]),
+                q() ? (S(), ne(V, {
+                  key: "2",
+                  class: "eventPanel",
+                  header: a(s)("designer.setting.事件属性")
+                }, {
+                  default: t(() => [
+                    (S(), D(P, null, te(z, (l, h) => n(ae, {
+                      onClickItem: k,
+                      key: h,
+                      "event-name": h,
+                      value: e.formConfig[h],
+                      "onUpdate:value": (X) => e.formConfig[h] = X,
+                      "get-form-event-handled": $,
+                      "event-params-map": z,
+                      "form-config": e.formConfig
+                    }, null, 8, ["event-name", "value", "onUpdate:value", "form-config"])), 64))
+                  ]),
+                  _: 1
+                }, 8, ["header"])) : oe("", !0)
+              ]),
+              _: 1
+            }, 8, ["activeKey"])
+          ]),
+          _: 1
+        }, 8, ["model"]),
+        n(Q, { componentSize: "middle" }, {
+          default: t(() => [
+            n(a(re), {
+              isShowEventHeader: y.value,
+              ref_key: "codeEditorRef",
+              ref: A,
+              "event-header": N.value,
+              modelValue: w.value,
+              "onUpdate:modelValue": o[12] || (o[12] = (l) => w.value = l),
+              mode: F.value,
+              readonly: !1,
+              title: U.value,
+              onSetCode: W
+            }, null, 8, ["isShowEventHeader", "event-header", "modelValue", "mode", "title"])
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
+  }
+});
+export {
+  be as default
+};