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

package/es/control/form/form-detail/form-group-panel/form-group-panel.mjs

@@ -0,0 +1,125 @@
+import { isVNode, ref, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { FormGroupPanelController } from '@ibiz-template/runtime';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-group-panel.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const FormGroupPanel = /* @__PURE__ */ defineComponent({
+  name: "IBizFormGroupPanel",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: FormGroupPanelController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-group");
+    const isCollapse = 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 = 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 = createVNode(resolveComponent("iBizRow"), {
+      "slot": "content",
+      "layout": this.modelData.layout
+    }, _isSlot(_slot = defaultSlots.map((slot) => {
+      const props = slot.props;
+      if (!props || !props.controller) {
+        return slot;
+      }
+      return createVNode(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 = createVNode("div", {
+        "class": [this.ns.b("header")],
+        "onClick": this.changeCollapse
+      }, [createVNode("div", {
+        "class": [this.ns.be("header", "left")]
+      }, [createVNode("div", {
+        "class": [this.ns.e("caption")]
+      }, [this.captionText])]), this.modelData.uiactionGroup && createVNode("div", {
+        "class": [this.ns.be("header", "right")]
+      }, [createVNode(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 = createVNode("div", {
+        "class": [this.ns.b("footer")]
+      }, [createVNode("div", {
+        "class": this.ns.be("footer", "show-more-button"),
+        "onClick": () => {
+          state.isShowMore = !state.isShowMore;
+        }
+      }, [!state.isShowMore ? "\u663E\u793A\u66F4\u591A" : "\u6536\u8D77"])]);
+    }
+    return createVNode("div", {
+      "class": classArr
+    }, [header, createVNode("div", {
+      "class": [this.ns.b("content")]
+    }, [content]), footer]);
+  }
+});
+
+export { FormGroupPanel, FormGroupPanel as default };

package/es/control/form/form-detail/form-group-panel/form-group-panel.provider.d.ts

@@ -0,0 +1,15 @@
+import { FormController, FormGroupPanelController, IFormDetailContainerController, IFormDetailProvider } from '@ibiz-template/runtime';
+import { IDEFormGroupPanel } from '@ibiz/model-core';
+/**
+ * 表单分组面板适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class FormGroupPanelProvider
+ * @implements {EditorProvider}
+ */
+export declare class FormGroupPanelProvider implements IFormDetailProvider {
+    component: string;
+    createController(detailModel: IDEFormGroupPanel, form: FormController, parent: IFormDetailContainerController | undefined): Promise<FormGroupPanelController>;
+}

package/es/control/form/form-detail/form-group-panel/form-group-panel.provider.mjs

@@ -0,0 +1,21 @@
+import { FormGroupPanelController } from '@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 FormGroupPanelController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { FormGroupPanelProvider };

package/es/control/form/form-detail/form-group-panel/index.d.ts

@@ -0,0 +1,27 @@
+export * from './form-group-panel.provider';
+export declare const IBizFormGroupPanel: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormGroupPanel>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormGroupPanelController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    isCollapse: import("vue").Ref<boolean>;
+    captionText: import("vue").ComputedRef<any>;
+    changeCollapse: () => void;
+    onActionClick: (detail: import("@ibiz/model-core").IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormGroupPanel>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormGroupPanelController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizFormGroupPanel;

package/es/control/form/form-detail/form-group-panel/index.mjs

@@ -0,0 +1,18 @@
+import { registerFormDetailProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { FormGroupPanel } from './form-group-panel.mjs';
+import { FormGroupPanelProvider } from './form-group-panel.provider.mjs';
+
+"use strict";
+const IBizFormGroupPanel = withInstall(
+  FormGroupPanel,
+  function(v) {
+    v.component(FormGroupPanel.name, FormGroupPanel);
+    registerFormDetailProvider(
+      "GROUPPANEL",
+      () => new FormGroupPanelProvider()
+    );
+  }
+);
+
+export { FormGroupPanelProvider, IBizFormGroupPanel, IBizFormGroupPanel as default };

package/es/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/es/control/form/form-detail/form-item/form-item-container/form-item-container.d.ts

@@ -0,0 +1,45 @@
+import './form-item-container.scss';
+export declare const IBizFormItemContainer: import("vue").DefineComponent<{
+    required: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    labelPos: {
+        type: StringConstructor;
+        required: true;
+    };
+    labelWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    cssVars: import("vue").ComputedRef<Record<string, string>>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    required: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    labelPos: {
+        type: StringConstructor;
+        required: true;
+    };
+    labelWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    labelWidth: number;
+}, {}>;

package/es/control/form/form-detail/form-item/form-item-container/form-item-container.mjs

@@ -0,0 +1,90 @@
+import { computed, createVNode, createTextVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-item-container.css';
+
+"use strict";
+const IBizFormItemContainer = /* @__PURE__ */ 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 = useNamespace("form-item-container");
+    let labelAlign = "left";
+    let editorAlign = "right";
+    const cssVars = 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 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
+    }, [createVNode("div", {
+      "class": [this.ns.b("content")]
+    }, [this.labelPos === "LEFT" || this.labelPos === "TOP" ? createVNode("div", {
+      "class": [this.ns.e("label")],
+      "title": this.label
+    }, [createVNode("span", null, [this.label])]) : null, createVNode("div", {
+      "class": [this.ns.e("editor")]
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.labelPos === "RIGHT" || this.labelPos === "BOTTOM" ? createVNode("div", {
+      "class": [this.ns.e("label")],
+      "title": this.label
+    }, [createVNode("span", null, [createTextVNode(" "), this.label])]) : null]), this.error ? createVNode("div", {
+      "class": [this.ns.b("error")]
+    }, [this.error]) : null]);
+  }
+});
+
+export { IBizFormItemContainer };

package/es/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/es/control/form/form-detail/form-item/form-item.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import './form-item.scss';
+import { IDEFormItem } from '@ibiz/model-core';
+import { FormItemController } from '@ibiz-template/runtime';
+export declare const FormItem: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IDEFormItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof FormItemController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    captionText: import("vue").ComputedRef<any>;
+    c: FormItemController;
+    onValueChange: (val: unknown, name?: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IDEFormItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof FormItemController;
+        required: true;
+    };
+}>>, {}, {}>;
+export default FormItem;

package/es/control/form/form-detail/form-item/form-item.mjs

@@ -0,0 +1,85 @@
+import { isVNode, computed, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-item.css';
+import { FormItemController } from '@ibiz-template/runtime';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const FormItem = /* @__PURE__ */ defineComponent({
+  name: "IBizFormItem",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: FormItemController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-item");
+    const c = props.controller;
+    const onValueChange = (val, name) => {
+      props.controller.setDataValue(val, name);
+    };
+    const {
+      captionItemName,
+      caption
+    } = props.modelData;
+    const captionText = 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 = resolveComponent(this.controller.editorProvider.formEditor);
+        editor = h(component, {
+          ...editorProps
+        });
+      } else {
+        editor = createVNode(resolveComponent("notSupportedEditor"), {
+          "modelData": this.modelData.editor
+        }, null);
+      }
+    }
+    return createVNode(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]
+    });
+  }
+});
+
+export { FormItem, FormItem as default };

package/es/control/form/form-detail/form-item/form-item.provider.d.ts

@@ -0,0 +1,15 @@
+import { FormController, FormItemController, IFormDetailContainerController, IFormDetailProvider } from '@ibiz-template/runtime';
+import { IDEFormDetail } from '@ibiz/model-core';
+/**
+ * 表单项适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class FormItemProvider
+ * @implements {EditorProvider}
+ */
+export declare class FormItemProvider implements IFormDetailProvider {
+    component: string;
+    createController(detailModel: IDEFormDetail, form: FormController, parent: IFormDetailContainerController | undefined): Promise<FormItemController>;
+}

package/es/control/form/form-detail/form-item/form-item.provider.mjs

@@ -0,0 +1,21 @@
+import { FormItemController } from '@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 FormItemController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { FormItemProvider };

package/es/control/form/form-detail/form-item/index.d.ts

@@ -0,0 +1,27 @@
+export * from './form-item.provider';
+export * from './form-item-container/form-item-container';
+export declare const IBizFormItem: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormItemController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    captionText: import("vue").ComputedRef<any>;
+    c: import("@ibiz-template/runtime").FormItemController;
+    onValueChange: (val: unknown, name?: string | undefined) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormItemController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizFormItem;

package/es/control/form/form-detail/form-item/index.mjs

@@ -0,0 +1,14 @@
+import { registerFormDetailProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { FormItem } from './form-item.mjs';
+import { IBizFormItemContainer } from './form-item-container/form-item-container.mjs';
+import { FormItemProvider } from './form-item.provider.mjs';
+
+"use strict";
+const IBizFormItem = withInstall(FormItem, function(v) {
+  v.component(FormItem.name, FormItem);
+  v.component(IBizFormItemContainer.name, IBizFormItemContainer);
+  registerFormDetailProvider("FORMITEM", () => new FormItemProvider());
+});
+
+export { FormItemProvider, IBizFormItem, IBizFormItemContainer, IBizFormItem as default };

package/es/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/es/control/form/form-detail/form-mdctrl/form-mdctrl-container/form-mdctrl-container.d.ts

@@ -0,0 +1,36 @@
+import { PropType } from 'vue';
+import './form-mdctrl-container.scss';
+import { FormMDCtrlController } from '@ibiz-template/runtime';
+export declare const FormMDCtrlContainer: import("vue").DefineComponent<{
+    controller: {
+        type: PropType<FormMDCtrlController>;
+        required: true;
+    };
+    buttonVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    ns2: import("@ibiz-template/core").Namespace;
+    c: FormMDCtrlController;
+    handleRemove: () => void;
+    insertButtonClick: () => void;
+    hasCaption: boolean | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "insertButtonClick"[], "insertButtonClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: PropType<FormMDCtrlController>;
+        required: true;
+    };
+    buttonVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
+}>> & {
+    onInsertButtonClick?: ((...args: any[]) => any) | undefined;
+}, {
+    buttonVisible: boolean;
+}, {}>;
+export default FormMDCtrlContainer;

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-container/form-mdctrl-container.mjs

@@ -0,0 +1,66 @@
+import { createVNode, resolveComponent, createTextVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './form-mdctrl-container.css';
+
+"use strict";
+const FormMDCtrlContainer = /* @__PURE__ */ defineComponent({
+  name: "FormMDCtrlContainer",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    buttonVisible: {
+      type: Boolean,
+      default: true,
+      required: false
+    }
+  },
+  emits: ["insertButtonClick"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("form-mdctrl");
+    const c = props.controller;
+    const handleRemove = () => {
+    };
+    const insertButtonClick = () => {
+      emit("insertButtonClick");
+    };
+    const hasCaption = c.model.showCaption && !!c.model.caption;
+    const ns2 = useNamespace("form-group");
+    return {
+      ns,
+      ns2,
+      c,
+      handleRemove,
+      insertButtonClick,
+      hasCaption
+    };
+  },
+  render() {
+    const renderFormContent = () => {
+      return this.$slots.default && this.$slots.default();
+    };
+    const renderMainContent = () => {
+      return createVNode("div", {
+        "class": this.ns.b("main")
+      }, [[createVNode("div", {
+        "class": [this.ns.b("title"), this.ns2.b("header")]
+      }, [createVNode("span", {
+        "class": this.ns.b("caption")
+      }, [this.controller.model.showCaption && this.controller.model.caption]), this.buttonVisible && this.controller.isCreate && createVNode(resolveComponent("van-button"), {
+        "class": this.ns.b("add-btn"),
+        "onClick": () => this.insertButtonClick(),
+        "type": "primary"
+      }, {
+        default: () => [createTextVNode("\u6DFB\u52A0")]
+      })]), renderFormContent()]]);
+    };
+    return 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()]);
+  }
+});
+
+export { FormMDCtrlContainer, FormMDCtrlContainer as default };