@ibiz-template/mob-vue3-components 0.0.1-alpha.22 → 0.0.1-alpha.24

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

@@ -1,85 +1,75 @@
 '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');
-var formMdctrlContainer = require('../form-mdctrl-container/form-mdctrl-container.cjs');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-mdctrl-form.css');
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-}
 const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
   name: "IBizFormMDCtrlForm",
   props: {
     controller: {
-      type: Object,
+      type: runtime.FormMDCtrlFormController,
       required: true
     }
   },
   setup(props) {
-    const ns = vue3Util.useNamespace("form-mdctrl");
-    vue3Util.useController(props.controller);
-    const c = props.controller;
-    c.state = vue.reactive(c.state);
+    const ns = vue3Util.useNamespace("form-mdctrl-form");
+    const showActions = vue.computed(() => {
+      return props.controller.enableCreate || props.controller.enableDelete;
+    });
+    const renderAddBtn = () => {
+      return vue.createVNode(vue.resolveComponent("van-button"), {
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "onClick": () => props.controller.create()
+      }, {
+        default: () => [vue.createTextVNode("\u6DFB\u52A0")]
+      });
+    };
+    const onCreated = (id, event) => {
+      props.controller.setFormController(id, event.ctrl);
+    };
     return {
       ns,
-      c
+      showActions,
+      onCreated,
+      renderAddBtn
     };
   },
   render() {
-    let _slot;
-    const c = this.c;
-    const renderContent = () => {
-      if (c.controlModel && c.provider) {
-        return c.state.data.map((item, index) => {
-          const tempContext = c.parent.form.context.clone();
-          if (c.model.contentControl) {
-            const codeName = runtime.calcDeCodeNameById(c.model.contentControl.appDataEntityId);
-            tempContext[codeName] = item.srfkey;
+    const {
+      state,
+      formProvider,
+      model
+    } = this.controller;
+    return vue.createVNode(vue.resolveComponent("iBizMDCtrlContainer"), {
+      "class": this.ns.b(),
+      "items": state.items || [],
+      "enableCreate": this.controller.enableCreate,
+      "enableDelete": this.controller.enableDelete,
+      "onAddClick": () => this.controller.create(),
+      "onRemoveClick": (item) => this.controller.remove(item.id)
+    }, {
+      item: ({
+        data
+      }) => {
+        if (!formProvider) {
+          return vue.createVNode("div", null, [vue.createTextVNode("\u672A\u627E\u5230\u8868\u5355\u7684\u9002\u914D\u5668")]);
+        }
+        const formComponent = vue.h(vue.resolveComponent(formProvider.component), {
+          class: this.ns.be("item", "form"),
+          modelData: model.contentControl,
+          context: data.context,
+          params: data.params,
+          onCreated: (event) => {
+            this.onCreated(data.id, event);
           }
-          const controlProps = {
-            modelData: c.controlModel,
-            context: tempContext,
-            params: c.parent.form.params,
-            onFormDataChange: (arg) => c.onFormChange(arg.data, index),
-            onRemoveSuccess: () => c.onFormRemoveSuccess(index),
-            onCreated: (event) => c.onControlCreated(event, index)
-          };
-          const controlComponent = vue.h(vue.resolveComponent(c.provider.component), controlProps);
-          return vue.createVNode(vue.resolveComponent("van-swipe-cell"), {
-            "class": this.ns.b("form-content"),
-            "key": item.srfkey
-          }, {
-            default: () => [controlComponent, {
-              default: () => {
-                return controlComponent;
-              },
-              right: () => {
-                return c.parent.isDelete && vue.createVNode(vue.resolveComponent("van-button"), {
-                  "onClick": () => this.c.onDataRemove(index)
-                }, {
-                  default: () => [vue.createTextVNode("\u5220\u9664")]
-                });
-              }
-            }]
-          });
         });
+        return formComponent;
       }
-    };
-    return vue.createVNode(formMdctrlContainer.FormMDCtrlContainer, {
-      "class": this.ns.b("form"),
-      "controller": c.parent,
-      "onInsertButtonClick": () => {
-        c.onDataInsert();
-      }
-    }, _isSlot(_slot = renderContent()) ? _slot : {
-      default: () => [_slot]
     });
   }
 });
 
 exports.FormMDCtrlForm = FormMDCtrlForm;
-exports.default = FormMDCtrlForm;

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

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

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-mdctrl-md.css');
+
+"use strict";
+const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormMDCtrlMD",
+  props: {
+    controller: {
+      type: runtime.FormMDCtrlMDController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-mdctrl-md");
+    const showActions = vue.computed(() => {
+      return props.controller.enableCreate || props.controller.enableDelete;
+    });
+    const onCreated = (event) => {
+      props.controller.setMDControl(event.ctrl);
+    };
+    const isSelected = vue.ref(false);
+    const onSelectionChange = (event) => {
+      isSelected.value = event.data.length > 0;
+    };
+    return {
+      ns,
+      showActions,
+      isSelected,
+      onCreated,
+      onSelectionChange
+    };
+  },
+  render() {
+    const {
+      mdProvider,
+      model
+    } = this.controller;
+    const isLoaded = this.controller.form.state.isLoaded;
+    let controlComponent = null;
+    if (isLoaded) {
+      const controlProps = {
+        class: this.ns.b("content"),
+        modelData: model.contentControl,
+        context: this.controller.form.context,
+        params: this.controller.form.params,
+        onCreated: this.onCreated,
+        onSelectionChange: this.onSelectionChange
+      };
+      if (model.contentType === "GRID") {
+        controlProps.rowEditOpen = true;
+      }
+      controlComponent = vue.h(vue.resolveComponent(mdProvider.component), controlProps);
+    }
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [this.controller.enableCreate && vue.createVNode(vue.resolveComponent("van-button"), {
+      "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn")],
+      "size": "small",
+      "type": "primary",
+      "onClick": () => this.controller.create()
+    }, {
+      default: () => [vue.createTextVNode("\u6DFB\u52A0")]
+    }), controlComponent, this.showActions && vue.createVNode("div", {
+      "class": this.ns.b("actions")
+    }, [this.controller.enableDelete && vue.createVNode(vue.resolveComponent("van-button"), {
+      "type": "danger",
+      "size": "small",
+      "disabled": !this.isSelected,
+      "class": [this.ns.be("actions", "remove"), this.ns.be("actions", "btn")],
+      "onClick": () => this.controller.remove()
+    }, {
+      default: () => [vue.createTextVNode("\u5220\u9664")]
+    })])]);
+  }
+});
+
+exports.FormMDCtrlMD = FormMDCtrlMD;

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

@@ -0,0 +1 @@
+.ibiz-form-mdctrl-md-content{flex-grow:1}.ibiz-form-mdctrl-md-actions{flex-shrink:0;text-align:center}.ibiz-form-mdctrl-md-actions .van-button+.van-button{margin-left:0}.ibiz-form-mdctrl-md-actions__btn{width:calc(100% - var(--ibiz-spacing-base) * 2);margin:0 var(--ibiz-spacing-base)}

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

@@ -0,0 +1,52 @@
+'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');
+
+"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 "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-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

@@ -5,6 +5,7 @@ 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({
@@ -20,65 +21,50 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
+    const ns = vue3Util.useNamespace("form-mdctrl");
     vue3Util.useController(props.controller);
     const c = props.controller;
-    const renderContentRepeater = () => {
-      switch (c.model.detailStyle) {
-        case "STYLE2":
-          return vue.createVNode(vue.resolveComponent("iBizFormMDCtrlRepeaterGrid"), {
-            "controller": c.mdCtrlContentController
-          }, null);
-        case "STYLE3":
-          return vue.createVNode(vue.resolveComponent("iBizFormMDCtrlRepeaterFormOne"), {
-            "controller": c.mdCtrlContentController
-          }, null);
-        default:
-          return vue.createVNode(vue.resolveComponent("iBizFormMDCtrlRepeaterForm"), {
-            "controller": c.mdCtrlContentController
-          }, null);
-      }
-    };
+    const hasCaption = c.model.showCaption && !!c.model.caption;
     return {
       c,
-      renderContentRepeater
+      ns,
+      hasCaption
     };
   },
   render() {
-    const renderContentByType = () => {
-      let content;
-      const {
-        model
-      } = this.c;
-      switch (model == null ? void 0 : model.contentType) {
-        case "FORM":
-          content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlForm"), {
-            "controller": this.c.mdCtrlContentController
-          }, null);
-          break;
-        case "GRID":
-          content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlGrid"), {
-            "controller": this.c.mdCtrlContentController
-          }, null);
-          break;
-        case "LIST":
-          content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlList"), {
-            "controller": this.c.mdCtrlContentController
-          }, null);
-          break;
-        case "DATAVIEW":
-          content = vue.createVNode(vue.resolveComponent("iBizFormMDCtrlDataView"), {
-            "controller": this.c.mdCtrlContentController
-          }, null);
-          break;
-        case "REPEATER":
-          content = this.renderContentRepeater();
-          break;
-        default:
-          break;
-      }
-      return content;
-    };
-    return renderContentByType();
+    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]);
   }
 });
 

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-bg-color:var(--ibiz-color-bg-1);--ibiz-form-mdctrl-header-padding:var(--ibiz-spacing-base);--ibiz-form-mdctrl-header-border-color:var(--ibiz-color-border);--ibiz-form-mdctrl-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-mdctrl-caption-font-size:var(--ibiz-font-size-header-6);--ibiz-form-mdctrl-caption-font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-mdctrl-caption-font-size);font-weight:var(--ibiz-form-mdctrl-caption-font-weight);color:var(--ibiz-form-mdctrl-caption-text-color)}.ibiz-form-mdctrl-header{padding:var(--ibiz-form-mdctrl-header-padding);line-height:var(--ibiz-form-mdctrl-header-height)}

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var core = require('@ibiz-template/core');
 var runtime = require('@ibiz-template/runtime');
 
 "use strict";
@@ -14,7 +15,25 @@ class FormMDCtrlProvider {
     __publicField(this, "component", "IBizFormMDCtrl");
   }
   async createController(detailModel, form, parent) {
-    const c = new runtime.FormMDCtrlController(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;
   }

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

@@ -5,13 +5,21 @@ 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.FormMDCtrlProvider = 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,96 @@
+'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("van-button"), {
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "size": "small",
+        "onClick": () => emit("addClick"),
+        "type": "primary"
+      }, {
+        default: () => [vue.createTextVNode("\u6DFB\u52A0")]
+      });
+    };
+    const renderRemoveBtn = (item, index) => {
+      if (!props.enableDelete) {
+        return null;
+      }
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return vue.createVNode(vue.resolveComponent("van-button"), {
+          "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+          "size": "small",
+          "type": "danger",
+          "onClick": () => {
+            emit("removeClick", item, index);
+          }
+        }, {
+          default: () => [vue.createTextVNode("\u5220\u9664")]
+        });
+      }
+      return vue.createVNode(vue.resolveComponent("van-button"), {
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "type": "danger",
+        "size": "small",
+        "onClick": () => {
+          emit("removeClick", item, index);
+        }
+      }, {
+        default: () => [vue.createTextVNode("\u5220\u9664")]
+      });
+    };
+    return {
+      ns,
+      showActions,
+      renderAddBtn,
+      renderRemoveBtn
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [this.enableCreate && this.renderAddBtn(), 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")
+      }, [this.renderRemoveBtn(item, index)])]);
+    })]);
+  }
+});
+
+exports.MDCtrlContainer = MDCtrlContainer;

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

@@ -0,0 +1 @@
+.ibiz-mdctrl-container{display:flex;flex-direction:column;gap:10px;padding:var(--ibiz-spacing-tight) 0}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:100%;text-align:center}.ibiz-mdctrl-container-item-actions .van-button+.van-button{margin-left:0}.ibiz-mdctrl-container-item-actions__btn{width:calc(100% - var(--ibiz-spacing-base) * 2);margin:0 var(--ibiz-spacing-base)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}