@kp-ui/lowcode 1.0.41 → 1.0.43

package/src/components/form-designer/setting-panel/property-editor/button-list-editor.vue.js

@@ -1,37 +1,74 @@
 import i18n from "../../../../utils/i18n.js";
-import _sfc_main$1 from "../../../BtnListConfig/BtnListConfigDialog.vue.js";
-import { resolveComponent, createElementBlock, openBlock, Fragment, createVNode, withCtx, createTextVNode } from "vue";
+import CodeModalEditor from "../../../code-editor/code-modal-editor.vue.js";
+import { generateId } from "../../../../utils/util.js";
+import { cloneDeep } from "lodash-es";
+import { resolveComponent, createElementBlock, openBlock, Fragment, createVNode, withCtx, createTextVNode, createElementVNode, normalizeClass, toDisplayString } from "vue";
 /* empty css                        */
 import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   name: "button-list-editor",
   mixins: [i18n],
-  components: { BtnListConfigDialog: _sfc_main$1 },
   props: {
     designer: Object,
     selectedWidget: Object,
     optionModel: Object
   },
+  components: {
+    CodeModalEditor
+  },
   data() {
     return {
+      buttonList: [],
+      currentEditEventName: "",
+      currentEditBtn: {},
       btnListConfigDialogVisible: false
     };
   },
-  computed: {
-    noLabelSetting() {
-      return this.selectedWidget.type === "static-text" || this.selectedWidget.type === "html-text";
+  watch: {
+    buttonList() {
+      this.optionModel.buttonList = this.buttonList;
     }
   },
   methods: {
+    addOperationButton() {
+      this.buttonList.splice(0, 0, {
+        key: generateId(),
+        label: "new btn",
+        type: "primary",
+        danger: false,
+        icon: "",
+        onHidden: "",
+        onDisabled: "",
+        onClick: ""
+      });
+    },
+    editEvent(type, row) {
+      this.currentEditBtn = row;
+      this.currentEditEventName = type;
+      this.$refs.CodeModalEditorRef.open(row[type]);
+    },
     handleConfigBtn() {
+      this.buttonList = cloneDeep(this.optionModel.buttonList);
       this.btnListConfigDialogVisible = true;
+    },
+    handleCloseDialog() {
+      this.btnListConfigDialogVisible = false;
     }
   }
 };
+const _hoisted_1 = { class: "btn-center" };
+const _hoisted_2 = { class: "dialog-footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_a_button = resolveComponent("a-button");
   const _component_a_form_item = resolveComponent("a-form-item");
-  const _component_BtnListConfigDialog = resolveComponent("BtnListConfigDialog");
+  const _component_a_input = resolveComponent("a-input");
+  const _component_STableColumn = resolveComponent("STableColumn");
+  const _component_a_select_option = resolveComponent("a-select-option");
+  const _component_a_select = resolveComponent("a-select");
+  const _component_a_switch = resolveComponent("a-switch");
+  const _component_STable = resolveComponent("STable");
+  const _component_a_modal = resolveComponent("a-modal");
+  const _component_CodeModalEditor = resolveComponent("CodeModalEditor");
   return openBlock(), createElementBlock(Fragment, null, [
     createVNode(_component_a_form_item, {
       label: _ctx.i18nt("designer.setting.buttonList")
@@ -46,13 +83,241 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     }, 8, ["label"]),
-    createVNode(_component_BtnListConfigDialog, {
+    createVNode(_component_a_modal, {
+      title: _ctx.i18nt("designer.setting.buttonsColumnEdit"),
       visible: $data.btnListConfigDialogVisible,
-      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => $data.btnListConfigDialogVisible = $event)
-    }, null, 8, ["visible"])
+      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => $data.btnListConfigDialogVisible = $event),
+      "show-close": true,
+      dialogClass: "drag-dialog",
+      "append-to-body": "",
+      "close-on-click-modal": false,
+      "close-on-press-escape": false,
+      "destroy-on-close": true,
+      width: "1250px"
+    }, {
+      footer: withCtx(() => [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_component_a_button, {
+            size: "default",
+            onClick: $options.handleCloseDialog
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.i18nt("designer.hint.closePreview")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ])
+      ]),
+      default: withCtx(() => [
+        createVNode(_component_STable, {
+          deepWatchDataSource: true,
+          "data-source": $data.buttonList,
+          pagination: false,
+          resizable: true
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_STableColumn, {
+              rowDrag: true,
+              dataIndex: "name",
+              title: _ctx.i18nt("designer.setting.operationButtonLabel"),
+              width: 150
+            }, {
+              default: withCtx(({ index }) => [
+                createVNode(_component_a_input, {
+                  value: $data.buttonList[index].label,
+                  "onUpdate:value": ($event) => $data.buttonList[index].label = $event,
+                  placeholder: _ctx.i18nt("designer.setting.operationButtonLabel")
+                }, null, 8, ["value", "onUpdate:value", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            createVNode(_component_STableColumn, {
+              dataIndex: "type",
+              title: _ctx.i18nt("designer.setting.operationButtonType"),
+              width: 120
+            }, {
+              default: withCtx(({ index }) => [
+                createVNode(_component_a_select, {
+                  value: $data.buttonList[index].type,
+                  "onUpdate:value": ($event) => $data.buttonList[index].type = $event,
+                  placeholder: _ctx.i18nt("designer.setting.operationButtonType"),
+                  style: { "width": "100%" }
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_a_select_option, { value: "primary" }, {
+                      default: withCtx(() => [
+                        createTextVNode("primary")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_a_select_option, { value: "ghost" }, {
+                      default: withCtx(() => [
+                        createTextVNode("ghost")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_a_select_option, { value: "dashed" }, {
+                      default: withCtx(() => [
+                        createTextVNode("dashed")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_a_select_option, { value: "text" }, {
+                      default: withCtx(() => [
+                        createTextVNode("text")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_a_select_option, { value: "link" }, {
+                      default: withCtx(() => [
+                        createTextVNode("link")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(_component_a_select_option, { value: "default" }, {
+                      default: withCtx(() => [
+                        createTextVNode("default")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 2
+                }, 1032, ["value", "onUpdate:value", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            createVNode(_component_STableColumn, {
+              dataIndex: "size",
+              title: _ctx.i18nt("designer.setting.danger"),
+              width: 120
+            }, {
+              default: withCtx(({ index }) => [
+                createVNode(_component_a_switch, {
+                  checkedValue: 1,
+                  unCheckedValue: 0,
+                  checked: $data.buttonList[index].danger,
+                  "onUpdate:checked": ($event) => $data.buttonList[index].danger = $event
+                }, null, 8, ["checked", "onUpdate:checked"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            createVNode(_component_STableColumn, {
+              dataIndex: "size",
+              title: _ctx.i18nt("designer.setting.buttonIcon"),
+              width: 120
+            }, {
+              default: withCtx(({ index }) => [
+                createVNode(_component_a_input, {
+                  type: "text",
+                  value: $data.buttonList[index].icon,
+                  "onUpdate:value": ($event) => $data.buttonList[index].icon = $event
+                }, null, 8, ["value", "onUpdate:value"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            createVNode(_component_STableColumn, {
+              dataIndex: "onHidden",
+              title: _ctx.i18nt("designer.setting.operationButtonHidden"),
+              width: 100
+            }, {
+              default: withCtx(({ record }) => [
+                createVNode(_component_a_button, {
+                  class: normalizeClass([{ "button-text-highlight": !!record.onHidden }]),
+                  onClick: ($event) => $options.editEvent("onHidden", record),
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.i18nt("designer.setting.operationButtonHidden")), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["class", "onClick"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            createVNode(_component_STableColumn, {
+              dataIndex: "disabled",
+              title: _ctx.i18nt("designer.setting.operationButtonDisabled"),
+              width: 100
+            }, {
+              default: withCtx(({ record }) => [
+                createVNode(_component_a_button, {
+                  class: normalizeClass([{ "button-text-highlight": !!record.onDisabled }]),
+                  onClick: ($event) => $options.editEvent("onDisabled", record),
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.i18nt("designer.setting.operationButtonDisabled")), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["class", "onClick"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            createVNode(_component_STableColumn, {
+              dataIndex: "onClick",
+              title: "点击事件",
+              width: 100
+            }, {
+              default: withCtx(({ record }) => [
+                createVNode(_component_a_button, {
+                  class: normalizeClass([{ "button-text-highlight": !!record.onClick }]),
+                  onClick: ($event) => $options.editEvent("onClick", record),
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(" 点击事件 ")
+                  ]),
+                  _: 2
+                }, 1032, ["class", "onClick"])
+              ]),
+              _: 1
+            }),
+            createVNode(_component_STableColumn, {
+              dataIndex: "action",
+              title: "操作",
+              width: 80
+            }, {
+              default: withCtx(({ record, index }) => [
+                createVNode(_component_a_button, {
+                  type: "link",
+                  onClick: ($event) => _ctx.deleteOperationButton(index),
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(" 删除 ")
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["data-source"]),
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_component_a_button, {
+            type: "primary",
+            size: "default",
+            onClick: $options.addOperationButton
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.i18nt("designer.setting.addOperationButton")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["title", "visible"]),
+    createVNode(_component_CodeModalEditor, {
+      modelValue: $data.currentEditBtn[$data.currentEditEventName],
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.currentEditBtn[$data.currentEditEventName] = $event),
+      ref: "CodeModalEditorRef",
+      "event-header": `${$data.currentEditBtn.label}.${$data.currentEditEventName}(){`
+    }, null, 8, ["modelValue", "event-header"])
   ], 64);
 }
-const buttonListEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c439e9dc"]]);
+const buttonListEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-77f39703"]]);
 export {
   buttonListEditor as default
 };

package/src/components/form-designer/setting-panel/property-editor/button-postion-editor.vue.js

@@ -0,0 +1,23 @@
+import _sfc_main from "./button-postion-editor.vue2.js";
+import { resolveComponent, createBlock, openBlock, withCtx, createVNode } from "vue";
+import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.js";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_a_select = resolveComponent("a-select");
+  const _component_a_form_item = resolveComponent("a-form-item");
+  return openBlock(), createBlock(_component_a_form_item, {
+    label: _ctx.i18nt("designer.setting.buttonPosition")
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_a_select, {
+        options: _ctx.BUTTON_POSITION,
+        value: _ctx.optionModel.buttonPosition,
+        "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.optionModel.buttonPosition = $event)
+      }, null, 8, ["options", "value"])
+    ]),
+    _: 1
+  }, 8, ["label"]);
+}
+const buttonPostionEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  buttonPostionEditor as default
+};

package/src/components/form-designer/setting-panel/property-editor/button-postion-editor.vue2.js

@@ -0,0 +1,16 @@
+import i18n from "../../../../utils/i18n.js";
+import { BUTTON_POSITION } from "../../../../constants/index.js";
+import { defineComponent } from "vue";
+const _sfc_main = defineComponent({
+  name: "button-position-editor",
+  mixins: [i18n],
+  props: {
+    optionModel: Object
+  },
+  setup(props) {
+    return { BUTTON_POSITION };
+  }
+});
+export {
+  _sfc_main as default
+};

package/src/components/form-designer/setting-panel/property-editor/container-data-table/data-table-showButtonsColumn-editor.vue.js

@@ -50,7 +50,9 @@ const _sfc_main = {
         }
       });
       if (sameNameFlag) {
-        this.$message.error(this.i18nt("designer.setting.operationButtonDuplicatedNameError"));
+        this.$message.error(
+          this.i18nt("designer.setting.operationButtonDuplicatedNameError")
+        );
         this.optionModel.operationButtons[btnIdx].name = this.oldButtonName;
       }
     },
@@ -71,7 +73,7 @@ const _sfc_main = {
     }
   }
 };
-const _withScopeId = (n) => (pushScopeId("data-v-c63d3314"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-2884d0b4"), n = n(), popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "iconfont icon-drag drag-handler" }, null, -1));
 const _hoisted_2 = { class: "dialog-footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -539,7 +541,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["modelValue", "event-header"])
   ], 64);
 }
-const dataTableShowButtonsColumnEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c63d3314"]]);
+const dataTableShowButtonsColumnEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2884d0b4"]]);
 export {
   dataTableShowButtonsColumnEditor as default
 };