@ibiz-template/vue3-components 0.7.34 → 0.7.38-alpha.12

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.state.d.ts

@@ -0,0 +1,26 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+export interface BreadcrumbMsg {
+    viewName: string;
+    fullPath: string;
+    caption?: string;
+    dataInfo?: string;
+    isEmbed?: boolean;
+    isModal?: boolean;
+}
+/**
+ * 导航标签页占位状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class NavBreadcrumbState
+ * @extends {PanelItemState}
+ */
+export declare class NavBreadcrumbState extends PanelItemState {
+    /**
+     * @description 面包屑导航项
+     * @type {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbState
+     */
+    breadcrumbItems: BreadcrumbMsg[];
+}

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.state.mjs

@@ -0,0 +1,22 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class NavBreadcrumbState extends PanelItemState {
+  constructor() {
+    super(...arguments);
+    /**
+     * @description 面包屑导航项
+     * @type {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbState
+     */
+    __publicField(this, "breadcrumbItems", []);
+  }
+}
+
+export { NavBreadcrumbState };

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.util.d.ts

@@ -0,0 +1,39 @@
+import { IAppFunc, IAppMenuItem } from '@ibiz/model-core';
+import { Router } from 'vue-router';
+import { BreadcrumbMsg } from './nav-breadcrumb.state';
+/**
+ * @description 获取首页导航信息
+ * @export
+ * @return {*}  {BreadcrumbMsg}
+ */
+export declare function getIndexBreadcrumb(context: IContext): BreadcrumbMsg;
+/**
+ * @description 根据视图名获取应用功能
+ * @export
+ * @param {string} name
+ * @param {string} appid
+ * @return {*}  {(IAppFunc | undefined)}
+ */
+export declare function getAppFuncByViewName(name: string, appid: string): IAppFunc | undefined;
+/**
+ * @description 根据应该功能获取菜单模型
+ * @export
+ * @param {IAppFunc} func
+ * @param {IAppMenuItem[]} appMenuItems
+ * @return {*}  {IAppMenuItem[]}
+ */
+export declare function getMenuItemsByAppFunc(func: IAppFunc, appMenuItems: IAppMenuItem[]): IAppMenuItem[];
+/**
+ * @description 获取当前视图名称
+ * @export
+ * @param {Router} router
+ * @return {*}  {string}
+ */
+export declare function getCurViewName(router: Router): string;
+/**
+ * @description 从视图堆栈中查找视图信息
+ * @export
+ * @param {string} viewName
+ * @return {*}  {(IData | undefined)}
+ */
+export declare function getViewInfoByViewStack(viewName: string): IData | undefined;

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.util.mjs

@@ -0,0 +1,73 @@
+import { route2routePath } from '@ibiz-template/vue3-util';
+import { RouteConst } from '@ibiz-template/runtime';
+
+"use strict";
+function getIndexBreadcrumb(context) {
+  const app = ibiz.hub.getApp(context.srfappid);
+  const caption = app.model.caption;
+  return {
+    viewName: ibiz.hub.defaultAppIndexViewName,
+    fullPath: "/",
+    caption
+  };
+}
+function getAppFuncByViewName(name, appid) {
+  const app = ibiz.hub.getApp(appid);
+  const appFuncs = app.model.appFuncs || [];
+  const item = appFuncs.find((func) => {
+    const { appViewId = "" } = func;
+    const viewName = appViewId.split(".").pop();
+    return (viewName == null ? void 0 : viewName.toLowerCase()) === name.toLowerCase();
+  });
+  return item;
+}
+function getMenuItemsByAppFunc(func, appMenuItems) {
+  const result = [];
+  const findMenuItem = (menuItems) => {
+    return menuItems.find((item) => {
+      if (item.appFuncId && item.appFuncId === func.id) {
+        result.unshift(item);
+        return true;
+      }
+      if (item.appMenuItems && item.appMenuItems.length > 0) {
+        const menuItem = findMenuItem(item.appMenuItems);
+        if (menuItem) {
+          result.unshift(item);
+          return true;
+        }
+      }
+      return false;
+    });
+  };
+  findMenuItem(appMenuItems);
+  return result;
+}
+function getCurViewName(router) {
+  var _a;
+  const { currentRoute } = router;
+  const routePath = route2routePath(currentRoute.value);
+  return ((_a = routePath.pathNodes.pop()) == null ? void 0 : _a.viewName) || "";
+}
+function getViewInfoByViewStack(viewName) {
+  if (viewName === RouteConst.ROUTE_MODAL_TAG) {
+    return {
+      viewName,
+      fullPath: "",
+      isModal: true
+    };
+  }
+  const view = ibiz.util.viewStack.getViewByCodeName(viewName);
+  if (view) {
+    let isEmbed = false;
+    if (view.parentView && view.parentView.model.codeName !== ibiz.hub.defaultAppIndexViewName) {
+      isEmbed = true;
+    }
+    return {
+      viewName: view.model.codeName,
+      caption: view.model.caption,
+      isEmbed
+    };
+  }
+}
+
+export { getAppFuncByViewName, getCurViewName, getIndexBreadcrumb, getMenuItemsByAppFunc, getViewInfoByViewStack };

package/es/panel-component/nav-pos-index/index.d.ts

@@ -0,0 +1,27 @@
+import { NavPosIndexState } from './nav-pos-index.state';
+import { NavPosIndexController } from './nav-pos-index.controller';
+export { NavPosIndexState, NavPosIndexController };
+export declare const IBizNavPosIndex: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof NavPosIndexController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    onViewCreated: (event: import("@ibiz-template/runtime").EventBase) => void;
+    c: NavPosIndexController;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof NavPosIndexController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizNavPosIndex;

package/es/panel-component/nav-pos-index/nav-pos-index.controller.d.ts

@@ -0,0 +1,168 @@
+import { EventBase, IAppMenuController, IModal, IModalData, PanelItemController } from '@ibiz-template/runtime';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { Router } from 'vue-router';
+import { NavTabsController } from '../nav-tabs/nav-tabs.controller';
+import { NavPosIndexState } from './nav-pos-index.state';
+import { NavBreadcrumbController } from '../nav-breadcrumb';
+/**
+ * 导航占位控制器
+ *
+ * @export
+ * @class NavPosIndexController
+ * @extends {PanelItemController}
+ */
+export declare class NavPosIndexController extends PanelItemController<IPanelRawItem> {
+    state: NavPosIndexState;
+    /**
+     * 导航视图的modal
+     * @author lxm
+     * @date 2023-05-12 09:47:52
+     * @type {{ [key: string]: IModal }}
+     */
+    viewModals: {
+        [key: string]: IModal;
+    };
+    /**
+     * router对象
+     * @author lxm
+     * @date 2023-05-25 08:02:43
+     * @type {Router}
+     */
+    router?: Router;
+    /**
+     * 是否关闭后自动跳转上一个页面
+     * @author lxm
+     * @date 2023-05-25 08:43:49
+     * @type {boolean}
+     */
+    autoGoLast: boolean;
+    /**
+     * 无缓存
+     * @author lxm
+     * @date 2024-04-22 04:12:41
+     * @readonly
+     * @type {boolean}
+     */
+    noCache: boolean;
+    protected createState(): NavPosIndexState;
+    setRouter(router: Router): void;
+    /**
+     * 当前视图的路由层级，非路由模式不存在。
+     * @author lxm
+     * @date 2023-05-09 12:46:26
+     * @readonly
+     */
+    get routeDepth(): number | undefined;
+    /**
+     * 导航标签页控制器
+     * @author lxm
+     * @date 2023-05-10 08:41:54
+     * @readonly
+     * @type {(NavTabsController | undefined)}
+     */
+    get navTabs(): NavTabsController | undefined;
+    /**
+     * @description 面包屑控制器
+     * @readonly
+     * @type {(NavBreadcrumbController | undefined)}
+     * @memberof NavPosIndexController
+     */
+    get navBreadcrumb(): NavBreadcrumbController | undefined;
+    /**
+     * 应用菜单控制器
+     * @author lxm
+     * @date 2023-05-10 08:41:42
+     * @readonly
+     * @type {(IAppMenuController | undefined)}
+     */
+    get appmenu(): IAppMenuController | undefined;
+    /**
+     * 自定义补充参数
+     *
+     * @author zk
+     * @date 2023-09-27 03:09:02
+     * @type {IData}
+     * @memberof NavPosController
+     */
+    rawItemParams: IData;
+    /**
+     * @description 当前导航key
+     * @type {string}
+     * @memberof NavPosIndexController
+     */
+    currentKey: string;
+    protected onInit(): Promise<void>;
+    /**
+     * 改变显示视图
+     * @author lxm
+     * @date 2023-05-25 01:28:49
+     * @param {string} key
+     */
+    changeView(key: string): void;
+    /**
+     * 路由变更,新视图进缓存并初始化，已有的就只切换。
+     * @author lxm
+     * @date 2023-05-25 03:07:07
+     * @param {{ currentKey: string; fullPath: string }} { currentKey }
+     * @return {*}
+     */
+    onRouteChange({ currentKey, fullPath, }: {
+        currentKey: string;
+        fullPath: string;
+    }): void;
+    /**
+     * 监听视图创建，获取并监听视图控制器
+     * @author lxm
+     * @date 2023-05-25 03:03:22
+     * @param {EventBase} event
+     */
+    onViewCreated(event: EventBase): void;
+    /**
+     * 删除单个缓存
+     * @author lxm
+     * @date 2023-05-09 02:19:09
+     * @param {string} key
+     */
+    removeCache(key: string): void;
+    /**
+     * 清空缓存
+     * @author lxm
+     * @date 2023-05-09 02:19:55
+     */
+    clearCache(): void;
+    /**
+     * 关闭视图
+     * 走modal的dismiss,会走一遍视图内部的校验，不通过则不会关闭
+     * @author lxm
+     * @date 2023-05-25 03:10:23
+     * @param {string} keys
+     */
+    closeViewByKeys(keys: string[]): Promise<void>;
+    /**
+     * 自身的dismiss相关操作
+     *
+     * @author chitanda
+     * @date 2023-07-12 22:07:09
+     * @protected
+     * @param {string} key
+     * @param {IModalData} modal
+     * @return {*}
+     */
+    protected dismiss(key: string, modal: IModalData): void;
+    /**
+     * 返回上一个页面或上一层空白路由
+     * @author lxm
+     * @date 2023-05-25 06:46:27
+     * @protected
+     */
+    protected goLast(): void;
+    /**
+     * 处理自定义补充参数 [{key:'name',value:'data'}] => {name:'data'}
+     *
+     * @author zk
+     * @date 2023-09-27 03:09:55
+     * @protected
+     * @memberof NavPosController
+     */
+    protected handleRawItemParams(): void;
+}

package/es/panel-component/nav-pos-index/nav-pos-index.controller.mjs

@@ -51,6 +51,12 @@ class NavPosIndexController extends PanelItemController {
      * @memberof NavPosController
      */
     __publicField(this, "rawItemParams", {});
+    /**
+     * @description 当前导航key
+     * @type {string}
+     * @memberof NavPosIndexController
+     */
+    __publicField(this, "currentKey", "");
   }
   createState() {
     var _a;
@@ -78,6 +84,15 @@ class NavPosIndexController extends PanelItemController {
   get navTabs() {
     return this.panel.panelItems.nav_tabs;
   }
+  /**
+   * @description 面包屑控制器
+   * @readonly
+   * @type {(NavBreadcrumbController | undefined)}
+   * @memberof NavPosIndexController
+   */
+  get navBreadcrumb() {
+    return this.panel.panelItems.nav_breadcrumb;
+  }
   /**
    * 应用菜单控制器
    * @author lxm
@@ -136,6 +151,7 @@ class NavPosIndexController extends PanelItemController {
     if (currentKey === "") {
       return;
     }
+    this.currentKey = currentKey;
     const index = this.state.operateSort.indexOf(currentKey);
     if (index !== -1) {
       this.state.operateSort.splice(index, 1);
@@ -172,14 +188,33 @@ class NavPosIndexController extends PanelItemController {
    * @param {EventBase} event
    */
   onViewCreated(event) {
+    const { view } = event;
+    const key = this.state.currentKey;
     if (this.navTabs) {
-      const { view } = event;
-      const key = this.state.currentKey;
       this.navTabs.updateViewInfo(key, { caption: view.model.caption });
       view.evt.on("onViewInfoChange", ({ caption, dataInfo }) => {
         this.navTabs.updateViewInfo(key, { caption, dataInfo });
       });
     }
+    if (this.navBreadcrumb) {
+      this.navBreadcrumb.updateViewInfo(key, {
+        viewName: view.model.codeName,
+        caption: view.model.caption
+      });
+      view.evt.on("onViewInfoChange", ({ caption, dataInfo }) => {
+        this.navBreadcrumb.updateViewInfo(key, {
+          viewName: view.model.codeName,
+          caption,
+          dataInfo
+        });
+      });
+      view.evt.on("onActivated", () => {
+        this.navBreadcrumb.updateViewInfo(key, {
+          viewName: view.model.codeName,
+          caption: view.model.caption
+        });
+      });
+    }
   }
   /**
    * 删除单个缓存
@@ -205,7 +240,7 @@ class NavPosIndexController extends PanelItemController {
    * @date 2023-05-09 02:19:55
    */
   clearCache() {
-    this.state.cacheKeys = [];
+    this.state.cacheKeys = [this.currentKey];
     this.viewModals = {};
   }
   /**
@@ -240,6 +275,9 @@ class NavPosIndexController extends PanelItemController {
     if (this.navTabs) {
       this.navTabs.removeCache(key);
     }
+    if (this.navBreadcrumb) {
+      this.navBreadcrumb.removeCache(key);
+    }
     this.removeCache(key);
     if (this.autoGoLast) {
       this.goLast();

package/es/panel-component/nav-pos-index/nav-pos-index.d.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { EventBase } from '@ibiz-template/runtime';
+import { NavPosIndexController } from './nav-pos-index.controller';
+import './nav-pos-index.scss';
+export declare const NavPosIndex: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof NavPosIndexController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    onViewCreated: (event: EventBase) => void;
+    c: NavPosIndexController;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof NavPosIndexController;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/panel-component/nav-pos-index/nav-pos-index.provider.d.ts

@@ -0,0 +1,16 @@
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { NavPosIndexController } from './nav-pos-index.controller';
+/**
+ * 导航占位适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class NavPosIndexProvider
+ * @implements {EditorProvider}
+ */
+export declare class NavPosIndexProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<NavPosIndexController>;
+}

package/es/panel-component/nav-pos-index/nav-pos-index.state.d.ts

@@ -0,0 +1,42 @@
+import { INavViewMsg, PanelItemState } from '@ibiz-template/runtime';
+/**
+ * 导航占位状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class NavPosIndexState
+ * @extends {PanelItemState}
+ */
+export declare class NavPosIndexState extends PanelItemState {
+    /**
+     * 当前导航视图标识
+     * @author lxm
+     * @date 2023-05-25 06:24:48
+     * @type {string}
+     */
+    currentKey: string;
+    /**
+     * 缓存的视图标识
+     * @author lxm
+     * @date 2023-05-25 06:25:21
+     * @type {string[]}
+     */
+    cacheKeys: string[];
+    /**
+     * 导航视图详细信息
+     * @author lxm
+     * @date 2023-05-25 07:07:05
+     * @type {INavViewMsg[]}
+     */
+    navViewMsgs: {
+        [p: string]: INavViewMsg;
+    };
+    /**
+     * 导航的视图的操作顺序
+     * @author lxm
+     * @date 2023-05-25 06:25:34
+     * @type {string[]}
+     */
+    operateSort: string[];
+}

package/es/panel-component/nav-tabs/index.d.ts

@@ -0,0 +1,44 @@
+export * from './nav-tabs.controller';
+export * from './nav-tabs.state';
+export declare const IBizNavTabs: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("./nav-tabs.controller").NavTabsController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    actions: import("./nav-tabs").dropdownAction[];
+    changePage: (pane: {
+        uid: number;
+        slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        props: {
+            readonly disabled: boolean;
+            readonly label: string;
+            readonly closable: boolean;
+            readonly lazy: boolean;
+            readonly name?: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown> | undefined;
+        };
+        paneName: string | number | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }) => void;
+    onTabRemove: (key: string) => void;
+    handleCommand: (command: import("./nav-tabs").dropdownAction) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("./nav-tabs.controller").NavTabsController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizNavTabs;

package/es/panel-component/nav-tabs/nav-tabs.controller.d.ts

@@ -0,0 +1,90 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { NavPosIndexController } from '../nav-pos-index';
+import { NavTabsState, TabMsg } from './nav-tabs.state';
+/**
+ * 导航占位控制器
+ *
+ * @export
+ * @class NavTabsController
+ * @extends {PanelItemController}
+ */
+export declare class NavTabsController extends PanelItemController<IPanelRawItem> {
+    state: NavTabsState;
+    protected createState(): NavTabsState;
+    /**
+     * 当前视图的路由层级，非路由模式不存在。
+     * @author lxm
+     * @date 2023-05-09 12:46:26
+     * @readonly
+     */
+    get routeDepth(): number | undefined;
+    /**
+     * 导航占位控制器
+     * @author lxm
+     * @date 2023-05-09 02:35:48
+     * @readonly
+     * @type {(NavPosIndexController | undefined)}
+     */
+    get navPos(): NavPosIndexController | undefined;
+    /**
+     * 获取tabItem
+     * @author lxm
+     * @date 2023-05-09 02:04:11
+     * @param {string} key
+     * @return {*}
+     */
+    findTabItem(key: string): TabMsg | undefined;
+    /**
+     * 点击处理
+     * @author lxm
+     * @date 2023-05-25 01:31:04
+     * @param {string} key
+     */
+    onTabClick(key: string): void;
+    /**
+     * 更新视图信息
+     * @author lxm
+     * @date 2023-05-09 01:40:34
+     * @param {string} key
+     * @param {{ caption?: string; dataInfo?: string }} info
+     */
+    updateViewInfo(key: string, info: {
+        caption?: string;
+        dataInfo?: string;
+    }): void;
+    /**
+     * 删除某个key对应的数据
+     * 仅处理组件自身维护的数据
+     * @author lxm
+     * @date 2023-05-25 03:18:20
+     * @param {string} key
+     */
+    removeCache(key: string): void;
+    /**
+     * 删除分页
+     * @author lxm
+     * @date 2023-05-09 02:08:46
+     * @param {string} key
+     */
+    onTabRemove(key: string): void;
+    /**
+     * 删除其他所有的标签页
+     * @author lxm
+     * @date 2023-05-09 02:19:55
+     */
+    removeOther(): void;
+    /**
+     * 删除所有的标签页
+     * @author lxm
+     * @date 2023-05-09 02:50:01
+     */
+    removeAll(): void;
+    /**
+     * 刷新项（解决主信息更新之后界面ui未刷新）
+     *
+     * @author tony001
+     * @date 2024-06-28 08:06:11
+     */
+    refreshItemUI(): void;
+}

package/es/panel-component/nav-tabs/nav-tabs.css

@@ -1 +1 @@
-.ibiz-nav-tabs{--ibiz-nav-tabs-padding:var(--ibiz-spacing-base-loose);--ibiz-nav-tabs-left-width:calc(100% - 60px);--ibiz-nav-tabs-right-width:60px;--ibiz-nav-tabs-right-height:30px;--ibiz-nav-tabs-item-height:40px;--ibiz-nav-tabs-item-padding:0 var(--ibiz-spacing-base-loose);--ibiz-nav-tabs-item-margin:0 var(--ibiz-spacing-base) 0 0;--ibiz-nav-tabs-item-font-size:var(--ibiz-font-size-regular);--ibiz-nav-tabs-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-nav-tabs-item-border-radius:var(--ibiz-border-radius-medium);--ibiz-nav-tabs-item-bg-color:transparent;--ibiz-nav-tabs-item-color:var(--ibiz-color-text-0);--ibiz-nav-tabs-item-hover-color:var(--ibiz-color-primary-hover);--ibiz-nav-tabs-item-active-color:var(--ibiz-color-primary);display:flex;align-items:center;justify-content:flex-start;position:relative;padding:var(--ibiz-nav-tabs-padding)}.ibiz-nav-tabs__left{display:flex;align-items:center;width:var(--ibiz-nav-tabs-left-width)}.ibiz-nav-tabs__left--caption{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-nav-tabs__left .el-tabs{width:100%;--el-tabs-header-height:40px}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav{border:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item{display:flex;align-items:center;height:var(--ibiz-nav-tabs-item-height);padding:var(--ibiz-nav-tabs-item-padding);margin:var(--ibiz-nav-tabs-item-margin);overflow:hidden;font-size:var(--ibiz-nav-tabs-item-font-size);font-weight:var(--ibiz-nav-tabs-item-font-weight);color:var(--ibiz-nav-tabs-item-color);vertical-align:middle;background-color:var(--ibiz-nav-tabs-item-bg-color);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-nav-tabs-item-border-radius);box-shadow:0 1px 2px 0 var(--ibiz-color-border);opacity:1}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-nav-tabs-item-hover-color);box-shadow:0 1px 4px 0 rgba(0,0,0,.25)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover .is-icon-close{color:var(--ibiz-nav-tabs-item-hover-color)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-color-white);background-color:var(--ibiz-nav-tabs-item-active-color);box-shadow:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active .is-icon-close{color:var(--ibiz-color-white)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable.hover{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item .is-icon-close{position:relative;top:1px}.ibiz-nav-tabs__left .el-tabs .el-tabs__header{margin-bottom:0;border-bottom:none}.ibiz-nav-tabs__right{width:var(--ibiz-nav-tabs-right-width)}.ibiz-nav-tabs__right .el-dropdown button{height:var(--ibiz-nav-tabs-right-height)}
+.ibiz-nav-tabs{--ibiz-nav-tabs-padding:var(--ibiz-spacing-base-loose);--ibiz-nav-tabs-left-width:calc(100% - 60px);--ibiz-nav-tabs-right-width:60px;--ibiz-nav-tabs-right-height:30px;--ibiz-nav-tabs-item-height:40px;--ibiz-nav-tabs-item-padding:0 var(--ibiz-spacing-base-loose);--ibiz-nav-tabs-item-margin:0 var(--ibiz-spacing-base) 0 0;--ibiz-nav-tabs-item-font-size:var(--ibiz-font-size-regular);--ibiz-nav-tabs-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-nav-tabs-item-border:1px solid var(--ibiz-color-border);--ibiz-nav-tabs-item-border-radius:var(--ibiz-border-radius-medium);--ibiz-nav-tabs-item-bg-color:transparent;--ibiz-nav-tabs-item-color:var(--ibiz-color-text-0);--ibiz-nav-tabs-item-hover-color:var(--ibiz-color-primary-hover);--ibiz-nav-tabs-item-active-color:var(--ibiz-color-primary);display:flex;align-items:center;justify-content:flex-start;position:relative;padding:var(--ibiz-nav-tabs-padding)}.ibiz-nav-tabs__left{display:flex;align-items:center;width:var(--ibiz-nav-tabs-left-width)}.ibiz-nav-tabs__left--caption{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-nav-tabs__left .el-tabs{width:100%;--el-tabs-header-height:getCssVar("nav-tabs-item", "height")}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav{border:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item{display:flex;align-items:center;height:var(--ibiz-nav-tabs-item-height);padding:var(--ibiz-nav-tabs-item-padding);margin:var(--ibiz-nav-tabs-item-margin);overflow:hidden;font-size:var(--ibiz-nav-tabs-item-font-size);font-weight:var(--ibiz-nav-tabs-item-font-weight);color:var(--ibiz-nav-tabs-item-color);vertical-align:middle;background-color:var(--ibiz-nav-tabs-item-bg-color);border:var(--ibiz-nav-tabs-item-border);border-radius:var(--ibiz-nav-tabs-item-border-radius);box-shadow:0 1px 2px 0 var(--ibiz-color-border);opacity:1}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-nav-tabs-item-hover-color);box-shadow:0 1px 4px 0 rgba(0,0,0,.25)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item:hover .is-icon-close{color:var(--ibiz-nav-tabs-item-hover-color)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active{padding:var(--ibiz-nav-tabs-item-padding);color:var(--ibiz-color-white);background-color:var(--ibiz-nav-tabs-item-active-color);box-shadow:none}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-active .is-icon-close{color:var(--ibiz-color-white)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item.is-closable.hover{padding:var(--ibiz-nav-tabs-item-padding)}.ibiz-nav-tabs__left .el-tabs .el-tabs__nav .el-tabs__item .is-icon-close{position:relative;top:1px}.ibiz-nav-tabs__left .el-tabs .el-tabs__header{margin-bottom:0;border-bottom:none}.ibiz-nav-tabs__right{width:var(--ibiz-nav-tabs-right-width)}.ibiz-nav-tabs__right .el-dropdown button{height:var(--ibiz-nav-tabs-right-height)}