@ibiz-template/vue3-components 0.7.13-alpha.0 → 0.7.13

package/es/panel-component/short-cut/short-cut.mjs

@@ -1,9 +1,10 @@
-import { getCurrentInstance, ref, createVNode, resolveComponent, defineComponent } from 'vue';
+import { getCurrentInstance, ref, reactive, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
 import { PanelItemController, OpenAppViewCommand } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import draggable from 'vuedraggable';
-import './short-cut.css';
 import { IBizContext } from '@ibiz-template/core';
+import './short-cut.css';
 
 "use strict";
 const ShortCut = /* @__PURE__ */ defineComponent({
@@ -24,35 +25,47 @@ const ShortCut = /* @__PURE__ */ defineComponent({
   setup(props) {
     const ns = useNamespace("short-cut");
     const vue = getCurrentInstance().proxy;
+    const router = useRouter();
     const isShowToolbar = ref(false);
     const isShowMore = ref(false);
-    const data = ref(ibiz.util.shortCut.data);
+    const data = reactive(ibiz.util.shortCut.data);
     const dragCache = {
       newIndex: 0,
       oldIndex: 0
     };
+    const openModeMap = /* @__PURE__ */ new Map([["ROUTE_MODAL", "INDEXVIEWTAB_POPUPMODAL"], ["MODAL", "POPUPMODAL"], ["DRAWER", "DRAWER_RIGHT"]]);
+    const onShortCutChange = (items) => {
+      if (data.length === 0 && isShowMore.value) {
+        isShowMore.value = false;
+      }
+      vue.$forceUpdate();
+    };
+    onMounted(() => {
+      ibiz.util.shortCut.onChange(onShortCutChange);
+    });
+    onUnmounted(() => {
+      ibiz.util.shortCut.offChange(onShortCutChange);
+    });
     const onShowChange = () => {
       isShowToolbar.value = !isShowToolbar.value;
       if (isShowToolbar.value) {
         isShowMore.value = false;
       }
     };
-    const getOpenMode = (openMode) => {
-      switch (openMode) {
-        case "ROUTE_MODAL":
-          return "INDEXVIEWTAB_POPUPMODAL";
-        case "MODAL":
-          return "POPUPMODAL";
-        case "DRAWER":
-          return "DRAWER_RIGHT";
-        default:
-      }
-    };
     const onClick = (item) => {
       isShowMore.value = false;
-      ibiz.commands.execute(OpenAppViewCommand.TAG, item.appViewId, IBizContext.create(item.context), item.params, {
-        openMode: getOpenMode(item.openMode)
-      });
+      if (item.openMode === "ROUTE") {
+        const fullPath = item.fullPath.substring(1);
+        if (router.currentRoute.value.fullPath !== fullPath) {
+          router.push({
+            path: item.fullPath.substring(1)
+          });
+        }
+      } else {
+        ibiz.commands.execute(OpenAppViewCommand.TAG, item.appViewId, IBizContext.create(item.context), item.params, {
+          openMode: openModeMap.get(item.openMode)
+        });
+      }
     };
     const onChange = (evt) => {
       if (evt.moved) {
@@ -63,18 +76,16 @@ const ShortCut = /* @__PURE__ */ defineComponent({
         dragCache.oldIndex = evt.removed.oldIndex;
         ibiz.util.shortCut.changeIndex(dragCache.newIndex, dragCache.oldIndex);
       }
-      vue.$forceUpdate();
     };
     const onDelete = (event, key) => {
       event.stopPropagation();
       ibiz.util.shortCut.removeShortCut(key);
-      vue.$forceUpdate();
     };
     const renderDraggable = (isVertical) => {
       return createVNode(draggable, {
         "itemKey": "key",
         "class": [ns.e("draggable"), ns.is("vertical", isVertical), ns.is("horizontal", !isVertical)],
-        "modelValue": data.value,
+        "modelValue": data,
         "group": props.controller.model.id,
         "onChange": (evt) => onChange(evt)
       }, {
@@ -85,13 +96,14 @@ const ShortCut = /* @__PURE__ */ defineComponent({
           if (isVertical && !isShowToolbar.value || isVertical && isShowToolbar.value && index > 5 || !isVertical && index < 6) {
             return createVNode("div", {
               "class": ns.e("item"),
+              "title": element.caption,
               "onClick": () => onClick(element)
             }, [createVNode("svg", {
               "viewBox": "0 0 16 16",
               "class": ["drag-icon", "icon"],
               "xmlns": "http://www.w3.org/2000/svg",
-              "height": "14px",
-              "width": "14px",
+              "height": "16px",
+              "width": "16px",
               "focusable": "false"
             }, [createVNode("g", {
               "id": "drag-icon/drag--",
@@ -104,14 +116,17 @@ const ShortCut = /* @__PURE__ */ defineComponent({
             }, [createVNode("path", {
               "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z",
               "id": "drag-icon-air"
-            }, null)])])]), createVNode("ion-icon", {
-              "class": ["icon", "caption"],
+            }, null)])])]), element.icon ? createVNode(resolveComponent("iBizIcon"), {
+              "class": ["caption-icon", "icon"],
+              "icon": element.icon
+            }, null) : createVNode("ion-icon", {
+              "class": ["caption-icon", "icon"],
               "name": "ellipsis-horizontal-circle-outline"
             }, null), createVNode("div", {
               "class": ns.em("item", "caption")
-            }, [element.name]), createVNode("ion-icon", {
-              "class": ["close-icon", "icon"],
+            }, [element.caption]), createVNode("ion-icon", {
               "name": "close-outline",
+              "class": ["close-icon", "icon"],
               "onClick": (event) => onDelete(event, element.key)
             }, null)]);
           }
@@ -122,6 +137,7 @@ const ShortCut = /* @__PURE__ */ defineComponent({
               "class": [ns.e("item"), ns.e("action")],
               "onClick": onShowChange
             }, [createVNode("ion-icon", {
+              "class": ["expand-icon", "icon"],
               "name": "chevron-back-outline"
             }, null), createVNode("div", {
               "class": ns.em("item", "caption")
@@ -148,7 +164,7 @@ const ShortCut = /* @__PURE__ */ defineComponent({
           }, {
             default: () => [createVNode("div", null, [createVNode("span", {
               "class": ns.em("more", "caption")
-            }, [isShowToolbar.value ? "6/".concat(data.value.length) : data.value.length]), createVNode("i", {
+            }, [isShowToolbar.value ? "6/".concat(data.length) : data.length]), createVNode("i", {
               "class": ["fa", ns.em("more", "icon"), isShowMore.value ? "fa-angle-double-down" : "fa-angle-double-up"],
               "aria-hidden": "true"
             }, null)])]
@@ -171,7 +187,7 @@ const ShortCut = /* @__PURE__ */ defineComponent({
   },
   render() {
     return createVNode("div", {
-      "class": [this.ns.b(), ...this.controller.containerClass, this.ns.is("hidden", this.data.length === 0)]
+      "class": [this.ns.b(), ...this.controller.containerClass, this.ns.is("conceal", this.data.length === 0)]
     }, [this.isShowToolbar && this.renderDraggable(false), (!this.isShowToolbar || this.data.length > 6) && this.renderMoreToolbar(), this.isShowToolbar && createVNode("div", {
       "class": this.ns.e("recover"),
       "onClick": this.onShowChange
@@ -181,6 +197,7 @@ const ShortCut = /* @__PURE__ */ defineComponent({
       "placement": "top"
     }, {
       default: () => [createVNode("ion-icon", {
+        "class": ["recover-icon", "icon"],
         "name": "chevron-forward-outline"
       }, null)]
     })])]);

package/es/util/app-util/app-util.d.ts

@@ -0,0 +1,90 @@
+import { Router } from 'vue-router';
+import { IAppUtil } from '@ibiz-template/runtime';
+export declare class AppUtil implements IAppUtil {
+    protected router: Router;
+    /**
+     * Creates an instance of AppUtil.
+     * @author tony001
+     * @date 2024-05-14 17:05:00
+     * @param {Router} router
+     */
+    constructor(router: Router);
+    /**
+     * 登录
+     *
+     * @author tony001
+     * @date 2024-05-14 16:05:41
+     * @param {string} loginName
+     * @param {string} password
+     * @param {(boolean | undefined)} [remember]
+     * @param {(IData | undefined)} [headers]
+     * @param {(IData | undefined)} [opts]
+     * @return {*}  {Promise<boolean>}
+     */
+    login(loginName: string, password: string, remember?: boolean | undefined, headers?: IData | undefined, opts?: IData | undefined): Promise<boolean>;
+    /**
+     * 登出
+     *
+     * @author tony001
+     * @date 2024-05-14 16:05:02
+     * @param {(IData | undefined)} [opts]
+     * @return {*}  {Promise<boolean>}
+     */
+    logout(opts?: IData | undefined): Promise<boolean>;
+    /**
+     * 变更密码
+     *
+     * @author tony001
+     * @date 2024-05-14 16:05:11
+     * @param {string} oldPwd
+     * @param {string} newPwd
+     * @param {(IData | undefined)} [opts]
+     * @return {*}  {Promise<boolean>}
+     */
+    changePwd(oldPwd: string, newPwd: string, opts?: IData | undefined): Promise<boolean>;
+    /**
+     * 切换组织
+     *
+     * @author tony001
+     * @date 2024-05-14 16:05:20
+     * @param {string} oldOrgId
+     * @param {string} newOrgId
+     * @param {(IData | undefined)} [opts]
+     * @return {*}  {Promise<boolean>}
+     */
+    switchOrg(oldOrgId: string, newOrgId: string, opts?: IData | undefined): Promise<boolean>;
+    /**
+     * 切换主题
+     *
+     * @author tony001
+     * @date 2024-05-14 16:05:30
+     * @param {string} oldTheme
+     * @param {string} newTheme
+     * @param {(IData | undefined)} [opts]
+     * @return {*}  {Promise<boolean>}
+     */
+    switchTheme(oldTheme: string, newTheme: string, opts?: IData | undefined): Promise<boolean>;
+    /**
+     * 切换语言
+     *
+     * @author tony001
+     * @date 2024-05-14 16:05:42
+     * @param {string} oldLanguage
+     * @param {string} newLanguage
+     * @param {(IData | undefined)} [opts]
+     * @return {*}  {Promise<boolean>}
+     */
+    switchLanguage(oldLanguage: string, newLanguage: string, opts?: IData | undefined): Promise<boolean>;
+    /**
+     * 校验密码
+     *
+     * @author tony001
+     * @date 2024-05-14 17:05:31
+     * @protected
+     * @param {string} oldPwd
+     * @param {string} newPwd
+     * @param {IData} [opts={}]
+     * @return {*}  {boolean}
+     */
+    protected validatePwd(oldPwd: string, newPwd: string, opts?: IData): boolean;
+}

package/es/util/app-util/app-util.mjs

@@ -0,0 +1,152 @@
+"use strict";
+class AppUtil {
+  /**
+   * Creates an instance of AppUtil.
+   * @author tony001
+   * @date 2024-05-14 17:05:00
+   * @param {Router} router
+   */
+  constructor(router) {
+    this.router = router;
+  }
+  /**
+   * 登录
+   *
+   * @author tony001
+   * @date 2024-05-14 16:05:41
+   * @param {string} loginName
+   * @param {string} password
+   * @param {(boolean | undefined)} [remember]
+   * @param {(IData | undefined)} [headers]
+   * @param {(IData | undefined)} [opts]
+   * @return {*}  {Promise<boolean>}
+   */
+  async login(loginName, password, remember, headers, opts) {
+    const bol = await ibiz.auth.login(loginName, password, remember, headers);
+    if (bol === true) {
+      window.location.hash = this.router.currentRoute.value.query.ru || "/";
+      window.history.pushState({}, "");
+      window.location.reload();
+    }
+    return bol;
+  }
+  /**
+   * 登出
+   *
+   * @author tony001
+   * @date 2024-05-14 16:05:02
+   * @param {(IData | undefined)} [opts]
+   * @return {*}  {Promise<boolean>}
+   */
+  async logout(opts) {
+    const bol = await ibiz.auth.logout();
+    if (bol) {
+      const path = window.location;
+      if (path.search.indexOf("isAnonymous=true") !== -1) {
+        const href = "".concat(path.origin).concat(path.pathname).concat(path.hash);
+        window.history.replaceState({}, "", href);
+      }
+      await this.router.push(
+        "/login?ru=".concat(encodeURIComponent(
+          window.location.hash.replace("#/", "/")
+        ))
+      );
+      ibiz.util.showAppLoading();
+      window.location.reload();
+    }
+    return bol;
+  }
+  /**
+   * 变更密码
+   *
+   * @author tony001
+   * @date 2024-05-14 16:05:11
+   * @param {string} oldPwd
+   * @param {string} newPwd
+   * @param {(IData | undefined)} [opts]
+   * @return {*}  {Promise<boolean>}
+   */
+  async changePwd(oldPwd, newPwd, opts) {
+    let bol = this.validatePwd(oldPwd, newPwd, opts);
+    if (bol) {
+      bol = await ibiz.auth.changePwd(oldPwd, newPwd);
+    }
+    return bol;
+  }
+  /**
+   * 切换组织
+   *
+   * @author tony001
+   * @date 2024-05-14 16:05:20
+   * @param {string} oldOrgId
+   * @param {string} newOrgId
+   * @param {(IData | undefined)} [opts]
+   * @return {*}  {Promise<boolean>}
+   */
+  switchOrg(oldOrgId, newOrgId, opts) {
+    throw new Error("Method not implemented.");
+  }
+  /**
+   * 切换主题
+   *
+   * @author tony001
+   * @date 2024-05-14 16:05:30
+   * @param {string} oldTheme
+   * @param {string} newTheme
+   * @param {(IData | undefined)} [opts]
+   * @return {*}  {Promise<boolean>}
+   */
+  switchTheme(oldTheme, newTheme, opts) {
+    throw new Error("Method not implemented.");
+  }
+  /**
+   * 切换语言
+   *
+   * @author tony001
+   * @date 2024-05-14 16:05:42
+   * @param {string} oldLanguage
+   * @param {string} newLanguage
+   * @param {(IData | undefined)} [opts]
+   * @return {*}  {Promise<boolean>}
+   */
+  switchLanguage(oldLanguage, newLanguage, opts) {
+    throw new Error("Method not implemented.");
+  }
+  /**
+   * 校验密码
+   *
+   * @author tony001
+   * @date 2024-05-14 17:05:31
+   * @protected
+   * @param {string} oldPwd
+   * @param {string} newPwd
+   * @param {IData} [opts={}]
+   * @return {*}  {boolean}
+   */
+  validatePwd(oldPwd, newPwd, opts = {}) {
+    const { surePwd } = opts;
+    if (!oldPwd) {
+      ibiz.message.error("\u539F\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A");
+      return false;
+    }
+    if (!newPwd) {
+      ibiz.message.error("\u65B0\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A");
+      return false;
+    }
+    if (!surePwd) {
+      ibiz.message.error("\u786E\u8BA4\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A");
+      return false;
+    }
+    if (oldPwd === newPwd) {
+      ibiz.message.error("\u65B0\u5BC6\u7801\u4E0D\u80FD\u4E0E\u65E7\u5BC6\u7801\u4E00\u81F4");
+      return false;
+    }
+    if (newPwd !== surePwd) {
+      ibiz.message.error("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+      return false;
+    }
+    return true;
+  }
+}
+
+export { AppUtil };

package/es/util/index.d.ts

@@ -8,3 +8,4 @@ export { OverlayController } from './overlay-controller/overlay-controller';
 export { usePagination } from './pagination/use-pagination';
 export { NoticeUtil } from './notice-util/notice-util';
 export { RenderUtil } from './render-util/render-util';
+export { AppUtil } from './app-util/app-util';

package/es/util/index.mjs

@@ -8,5 +8,6 @@ export { OverlayController } from './overlay-controller/overlay-controller.mjs';
 export { usePagination } from './pagination/use-pagination.mjs';
 export { NoticeUtil } from './notice-util/notice-util.mjs';
 export { RenderUtil } from './render-util/render-util.mjs';
+export { AppUtil } from './app-util/app-util.mjs';
 
 "use strict";

package/es/web-app/main.mjs

@@ -10,6 +10,7 @@ import '../util/index.mjs';
 import './guard/index.mjs';
 import { UnauthorizedHandler } from './util/unauthorized-handler/unauthorized-handler.mjs';
 import { DynaAuthGuard } from './guard/auth-guard/dyna-auth-guard.mjs';
+import { AppUtil } from '../util/app-util/app-util.mjs';
 import { OpenViewUtil } from '../util/open-view-util/open-view-util.mjs';
 import { RenderUtil } from '../util/render-util/render-util.mjs';
 import { MessageUtil } from '../util/message-util/message-util.mjs';
@@ -62,6 +63,7 @@ async function runApp(plugins, opts) {
   }
   AppRouter.setAuthGuard((notLogin) => authGuard.verify(notLogin));
   app.use(AppRouter.getRouter());
+  ibiz.appUtil = new AppUtil(AppRouter.getRouter());
   ibiz.openView = new OpenViewUtil(AppRouter.getRouter());
   ibiz.render = new RenderUtil();
   ibiz.message = new MessageUtil();

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

@@ -280,7 +280,7 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         "onSelect": this.onClick,
         "theme": "light",
         "mode": this.menuMode,
-        "ellipsis": false
+        "ellipsis": this.menuMode === "horizontal"
       }, _isSlot(_slot = this.menus.map((item) => {
         var _a;
         if (((_a = item.children) == null ? void 0 : _a.length) > 0) {

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

@@ -57,17 +57,24 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
     const groupButtonRef = vue.ref();
     const dropdownRef = vue.ref();
     const popoverVisible = vue.ref(false);
-    if (actionDetails) {
-      actionDetails == null ? void 0 : actionDetails.forEach((detail) => {
+    const transformLanguage = (items) => {
+      if (!Array.isArray(items)) {
+        return;
+      }
+      items.forEach((detail) => {
         if (detail.capLanguageRes && detail.capLanguageRes.lanResTag) {
           detail.caption = ibiz.i18n.t(detail.capLanguageRes.lanResTag, detail.caption);
         }
         if (detail.tooltipLanguageRes && detail.tooltipLanguageRes.lanResTag) {
           detail.tooltip = ibiz.i18n.t(detail.tooltipLanguageRes.lanResTag, detail.tooltip);
         }
+        transformLanguage(detail.detoolbarItems);
       });
+    };
+    if (actionDetails) {
+      transformLanguage(actionDetails);
       actionDetails.forEach((detail) => {
-        if (props.groupLevelKeys.findIndex((item) => item === detail.actionLevel) !== -1) {
+        if (!detail.actionLevel || props.groupLevelKeys.findIndex((item) => item === detail.actionLevel) !== -1) {
           groupDetails.value.push(detail);
         } else {
           expandDetails.value.push(detail);
@@ -95,6 +102,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
         dropdownRef.value.handleClose();
       }
       e.stopPropagation();
+      popoverVisible.value = false;
       emit("action-click", detail, e);
     };
     return {
@@ -121,8 +129,14 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        var _a;
-        if ((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible) {
+        var _a, _b;
+        if (!((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
+          return null;
+        }
+        if (detail.itemType === "SEPERATOR") {
+          return renderDivider(isExpand);
+        }
+        if (detail.itemType === "DEUIACTION" || detail.itemType === "ITEMS" && !((_b = detail.detoolbarItems) == null ? void 0 : _b.length)) {
           return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
             "text": true,
             "size": "small",
@@ -142,6 +156,40 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
             }, [detail.caption]) : ""])]
           })];
         }
+        if (detail.itemType === "ITEMS") {
+          return vue.createVNode(vue.resolveComponent("el-popover"), {
+            "placement": "right-start",
+            "popper-class": this.ns.e("popover"),
+            "teleported": false
+          }, {
+            reference: () => {
+              return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
+                "text": true,
+                "size": "small",
+                "onClick": (e) => this.handleClick(detail, e),
+                "title": detail.tooltip,
+                "disabled": this.c.state.buttonsState[detail.id].disabled,
+                "class": this.calcActionItemClass(detail)
+              }, {
+                default: () => [vue.createVNode("div", {
+                  "class": this.ns.e("action-content")
+                }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+                  "class": this.ns.e("action-content-icon")
+                }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                  "icon": detail.sysImage
+                }, null)]), detail.showCaption ? vue.createVNode("div", {
+                  "class": [this.ns.e("action-content-caption"), this.ns.e("action-content-group-caption")]
+                }, [detail.caption]) : "", vue.createVNode("ion-icon", {
+                  "class": this.ns.e("action-content-group-icon"),
+                  "name": "chevron-forward-outline"
+                }, null)])]
+              })];
+            },
+            default: () => {
+              return renderActions(detail.detoolbarItems || [], isExpand);
+            }
+          });
+        }
         return null;
       });
     };
@@ -167,7 +215,8 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
         "visible": this.popoverVisible,
         "onUpdate:visible": ($event) => this.popoverVisible = $event,
         "popper-class": this.ns.e("popover"),
-        "virtual-triggering": true
+        "virtual-triggering": true,
+        "transition": "none"
       }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
       })]]);

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

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-context-menu{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0)}.ibiz-context-menu__item{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-context-menu__item+.ibiz-context-menu__item{margin:var(--ibiz-context-menu-item-margin)}.ibiz-context-menu__item .ibiz-context-menu__action-content-icon{margin-right:3px}.ibiz-context-menu__action-content{display:flex}.ibiz-context-menu__action-content-icon{display:flex;align-items:center;justify-content:center;width:20px}.ibiz-context-menu__action-content-caption{display:flex;align-items:center;justify-content:center}.ibiz-context-menu__popover{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-context-menu-popover-padding)}.ibiz-context-menu__popover .el-button{--el-button-size:40px;display:block;width:100%;padding:var(--ibiz-context-menu-popover-button-padding);margin:0;font-size:14px;color:var(--ibiz-context-menu-popover-button-color);text-align:left;border-radius:0}.ibiz-context-menu__popover .el-button:hover{background-color:var(--ibiz-context-menu-popover-button-hover-bg)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-icon{margin-right:6px}.ibiz-context-menu__separator{margin:0}.ibiz-context-menu--dropdown .ibiz-context-menu__caption{cursor:pointer}.ibiz-context-menu--dropdown .ibiz-context-menu__caption-icon{vertical-align:bottom}
+@charset "UTF-8";.ibiz-context-menu{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0)}.ibiz-context-menu__item{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-context-menu__item+.ibiz-context-menu__item{margin:var(--ibiz-context-menu-item-margin)}.ibiz-context-menu__item .ibiz-context-menu__action-content-icon{margin-right:3px}.ibiz-context-menu__action-content{display:flex}.ibiz-context-menu__action-content-icon{display:flex;align-items:center;justify-content:center;width:20px}.ibiz-context-menu__action-content-caption{display:flex;align-items:center;justify-content:center}.ibiz-context-menu__popover{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:8px 0;--ibiz-context-menu-popover-button-padding:8px 20px;--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-context-menu-popover-padding)}.ibiz-context-menu__popover .el-button{--el-button-size:40px;display:block;width:100%;padding:var(--ibiz-context-menu-popover-button-padding);margin:0;font-size:14px;color:var(--ibiz-context-menu-popover-button-color);text-align:left;border-radius:0}.ibiz-context-menu__popover .el-button:hover{background-color:var(--ibiz-context-menu-popover-button-hover-bg)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-icon{margin-right:6px}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-caption{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-icon{position:absolute;right:var(--ibiz-spacing-base-loose);font-size:var(--ibiz-font-size-header-6)}.ibiz-context-menu__separator{margin:0}.ibiz-context-menu__separator.el-divider--horizontal{width:calc(100% - 2 * var(--ibiz-spacing-base-loose));margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose)}.ibiz-context-menu--dropdown .ibiz-context-menu__caption{cursor:pointer}.ibiz-context-menu--dropdown .ibiz-context-menu__caption-icon{vertical-align:bottom}

package/lib/control/form/form/form.css

@@ -1 +1 @@
-.ibiz-control-form{width:100%;padding-bottom:var(--ibiz-spacing-tight)}
+.ibiz-control-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}

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

@@ -18,10 +18,15 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
       required: true
     }
   },
-  setup() {
+  setup(props) {
     const ns = vue3Util.useNamespace("form-page");
+    let position = "top";
+    if (props.modelData.tabHeaderPos) {
+      position = props.modelData.tabHeaderPos.toLowerCase();
+    }
     return {
-      ns
+      ns,
+      position
     };
   },
   render() {
@@ -37,8 +42,9 @@ const FormPage = /* @__PURE__ */ vue.defineComponent({
       }, [defaultSlots]);
     }
     return vue.createVNode(vue.resolveComponent("el-tabs"), {
-      "class": [this.ns.b(), this.ns.b("tab")],
-      "model-value": (_d = defaultSlots[0]) == null ? void 0 : _d.key
+      "class": [this.ns.b(), this.ns.b("tab"), this.ns.e(this.position)],
+      "model-value": (_d = defaultSlots[0]) == null ? void 0 : _d.key,
+      "tab-position": this.position
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
       if (!props || !props.controller) {

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

@@ -1 +1 @@
-.ibiz-form-page{--ibiz-form-page-font-size:var(--ibiz-font-size-header-4);--ibiz-form-page-header-border-color:var(--ibiz-color-border);--ibiz-form-page-text-color:var(--ibiz-color-text-2);--ibiz-form-page-bg-color:transparent;--ibiz-form-page-hover-text-color:var(--ibiz-color-primary);--ibiz-form-page-hover-bg-color:transparent;--ibiz-form-page-active-text-color:var(--ibiz-color-primary);--ibiz-form-page-active-bg-color:transparent;--ibiz-form-page-active-border-color:var(--ibiz-color-primary)}.ibiz-form-page--no-tab-header .ibiz-form-page-item{padding-top:0}.ibiz-form-page-tab>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-page-font-size);color:var(--ibiz-form-page-text-color);background-color:var(--ibiz-form-page-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-page-hover-text-color);background-color:var(--ibiz-form-page-hover-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-page-active-text-color);background-color:var(--ibiz-form-page-active-bg-color)}.ibiz-form-page-tab .el-tabs__nav-wrap::after{background-color:var(--ibiz-form-page-header-border-color)}.ibiz-form-page-tab .el-tabs__active-bar{background-color:var(--ibiz-form-page-active-border-color)}.ibiz-form-page-item{padding-top:var(--ibiz-padding-top)}.ibiz-form-page-item-child{margin-bottom:var(--ibiz-margin-bottom)}
+.ibiz-form-page{--ibiz-form-page-font-size:var(--ibiz-font-size-header-4);--ibiz-form-page-header-border-color:var(--ibiz-color-border);--ibiz-form-page-text-color:var(--ibiz-color-text-2);--ibiz-form-page-bg-color:transparent;--ibiz-form-page-hover-text-color:var(--ibiz-color-primary);--ibiz-form-page-hover-bg-color:transparent;--ibiz-form-page-active-text-color:var(--ibiz-color-primary);--ibiz-form-page-active-bg-color:transparent;--ibiz-form-page-active-border-color:var(--ibiz-color-primary)}.ibiz-form-page__left{height:100%}.ibiz-form-page__left>.el-tabs__header{height:100%}.ibiz-form-page__left>.el-tabs__content{height:100%;overflow:auto}.ibiz-form-page__right{height:100%}.ibiz-form-page__right>.el-tabs__header{height:100%}.ibiz-form-page__right>.el-tabs__content{height:100%;overflow:auto}.ibiz-form-page--no-tab-header .ibiz-form-page-item{padding-top:0}.ibiz-form-page-tab>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-page-font-size);color:var(--ibiz-form-page-text-color);background-color:var(--ibiz-form-page-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-page-hover-text-color);background-color:var(--ibiz-form-page-hover-bg-color)}.ibiz-form-page-tab>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-page-active-text-color);background-color:var(--ibiz-form-page-active-bg-color)}.ibiz-form-page-tab .el-tabs__nav-wrap::after{background-color:var(--ibiz-form-page-header-border-color)}.ibiz-form-page-tab .el-tabs__active-bar{background-color:var(--ibiz-form-page-active-border-color)}.ibiz-form-page-item{padding-top:var(--ibiz-padding-top)}.ibiz-form-page-item-child{margin-bottom:var(--ibiz-margin-bottom)}