@kp-ui/lowcode 2.15.0-alpha.4 → 2.15.0-alpha.5

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

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

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

@@ -1,8 +1,145 @@
-import t from "./index.vue2.js";
+import S from "./index.vue2.js";
+import { resolveComponent as a, createElementBlock as s, openBlock as l, Fragment as c, createVNode as n, withCtx as i, createBlock as d, createCommentVNode as E, createElementVNode as m, withModifiers as H, renderList as g, normalizeClass as K, resolveDynamicComponent as M } from "vue";
 /* empty css           */
 /* empty css           */
-import o from "../../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ o(t, [["__scopeId", "data-v-1ce87a7d"]]);
+import u from "../../../../_virtual/_plugin-vue_export-helper.js";
+const x = { class: "setting-scrollbar desgin-wrapper" }, N = { class: "setting-scrollbar" }, U = { class: "ds-setting-scrollbar" };
+function T(W, t, z, e, A, B) {
+  const _ = a("a-collapse-panel"), p = a("a-collapse"), v = a("a-form"), y = a("a-empty"), r = a("a-tab-pane"), b = a("a-tabs"), C = a("a-layout"), w = a("a-config-provider");
+  return l(), s(
+    c,
+    null,
+    [
+      n(w, { componentSize: "small" }, {
+        default: i(() => [
+          n(C, { class: "panel-container" }, {
+            default: i(() => [
+              n(b, {
+                activeKey: e.activeTab,
+                "onUpdate:activeKey": t[4] || (t[4] = (o) => e.activeTab = o),
+                style: { height: "100%", width: "100%", overflow: "hidden" }
+              }, {
+                default: i(() => [
+                  n(r, {
+                    tab: e.i18nt("designer.hint.widgetSetting"),
+                    key: "1"
+                  }, {
+                    default: i(() => [
+                      m("div", x, [
+                        e.designer.selectedWidget ? (l(), d(v, {
+                          key: 0,
+                          model: e.optionModel,
+                          labelAlign: "left",
+                          "label-width": "120px",
+                          class: "setting-form tpf-form",
+                          onSubmit: t[2] || (t[2] = H(() => {
+                          }, ["prevent"]))
+                        }, {
+                          default: i(() => [
+                            n(p, {
+                              activeKey: e.widgetActiveCollapseNames,
+                              "onUpdate:activeKey": t[1] || (t[1] = (o) => e.widgetActiveCollapseNames = o),
+                              class: "setting-collapse"
+                            }, {
+                              default: i(() => [
+                                (l(!0), s(
+                                  c,
+                                  null,
+                                  g(e.collapsePanels, (o) => (l(), d(_, {
+                                    key: o.key,
+                                    class: K(o.className),
+                                    header: o.headerKey
+                                  }, {
+                                    default: i(() => [
+                                      (l(!0), s(
+                                        c,
+                                        null,
+                                        g(o.props, (h, f) => (l(), d(M(h), {
+                                          key: f,
+                                          "selected-widget": e.selectedWidget,
+                                          "option-model": e.optionModel,
+                                          "onUpdate:optionModel": t[0] || (t[0] = (k) => e.optionModel = k),
+                                          "event-handled": e.getEventHandled(f)
+                                        }, null, 40, ["selected-widget", "option-model", "event-handled"]))),
+                                        128
+                                        /* KEYED_FRAGMENT */
+                                      ))
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1032, ["class", "header"]))),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ]),
+                              _: 1
+                              /* STABLE */
+                            }, 8, ["activeKey"])
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["model"])) : (l(), d(y, {
+                          key: 1,
+                          description: e.i18nt("designer.hint.noSelectedWidgetHint")
+                        }, null, 8, ["description"]))
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["tab"]),
+                  e.designer ? (l(), d(r, {
+                    tab: e.i18nt("designer.hint.表单设置"),
+                    key: "2"
+                  }, {
+                    default: i(() => [
+                      m("div", N, [
+                        n(e.FormSetting, { "form-config": e.formConfig }, null, 8, ["form-config"])
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["tab"])) : E("v-if", !0),
+                  n(r, {
+                    tab: e.i18nt("designer.hint.表单api配置"),
+                    key: "3"
+                  }, {
+                    default: i(() => [
+                      m("div", U, [
+                        n(e.FormCrudSetting, {
+                          "form-config": e.formConfig,
+                          "onUpdate:formConfig": t[3] || (t[3] = (o) => e.formConfig = o)
+                        }, null, 8, ["form-config"])
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["tab"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["activeKey"])
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }),
+      n(e.TpfCodeEditor, {
+        eventHeader: e.eventHeader,
+        ref: "CodeModalEditorRef",
+        title: e.dialogTitle || e.i18nt("designer.setting.editWidgetEventHandler"),
+        mode: e.currentMode,
+        readonly: !1,
+        onSetCode: e.saveEventHandler
+      }, null, 8, ["eventHeader", "title", "mode"])
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const L = /* @__PURE__ */ u(S, [["render", T], ["__scopeId", "data-v-f994986a"], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/setting-panel/index.vue"]]);
 export {
-  p as default
+  L as default
 };