@ibiz-template/mob-vue3-components 0.7.41-alpha.19-lts.1 → 0.7.41-alpha.21

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

@@ -1 +1 @@
-.ibiz-form-button{--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);width:100%;height:100%;padding:var(--ibiz-spacing-tight);overflow:hidden}.ibiz-form-button .van-button{width:100%}.ibiz-form-button .van-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--ibiz-spacing-extra-tight)}.ibiz-form-button .van-button .ibiz-form-button-content i,.ibiz-form-button .van-button .ibiz-form-button-content img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height)}.ibiz-form-button.is-loading .van-button .ibiz-icon{display:none}
+.ibiz-form-button{--ibiz-form-button-width-icon:var(--ibiz-width-icon-medium);--ibiz-form-button-height-icon:var(--ibiz-width-icon-medium);--ibiz-form-button-spacing-padding:var(--ibiz-spacing-base) 0 var(--ibiz-spacing-base) var(--ibiz-spacing-base);--ibiz-form-button-spacing-gap:var(--ibiz-spacing-extra-tight);width:100%;height:100%;padding:var(--ibiz-form-button-spacing-padding);overflow:hidden}.ibiz-form-button .van-button{width:100%}.ibiz-form-button .van-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--ibiz-form-button-spacing-gap)}.ibiz-form-button .van-button .ibiz-form-button-content i,.ibiz-form-button .van-button .ibiz-form-button-content img{display:inline-block;max-width:var(--ibiz-form-button-width-icon);max-height:var(--ibiz-form-button-height-icon)}.ibiz-form-button.is-loading .van-button .ibiz-icon{display:none}

package/lib/control/form/form-detail/form-button-list/form-button-list.css

@@ -1 +1 @@
-.ibiz-form-button-list{width:100%;height:100%}
+.ibiz-form-button-list{--ibiz-form-button-list-spacing-padding:var(--ibiz-spacing-base);width:100%;height:100%;padding:var(--ibiz-form-button-list-spacing-padding)}

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

@@ -1 +1 @@
-.ibiz-form-druipart{--ibiz-form-druipart-bg-color:var(--ibiz-color-bg-1);--ibiz-form-druipart-padding:0;--ibiz-form-druipart-border-radius:var(--ibiz-border-radius-small);--ibiz-form-druipart-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-druipart-caption-font-size:var(--ibiz-font-size-header-6);--ibiz-form-druipart-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-druipart-caption-padding:var(--ibiz-spacing-base);width:100%;height:100%;padding:var(--ibiz-form-druipart-padding);background-color:var(--ibiz-form-druipart-bg-color);border-radius:var(--ibiz-form-druipart-border-radius)}.ibiz-form-druipart__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:var(--ibiz-form-druipart-caption-padding);font-size:var(--ibiz-form-druipart-caption-font-size);font-weight:var(--ibiz-form-druipart-caption-font-weight);color:var(--ibiz-form-druipart-caption-text-color)}.ibiz-form-druipart .ibiz-view-content{margin-top:0}
+.ibiz-form-druipart{--ibiz-form-druipart-color-bg:var(--ibiz-color-bg-1);--ibiz-form-druipart-spacing-padding:0;--ibiz-form-druipart-radius-border:var(--ibiz-border-radius-small);--ibiz-form-druipart-caption-color-text:var(--ibiz-color-text-0);--ibiz-form-druipart-caption-spacing-padding:var(--ibiz-spacing-base);--ibiz-form-druipart-caption-font-fontSize:var(--ibiz-font-size-header-6);--ibiz-form-druipart-caption-font-fontWeight:var(--ibiz-font-weight-bold);--ibiz-form-druipart-caption-font-lineHeight:var(--ibiz-font-size-header-5);width:100%;height:100%;padding:var(--ibiz-form-druipart-spacing-padding);background-color:var(--ibiz-form-druipart-color-bg);border-radius:var(--ibiz-form-druipart-radius-border)}.ibiz-form-druipart__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:var(--ibiz-form-druipart-caption-spacing-padding);font-size:var(--ibiz-form-druipart-caption-font-fontSize);font-weight:var(--ibiz-form-druipart-caption-font-fontWeight);line-height:var(--ibiz-form-druipart-caption-font-lineHeight);color:var(--ibiz-form-druipart-caption-color-text)}.ibiz-form-druipart .ibiz-view-content{margin-top:0}

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

@@ -57,6 +57,9 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     const {
       state
     } = this.controller;
+    const {
+      enableAnchor
+    } = this.modelData;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
       "slot": "content",
@@ -99,7 +102,10 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
         "class": [this.ns.be("header", "left")]
       }, [vue.createVNode("div", {
         "class": [this.ns.e("caption"), ...this.controller.labelClass]
-      }, [this.captionText])]), this.modelData.uiactionGroup && vue.createVNode("div", {
+      }, [this.modelData.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "class": this.ns.em("caption", "icon"),
+        "icon": this.modelData.sysImage
+      }, null), this.captionText])]), this.modelData.uiactionGroup && vue.createVNode("div", {
         "class": [this.ns.be("header", "right")]
       }, [vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
         "class": this.ns.e("toolbar"),
@@ -122,11 +128,21 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
       }, [!state.isShowMore ? ibiz.i18n.t("control.form.formGroupPanel.showMore") : ibiz.i18n.t("app.retract")])]);
     }
     return vue.createVNode("div", {
-      "class": classArr,
+      "class": [classArr, this.ns.is("loading", this.controller.state.loading)],
       "onClick": (event) => this.controller.onClick(event)
-    }, [header, vue.createVNode("div", {
+    }, [enableAnchor ? vue.createVNode(vue.resolveComponent("van-index-anchor"), {
+      "index": this.captionText
+    }, _isSlot(header) ? header : {
+      default: () => [header]
+    }) : header, vue.createVNode("div", {
       "class": [this.ns.e("content")]
-    }, [content]), footer]);
+    }, [content]), footer, this.controller.state.loading ? vue.createVNode(vue.resolveComponent("van-loading"), {
+      "class": this.ns.e("loading"),
+      "type": "spinner",
+      "vertical": true
+    }, {
+      default: () => [`${ibiz.i18n.t("util.loading")}...`]
+    }) : null]);
   }
 });
 

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

@@ -1 +1 @@
-.ibiz-form-group{--ibiz-form-group-bg-color:var(--ibiz-color-bg-1);--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-padding:var(--ibiz-spacing-extra-tight);--ibiz-form-group-header-bg-color:var(--ibiz-color-bg-1);--ibiz-form-group-header-padding:var(--ibiz-spacing-base) var(--ibiz-spacing-base) var(--ibiz-spacing-tight);--ibiz-form-group-header-border-color:var(--ibiz-color-border);--ibiz-form-group-caption-text-color:var(--ibiz-color-text-2);--ibiz-form-group-caption-font-size:var(--ibiz-font-size-header-6);--ibiz-form-group-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-group-content-bg-color:var(--ibiz-color-bg-1);--ibiz-form-group-content-padding:var(--ibiz-spacing-tight);--ibiz-form-group-content-margin:0}.ibiz-form-group{overflow:hidden;background-color:var(--ibiz-form-group-bg-color)}.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--style2{background-color:var(--ibiz-color-bg-0);padding:var(--ibiz-form-group-padding)}.ibiz-form-group--style2>.ibiz-form-group-header{border-radius:var(--ibiz-border-radius-large) var(--ibiz-border-radius-large) 0 0}.ibiz-form-group--style2 .ibiz-form-group__content{padding:var(--ibiz-border-radius-large) 0;border-radius:var(--ibiz-border-radius-large);background-color:var(--ibiz-form-group-content-bg-color)}.ibiz-form-group--style2>.ibiz-form-group-header+.ibiz-form-group__content{padding-top:0;border-radius:0 0 var(--ibiz-border-radius-large) var(--ibiz-border-radius-large)}.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;align-items:center;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{display:flex;align-items:center;justify-content:flex-end;height:100%}.ibiz-form-group-header__right .van-button{height:100%;color:var(--ibiz-color-link);background:0 0;border:none}.ibiz-form-group--show-header content,.ibiz-form-group--show-header>.ibiz-form-group{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)}
+.ibiz-form-group{--ibiz-form-group-color-bg:var(--ibiz-color-bg-1);--ibiz-form-group-color-more:var(--ibiz-color-primary);--ibiz-form-group-color-loading-bg:rgba(var(--ibiz-grey-9), 0.1);--ibiz-form-group-color-button:var(--ibiz-color-link);--ibiz-form-group-spacing-padding:var(--ibiz-spacing-extra-tight);--ibiz-form-group-spacing-footer-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-form-group-header-color-bg:var(--ibiz-color-bg-0);--ibiz-form-group-header-color-border:var(--ibiz-color-border);--ibiz-form-group-header-spacing-padding:var(--ibiz-spacing-base);--ibiz-form-group-caption-color-text:var(--ibiz-color-text-1);--ibiz-form-group-caption-spacing-icon-gap:var(--ibiz-spacing-tight);--ibiz-form-group-caption-font-fontSize:var(--ibiz-font-size-header-6);--ibiz-form-group-caption-font-fontWeight:var(--ibiz-font-weight-regular);--ibiz-form-group-caption-font-lineHeight:var(--van-cell-group-title-line-height);--ibiz-form-group-content-color-bg:var(--ibiz-color-bg-1);--ibiz-form-group-content-spacing-padding:0;--ibiz-form-group-content-spacing-margin:0}.ibiz-form-group{overflow:hidden;background-color:var(--ibiz-form-group-color-bg)}.ibiz-form-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-group-caption-font-fontSize);font-weight:var(--ibiz-form-group-caption-font-fontWeight);line-height:var(--ibiz-form-group-caption-font-lineHeight);color:var(--ibiz-form-group-caption-color-text)}.ibiz-form-group__caption--icon{padding-right:var(--ibiz-form-group-caption-spacing-icon-gap)}.ibiz-form-group__toolbar{display:flex;flex-wrap:wrap;align-items:center;text-align:right}.ibiz-form-group__content{padding:var(--ibiz-form-group-content-spacing-padding)}.ibiz-form-group--style2{padding:var(--ibiz-form-group-spacing-padding);background-color:var(--ibiz-form-group-header-color-bg)}.ibiz-form-group--style2>.ibiz-form-group-header{background-color:var(--ibiz-form-group-content-color-bg);border-bottom:1px solid var(--ibiz-form-group-header-color-border)}.ibiz-form-group--style2 .ibiz-form-group__content{background-color:var(--ibiz-form-group-content-color-bg)}.ibiz-form-group__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--ibiz-form-group-color-loading-bg)}.ibiz-form-group.is-loading{position:relative}.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-header{border-bottom:none}.ibiz-form-group-collapse.is-collapse>.ibiz-form-group__content{display:none}.ibiz-form-group-header{display:flex;align-items:center;padding:var(--ibiz-form-group-header-spacing-padding);background-color:var(--ibiz-form-group-header-color-bg)}.ibiz-form-group-header__left,.ibiz-form-group-header__right{display:inline-block;width:50%}.ibiz-form-group-header__right{display:flex;align-items:center;justify-content:flex-end;height:100%}.ibiz-form-group-header__right .van-button{height:100%;color:var(--ibiz-form-group-color-button);background:0 0;border:none}.ibiz-form-group--show-header content,.ibiz-form-group--show-header>.ibiz-form-group{margin-bottom:var(--ibiz-form-group-content-spacing-margin);background-color:var(--ibiz-form-group-content-color-bg)}.ibiz-form-group-footer{padding:var(--ibiz-form-group-spacing-footer-padding)}.ibiz-form-group-footer__show-more-button{display:inline-block;color:var(--ibiz-form-group-color-more)}

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

@@ -16,6 +16,7 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     var _a, _b;
     const ns = vue3Util.useNamespace("form-item-container");
+    const editorNs = vue3Util.useNamespace("editor");
     let labelAlign = "left";
     let editorAlign = "right";
     const c = props.controller;
@@ -84,29 +85,28 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
         editorAlign = editorContentAlign;
       }
       const result = {
-        "label-align": labelAlign,
-        "editor-align": editorAlign
+        "font-textAlign": labelAlign
       };
-      if (labelWidth !== 130) {
+      if (labelWidth && labelWidth !== 130) {
         Object.assign(result, {
-          "label-width": `${labelWidth}px`
+          "width-label": `${labelWidth / 16}rem`
         });
       }
-      if (hideClear) {
-        Object.assign(result, {
-          "required-style": "none"
-        });
-      } else {
-        Object.assign(result, {
-          "required-style": "initial"
-        });
-      }
-      return ns.cssVarBlock(result);
+      return {
+        ...ns.cssVarBlock(result),
+        ...editorNs.cssVarBlock({
+          "default-text-align": editorAlign,
+          "default-required-style": hideClear ? "none" : "initial"
+        })
+      };
     });
     const handleClick = (e) => {
       enableInputTip ? c.loadInputTip() : e.stopPropagation();
     };
     const renderLabel = () => {
+      const {
+        enableAnchor
+      } = c.model;
       return vue.createVNode(vue.resolveComponent("van-popover"), {
         "class": ns.e("popover"),
         "placement": labelPos === "RIGHT" ? "bottom-end" : "bottom-start"
@@ -133,7 +133,11 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
           }, null), sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
             "class": ns.em("label", "icon"),
             "icon": sysImage
-          }, null), vue.createVNode("span", null, [c.labelCaption])]);
+          }, null), enableAnchor ? vue.createVNode(vue.resolveComponent("van-index-anchor"), {
+            "index": c.labelCaption
+          }, {
+            default: () => [c.labelCaption]
+          }) : vue.createVNode("span", null, [c.labelCaption])]);
         }
       });
     };

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

@@ -1 +1 @@
-.ibiz-form-item-container{--ibiz-form-item-container-label-width:8.125rem;--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-container-padding:var(--ibiz-spacing-base);--ibiz-form-item-container-left-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-1);--ibiz-form-item-container-label-font-size:var(--ibiz-font-size-header-6);--ibiz-form-item-container-label-text-color:var(--ibiz-color-text-0);--ibiz-form-item-container-container-error-padding:0 var(--ibiz-spacing-base);--ibiz-form-item-container-editor-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none) var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-form-item-container-border:0.0625rem var(--ibiz-color-border) solid;--ibiz-form-item-container-border-radius:0.25rem;--ibiz-form-item-label-line-height:1;--ibiz-form-item-label-font-size:var(--ibiz-font-size-header-5);--ibiz-form-item-label-text-color:var(--ibiz-color-text-0);position:relative;width:100%;height:100%;padding:var(--ibiz-form-item-container-container-padding);font-size:var(--ibiz-form-item-font-size);background-color:var(--ibiz-form-item-container-bg-color);border-width:calc(100% - var(--ibiz-spacing-base) * 2);border-radius:var(--ibiz-border-radius-small)}.ibiz-form-item-container.is-show-underLine::after{position:absolute;z-index:1;width:calc(100% - var(--ibiz-spacing-base) * 2);height:.0625rem;content:"";background-color:var(--ibiz-color-border);transform:scaleY(.5)}.ibiz-form-item-container.is-show-border .ibiz-form-item-container__editor{margin-top:.25rem;min-height:calc(var(--ibiz-form-item-line-height) + 2 * var(--ibiz-spacing-tight));outline:var(--ibiz-form-item-container-border);border-radius:var(--ibiz-form-item-container-border-radius);padding:var(--ibiz-spacing-tight)}.ibiz-form-item-container.is-show-border.ibiz-form-item-container--bottom .ibiz-form-item-container__editor{margin-top:0;margin-bottom:.25rem}.ibiz-form-item-container__popover.van-popover{font-size:var(--ibiz-font-size-header-6)}.ibiz-form-item-container__popover.van-popover table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popover.van-popover table tr td,.ibiz-form-item-container__popover.van-popover table tr th{border:1px solid var(--ibiz-color-border);padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight)}.ibiz-form-item-container__popover--content{overflow:auto;max-height:30vh;padding:var(--ibiz-spacing-tight)}.ibiz-form-item-container__popover--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__label{display:flex;flex-shrink:0;align-items:center;position:relative;width:var(--ibiz-form-item-container-label-width);overflow:visible;color:var(--ibiz-form-item-label-text-color);height:var(--ibiz-form-item-line-height);line-height:var(--ibiz-form-item-line-height)}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-extra-tight)}.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);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);min-height:calc(var(--ibiz-form-item-line-height) + 2 * var(--ibiz-spacing-tight));--van-cell-line-height:var(--ibiz-form-item-line-height);--van-cell-line-height:var(--ibiz-form-item-line-height)}.ibiz-form-item-container__editor .van-cell{padding-bottom:0}.ibiz-form-item-container__editor ::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color);-webkit-text-fill-color:var(--ibiz-form-item-placeholder-color)}.ibiz-form-item-container__editor ::placeholder{color:var(--ibiz-form-item-placeholder-color);-webkit-text-fill-color:var(--ibiz-form-item-placeholder-color)}.ibiz-form-item-container.is-required .ibiz-form-item-container__label::before{position:absolute;top:.1875rem;left:-.625rem;display:inline-block;height:100%;font-size:.875rem;color:var(--ibiz-form-item-error-color);content:"*"}.ibiz-form-item-container.is-error::after{background-color:var(--ibiz-form-item-error-color)}.ibiz-form-item-container.is-error .ibiz-form-item-container-content{border-color:var(--ibiz-form-item-error-color)}.ibiz-form-item-container--left .ibiz-form-item-container__editor{min-height:var(--ibiz-form-item-line-height)}.ibiz-form-item-container--left::after{bottom:0}.ibiz-form-item-container--right .ibiz-form-item-container__editor{min-height:var(--ibiz-form-item-line-height)}.ibiz-form-item-container--right::after{bottom:0}.ibiz-form-item-container--right.is-required .ibiz-form-item-container__label::before{right:-.625rem;left:auto}.ibiz-form-item-container--right .ibiz-form-item-container__editor{position:relative;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--top .ibiz-form-item-container__editor{padding:var(--ibiz-form-item-container-editor-padding)}.ibiz-form-item-container--bottom .ibiz-form-item-container__editor{padding:var(--ibiz-form-item-container-editor-padding)}.ibiz-form-item-container-content{position:relative}.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)}
+.ibiz-form-item-container{--ibiz-form-item-container-color-bg:var(--ibiz-color-bg-2);--ibiz-form-item-container-color-underline:var(--ibiz-color-border);--ibiz-form-item-container-color-error:var(--ibiz-color-danger);--ibiz-form-item-container-width-label:8.125rem;--ibiz-form-item-container-width-underline:calc(100% - var(--ibiz-spacing-base) * 2);--ibiz-form-item-container-width-border:calc(100% - var(--ibiz-spacing-base) * 2);--ibiz-form-item-container-height-underLine:var(--ibiz-border-thickness-control);--ibiz-form-item-container-spacing-container-padding:var(--ibiz-spacing-base);--ibiz-form-item-container-spacing-editor-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none);--ibiz-form-item-container-spacing-border-editor-padding:var(--ibiz-spacing-tight);--ibiz-form-item-container-radius-border:var(--ibiz-border-radius-small);--ibiz-form-item-container-font-fontSize:var(--ibiz-font-size-header-6);--ibiz-form-item-container-font-lineHeight:var(--ibiz-editor-default-line-height);--ibiz-form-item-container-font-error-fontSize:var(--ibiz-font-size-regular);--ibiz-form-item-container-border:var(--ibiz-border-thickness-control) var(--ibiz-color-border) solid;--ibiz-form-item-label-color-text:var(--ibiz-color-text-0);--ibiz-form-item-label-spacing-icon-gap:var(--ibiz-spacing-extra-tight);position:relative;width:100%;height:100%;padding:var(--ibiz-form-item-container-spacing-container-padding);font-size:var(--ibiz-form-item-container-font-fontSize);background-color:var(--ibiz-form-item-container-color-bg);border-width:var(--ibiz-form-item-container-width-border);border-radius:var(--ibiz-form-item-container-radius-border)}.ibiz-form-item-container.is-show-underLine::after{position:absolute;z-index:1;width:var(--ibiz-form-item-container-width-underline);height:var(--ibiz-form-item-container-height-underLine);content:"";background-color:var(--ibiz-form-item-container-color-underline);transform:scaleY(.5)}.ibiz-form-item-container.is-show-border .ibiz-form-item-container__editor{outline:var(--ibiz-form-item-container-border);border-radius:var(--ibiz-form-item-container-radius-border);padding:var(--ibiz-form-item-container-spacing-border-editor-padding)}.ibiz-form-item-container__popover.van-popover{--ibiz-form-item-popover-color-link:var(--ibiz-color-link);--ibiz-form-item-popover-spacing-padding:var(--ibiz-spacing-tight);--ibiz-form-item-popover-spacing-cell-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);--ibiz-form-item-popover-font-fontSize:var(--ibiz-font-size-header-6);--ibiz-form-item-popover-border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-border);font-size:var(--ibiz-form-item-popover-font-fontSize)}.ibiz-form-item-container__popover.van-popover table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popover.van-popover table tr td,.ibiz-form-item-container__popover.van-popover table tr th{border:var(--ibiz-form-item-popover-border);padding:var(--ibiz-form-item-popover-spacing-padding)}.ibiz-form-item-container__popover--content{overflow:auto;max-height:30vh;padding:var(--ibiz-form-item-popover-spacing-padding)}.ibiz-form-item-container__popover--content a{color:var(--ibiz-form-item-popover-color-link)}.ibiz-form-item-container__label{display:flex;flex-shrink:0;align-items:center;position:relative;width:var(--ibiz-form-item-container-width-label);overflow:visible;color:var(--ibiz-form-item-label-color-text);height:var(--ibiz-form-item-container-font-lineHeight);line-height:var(--ibiz-form-item-container-font-lineHeight)}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-form-item-label-spacing-icon-gap)}.ibiz-form-item-container__label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:100%;text-align:var(--ibiz-form-item-container-font-textAlign)}.ibiz-form-item-container__editor{width:100%}.ibiz-form-item-container.is-required .ibiz-form-item-container__label::before{position:absolute;left:calc(-1 * var(--ibiz-spacing-tight));display:inline-block;color:var(--ibiz-form-item-container-color-error);content:"*"}.ibiz-form-item-container.is-error::after{background-color:var(--ibiz-form-item-container-color-error)}.ibiz-form-item-container.is-error .ibiz-form-item-container-content{border-color:var(--ibiz-form-item-container-color-error)}.ibiz-form-item-container--left .ibiz-form-item-container__editor{min-height:var(--ibiz-form-item-container-font-lineHeight)}.ibiz-form-item-container--left::after{bottom:0}.ibiz-form-item-container--right .ibiz-form-item-container__editor{min-height:var(--ibiz-form-item-container-font-lineHeight)}.ibiz-form-item-container--right::after{bottom:0}.ibiz-form-item-container--right.is-required .ibiz-form-item-container__label::before{right:calc(-1 * var(--ibiz-spacing-tight));left:auto}.ibiz-form-item-container--right .ibiz-form-item-container__editor{position:relative;width:calc(100% - var(--ibiz-form-item-container-width-label))}.ibiz-form-item-container--left .ibiz-form-item-container__editor{width:calc(100% - var(--ibiz-form-item-container-width-label))}.ibiz-form-item-container--top .ibiz-form-item-container__editor{padding:var(--ibiz-form-item-container-spacing-editor-padding)}.ibiz-form-item-container--bottom .ibiz-form-item-container__editor{padding:var(--ibiz-form-item-container-spacing-editor-padding)}.ibiz-form-item-container-content{position:relative}.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:var(--ibiz-form-item-container-width-underline);font-size:var(--ibiz-form-item-container-font-error-fontSize);line-height:var(--ibiz-form-item-container-font-fontSize);color:var(--ibiz-form-item-container-color-error);text-align:var(--ibiz-editor-default-text-align)}

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

@@ -40,13 +40,14 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!this.c.state.visible) {
       return null;
     }
     let editor = null;
     const editMode = (_c = (_b = (_a = this.controller.editor) == null ? void 0 : _a.model) == null ? void 0 : _b.editorParams) == null ? void 0 : _c.editMode;
     const editorProps = {
+      style: (_d = this.controller.editor) == null ? void 0 : _d.style,
       value: this.controller.value,
       data: this.controller.data,
       controller: this.controller.editor,

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

@@ -1 +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-text-2);--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-3);--ibiz-form-item-disabled-color:var(--ibiz-color-text-3);--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:1.25rem;--ibiz-form-item-caption-color:var(--ibiz-form-item-text-color);--ibiz-form-item-caption-font-size:var(--ibiz-form-item-font-size);--ibiz-editor-default-line-height:1.25rem}.ibiz-form-item .van-field{height:100%}.ibiz-form-item .van-field__body{height:100%}
+.ibiz-form-item .van-field{height:100%}.ibiz-form-item .van-field__body{height:100%}

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

@@ -6,9 +6,6 @@ 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: {
@@ -19,26 +16,12 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-form");
-    const showActions = vue.computed(() => {
-      return props.controller.enableCreate || props.controller.enableDelete;
-    });
-    const renderAddBtn = () => {
-      let _slot;
-      return vue.createVNode(vue.resolveComponent("van-button"), {
-        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
-        "onClick": () => props.controller.create()
-      }, _isSlot(_slot = ibiz.i18n.t("app.add")) ? _slot : {
-        default: () => [_slot]
-      });
-    };
     const onCreated = (id, event) => {
       props.controller.setFormController(id, event.ctrl);
     };
     return {
       ns,
-      showActions,
-      onCreated,
-      renderAddBtn
+      onCreated
     };
   },
   render() {

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

@@ -1 +0,0 @@
-.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.css

@@ -1 +1 @@
-.ibiz-form-mdctrl-md{display:flex;flex-direction:column;height:100%}.ibiz-form-mdctrl-md-content{flex-grow:1;margin:0 var(--ibiz-spacing-tight)}.ibiz-form-mdctrl-md-actions{display:flex;gap:var(--ibiz-spacing-tight);padding:var(--ibiz-spacing-tight) 0;margin:0 var(--ibiz-spacing-tight)}.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)}
+.ibiz-form-mdctrl-md{--ibiz-form-mdctrl-md-width-button:calc(100% - var(--ibiz-spacing-base) * 2);--ibiz-form-mdctrl-md-spacing-content-margin:0 var(--ibiz-spacing-tight);--ibiz-form-mdctrl-md-spacing-actions-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-md-spacing-actions-padding:var(--ibiz-spacing-tight) 0;--ibiz-form-mdctrl-md-spacing-actions-margin:0 var(--ibiz-spacing-tight);display:flex;flex-direction:column;height:100%}.ibiz-form-mdctrl-md-content{flex-grow:1;margin:var(--ibiz-form-mdctrl-md-spacing-content-margin)}.ibiz-form-mdctrl-md-content.ibiz-control{width:auto}.ibiz-form-mdctrl-md-actions{display:flex;gap:var(--ibiz-form-mdctrl-md-spacing-actions-gap);padding:var(--ibiz-form-mdctrl-md-spacing-actions-padding);margin:var(--ibiz-form-mdctrl-md-spacing-actions-margin)}.ibiz-form-mdctrl-md-actions .van-button+.van-button{margin-left:0}.ibiz-form-mdctrl-md-actions__btn{width:var(--ibiz-form-mdctrl-md-width-button)}

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

@@ -5,6 +5,7 @@ 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({
@@ -41,6 +42,12 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
+      case "Grid":
+        return vue.createVNode(repeaterGrid.RepeaterGrid, {
+          "class": classNames,
+          "controller": this.controller,
+          "onChange": this.onDataChange
+        }, null);
       default:
         return vue.createVNode("div", {
           "class": classNames

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

@@ -0,0 +1,241 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
+require('./repeater-grid.css');
+
+"use strict";
+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 = [];
+    const items = vue.ref([]);
+    const ctx = vue3Util.useCtx();
+    const formControllers = vue.reactive([]);
+    const container = vue.ref();
+    const table = vue.ref();
+    const thead = vue.ref();
+    const flexWidth = vue.ref(0);
+    const gridWidth = vue.ref("");
+    let resizeObserver;
+    core.recursiveIterate(props.controller.repeatedForm, (item) => {
+      var _a;
+      if (item.detailType === "FORMITEM") {
+        if (((_a = item.editor) == null ? void 0 : _a.editorType) !== "HIDDEN") {
+          formItems.push(item);
+        }
+      }
+    }, {
+      childrenFields: ["deformPages", "deformTabPages", "deformDetails"]
+    });
+    const onSingleValueChange = (value, index) => {
+      const arrData = [...props.controller.value || []];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    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);
+      props.controller.setRepeaterController(`${formControllers.length - 1}`, formC);
+      formC.evt.on("onFormDataChange", (event) => {
+        const item = event.data[0];
+        const formData = item instanceof runtime.ControlVO ? item.clone() : {
+          ...item
+        };
+        const index = formControllers.indexOf(formC);
+        onSingleValueChange(formData, index);
+      });
+    };
+    vue.watch(() => props.controller.value, (newVal) => {
+      if (Array.isArray(newVal)) {
+        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);
+          }
+        });
+        items.value = newVal;
+      } else {
+        items.value = [];
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    vue.onMounted(() => {
+      if (!container.value || !table.value || !thead.value) {
+        return;
+      }
+      resizeObserver = new ResizeObserver(() => {
+        if (!container.value || !table.value || !thead.value) {
+          return;
+        }
+        const containerWidth = container.value.offsetWidth;
+        const theadRow = thead.value.children[0];
+        if (!theadRow)
+          return;
+        const thElements = Array.from(theadRow.children);
+        if (thElements.length === 0)
+          return;
+        let fixedWidthSum = 0;
+        const flexThElements = [];
+        thElements.forEach((th) => {
+          const isFlow = th.dataset.flex === "true";
+          if (isFlow) {
+            flexThElements.push(th);
+          } else {
+            const thWidth = th.style.width ? parseFloat(th.style.width) : th.offsetWidth;
+            fixedWidthSum += thWidth;
+          }
+        });
+        const availableSpace = containerWidth - fixedWidthSum - 1;
+        const flowColumnCount = flexThElements.length;
+        if (flowColumnCount > 0 && availableSpace > 0) {
+          flexWidth.value = availableSpace / flowColumnCount;
+          gridWidth.value = `${containerWidth}px`;
+        } else {
+          flexWidth.value = 0;
+          gridWidth.value = `${fixedWidthSum}px`;
+        }
+      });
+      resizeObserver.observe(container.value);
+    });
+    vue.onUnmounted(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    return {
+      ns,
+      formItems,
+      formControllers,
+      items,
+      container,
+      table,
+      thead,
+      flexWidth,
+      gridWidth
+    };
+  },
+  render() {
+    const isEmpty = !this.items.length;
+    const headers = [vue.createVNode("th", {
+      "class": this.ns.b("index-cell"),
+      "style": {
+        width: `66px`
+      }
+    }, [ibiz.i18n.t("control.form.repeaterGrid.index")]), this.formItems.map((item) => {
+      return vue.createVNode("th", {
+        "class": this.ns.bm("cell", item.id),
+        "data-flex": item.labelWidth === 1,
+        "style": {
+          width: `${item.labelWidth === 1 ? `${this.flexWidth}px` : `${item.labelWidth}px`}`
+        }
+      }, [item.caption]);
+    }), (this.controller.enableCreate || this.controller.enableDelete) && vue.createVNode("th", {
+      "class": this.ns.b("action-cell"),
+      "style": {
+        width: `80px`
+      }
+    }, null)];
+    const rows = (isEmpty && this.controller.enableCreate ? [{}] : this.items).map((_row, index) => {
+      return vue.createVNode("tr", null, [vue.createVNode("td", {
+        "class": this.ns.b("index-cell")
+      }, [isEmpty ? "" : index + 1]), this.formItems.map((item) => {
+        if (isEmpty) {
+          return vue.createVNode("td", {
+            "class": this.ns.bm("cell", item.id)
+          }, null);
+        }
+        const formC = vue.toRaw(this.formControllers[index]);
+        if (!formC || !formC.state.isLoaded) {
+          return vue.createVNode("td", null, [ibiz.i18n.t("control.form.repeaterGrid.absentOrLoad")]);
+        }
+        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.state.readonly,
+            onChange: (val, name) => {
+              formItemC.setDataValue(val, name);
+            }
+          });
+        }
+        return vue.createVNode("td", {
+          "class": this.ns.bm("cell", item.id)
+        }, [editor]);
+      }), (this.controller.enableCreate || this.controller.enableDelete) && vue.createVNode("td", {
+        "class": this.ns.b("action-cell")
+      }, [vue.createVNode("div", {
+        "class": this.ns.b("action-group")
+      }, [this.controller.enableCreate && vue.createVNode("ion-icon", {
+        "name": "add-outline",
+        "title": ibiz.i18n.t("app.add"),
+        "class": this.ns.b("add-btn"),
+        "onClick": () => {
+          this.controller.create(isEmpty ? 0 : index + 1);
+        }
+      }, null), this.controller.enableDelete && !isEmpty && vue.createVNode("ion-icon", {
+        "name": "remove-outline",
+        "title": ibiz.i18n.t("app.delete"),
+        "class": this.ns.b("remove-btn"),
+        "onClick": () => {
+          this.controller.remove(index);
+          this.formControllers.splice(index, 1);
+        }
+      }, null)])])]);
+    });
+    return vue.createVNode("div", {
+      "class": this.ns.b(),
+      "ref": "container"
+    }, [vue.createVNode("table", {
+      "class": this.ns.b("table"),
+      "ref": "table",
+      "style": {
+        width: this.gridWidth
+      }
+    }, [vue.createVNode("thead", {
+      "ref": "thead"
+    }, [vue.createVNode("tr", null, [headers])]), vue.createVNode("tbody", null, [rows]), isEmpty && !this.controller.enableCreate && vue.createVNode("tbody", {
+      "class": this.ns.b("empty-content")
+    }, [vue.createVNode("td", {
+      "colspan": this.formItems.length + 1
+    }, [ibiz.i18n.t("control.form.repeaterGrid.noData")])])])]);
+  }
+});
+
+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{--ibiz-repeater-grid-color-th:var(--ibiz-color-text-2);--ibiz-repeater-grid-color-td:var(--ibiz-color-text-0);--ibiz-repeater-grid-color-btn:var(--ibiz-color-text-2);--ibiz-repeater-grid-spacing-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);--ibiz-repeater-grid-spacing-icon-gap:var(--ibiz-spacing-tight);--ibiz-repeater-grid-font-lineHeight:var(--ibiz-editor-default-line-height);--ibiz-repeater-grid-font-icon-fontSize:var(--ibiz-width-icon-large);--ibiz-repeater-grid-border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-border);width:100%;overflow:auto}.ibiz-repeater-grid table{table-layout:fixed;border-collapse:collapse}.ibiz-repeater-grid th{min-width:0;padding:var(--ibiz-repeater-grid-spacing-padding);overflow:hidden;line-height:var(--ibiz-repeater-grid-font-lineHeight);color:var(--ibiz-repeater-grid-color-th);text-align:center;text-overflow:ellipsis;white-space:nowrap;border:var(--ibiz-repeater-grid-border)}.ibiz-repeater-grid td{min-width:0;padding:var(--ibiz-repeater-grid-spacing-padding);overflow:hidden;line-height:var(--ibiz-repeater-grid-font-lineHeight);color:var(--ibiz-repeater-grid-color-td);text-align:center;border:var(--ibiz-repeater-grid-border)}.ibiz-repeater-grid .ibiz-repeater-grid-action-cell{border:none}.ibiz-repeater-grid-action-group{display:flex;align-items:center;justify-content:center;height:var(--ibiz-repeater-grid-font-lineHeight)}.ibiz-repeater-grid-action-group ion-icon{box-sizing:border-box;font-size:var(--ibiz-repeater-grid-font-icon-fontSize);color:var(--ibiz-repeater-grid-color-btn);cursor:pointer;border:var(--ibiz-repeater-grid-border)}.ibiz-repeater-grid-action-group ion-icon+ion-icon{margin-left:var(--ibiz-repeater-grid-spacing-icon-gap)}.ibiz-repeater-grid-empty-content td{color:var(--ibiz-repeater-grid-color-th)}

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

@@ -1 +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)}
+.ibiz-repeater-single-form{width:100%}.ibiz-repeater-single-form__content{width:100%}

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

@@ -1 +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-tight) var(--ibiz-spacing-base);--ibiz-form-mdctrl-header-border-color:var(--ibiz-color-border);--ibiz-form-mdctrl-caption-text-color:var(--ibiz-color-text-2);--ibiz-form-mdctrl-caption-font-size:var(--ibiz-font-size-header-6);--ibiz-form-mdctrl-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-mdctrl-caption-height:2rem;--ibiz-form-mdctrl-caption-line-height:2rem;height:100%}.ibiz-form-mdctrl__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:var(--ibiz-form-mdctrl-caption-height);font-size:var(--ibiz-form-mdctrl-caption-font-size);font-weight:var(--ibiz-form-mdctrl-caption-font-weight);line-height:var(--ibiz-form-mdctrl-caption-line-height);color:var(--ibiz-form-mdctrl-caption-text-color)}.ibiz-form-mdctrl--has-value .ibiz-form-mdctrl-header{display:none}.ibiz-form-mdctrl-header{display:flex;padding:var(--ibiz-form-mdctrl-header-padding)}
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-color-header-bg:var(--ibiz-color-bg-0);--ibiz-form-mdctrl-color-text:var(--ibiz-color-text-1);--ibiz-form-mdctrl-spacing-header-padding:var(--ibiz-spacing-base);--ibiz-form-mdctrl-font-caption-fontSize:var(--ibiz-font-size-header-6);--ibiz-form-mdctrl-font-caption-fontWeight:var(--ibiz-font-weight-regular);--ibiz-form-mdctrl-font-caption-linHeight:var(--ibiz-font-size-header-5);height:100%}.ibiz-form-mdctrl__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-mdctrl-font-caption-fontSize);font-weight:var(--ibiz-form-mdctrl-font-caption-fontWeight);line-height:var(--ibiz-form-mdctrl-font-caption-linHeight);color:var(--ibiz-form-mdctrl-color-text)}.ibiz-form-mdctrl--has-value .ibiz-form-mdctrl-header{display:none}.ibiz-form-mdctrl-header{display:flex;padding:var(--ibiz-form-mdctrl-spacing-header-padding);background-color:var(--ibiz-form-mdctrl-color-header-bg)}

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

@@ -5,9 +5,6 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./mdctrl-container.css');
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-}
 const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
   name: "IBizMDCtrlContainer",
   props: {
@@ -36,9 +33,6 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
     emit
   }) {
     const ns = vue3Util.useNamespace("mdctrl-container");
-    const showActions = vue.computed(() => {
-      return props.enableCreate || props.enableDelete;
-    });
     const renderAddBtn = (index, showButton = true) => {
       if (!props.enableCreate) {
         return null;
@@ -53,43 +47,9 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
         }, null), ibiz.i18n.t("app.add")]
       });
     };
-    const renderRemoveBtn = (item, index) => {
-      let _slot2;
-      if (!props.enableDelete) {
-        return null;
-      }
-      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
-        let _slot;
-        return vue.createVNode(vue.resolveComponent("van-button"), {
-          "class": [ns.e("remove"), ns.e("btn")],
-          "size": "small",
-          "onClick": () => {
-            emit("removeClick", item, index);
-          }
-        }, _isSlot(_slot = ibiz.i18n.t("app.delete")) ? _slot : {
-          default: () => [_slot]
-        });
-      }
-      return vue.createVNode(vue.resolveComponent("van-button"), {
-        "class": [ns.e("remove"), ns.e("btn")],
-        "type": "danger",
-        "size": "small",
-        "onClick": () => {
-          emit("removeClick", item, index);
-        }
-      }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
-        default: () => [_slot2]
-      });
-    };
-    const renderActionBtn = (item, index) => {
-      return [renderAddBtn(index, false), renderRemoveBtn(item, index)];
-    };
     return {
       ns,
-      showActions,
-      renderAddBtn,
-      renderRemoveBtn,
-      renderActionBtn
+      renderAddBtn
     };
   },
   render() {
@@ -107,11 +67,27 @@ const MDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
         "class": this.ns.b("item-header")
       }, [vue.createVNode("div", {
         "class": this.ns.be("item-header", "caption")
-      }, [this.caption || ""]), vue.createVNode("div", {
-        "class": this.ns.be("item-header", "action")
-      }, [this.renderActionBtn(item, index)])]), vue.createVNode("div", {
+      }, [this.caption || ""])]), vue.createVNode("div", {
         "class": this.ns.b("item-content")
-      }, [formComponent])]);
+      }, [vue.createVNode(vue.resolveComponent("van-swipe-cell"), null, {
+        default: () => {
+          return formComponent;
+        },
+        right: () => {
+          if (!this.enableDelete) {
+            return;
+          }
+          return vue.createVNode(vue.resolveComponent("van-button"), {
+            "class": this.ns.be("item-content", "remove-btn"),
+            "type": "danger",
+            "text": ibiz.i18n.t("app.delete"),
+            "square": true,
+            "onClick": () => {
+              this.$emit("removeClick", item, index);
+            }
+          }, null);
+        }
+      })])]);
     }), this.enableCreate && vue.createVNode("div", {
       "class": this.ns.b("footer")
     }, [this.renderAddBtn()])]);