@ibiz-template/mob-vue3-components 0.0.1-alpha.19

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-druipart.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormDRUIPart",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.FormDRUIPartController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-druipart");
+    vue3Util.useController(props.controller);
+    const onCreated = (event) => {
+      props.controller.setEmbedView(event.view);
+    };
+    return {
+      ns,
+      onCreated
+    };
+  },
+  render() {
+    if (!this.controller.state.visible || !this.controller.state.viewComponentKey) {
+      return null;
+    }
+    const viewShell = vue.resolveComponent("IBizViewShell");
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName)]
+    }, [vue.h(viewShell, {
+      context: this.controller.navContext,
+      params: this.controller.navParams,
+      key: this.controller.state.viewComponentKey,
+      viewId: this.controller.model.appViewId,
+      onCreated: this.onCreated
+    })]);
+  }
+});
+
+exports.FormDRUIPart = FormDRUIPart;
+exports.default = FormDRUIPart;

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

@@ -0,0 +1 @@
+.ibiz-form-druipart{width:100%;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-form-druipart .ibiz-view-content{margin-top:0}

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

@@ -0,0 +1,23 @@
+'use strict';
+
+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 FormDRUIPartProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFormDRUIPart");
+  }
+  async createController(detailModel, form, parent) {
+    const c = new runtime.FormDRUIPartController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.FormDRUIPartProvider = FormDRUIPartProvider;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var formDruipart = require('./form-druipart.cjs');
+var formDruipart_provider = require('./form-druipart.provider.cjs');
+
+"use strict";
+const IBizFormDRUIPart = vue3Util.withInstall(formDruipart.FormDRUIPart, function(v) {
+  v.component(formDruipart.FormDRUIPart.name, formDruipart.FormDRUIPart);
+  runtime.registerFormDetailProvider("DRUIPART", () => new formDruipart_provider.FormDRUIPartProvider());
+});
+
+exports.FormDRUIPartProvider = formDruipart_provider.FormDRUIPartProvider;
+exports.IBizFormDRUIPart = IBizFormDRUIPart;
+exports.default = IBizFormDRUIPart;

package/lib/control/form/form-detail/form-group-panel/form-group-panel.cjs

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-group-panel.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormGroupPanel",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.FormGroupPanelController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-group");
+    const isCollapse = vue.ref(!props.controller.defaultExpansion);
+    const changeCollapse = () => {
+      if (!props.controller.disableClose) {
+        isCollapse.value = !isCollapse.value;
+      }
+    };
+    const onActionClick = async (detail, event) => {
+      await props.controller.onActionClick(detail, event);
+    };
+    const captionText = vue.computed(() => {
+      const {
+        captionItemName
+      } = props.modelData;
+      if (captionItemName) {
+        return props.controller.data[captionItemName];
+      }
+      return props.modelData.caption;
+    });
+    return {
+      ns,
+      isCollapse,
+      captionText,
+      changeCollapse,
+      onActionClick
+    };
+  },
+  render() {
+    var _a, _b;
+    let _slot;
+    const {
+      state
+    } = this.controller;
+    const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
+    const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
+      "slot": "content",
+      "layout": this.modelData.layout
+    }, _isSlot(_slot = defaultSlots.map((slot) => {
+      const props = slot.props;
+      if (!props || !props.controller) {
+        return slot;
+      }
+      return vue.createVNode(vue.resolveComponent("iBizCol"), {
+        "layoutPos": props.modelData.layoutPos,
+        "state": props.controller.state
+      }, _isSlot(slot) ? slot : {
+        default: () => [slot]
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName)];
+    if (this.modelData.showCaption === true) {
+      classArr.push(this.ns.m("show-header"));
+      classArr.push(this.ns.b("collapse"));
+      classArr.push(this.ns.is("collapse", this.isCollapse));
+      if (this.controller.disableClose) {
+        classArr.push(this.ns.bm("collapse", "disable-close"));
+      }
+      if (this.modelData.showMoreMode === 2) {
+        classArr.push(this.ns.m("show-more"));
+      }
+    }
+    let header = null;
+    if (this.modelData.showCaption) {
+      header = vue.createVNode("div", {
+        "class": [this.ns.b("header")],
+        "onClick": this.changeCollapse
+      }, [vue.createVNode("div", {
+        "class": [this.ns.be("header", "left")]
+      }, [vue.createVNode("div", {
+        "class": [this.ns.e("caption")]
+      }, [this.captionText])]), this.modelData.uiactionGroup && vue.createVNode("div", {
+        "class": [this.ns.be("header", "right")]
+      }, [vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
+        "class": this.ns.e("toolbar"),
+        "action-details": this.modelData.uiactionGroup.uiactionGroupDetails,
+        "actions-state": state.actionGroupState,
+        "onActionClick": this.onActionClick,
+        "caption": this.modelData.uiactionGroup.name,
+        "mode": this.modelData.actionGroupExtractMode === "ITEMS" ? "dropdown" : "buttons"
+      }, null)])]);
+    }
+    let footer = null;
+    if (this.modelData.showMoreMode === 2) {
+      footer = vue.createVNode("div", {
+        "class": [this.ns.b("footer")]
+      }, [vue.createVNode("div", {
+        "class": this.ns.be("footer", "show-more-button"),
+        "onClick": () => {
+          state.isShowMore = !state.isShowMore;
+        }
+      }, [!state.isShowMore ? "\u663E\u793A\u66F4\u591A" : "\u6536\u8D77"])]);
+    }
+    return vue.createVNode("div", {
+      "class": classArr
+    }, [header, vue.createVNode("div", {
+      "class": [this.ns.b("content")]
+    }, [content]), footer]);
+  }
+});
+
+exports.FormGroupPanel = FormGroupPanel;
+exports.default = FormGroupPanel;

package/lib/control/form/form-detail/form-group-panel/form-group-panel.css

@@ -0,0 +1 @@
+.ibiz-form-group{--ibiz-form-group-bg-color:transparent;--ibiz-form-group-footer-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-form-group-show-more-color:var(--ibiz-color-primary);--ibiz-form-group-header-bg-color:var(--ibiz-color-bg-0);--ibiz-form-group-header-padding:var(--ibiz-spacing-base);--ibiz-form-group-header-border-color:var(--ibiz-color-border);--ibiz-form-group-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-group-caption-font-size:var(--ibiz-font-size-header-6);--ibiz-form-group-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-group-content-bg-color:transparent;--ibiz-form-group-content-padding:var(--ibiz-spacing-tight);--ibiz-form-group-content-margin:0}.ibiz-form-group{width:100%;height:100%;overflow:hidden;background-color:var(--ibiz-form-group-bg-color);border-radius:var(--ibiz-border-radius-small)}.ibiz-form-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-group-caption-font-size);font-weight:var(--ibiz-form-group-caption-font-weight);color:var(--ibiz-form-group-caption-text-color)}.ibiz-form-group__toolbar{text-align:right}.ibiz-form-group .ibiz-form-item-container{border-radius:0}.ibiz-form-group-collapse>.ibiz-form-group-content{display:block}.ibiz-form-group-collapse.is-collapse>.ibiz-form-group-content{display:none}.ibiz-form-group-header{display:flex;padding:var(--ibiz-form-group-header-padding);background-color:var(--ibiz-form-group-header-bg-color)}.ibiz-form-group-header__left,.ibiz-form-group-header__right{display:inline-block;width:50%}.ibiz-form-group-header__right{text-align:right}.ibiz-form-group--show-header>.ibiz-form-group-content{margin-bottom:var(--ibiz-form-group-content-margin);background-color:var(--ibiz-form-group-content-bg-color)}.ibiz-form-group-footer{padding:var(--ibiz-form-group-footer-padding)}.ibiz-form-group-footer__show-more-button{display:inline-block;color:var(--ibiz-form-group-show-more-color)}

package/lib/control/form/form-detail/form-group-panel/form-group-panel.provider.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+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 FormGroupPanelProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFormGroupPanel");
+  }
+  async createController(detailModel, form, parent) {
+    const c = new runtime.FormGroupPanelController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.FormGroupPanelProvider = FormGroupPanelProvider;

package/lib/control/form/form-detail/form-group-panel/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var formGroupPanel = require('./form-group-panel.cjs');
+var formGroupPanel_provider = require('./form-group-panel.provider.cjs');
+
+"use strict";
+const IBizFormGroupPanel = vue3Util.withInstall(
+  formGroupPanel.FormGroupPanel,
+  function(v) {
+    v.component(formGroupPanel.FormGroupPanel.name, formGroupPanel.FormGroupPanel);
+    runtime.registerFormDetailProvider(
+      "GROUPPANEL",
+      () => new formGroupPanel_provider.FormGroupPanelProvider()
+    );
+  }
+);
+
+exports.FormGroupPanelProvider = formGroupPanel_provider.FormGroupPanelProvider;
+exports.IBizFormGroupPanel = IBizFormGroupPanel;
+exports.default = IBizFormGroupPanel;

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

@@ -0,0 +1,92 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-item-container.css');
+
+"use strict";
+const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormItemContainer",
+  props: {
+    required: {
+      type: Boolean,
+      required: true
+    },
+    error: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    labelPos: {
+      type: String,
+      required: true
+    },
+    labelWidth: {
+      type: Number,
+      default: 130
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-item-container");
+    let labelAlign = "left";
+    let editorAlign = "right";
+    const cssVars = vue.computed(() => {
+      switch (props.labelPos) {
+        case "LEFT":
+          labelAlign = "left";
+          editorAlign = "right";
+          break;
+        case "RIGHT":
+          labelAlign = "right";
+          editorAlign = "left";
+          break;
+        case "BOTTOM":
+          labelAlign = "left";
+          editorAlign = "left";
+          break;
+        case "TOP":
+          labelAlign = "left";
+          editorAlign = "left";
+          break;
+        default:
+          break;
+      }
+      const result = {
+        "label-align": labelAlign,
+        "editor-align": editorAlign
+      };
+      if (props.labelWidth !== 130) {
+        Object.assign(result, {
+          "label-width": `${props.labelWidth}px`
+        });
+      }
+      return ns.cssVarBlock(result);
+    });
+    return {
+      ns,
+      cssVars
+    };
+  },
+  render() {
+    var _a, _b;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.labelPos.toLowerCase()), this.ns.is("required", this.required), this.ns.is("error", !!this.error)],
+      "style": this.cssVars
+    }, [vue.createVNode("div", {
+      "class": [this.ns.b("content")]
+    }, [this.labelPos === "LEFT" || this.labelPos === "TOP" ? vue.createVNode("div", {
+      "class": [this.ns.e("label")],
+      "title": this.label
+    }, [vue.createVNode("span", null, [this.label])]) : null, vue.createVNode("div", {
+      "class": [this.ns.e("editor")]
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.labelPos === "RIGHT" || this.labelPos === "BOTTOM" ? vue.createVNode("div", {
+      "class": [this.ns.e("label")],
+      "title": this.label
+    }, [vue.createVNode("span", null, [vue.createTextVNode(" "), this.label])]) : null]), this.error ? vue.createVNode("div", {
+      "class": [this.ns.b("error")]
+    }, [this.error]) : null]);
+  }
+});
+
+exports.IBizFormItemContainer = IBizFormItemContainer;

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

@@ -0,0 +1 @@
+.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-form-item-line-height);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base);--ibiz-form-item-container-left-padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-base) var(--ibiz-spacing-base);--ibiz-form-item-container-container-padding:var(--ibiz-spacing-base);--ibiz-form-item-container-error-margin-top:var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-bg-color:var(--ibiz-color-bg-0);--ibiz-form-item-container-label-font-size:var(--ibiz-font-size-header-6);--ibiz-form-item-container-container-top-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base);--ibiz-form-item-container-container-label-padding:0 var(--ibiz-spacing-base);--ibiz-form-item-container-container-error-padding:0 var(--ibiz-spacing-base);--ibiz-form-item-container-container-top-margin:var(--ibiz-spacing-base);--ibiz-form-item-container-border:1px var(--ibiz-color-border) solid;position:relative;width:100%;height:100%;padding:var(--ibiz-form-item-container-container-padding);background-color:var(--ibiz-form-item-container-bg-color);border-radius:var(--ibiz-border-radius-small)}.ibiz-form-item-container__label{position:relative;flex-shrink:0;width:var(--ibiz-form-item-container-label-width);overflow:visible;color:var(--ibiz-form-item-text-color)}.ibiz-form-item-container__label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:100%;font-size:var(--ibiz-form-item-container-label-font-size);line-height:var(--ibiz-form-item-container-line-height);text-align:var(--ibiz-form-item-container-label-align)}.ibiz-form-item-container__editor{width:100%;text-align:var(--ibiz-form-item-container-editor-align)}.ibiz-form-item-container__editor .van-cell{padding-bottom:0}.ibiz-form-item-container.is-required .ibiz-form-item-container__label::before{position:absolute;top:3px;left:-10px;display:inline-block;height:100%;font-size:14px;line-height:var(--ibiz-form-item-container-line-height);color:var(--ibiz-form-item-error-color);content:"*"}.ibiz-form-item-container.is-error .ibiz-form-item-container-content{border-color:var(--ibiz-form-item-error-color)}.ibiz-form-item-container--right.is-required .ibiz-form-item-container__label::before{right:-10px;left:auto}.ibiz-form-item-container--right .ibiz-form-item-container__editor{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--left .ibiz-form-item-container__editor{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container-content{position:relative;border-bottom:var(--ibiz-form-item-container-border)}.ibiz-form-item-container--left .ibiz-form-item-container-content,.ibiz-form-item-container--right .ibiz-form-item-container-content{height:100%;display:flex;align-items:center;justify-content:center}.ibiz-form-item-container-error{position:absolute;bottom:0;width:calc(100% - var(--ibiz-spacing-base));padding-right:var(--ibiz-spacing-base);font-size:var(--ibiz-form-item-error-font-size);line-height:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-error-color);text-align:var(--ibiz-form-item-container-editor-align)}

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

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-item.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const FormItem = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormItem",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.FormItemController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-item");
+    const c = props.controller;
+    const onValueChange = (val, name) => {
+      props.controller.setDataValue(val, name);
+    };
+    const {
+      captionItemName,
+      caption
+    } = props.modelData;
+    const captionText = vue.computed(() => {
+      if (captionItemName && props.controller.data) {
+        return props.controller.data[captionItemName.toLowerCase()];
+      }
+      return caption;
+    });
+    return {
+      ns,
+      captionText,
+      c,
+      onValueChange
+    };
+  },
+  render() {
+    if (!this.c.state.visible) {
+      return null;
+    }
+    let editor = null;
+    const editorProps = {
+      value: this.controller.value,
+      data: this.controller.data,
+      controller: this.controller.editor,
+      disabled: this.controller.state.disabled,
+      readonly: this.controller.model.editor.readOnly,
+      onChange: this.onValueChange
+    };
+    if (this.c.form.state.isLoaded) {
+      if (this.$slots.default) {
+        editor = this.$slots.default(editorProps);
+      } else if (this.controller.editorProvider) {
+        const component = vue.resolveComponent(this.controller.editorProvider.formEditor);
+        editor = vue.h(component, {
+          ...editorProps
+        });
+      } else {
+        editor = vue.createVNode(vue.resolveComponent("notSupportedEditor"), {
+          "modelData": this.modelData.editor
+        }, null);
+      }
+    }
+    return vue.createVNode(vue.resolveComponent("iBizFormItemContainer"), {
+      "class": [this.ns.b(), this.ns.m(this.modelData.id)],
+      "required": this.c.state.required,
+      "error": this.c.state.error,
+      "label": this.captionText,
+      "label-pos": this.c.model.labelPos,
+      "label-width": this.c.model.labelWidth
+    }, _isSlot(editor) ? editor : {
+      default: () => [editor]
+    });
+  }
+});
+
+exports.FormItem = FormItem;
+exports.default = FormItem;

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

@@ -0,0 +1 @@
+.ibiz-form-item{--ibiz-form-item-label-color:var(--ibiz-color-text-0);--ibiz-form-item-text-color:var(--ibiz-color-text-0);--ibiz-form-item-bg-color:var(--ibiz-color-fill-0);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-header-6);--ibiz-form-item-error-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-error-color:var(--ibiz-color-danger);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-2);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:transparent;--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-caption-color:var(--ibiz-form-item-text-color);--ibiz-form-item-caption-font-size:var(--ibiz-form-item-font-size)}.ibiz-form-item .van-field{height:100%}.ibiz-form-item .van-field__body{height:100%}

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

@@ -0,0 +1,23 @@
+'use strict';
+
+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 FormItemProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFormItem");
+  }
+  async createController(detailModel, form, parent) {
+    const c = new runtime.FormItemController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.FormItemProvider = FormItemProvider;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var formItem = require('./form-item.cjs');
+var formItemContainer = require('./form-item-container/form-item-container.cjs');
+var formItem_provider = require('./form-item.provider.cjs');
+
+"use strict";
+const IBizFormItem = vue3Util.withInstall(formItem.FormItem, function(v) {
+  v.component(formItem.FormItem.name, formItem.FormItem);
+  v.component(formItemContainer.IBizFormItemContainer.name, formItemContainer.IBizFormItemContainer);
+  runtime.registerFormDetailProvider("FORMITEM", () => new formItem_provider.FormItemProvider());
+});
+
+exports.IBizFormItemContainer = formItemContainer.IBizFormItemContainer;
+exports.FormItemProvider = formItem_provider.FormItemProvider;
+exports.IBizFormItem = IBizFormItem;
+exports.default = IBizFormItem;

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./form-mdctrl-container.css');
+
+"use strict";
+const FormMDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
+  name: "FormMDCtrlContainer",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    buttonVisible: {
+      type: Boolean,
+      default: true,
+      required: false
+    }
+  },
+  emits: ["insertButtonClick"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("form-mdctrl");
+    const c = props.controller;
+    const handleRemove = () => {
+    };
+    const insertButtonClick = () => {
+      emit("insertButtonClick");
+    };
+    const hasCaption = c.model.showCaption && !!c.model.caption;
+    const ns2 = vue3Util.useNamespace("form-group");
+    return {
+      ns,
+      ns2,
+      c,
+      handleRemove,
+      insertButtonClick,
+      hasCaption
+    };
+  },
+  render() {
+    const renderFormContent = () => {
+      return this.$slots.default && this.$slots.default();
+    };
+    const renderMainContent = () => {
+      return vue.createVNode("div", {
+        "class": this.ns.b("main")
+      }, [[vue.createVNode("div", {
+        "class": [this.ns.b("title"), this.ns2.b("header")]
+      }, [vue.createVNode("span", {
+        "class": this.ns.b("caption")
+      }, [this.controller.model.showCaption && this.controller.model.caption]), this.buttonVisible && this.controller.isCreate && vue.createVNode(vue.resolveComponent("van-button"), {
+        "class": this.ns.b("add-btn"),
+        "onClick": () => this.insertButtonClick(),
+        "type": "primary"
+      }, {
+        default: () => [vue.createTextVNode("\u6DFB\u52A0")]
+      })]), renderFormContent()]]);
+    };
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.b(this.c.model.codeName), this.ns.b(this.c.model.contentType.toLowerCase()), ...this.controller.containerClass, this.ns.is("no-caption", !this.hasCaption)]
+    }, [renderMainContent()]);
+  }
+});
+
+exports.FormMDCtrlContainer = FormMDCtrlContainer;
+exports.default = FormMDCtrlContainer;

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

@@ -0,0 +1 @@
+.ibiz-form-mdctrl{min-height:var(--ibiz-form-mdctrl-min-height);--ibiz-form-mdctrl-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-btn-width:0;--ibiz-form-mdctrl-min-height:32px;--ibiz-form-mdctrl-content-min-height:72px}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content{display:flex;min-height:var(--ibiz-form-mdctrl-content-min-height);margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-container{width:100%}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-control{width:calc(100% - var(--ibiz-form-mdctrl-btn-width) - var(--ibiz-form-mdctrl-gap))}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-btn{height:100%;margin-left:var(--ibiz-form-mdctrl-gap);cursor:pointer;display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{display:flex;align-items:center;justify-content:space-between}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title .ibiz-form-mdctrl-caption{font-size:14px;font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main{position:relative}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main>.ibiz-form-mdctrl-form-content:nth-child(2) .ibiz-form-mdctrl-btn{position:relative;top:40px;height:-moz-fit-content;height:fit-content}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{position:absolute;top:0;right:0;z-index:2}.ibiz-form-mdctrl .ibiz-form-mdctrl-add-btn{height:30px}

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var formMdctrlContainer = require('../form-mdctrl-container/form-mdctrl-container.cjs');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const FormMDCtrlDataView = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFormMDCtrlDataView",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("form-mdctrl");
+    vue3Util.useController(props.controller);
+    const c = props.controller;
+    c.state = vue.reactive(c.state);
+    return {
+      ns,
+      c
+    };
+  },
+  render() {
+    let _slot;
+    const c = this.c;
+    const renderContent = () => {
+      if (c.controlModel && c.provider) {
+        const tempContext = c.parent.form.context.clone();
+        const controlProps = {
+          modelData: c.controlModel,
+          context: tempContext,
+          params: c.parent.form.params,
+          onSelectionChange: (arg) => c.onSelectionChange(arg),
+          onCreated: (event) => c.onDataViewCreated(event),
+          class: this.ns.b("form-content-control")
+        };
+        const controlComponent = vue.h(vue.resolveComponent(c.provider.component), controlProps);
+        return vue.createVNode("div", {
+          "class": this.ns.b("form-content")
+        }, [controlComponent, vue.createVNode("div", {
+          "class": this.ns.b("btn")
+        }, [c.parent.isDelete && vue.createVNode(vue.resolveComponent("van-button"), {
+          "type": "danger",
+          "class": this.ns.b("remove-btn"),
+          "disabled": !this.c.state.isSelect,
+          "onClick": () => this.c.onDataRemove()
+        }, {
+          default: () => [vue.createTextVNode("\u5220\u9664")]
+        })])]);
+      }
+    };
+    return vue.createVNode(formMdctrlContainer.FormMDCtrlContainer, {
+      "class": this.ns.b("data-view"),
+      "controller": c.parent,
+      "onInsertButtonClick": () => {
+        c.onDataInsert();
+      }
+    }, _isSlot(_slot = renderContent()) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+exports.FormMDCtrlDataView = FormMDCtrlDataView;
+exports.default = FormMDCtrlDataView;