@kp-ui/lowcode 2.14.0-beta.9 → 2.15.0-alpha.2

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

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