@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.9

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var repeaterSingleForm = require('./repeater-single-form/repeater-single-form.cjs');
+var repeaterMultiForm = require('./repeater-multi-form/repeater-multi-form.cjs');
+var repeaterGrid = require('./repeater-grid/repeater-grid.cjs');
+
+"use strict";
+const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormMDCtrlRepeater",
+  props: {
+    controller: {
+      type: runtime.FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-mdctrl-repeater");
+    const onDataChange = (data) => {
+      props.controller.setValue(data);
+    };
+    return {
+      ns,
+      onDataChange
+    };
+  },
+  render() {
+    const classNames = [this.ns.b()];
+    switch (this.controller.repeaterStyle) {
+      case "MultiForm":
+        return vue.createVNode(repeaterMultiForm.RepeaterMultiForm, {
+          "class": classNames,
+          "onChange": this.onDataChange,
+          "controller": this.controller
+        }, null);
+      case "Grid":
+        return vue.createVNode(repeaterGrid.RepeaterGrid, {
+          "class": classNames,
+          "controller": this.controller,
+          "onChange": this.onDataChange
+        }, null);
+      case "SingleForm":
+        return vue.createVNode(repeaterSingleForm.RepeaterSingleForm, {
+          "class": classNames,
+          "data": this.controller.value,
+          "controller": this.controller,
+          "onChange": this.onDataChange
+        }, null);
+      default:
+        return vue.createVNode("div", {
+          "class": classNames
+        }, [vue.createTextVNode("\u6682\u672A\u652F\u6301\u91CD\u590D\u5668\u6837\u5F0F"), this.controller.repeaterStyle]);
+    }
+  }
+});
+
+exports.FormMDCtrlRepeater = FormMDCtrlRepeater;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.cjs

@@ -0,0 +1,205 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./repeater-grid.css');
+var core = require('@ibiz-template/core');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const RepeaterGrid = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizRepeaterGrid",
+  props: {
+    controller: {
+      type: runtime.FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("repeater-grid");
+    const formItems = [];
+    core.recursiveIterate(props.controller.repeatedForm, (item) => {
+      if (item.detailType === "FORMITEM") {
+        formItems.push(item);
+      }
+    }, {
+      childrenFields: ["deformPages", "deformTabPages", "deformDetails"]
+    });
+    const onSingleValueChange = (value, index) => {
+      const arrData = [...props.controller.value];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    const ctx = vue3Util.useCtx();
+    const formControllers = vue.reactive([]);
+    const addFormController = async (data = {}) => {
+      const formC = new runtime.EditFormController(props.controller.repeatedForm, props.controller.context, props.controller.params, ctx);
+      formC.state.isSimple = true;
+      await formC.created();
+      formC.setSimpleData(data);
+      formControllers.push(formC);
+      formC.evt.on("onFormDataChange", (event) => {
+        const formData = {
+          ...event.data[0]
+        };
+        const index = formControllers.indexOf(formC);
+        onSingleValueChange(formData, index);
+      });
+    };
+    vue.watch(() => props.controller.value, (newVal) => {
+      if (newVal && newVal.length > 0) {
+        newVal.forEach((item, index) => {
+          const formC = formControllers[index];
+          if (formC) {
+            const changeVal = item || {};
+            const find = Object.keys(formC.data).find((key) => {
+              return changeVal[key] !== formC.data[key];
+            });
+            if (find) {
+              formC.setSimpleData(changeVal);
+            }
+          } else {
+            addFormController(item);
+          }
+        });
+        if (newVal.length < formControllers.length) {
+          formControllers.forEach((c, index) => {
+            if (index >= newVal.length) {
+              c.state.isLoaded = false;
+            }
+          });
+        }
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const renderRemoveBtn = (index) => {
+      if (!props.controller.enableDelete) {
+        return null;
+      }
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return vue.createVNode(vue.resolveComponent("el-popconfirm"), {
+          "title": "\u662F\u5426\u5220\u9664\u9009\u4E2D\u9879",
+          "confirm-button-text": "\u786E\u8BA4",
+          "cancel-button-text": "\u53D6\u6D88",
+          "onConfirm": () => props.controller.remove(index)
+        }, {
+          reference: () => {
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "text": true,
+              "type": "danger",
+              "class": [ns.be("index", "remove")]
+            }, {
+              default: () => [vue.createTextVNode("\u5220\u9664")]
+            });
+          }
+        });
+      }
+      return vue.createVNode(vue.resolveComponent("el-button"), {
+        "text": true,
+        "type": "danger",
+        "class": [ns.be("index", "remove")],
+        "onClick": () => props.controller.remove(index)
+      }, {
+        default: () => [vue.createTextVNode("\u5220\u9664")]
+      });
+    };
+    return {
+      ns,
+      formItems,
+      formControllers,
+      renderRemoveBtn
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [this.controller.enableCreate && vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": this.ns.e("add-btn"),
+      "onClick": () => {
+        this.controller.create();
+      }
+    }, {
+      default: () => [vue.createTextVNode("\u6DFB\u52A0")]
+    }), vue.createVNode(vue.resolveComponent("el-table"), {
+      "class": this.ns.e("table"),
+      "show-header": true,
+      "data": this.controller.value,
+      "cell-class-name": ({
+        columnIndex
+      }) => {
+        return columnIndex === 0 ? this.ns.b("index") : "";
+      }
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("el-table-column"), {
+        "type": "index",
+        "width": 66,
+        "align": "center"
+      }, {
+        default: (opts) => {
+          const {
+            $index
+          } = opts;
+          if (!this.controller.enableDelete) {
+            return vue.createVNode("span", null, [$index + 1]);
+          }
+          return [this.renderRemoveBtn($index), vue.createVNode("span", {
+            "class": this.ns.be("index", "text")
+          }, [$index + 1])];
+        }
+      }), this.formItems.length > 0 && this.formItems.map((item) => {
+        return vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "label": item.caption,
+          "prop": item.id,
+          "align": "center"
+        }, {
+          default: (opts) => {
+            const {
+              $index
+            } = opts;
+            const formC = vue.toRaw(this.formControllers[$index]);
+            if (!formC || !formC.state.isLoaded) {
+              return vue.createVNode("div", null, [vue.createTextVNode("\u4E0D\u5B58\u5728\u6216\u52A0\u8F7D\u4E2D")]);
+            }
+            const formItemC = formC.formItems.find((x) => x.name === item.id);
+            let editor = null;
+            if (!formItemC.editorProvider) {
+              editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
+                "modelData": item.editor
+              }, null);
+            } else {
+              const component = vue.resolveComponent(formItemC.editorProvider.formEditor);
+              editor = vue.h(component, {
+                value: formItemC.value,
+                data: formItemC.data,
+                controller: formItemC.editor,
+                disabled: formItemC.state.disabled,
+                readonly: formItemC.model.editor.readOnly,
+                onChange: (val, name) => {
+                  formItemC.setDataValue(val, name);
+                }
+              });
+            }
+            return vue.createVNode(vue.resolveComponent("iBizGridEditItem"), {
+              "error": formItemC.state.error,
+              "required": formItemC.state.required
+            }, _isSlot(editor) ? editor : {
+              default: () => [editor]
+            });
+          }
+        });
+      })]
+    })]);
+  }
+});
+
+exports.RepeaterGrid = RepeaterGrid;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.css

@@ -0,0 +1 @@
+.ibiz-repeater-grid{position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid__add-btn{position:absolute;top:0;right:0;z-index:2}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__text:last-child{display:none}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__remove{display:inline}.ibiz-repeater-grid .ibiz-repeater-grid-index__remove.el-button.el-button--danger{--el-button-text-color:var(--ibiz-color-danger)}.ibiz-repeater-grid-index .cell{padding:4px}.ibiz-repeater-grid-index__remove{display:none}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var repeaterSingleForm = require('../repeater-single-form/repeater-single-form.cjs');
+
+"use strict";
+const RepeaterMultiForm = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizRepeaterMultiForm",
+  props: {
+    controller: {
+      type: runtime.FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("repeater-multi-form");
+    const onValueChange = (value, index) => {
+      const arrData = [...props.controller.value];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    return {
+      ns,
+      onValueChange
+    };
+  },
+  render() {
+    const items = this.controller.value;
+    return vue.createVNode(vue.resolveComponent("iBizMDCtrlContainer"), {
+      "class": this.ns.b(),
+      "items": items,
+      "enableCreate": this.controller.enableCreate,
+      "enableDelete": this.controller.enableDelete,
+      "onAddClick": () => this.controller.create(),
+      "onRemoveClick": (_item, index) => this.controller.remove(index)
+    }, {
+      item: ({
+        data,
+        index
+      }) => {
+        return vue.createVNode(repeaterSingleForm.RepeaterSingleForm, {
+          "key": index,
+          "data": data,
+          "controller": this.controller,
+          "onChange": (value) => {
+            this.onValueChange(value, index);
+          }
+        }, null);
+      }
+    });
+  }
+});
+
+exports.RepeaterMultiForm = RepeaterMultiForm;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var core = require('@ibiz-template/core');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./repeater-single-form.css');
+
+"use strict";
+const RepeaterSingleForm = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizRepeaterSingleForm",
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(_props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("repeater-single-form");
+    const onFormDataChange = (event) => {
+      const formData = {
+        ...event.data[0]
+      };
+      emit("change", formData);
+    };
+    return {
+      ns,
+      onFormDataChange
+    };
+  },
+  render() {
+    if (!this.controller.repeatedForm) {
+      throw new core.RuntimeError("\u6CA1\u6709repeatedForm");
+    }
+    return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+      "class": this.ns.b(),
+      "context": this.controller.context,
+      "params": this.controller.params,
+      "modelData": this.controller.repeatedForm,
+      "isSimple": true,
+      "data": this.data,
+      "onFormDataChange": this.onFormDataChange
+    }, null);
+  }
+});
+
+exports.RepeaterSingleForm = RepeaterSingleForm;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.css

@@ -0,0 +1 @@
+.ibiz-repeater-single-form{--ibiz-repeater-single-form-header-height:32px;width:100%}.ibiz-repeater-single-form__content{width:100%}.ibiz-repeater-single-form-header{height:var(--ibiz-repeater-single-form-header-height)}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+require('./form-mdctrl.css');
+
+"use strict";
+const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormMDCtrl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.FormMDCtrlController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-mdctrl");
+    vue3Util.useController(props.controller);
+    const c = props.controller;
+    const hasCaption = c.model.showCaption && !!c.model.caption;
+    return {
+      c,
+      ns,
+      hasCaption
+    };
+  },
+  render() {
+    const {
+      model
+    } = this.c;
+    let content;
+    switch (model.contentType) {
+      case "GRID":
+      case "LIST":
+      case "DATAVIEW":
+        content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlMD"), {
+          "controller": this.c
+        }, null);
+        break;
+      case "FORM":
+        content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlForm"), {
+          "controller": this.c
+        }, null);
+        break;
+      case "REPEATER":
+        content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlRepeater"), {
+          "controller": this.c
+        }, null);
+        break;
+      default:
+        vue.createVNode("div", null, [model.contentType, vue.createTextVNode("\u6682\u672A\u652F\u6301")]);
+        break;
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass, this.hasCaption ? this.ns.m("show-caption") : ""]
+    }, [this.hasCaption && vue.createVNode("div", {
+      "class": this.ns.b("header")
+    }, [vue.createVNode("span", {
+      "class": this.ns.e("title")
+    }, [this.c.model.caption])]), content]);
+  }
+});
+
+exports.FormMDCtrl = FormMDCtrl;
+exports.default = FormMDCtrl;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.css

@@ -0,0 +1 @@
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:32px}.ibiz-form-mdctrl-header{height:var(--ibiz-form-mdctrl-header-height);line-height:var(--ibiz-form-mdctrl-header-height)}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.provider.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FormMDCtrlProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFormMDCtrl");
+  }
+  async createController(detailModel, form, parent) {
+    let c;
+    switch (detailModel.contentType) {
+      case "LIST":
+      case "GRID":
+      case "DATAVIEW":
+        c = new runtime.FormMDCtrlMDController(detailModel, form, parent);
+        break;
+      case "FORM":
+        c = new runtime.FormMDCtrlFormController(detailModel, form, parent);
+        break;
+      case "REPEATER":
+        c = new runtime.FormMDCtrlRepeaterController(detailModel, form, parent);
+        break;
+      default:
+        throw new core.ModelError(
+          detailModel,
+          `\u6682\u672A\u652F\u6301\u5185\u5BB9\u7C7B\u578B\u4E3A${detailModel.contentType}`
+        );
+    }
+    await c.init();
+    return c;
+  }
+}
+
+exports.FormMDCtrlProvider = FormMDCtrlProvider;

package/lib/control/form/form-detail/form-mdctrl/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var formMdctrl = require('./form-mdctrl.cjs');
+var formMdctrlForm = require('./form-mdctrl-form/form-mdctrl-form.cjs');
+var formMdctrlMd = require('./form-mdctrl-md/form-mdctrl-md.cjs');
+var formMdctrlRepeater = require('./form-mdctrl-repeater/form-mdctrl-repeater.cjs');
+var formMdctrl_provider = require('./form-mdctrl.provider.cjs');
+var mdctrlContainer = require('./mdctrl-container/mdctrl-container.cjs');
+
+"use strict";
+const IBizFormMDCtrl = vue3Util.withInstall(formMdctrl.FormMDCtrl, function(v) {
+  v.component(formMdctrl.FormMDCtrl.name, formMdctrl.FormMDCtrl);
+  v.component(formMdctrlForm.FormMDCtrlForm.name, formMdctrlForm.FormMDCtrlForm);
+  v.component(formMdctrlMd.FormMDCtrlMD.name, formMdctrlMd.FormMDCtrlMD);
+  v.component(formMdctrlRepeater.FormMDCtrlRepeater.name, formMdctrlRepeater.FormMDCtrlRepeater);
+  v.component(mdctrlContainer.MDCtrlContainer.name, mdctrlContainer.MDCtrlContainer);
+  runtime.registerFormDetailProvider("MDCTRL", () => new formMdctrl_provider.FormMDCtrlProvider());
+});
+
+exports.IBizFormMDCtrl = IBizFormMDCtrl;
+exports.default = IBizFormMDCtrl;

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./mdctrl-container.css');
+
+"use strict";
+const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMDCtrlContainer",
+  props: {
+    enableCreate: {
+      type: Boolean,
+      required: true
+    },
+    enableDelete: {
+      type: Boolean,
+      required: true
+    },
+    items: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    addClick: () => true,
+    removeClick: (_data, _index) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("mdctrl-container");
+    const showActions = vue.computed(() => {
+      return props.enableCreate || props.enableDelete;
+    });
+    const renderAddBtn = () => {
+      return vue.createVNode(vue.resolveComponent("el-button"), {
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "onClick": () => emit("addClick")
+      }, {
+        default: () => [vue.createTextVNode("\u6DFB\u52A0")]
+      });
+    };
+    const renderRemoveBtn = (item, index) => {
+      if (!props.enableDelete) {
+        return null;
+      }
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return vue.createVNode(vue.resolveComponent("el-popconfirm"), {
+          "title": "\u662F\u5426\u5220\u9664\u9009\u4E2D\u9879",
+          "confirm-button-text": "\u786E\u8BA4",
+          "cancel-button-text": "\u53D6\u6D88",
+          "onConfirm": () => emit("removeClick", item, index)
+        }, {
+          reference: () => {
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "type": "danger",
+              "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")]
+            }, {
+              default: () => [vue.createTextVNode("\u5220\u9664")]
+            });
+          }
+        });
+      }
+      return vue.createVNode(vue.resolveComponent("el-button"), {
+        "type": "danger",
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "onClick": () => emit("removeClick", item, index)
+      }, {
+        default: () => [vue.createTextVNode("\u5220\u9664")]
+      });
+    };
+    return {
+      ns,
+      showActions,
+      renderAddBtn,
+      renderRemoveBtn
+    };
+  },
+  render() {
+    var _a;
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [((_a = this.items) == null ? void 0 : _a.length) ? this.items.map((item, index) => {
+      const formComponent = this.$slots.item ? this.$slots.item({
+        data: item,
+        index
+      }) : vue.createVNode("div", null, [vue.createTextVNode("\u672A\u63D0\u4F9Bitem\u63D2\u69FD")]);
+      return vue.createVNode("div", {
+        "class": this.ns.b("item")
+      }, [formComponent, this.showActions && vue.createVNode("div", {
+        "class": this.ns.b("item-actions")
+      }, [index === 0 && this.enableCreate && this.renderAddBtn(), this.renderRemoveBtn(item, index)])]);
+    }) : vue.createVNode("div", {
+      "class": this.ns.b("no-data")
+    }, [this.enableCreate && vue.createVNode("div", {
+      "class": this.ns.b("item-actions")
+    }, [this.renderAddBtn()])])]);
+  }
+});
+
+exports.MDCtrlContainer = MDCtrlContainer;

package/lib/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.css

@@ -0,0 +1 @@
+.ibiz-mdctrl-container-item{display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:0}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}