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

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

@@ -1,23 +1,22 @@
-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({
+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({
   name: "form-setting",
   __name: "form-setting",
   props: {
-    formConfig: { type: Object, required: !0 }
+    formConfig: {}
   },
-  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 = [
+  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 = [
       { label: "default", value: "middle" },
       { label: "large", value: "large" },
       { label: "small", value: "small" }
-    ], M = {
+    ], L = {
       onFormCreated: "onFormCreated() {",
       onFormMounted: "onFormMounted() {",
       onOkButtonClick: "onOkButtonClick() {",
@@ -25,54 +24,288 @@ const Y = /* @__PURE__ */ A({
       onFormEnterKey: "onFormEnterKey() {",
       onFormDataChange: "onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {"
       //'onFormValidate': 'onFormValidate() {',
-    }, 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)
+    }, 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)
             );
-            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("{")
+            r && m.push(r.trim());
+          } else if (i.indexOf("{") !== -1) {
+            const r = i.substring(
+              i.indexOf(".") + 1,
+              i.indexOf("{")
             );
-            l.push(o.trim());
+            m.push(r.trim());
           } else {
-            const o = e.substring(e.indexOf(".") + 1);
-            l.push(o.trim());
+            const r = i.substring(i.indexOf(".") + 1);
+            m.push(r.trim());
           }
         });
       });
     };
-    K(() => {
-      i.value.handleEvent("form-json-imported", () => {
-        r.value = s.formConfig.cssCode, H(r.value), u(), i.value.emitEvent("form-css-updated", _(f.value));
+    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));
       }), setTimeout(() => {
-        r.value = s.formConfig.cssCode, H(r.value), u(), i.value.emitEvent("form-css-updated", _(f.value));
+        c.value = v.formConfig.cssCode, I(c.value), F(), h.value.emitEvent("form-css-updated", T(E.value));
       }, 1200);
-    });
-    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;
+    }), (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);
+    };
   }
 });
 export {
-  Y as default
+  ce as default
 };

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

@@ -1,145 +1,8 @@
-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";
+import t from "./index.vue2.js";
 /* empty css           */
 /* empty css           */
-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"]]);
+import o from "../../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ o(t, [["__scopeId", "data-v-1ce87a7d"]]);
 export {
-  L as default
+  p as default
 };