@ibiz-template/mob-vue3-components 0.0.5 → 0.0.6

package/lib/control/app-menu/app-menu.cjs

@@ -26,16 +26,13 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       default: () => ({})
     }
   },
-  setup(props) {
+  setup() {
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
     const {
       controlClass,
       ns
     } = vue3Util.prepareControl(c);
     const activeName = vue.ref();
-    const columnNum = vue.computed(() => {
-      return 5;
-    });
     const route = vueRouter.useRoute();
     const calcCurMenu = () => {
       const allItems = c.getAllItems();
@@ -65,145 +62,49 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         activeName.value = activeMenu ? activeMenu.id : "";
       }
     });
-    const renderDefault = () => {
-      var _a;
-      const {
-        model,
-        state
-      } = c;
-      let appMenu = null;
-      if (state.isCreated && ((_a = model.appMenuItems) == null ? void 0 : _a.length)) {
-        appMenu = model.appMenuItems.map((item) => {
-          if (item.itemType === "MENUITEM") {
-            const itemState = state.menuItemsState[item.id];
-            if (itemState.visible) {
-              return vue.createVNode(vue.resolveComponent("van-tabbar-item"), {
-                "name": item.id
-              }, {
-                icon: () => vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "slot": "icon",
-                  "class": ns.e("icon"),
-                  "icon": item.sysImage
-                }, null),
-                default: () => vue.createVNode("span", null, [item.caption])
-              });
-            }
-          }
-          return null;
-        });
-      }
-      return vue.createVNode("div", {
-        "class": [ns.b(), ns.m(props.modelData.id), ns.m(model.controlStyle || "default")]
-      }, [vue.createVNode(vue.resolveComponent("van-tabbar"), {
-        "modelValue": activeName.value,
-        "onChange": onTabChange
-      }, _isSlot(appMenu) ? appMenu : {
-        default: () => [appMenu]
-      })]);
-    };
-    const renderIconView = () => {
-      const {
-        model
-      } = c;
-      const {
-        controlStyle
-      } = model;
-      return vue.createVNode(vue.resolveComponent("van-grid"), {
-        "clickable": true,
-        "column-num": columnNum.value,
-        "border": false,
-        "class": [ns.b(), ns.b(controlStyle.toLowerCase()), ns.m(props.modelData.id)]
-      }, {
-        default: () => {
-          var _a;
-          return [(_a = model == null ? void 0 : model.appMenuItems) == null ? void 0 : _a.map((item) => {
-            return item.itemType === "MENUITEM" && vue.createVNode(vue.resolveComponent("van-grid-item"), {
-              "class": ns.b("item"),
-              "text": item.caption,
-              "onClick": (event) => c.onClickMenuItem(item.id, event, false)
-            }, {
-              icon: () => {
-                return vue.createVNode("div", {
-                  "class": ns.b("icon")
-                }, [item.sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "icon": item.sysImage
-                }, null) : vue.createVNode(vue.resolveComponent("van-icon"), {
-                  "name": "setting-o"
-                }, null)]);
-              }
-            });
-          })];
-        }
-      });
-    };
-    const renderListView = () => {
-      const {
-        model
-      } = c;
-      const {
-        controlStyle
-      } = model;
-      return vue.createVNode(vue.resolveComponent("van-list"), {
-        "class": [ns.b(), ns.b(controlStyle.toLowerCase()), ns.m(props.modelData.id)]
-      }, {
-        default: () => {
-          var _a;
-          return [(_a = model == null ? void 0 : model.appMenuItems) == null ? void 0 : _a.map((item) => {
-            let renderItem = null;
-            switch (item.itemType) {
-              case "MENUITEM":
-                renderItem = vue.createVNode(vue.resolveComponent("van-cell"), {
-                  "class": [ns.b("item")],
-                  "is-link": true,
-                  "center": true,
-                  "title": item.caption,
-                  "onClick": (event) => c.onClickMenuItem(item.id, event, false)
-                }, {
-                  icon: () => {
-                    return item.sysImage && vue.createVNode("div", {
-                      "class": ns.b("icon")
-                    }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                      "icon": item.sysImage
-                    }, null)]);
-                  }
-                });
-                break;
-              case "SEPERATOR":
-                renderItem = vue.createVNode(vue.resolveComponent("van-divider"), null, null);
-                break;
-              default:
-                break;
-            }
-            return renderItem;
-          })];
-        }
-      });
-    };
     return {
       controlClass,
+      activeName,
       c,
       onTabChange,
-      ns,
-      renderDefault,
-      renderIconView,
-      renderListView
+      ns
     };
   },
   render() {
+    var _a;
     const {
-      model
+      model,
+      state
     } = this.c;
-    const {
-      controlStyle
-    } = model;
-    switch (controlStyle) {
-      case "ICONVIEW":
-        return this.renderIconView();
-      case "LISTVIEW":
-        return this.renderListView();
-      default:
-        return this.renderDefault();
+    let appMenu = null;
+    if (state.isCreated && ((_a = model.appMenuItems) == null ? void 0 : _a.length)) {
+      appMenu = model.appMenuItems.map((item) => {
+        if (item.itemType === "MENUITEM" && item.hidden !== true) {
+          const itemState = state.menuItemsState[item.id];
+          if (itemState.visible) {
+            return vue.createVNode(vue.resolveComponent("van-tabbar-item"), {
+              "name": item.id
+            }, {
+              icon: () => vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "slot": "icon",
+                "class": this.ns.e("icon"),
+                "icon": item.sysImage
+              }, null),
+              default: () => vue.createVNode("span", null, [item.caption])
+            });
+          }
+        }
+        return null;
+      });
     }
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.m(model.controlStyle || "default")]
+    }, [vue.createVNode(vue.resolveComponent("van-tabbar"), {
+      "modelValue": this.activeName,
+      "onChange": this.onTabChange
+    }, _isSlot(appMenu) ? appMenu : {
+      default: () => [appMenu]
+    })]);
   }
 });
 

package/lib/control/app-menu/app-menu.css

@@ -1 +1 @@
-.ibiz-control-appmenu{--ibiz-control-appmenu-list-view-icon-size:var(--ibiz-font-size-header-4);--ibiz-control-appmenu-list-view-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-list-view-padding:0 1rem;--ibiz-control-appmenu-list-view-item-padding:0.5rem 0;--ibiz-control-appmenu-icon-width:100%;--ibiz-control-appmenu-icon-view-icon-size:2.1875rem;--ibiz-control-appmenu-icon-view-icon-margin:0.3125rem;width:100%;height:100%}.ibiz-control-appmenu--default{height:var(--van-tabbar-height)}.ibiz-control-appmenu-listview{--van-cell-border-color:var(--ibiz-color-border);--van-divider-margin:0.125rem;--van-divider-border-color:transparent;--van-cell-horizontal-padding:0.75rem;--van-cell-active-color:transparent;--van-cell-right-icon-color:var(--van-gray-6);padding:var(--ibiz-control-appmenu-list-view-padding)}.ibiz-control-appmenu-listview .ibiz-control-appmenu-item{padding:var(--ibiz-control-appmenu-list-view-item-padding);font-size:var(--ibiz-control-appmenu-list-view-font-size);border-bottom:var(--ibiz-color-border) solid .0625rem}.ibiz-control-appmenu-listview .ibiz-control-appmenu-item:last-child{border-width:0}.ibiz-control-appmenu-listview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-control-appmenu-list-view-icon-size)}.ibiz-control-appmenu-iconview .van-grid-item__text{display:-webkit-box;flex:1;height:-moz-fit-content;height:fit-content;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ibiz-control-appmenu-iconview .van-badge__wrapper{display:flex;justify-content:center;width:100%}.ibiz-control-appmenu-iconview .van-grid-item__content--clickable:active{background-color:inherit}.ibiz-control-appmenu-iconview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);margin-bottom:var(--ibiz-control-appmenu-icon-view-icon-margin);font-size:var(--ibiz-control-appmenu-icon-view-icon-size)}.ibiz-control-appmenu-nav{height:calc(100% - var(--van-tabbar-height))}
+.ibiz-control-appmenu{width:100%;height:100%}.ibiz-control-appmenu--default{height:var(--van-tabbar-height)}.ibiz-control-appmenu-nav{height:calc(100% - var(--van-tabbar-height))}

package/lib/control/app-menu-icon-view/app-menu-icon-view.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./app-menu-icon-view.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAppMenuIconViewControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup() {
+    const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
+    const {
+      controlClass,
+      ns
+    } = vue3Util.prepareControl(c);
+    const columnNum = vue.computed(() => {
+      return 5;
+    });
+    return {
+      controlClass,
+      c,
+      columnNum,
+      ns
+    };
+  },
+  render() {
+    const {
+      model
+    } = this.c;
+    const {
+      controlStyle
+    } = model;
+    return vue.createVNode(vue.resolveComponent("van-grid"), {
+      "clickable": true,
+      "column-num": this.columnNum,
+      "border": false,
+      "class": [this.ns.b(), this.ns.b(controlStyle.toLowerCase()), this.ns.m(this.modelData.id)]
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = model == null ? void 0 : model.appMenuItems) == null ? void 0 : _a.map((item) => {
+          return item.itemType === "MENUITEM" && item.hidden !== true && vue.createVNode(vue.resolveComponent("van-grid-item"), {
+            "class": this.ns.b("item"),
+            "text": item.caption,
+            "onClick": (event) => this.c.onClickMenuItem(item.id, event, false)
+          }, {
+            icon: () => {
+              return vue.createVNode("div", {
+                "class": this.ns.b("icon")
+              }, [item.sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": item.sysImage
+              }, null) : vue.createVNode(vue.resolveComponent("van-icon"), {
+                "name": "setting-o"
+              }, null)]);
+            }
+          });
+        })];
+      }
+    });
+  }
+});
+
+exports.AppMenuIconViewControl = AppMenuIconViewControl;

package/lib/control/app-menu-icon-view/app-menu-icon-view.css

@@ -0,0 +1 @@
+.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-icon-width:100%;--ibiz-control-appmenu-icon-view-icon-size:2.1875rem;--ibiz-control-appmenu-icon-view-icon-margin:0.3125rem}.ibiz-control-appmenu-iconview .van-grid-item__text{display:-webkit-box;flex:1;height:-moz-fit-content;height:fit-content;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ibiz-control-appmenu-iconview .van-badge__wrapper{display:flex;justify-content:center;width:100%}.ibiz-control-appmenu-iconview .van-grid-item__content--clickable:active{background-color:inherit}.ibiz-control-appmenu-iconview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);margin-bottom:var(--ibiz-control-appmenu-icon-view-icon-margin);font-size:var(--ibiz-control-appmenu-icon-view-icon-size)}

package/lib/control/app-menu-icon-view/app-menu-icon-view.provider.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+"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 AppMenuIconViewProvider {
+  constructor() {
+    __publicField(this, "component", "IBizAppMenuIconViewControl");
+  }
+}
+
+exports.AppMenuIconViewProvider = AppMenuIconViewProvider;

package/lib/control/app-menu-icon-view/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var appMenuIconView_provider = require('./app-menu-icon-view.provider.cjs');
+var appMenuIconView = require('./app-menu-icon-view.cjs');
+
+"use strict";
+const IBizAppMenuIconViewControl = vue3Util.withInstall(
+  appMenuIconView.AppMenuIconViewControl,
+  function(v) {
+    v.component(appMenuIconView.AppMenuIconViewControl.name, appMenuIconView.AppMenuIconViewControl);
+    runtime.registerControlProvider(
+      `${runtime.ControlType.APP_MENU}_ICONVIEW`,
+      () => new appMenuIconView_provider.AppMenuIconViewProvider()
+    );
+  }
+);
+
+exports.IBizAppMenuIconViewControl = IBizAppMenuIconViewControl;
+exports.default = IBizAppMenuIconViewControl;

package/lib/control/app-menu-list-view/app-menu-list-view.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./app-menu-list-view.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+const AppMenuListViewControl = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAppMenuListViewControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup() {
+    const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
+    const {
+      controlClass,
+      ns
+    } = vue3Util.prepareControl(c);
+    return {
+      controlClass,
+      c,
+      ns
+    };
+  },
+  render() {
+    const {
+      model
+    } = this.c;
+    const {
+      controlStyle
+    } = model;
+    return vue.createVNode(vue.resolveComponent("van-list"), {
+      "class": [this.ns.b(), this.ns.b(controlStyle.toLowerCase()), this.ns.m(this.modelData.id)]
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = model == null ? void 0 : model.appMenuItems) == null ? void 0 : _a.map((item) => {
+          if (item.hidden === true) {
+            return null;
+          }
+          let renderItem = null;
+          switch (item.itemType) {
+            case "MENUITEM":
+              renderItem = vue.createVNode(vue.resolveComponent("van-cell"), {
+                "class": [this.ns.b("item")],
+                "is-link": true,
+                "center": true,
+                "clickable": true,
+                "title": item.caption,
+                "onClick": (event) => this.c.onClickMenuItem(item.id, event, false)
+              }, {
+                icon: () => {
+                  return item.sysImage && vue.createVNode("div", {
+                    "class": this.ns.b("icon")
+                  }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                    "icon": item.sysImage
+                  }, null)]);
+                }
+              });
+              break;
+            case "SEPERATOR":
+              renderItem = vue.createVNode(vue.resolveComponent("van-divider"), null, null);
+              break;
+            default:
+              break;
+          }
+          return renderItem;
+        })];
+      }
+    });
+  }
+});
+
+exports.AppMenuListViewControl = AppMenuListViewControl;

package/lib/control/app-menu-list-view/app-menu-list-view.css

@@ -0,0 +1 @@
+.ibiz-control-appmenu-listview{--ibiz-control-appmenu-list-view-icon-size:var(--ibiz-font-size-header-4);--ibiz-control-appmenu-list-view-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-list-view-padding:0;--ibiz-control-appmenu-list-view-item-padding:0.5rem 1rem;--van-cell-border-color:var(--ibiz-color-border);--van-divider-margin:0.125rem;--van-divider-border-color:transparent;--van-cell-horizontal-padding:0.75rem;--van-cell-active-color:transparent;--van-cell-right-icon-color:var(--van-gray-6);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-appmenu-listview .ibiz-control-appmenu-item{padding:var(--ibiz-control-appmenu-list-view-item-padding);font-size:var(--ibiz-control-appmenu-list-view-font-size)}.ibiz-control-appmenu-listview .ibiz-control-appmenu-item:last-child{border-width:0}.ibiz-control-appmenu-listview .van-cell::after{left:0}.ibiz-control-appmenu-listview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-control-appmenu-list-view-icon-size)}

package/lib/control/app-menu-list-view/app-menu-list-view.provider.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+"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 AppMenuListViewProvider {
+  constructor() {
+    __publicField(this, "component", "IBizAppMenuListViewControl");
+  }
+}
+
+exports.AppMenuListViewProvider = AppMenuListViewProvider;

package/lib/control/app-menu-list-view/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var appMenuListView_provider = require('./app-menu-list-view.provider.cjs');
+var appMenuListView = require('./app-menu-list-view.cjs');
+
+"use strict";
+const IBizAppMenuListViewControl = vue3Util.withInstall(
+  appMenuListView.AppMenuListViewControl,
+  function(v) {
+    v.component(appMenuListView.AppMenuListViewControl.name, appMenuListView.AppMenuListViewControl);
+    runtime.registerControlProvider(
+      `${runtime.ControlType.APP_MENU}_LISTVIEW`,
+      () => new appMenuListView_provider.AppMenuListViewProvider()
+    );
+  }
+);
+
+exports.IBizAppMenuListViewControl = IBizAppMenuListViewControl;
+exports.default = IBizAppMenuListViewControl;

package/lib/control/dashboard/portlet/menu-portlet/menu-portlet.cjs

@@ -3,7 +3,6 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
-var index = require('../../../app-menu/index.cjs');
 
 "use strict";
 const MenuPortlet = /* @__PURE__ */ vue.defineComponent({
@@ -39,7 +38,7 @@ const MenuPortlet = /* @__PURE__ */ vue.defineComponent({
       "controller": this.controller,
       "class": classArr
     }, {
-      default: () => [this.menu && vue.createVNode(index.IBizAppMenuControl, {
+      default: () => [this.menu && vue.createVNode(vue.resolveComponent("iBizControlShell"), {
         "modelData": this.menu,
         "context": context,
         "params": params

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

@@ -51,7 +51,8 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
     }, [vue.createVNode(vue.resolveComponent("van-button"), {
       "onClick": this.controller.onClick.bind(this.controller),
       "loading": this.controller.state.loading,
-      "disabled": this.controller.state.disabled
+      "disabled": this.controller.state.disabled,
+      "size": "small"
     }, {
       default: () => [vue.createVNode("div", {
         "class": this.ns.b("content")

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

@@ -1 +1 @@
-.ibiz-form-button{--ibiz-form-button-icon-margin:var(--ibiz-spacing-extra-tight);--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%;height:100%}.ibiz-form-button .van-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start}.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 .van-button .ibiz-form-button-content .ibiz-icon+.ibiz-form-button-content--caption{margin-left:var(--ibiz-form-button-icon-margin)}.ibiz-form-button.is-loading .van-button .ibiz-icon{display:none}
+.ibiz-form-button{--ibiz-form-button-icon-margin:var(--ibiz-spacing-extra-tight);--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}.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 .van-button .ibiz-form-button-content .ibiz-icon+.ibiz-form-button-content--caption{margin-left:var(--ibiz-form-button-icon-margin)}.ibiz-form-button.is-loading .van-button .ibiz-icon{display:none}

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

@@ -41,7 +41,7 @@ const IBizFormPageItem = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return vue.createVNode(vue.resolveComponent("iBizRow"), {
-      "class": [this.ns.b(), this.ns.m(this.modelData.id)],
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass],
       "layout": this.modelData.layout
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;

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

@@ -1 +1 @@
-.ibiz-form-page-item{--ibiz-form-page-item-gap:var(--ibiz-spacing-tight);--ibiz-form-page-item-margin:0;gap:var(--ibiz-form-page-item-gap);margin:var(--ibiz-form-page-item-margin);border-radius:var(--ibiz-border-radius-small)}
+.ibiz-form-page-item{--ibiz-form-page-item-margin:0 0 var(--ibiz-spacing-tight) 0;border-radius:var(--ibiz-border-radius-small)}.ibiz-form-page-item>.van-col{margin:var(--ibiz-form-page-item-margin)}

package/lib/control/form/form-detail/form-tab-page/form-tab-page.cjs

@@ -35,7 +35,7 @@ const FormTabPage = /* @__PURE__ */ vue.defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     return vue.createVNode(vue.resolveComponent("iBizRow"), {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName)],
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
       "layout": this.modelData.layout
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;

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

@@ -34,8 +34,8 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
     var _a, _b, _c;
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
-    return vue.createVNode(vue.resolveComponent("el-tabs"), {
-      "class": [(this.ns.b(), this.ns.m(this.modelData.codeName))],
+    return vue.createVNode(vue.resolveComponent("van-tabs"), {
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
       "model-value": (_c = this.modelData.deformTabPages) == null ? void 0 : _c[0].id
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
@@ -46,13 +46,21 @@ const FormTabPanel = /* @__PURE__ */ vue.defineComponent({
       if (!c.state.visible && !c.state.keepAlive) {
         return null;
       }
-      return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
+      return vue.createVNode(vue.resolveComponent("van-tab"), {
         "class": this.ns.b("tab-item"),
-        "label": c.model.caption,
+        "title": c.model.caption,
         "name": c.model.id,
+        "title-class": c.labelClass,
         "lazy": true
-      }, _isSlot(slot) ? slot : {
-        default: () => [slot]
+      }, {
+        default: () => slot,
+        title: () => {
+          return vue.createVNode("span", {
+            "class": this.ns.e("caption")
+          }, [c.model.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": c.model.sysImage
+          }, null), c.model.showCaption && c.model.caption]);
+        }
       });
     })) ? _slot : {
       default: () => [_slot]

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

@@ -1 +1 @@
-.ibiz-form-tab-panel{width:100%;height:100%}
+.ibiz-form-tab-panel{width:100%;height:100%;overflow:auto}.ibiz-form-tab-panel__caption{display:flex;align-items:center;justify-content:center}