@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.21

package/es/control/drbar/drbar.mjs

@@ -1,13 +1,10 @@
-import { isVNode, reactive, onUnmounted, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, reactive, onUnmounted, watch, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { DRBarController } from './drbar.controller.mjs';
 import './drbar.css';
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 const DRBarControl = /* @__PURE__ */ defineComponent({
   name: "IBizDrBarControl",
   props: {
@@ -76,23 +73,25 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
     if (c.routeDepth) {
       expViewRoutePath = getNestedRoutePath(route, c.routeDepth);
     }
-    watch(() => route.fullPath, (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        const depth = c.routeDepth;
-        if (depth) {
-          const currentRoutePath = getNestedRoutePath(route, c.routeDepth);
-          if (currentRoutePath === expViewRoutePath) {
-            const routePath = route2routePath(route);
-            const {
-              srfnav
-            } = routePath.pathNodes[depth - 1];
-            c.handleSelectChange(srfnav);
+    if (route) {
+      watch(() => route.fullPath, (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          const depth = c.routeDepth;
+          if (depth) {
+            const currentRoutePath = getNestedRoutePath(route, c.routeDepth);
+            if (currentRoutePath === expViewRoutePath) {
+              const routePath = route2routePath(route);
+              const {
+                srfnav
+              } = routePath.pathNodes[depth - 1];
+              c.handleSelectChange(srfnav);
+            }
           }
         }
-      }
-    }, {
-      immediate: true
-    });
+      }, {
+        immediate: true
+      });
+    }
     const renderMenuItems = (item) => {
       if (!item.visible) {
         return;
@@ -145,7 +144,6 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
     };
   },
   render() {
-    let _slot;
     const {
       isCreated,
       drBarItems,
@@ -162,10 +160,12 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
         "default-active": selectedItem,
         "onSelect": this.handleSelect,
         "default-openeds": this.opens
-      }, _isSlot(_slot = drBarItems.map((item) => {
-        return this.renderMenuItems(item);
-      })) ? _slot : {
-        default: () => [_slot]
+      }, {
+        default: () => {
+          return drBarItems.map((item) => {
+            return this.renderMenuItems(item);
+          });
+        }
       })]
     });
   }

package/es/control/drbar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { DRBarControl } from './drbar.mjs';
 import { DRBarProvider } from './drbar.provider.mjs';

package/es/control/drtab/drtab-control.util.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, watchEffect, onUnmounted } from 'vue';
-import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.35-alpha.1_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
+import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.38-alpha.16_axios@1.7.7_lodash-es@4.17.21_qs@6.13.0_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

package/es/control/drtab/drtab.controller.d.ts

@@ -182,7 +182,7 @@ export declare class DRTabController extends ControlController<IDEDRTab, IDRTabS
      * @param {boolean} [isRoutePushed=false]
      * @return {*}  {Promise<void>}
      */
-    openNavPosView(drTabPages: IDEDRCtrlItem, isRoutePushed?: boolean): Promise<void>;
+    openNavPosView(drTabPages: IDEDRCtrlItem, isRoutePushed?: boolean, navViewKey?: string): Promise<void>;
     /**
      * 初始化计数器
      * @author lxm
@@ -191,6 +191,14 @@ export declare class DRTabController extends ControlController<IDEDRTab, IDRTabS
      * @return {*}  {Promise<void>}
      */
     protected initCounter(): Promise<void>;
+    /**
+     * 刷新
+     *
+     * @author tony001
+     * @date 2024-10-21 11:10:10
+     * @return {*}  {Promise<void>}
+     */
+    refresh(): Promise<void>;
     /**
      * 监听组件销毁
      *

package/es/control/drtab/drtab.controller.mjs

@@ -1,3 +1,4 @@
+import { createUUID } from 'qx-util';
 import { ControlController, calcItemVisibleByCounter, calcItemVisible, Srfuf, hasSubRoute, calcNavParams, CounterService } from '@ibiz-template/runtime';
 import { getNestedRoutePath } from '@ibiz-template/vue3-util';
 
@@ -85,6 +86,7 @@ class DRTabController extends ControlController {
     super.initState();
     this.state.drTabPages = [];
     this.state.showMore = false;
+    this.state.hideEditItem = !Object.is(this.model.hideEditItem, false);
   }
   /**
    * 创建完成
@@ -261,7 +263,6 @@ class DRTabController extends ControlController {
     const {
       editItemCaption,
       editItemCapLanguageRes,
-      hideEditItem,
       editItemSysImage,
       uniqueTag,
       dedrtabPages
@@ -271,11 +272,11 @@ class DRTabController extends ControlController {
     if (editItemCapLanguageRes) {
       caption = ibiz.i18n.t(editItemCapLanguageRes.lanResTag, editItemCaption);
     }
-    if (!hideEditItem) {
+    if (!this.state.hideEditItem) {
       drTabPages.push({
         tag: uniqueTag,
         caption,
-        hidden: !!hideEditItem,
+        hidden: !!this.state.hideEditItem,
         disabled: false,
         sysImage: editItemSysImage,
         fullPath: this.routeDepth ? getNestedRoutePath(this.router.currentRoute.value, this.routeDepth) : ""
@@ -350,6 +351,9 @@ class DRTabController extends ControlController {
    */
   setVisible(ctrlName) {
     var _a;
+    if (this.state.hideEditItem) {
+      return;
+    }
     const viewForm = (_a = this.view.layoutPanel) == null ? void 0 : _a.panelItems.view_form;
     if (ctrlName === "form") {
       if (viewForm) {
@@ -405,11 +409,11 @@ class DRTabController extends ControlController {
    * @param {boolean} [isRoutePushed=false]
    * @return {*}  {Promise<void>}
    */
-  async openNavPosView(drTabPages, isRoutePushed = false) {
+  async openNavPosView(drTabPages, isRoutePushed = false, navViewKey) {
     var _a;
     const { context, params } = this.prepareParams(drTabPages);
     (_a = this.navPos) == null ? void 0 : _a.openView({
-      key: drTabPages.id,
+      key: navViewKey || drTabPages.id,
       context,
       params,
       viewId: drTabPages.appViewId,
@@ -436,6 +440,29 @@ class DRTabController extends ControlController {
       this.counter.onChange(this.calcItemStateByCounter);
     }
   }
+  /**
+   * 刷新
+   *
+   * @author tony001
+   * @date 2024-10-21 11:10:10
+   * @return {*}  {Promise<void>}
+   */
+  async refresh() {
+    var _a;
+    const { activeName } = this.state;
+    const drBarItem = (_a = this.model.dedrtabPages) == null ? void 0 : _a.find(
+      (item) => item.id === activeName
+    );
+    if (drBarItem) {
+      this.setVisible("navPos");
+      this.openNavPosView(drBarItem, false, createUUID());
+    } else {
+      this.setVisible("form");
+      if (this.routeDepth && this.state.drTabPages[0]) {
+        this.router.push(this.state.drTabPages[0].fullPath);
+      }
+    }
+  }
   /**
    * 监听组件销毁
    *

package/es/control/drtab/drtab.css

@@ -1 +1 @@
-.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-color-primary)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-color-primary)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab-pane-label__text+.ibiz-control-drtab-pane-label__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}
+.ibiz-control-drtab{--ibiz-control-drtab-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-hover-bg-color:transparent}.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-hover-color);background-color:var(--ibiz-control-drtab-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-dropdown-list .ibiz-badge{width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;cursor:pointer;align-items:center;font-size:var(--ibiz-font-size-header-5)}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative;padding:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{top:0;right:-6px;position:absolute}.ibiz-control-drtab-dropdown-list__popper{max-width:220px;min-width:150px}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{padding-right:var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-small);margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{color:var(--ibiz-color-primary);font-size:var(--ibiz-width-icon-medium)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-color-fill-0)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-fill-0)}

package/es/control/drtab/drtab.d.ts

@@ -26,8 +26,10 @@ export declare const DRTabControl: import("vue").DefineComponent<{
     counterData: IData;
     visibleItems: import("vue").Ref<IData>;
     moreItems: import("vue").Ref<IData>;
+    tabPosition: string;
+    onTabChange: (key: string) => void;
     handleTabChange: () => void;
-    handleMoreChange: (key: string) => void;
+    renderDropdownList: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEDRTab>;

package/es/control/drtab/drtab.mjs

@@ -1,12 +1,12 @@
-import { ref, reactive, onUnmounted, watch, resolveComponent, createTextVNode, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, reactive, computed, onUnmounted, watch, createVNode, resolveComponent, createTextVNode } from 'vue';
 import { useControlController, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { hasSubRoute } from '@ibiz-template/runtime';
 import { isNil } from 'ramda';
 import { showTitle } from '@ibiz-template/core';
 import { DRTabController } from './drtab.controller.mjs';
-import './drtab.css';
 import { useAppDRTab } from './drtab-control.util.mjs';
+import './drtab.css';
 
 "use strict";
 const DRTabControl = /* @__PURE__ */ defineComponent({
@@ -29,6 +29,7 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     }
   },
   setup() {
+    var _a;
     const c = useControlController((...args) => new DRTabController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = useRouter();
@@ -41,20 +42,24 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     const fn = (counter) => {
       Object.assign(counterData, counter);
     };
+    const tabPosition = ((_a = c.view.model.tabLayout) == null ? void 0 : _a.toLowerCase()) || "top";
     c.evt.on("onCreated", () => {
       if (c.counter) {
         c.counter.onChange(fn, true);
       }
     });
+    const activeTab = computed(() => {
+      return c.state.drTabPages.find((tab) => tab.tag === c.state.activeName);
+    });
     onUnmounted(() => {
-      var _a;
-      (_a = c.counter) == null ? void 0 : _a.offChange(fn);
+      var _a2;
+      (_a2 = c.counter) == null ? void 0 : _a2.offChange(fn);
     });
     c.setRouter(router);
     const handleTabChange = () => {
       c.handleTabChange();
     };
-    const handleMoreChange = (key) => {
+    const onTabChange = (key) => {
       c.state.activeName = key;
       c.handleTabChange();
     };
@@ -63,34 +68,85 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     if (c.routeDepth) {
       expViewRoutePath = getNestedRoutePath(route, c.routeDepth);
     }
-    watch(() => route.fullPath, (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        const depth = c.routeDepth;
-        if (depth) {
-          const currentRoutePath = getNestedRoutePath(route, c.routeDepth);
-          if (currentRoutePath === expViewRoutePath) {
-            const routePath = route2routePath(route);
-            const {
-              srfnav
-            } = routePath.pathNodes[depth - 1];
-            const isRoutePushed = !!c.routeDepth && hasSubRoute(c.routeDepth);
-            if (srfnav && c.state.activeName && c.state.activeName !== srfnav) {
-              c.state.activeName = srfnav;
-              c.handleTabChange(isRoutePushed);
-            } else if (!srfnav) {
-              const routeNoSub = !!c.routeDepth && !hasSubRoute(c.routeDepth);
-              const doTabChange = c.state.activeName !== c.state.defaultName || routeNoSub;
-              if (doTabChange) {
-                c.state.activeName = c.state.defaultName;
+    if (route) {
+      watch(() => route.fullPath, (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          const depth = c.routeDepth;
+          if (depth) {
+            const currentRoutePath = getNestedRoutePath(route, c.routeDepth);
+            if (currentRoutePath === expViewRoutePath) {
+              const routePath = route2routePath(route);
+              const {
+                srfnav
+              } = routePath.pathNodes[depth - 1];
+              const isRoutePushed = !!c.routeDepth && hasSubRoute(c.routeDepth);
+              if (srfnav && c.state.activeName && c.state.activeName !== srfnav) {
+                c.state.activeName = srfnav;
                 c.handleTabChange(isRoutePushed);
+              } else if (!srfnav) {
+                const routeNoSub = !!c.routeDepth && !hasSubRoute(c.routeDepth);
+                const doTabChange = c.state.activeName !== c.state.defaultName || routeNoSub;
+                if (doTabChange) {
+                  c.state.activeName = c.state.defaultName;
+                  c.handleTabChange(isRoutePushed);
+                }
               }
             }
           }
         }
-      }
-    }, {
-      immediate: true
-    });
+      }, {
+        immediate: true
+      });
+    }
+    const renderDropdownList = () => {
+      return createVNode(resolveComponent("el-dropdown"), {
+        "trigger": "click",
+        "class": ns.b("dropdown-list"),
+        "popper-class": ns.be("dropdown-list", "popper"),
+        "onCommand": onTabChange
+      }, {
+        default: () => {
+          var _a2, _b, _c;
+          return createVNode("div", {
+            "class": ns.be("dropdown-list", "trigger")
+          }, [((_a2 = activeTab.value) == null ? void 0 : _a2.sysImage) && createVNode(resolveComponent("iBizIcon"), {
+            "icon": activeTab.value.sysImage
+          }, null), createVNode("div", {
+            "class": "caption"
+          }, [(_b = activeTab.value) == null ? void 0 : _b.caption, ((_c = activeTab.value) == null ? void 0 : _c.counterId) && createVNode(resolveComponent("iBizBadge"), {
+            "value": counterData[activeTab.value.counterId],
+            "counterMode": activeTab.value.counterMode
+          }, null)]), createVNode("ion-icon", {
+            "name": "chevron-down-outline"
+          }, null)]);
+        },
+        dropdown: () => {
+          return createVNode("div", {
+            "class": ns.bem("dropdown-list", "popper", "content")
+          }, [c.state.drTabPages.map((tab) => {
+            if (!tab.hidden) {
+              return createVNode(resolveComponent("el-dropdown-item"), {
+                "class": [ns.bem("dropdown-list", "popper", "item"), ns.is("active", tab.tag === c.state.activeName)],
+                "command": tab.tag,
+                "disabled": tab.disabled
+              }, {
+                default: () => [tab.sysImage && createVNode(resolveComponent("iBizIcon"), {
+                  "icon": tab.sysImage
+                }, null), createVNode("span", {
+                  "class": "caption"
+                }, [tab.caption]), tab.counterId && createVNode(resolveComponent("iBizBadge"), {
+                  "value": counterData[tab.counterId],
+                  "counterMode": tab.counterMode
+                }, null), tab.tag === c.state.activeName && createVNode("ion-icon", {
+                  "name": "checkmark-outline"
+                }, null)]
+              });
+            }
+            return null;
+          })]);
+        }
+      });
+    };
     return {
       c,
       ns,
@@ -98,8 +154,10 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
       counterData,
       visibleItems,
       moreItems,
+      tabPosition,
+      onTabChange,
       handleTabChange,
-      handleMoreChange
+      renderDropdownList
     };
   },
   render() {
@@ -135,7 +193,7 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
             return this.moreItems.map((item) => {
               return createVNode(resolveComponent("el-dropdown-item"), {
                 "class": [this.c.state.activeName === item.tag ? this.ns.be("more-dropdown-popper", "active") : ""],
-                "onClick": () => this.handleMoreChange(item.tag)
+                "onClick": () => this.onTabChange(item.tag)
               }, {
                 default: () => [createVNode("span", {
                   "class": [this.ns.be("more-dropdown-popper", "label")]
@@ -158,7 +216,7 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
       "controller": this.c,
       "class": [this.ns.b(), this.moreItems.length > 0 ? this.ns.b("more") : ""]
     }, {
-      default: () => [isCreated && isCalculatedPermission && createVNode(resolveComponent("el-tabs"), {
+      default: () => [isCreated && isCalculatedPermission && this.tabPosition === "top_dropdownlist" ? this.renderDropdownList() : createVNode(resolveComponent("el-tabs"), {
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
         "onTabChange": this.handleTabChange
@@ -175,7 +233,10 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
               label: () => {
                 return createVNode("span", {
                   "class": this.ns.b("label")
-                }, [createVNode("span", {
+                }, [tab.sysImage && createVNode(resolveComponent("iBizIcon"), {
+                  "class": this.ns.be("label", "icon"),
+                  "icon": tab.sysImage
+                }, null), createVNode("span", {
                   "class": this.ns.be("label", "text")
                 }, [tab.caption]), !isNil(counterNum) && createVNode(resolveComponent("iBizBadge"), {
                   "class": this.ns.e("counter"),

package/es/control/drtab/index.d.ts

@@ -22,8 +22,10 @@ export declare const IBizDRTabControl: import("@ibiz-template/vue3-util").TypeWi
     counterData: IData;
     visibleItems: import("vue").Ref<IData>;
     moreItems: import("vue").Ref<IData>;
+    tabPosition: string;
+    onTabChange: (key: string) => void;
     handleTabChange: () => void;
-    handleMoreChange: (key: string) => void;
+    renderDropdownList: () => JSX.Element;
 }, 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").IDEDRTab>;

package/es/control/drtab/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { DRTabControl } from './drtab.mjs';
 import { DRTabProvider } from './drtab.provider.mjs';

package/es/control/exp-bar/calendar-exp-bar/calendar-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './calendar-exp-bar.css';
 import { CalendarExpBarController } from '@ibiz-template/runtime';

package/es/control/exp-bar/calendar-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { CalendarExpBarControl } from './calendar-exp-bar.mjs';
 import { CalendarExpBarProvider } from './calendar-exp-bar.provider.mjs';

package/es/control/exp-bar/chart-exp-bar/chart-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './chart-exp-bar.css';
 import { ChartExpBarController } from '@ibiz-template/runtime';

package/es/control/exp-bar/chart-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { ChartExpBarControl } from './chart-exp-bar.mjs';
 import { ChartExpBarProvider } from './chart-exp-bar.provider.mjs';

package/es/control/exp-bar/data-view-exp-bar/data-view-view-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './data-view-exp-bar.css';
 import { ExpBarControlController } from '@ibiz-template/runtime';

package/es/control/exp-bar/data-view-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { DataViewExpBarControl } from './data-view-view-exp-bar.mjs';
 import { DataViewExpBarProvider } from './data-view-exp-bar.provider.mjs';

package/es/control/exp-bar/grid-exp-bar/grid-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './grid-exp-bar.css';
 import { ExpBarControlController } from '@ibiz-template/runtime';

package/es/control/exp-bar/grid-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { GridExpBarControl } from './grid-exp-bar.mjs';
 import { GridExpBarProvider } from './grid-exp-bar.provider.mjs';

package/es/control/exp-bar/list-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { ListExpBarControl } from './list-exp-bar.mjs';
 import { ListExpBarProvider } from './list-exp-bar.provider.mjs';

package/es/control/exp-bar/list-exp-bar/list-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './list-exp-bar.css';
 import { ExpBarControlController } from '@ibiz-template/runtime';

package/es/control/exp-bar/render-util.mjs

@@ -1,7 +1,7 @@
-import { resolveComponent, createVNode, h } from 'vue';
+import { createVNode, resolveComponent, h } from 'vue';
 import { debounce } from 'lodash-es';
 import { useRoute } from 'vue-router';
-import { useNamespace, route2routePath, onRouteChange } from '@ibiz-template/vue3-util';
+import { useNamespace, onRouteChange, route2routePath } from '@ibiz-template/vue3-util';
 import './render-util.css';
 
 "use strict";

package/es/control/exp-bar/tree-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { TreeExpBarControl } from './tree-exp-bar.mjs';
 import { TreeExpBarProvider } from './tree-exp-bar.provider.mjs';

package/es/control/exp-bar/tree-exp-bar/tree-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, computed, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './tree-exp-bar.css';
 import { TreeExpBarController } from '@ibiz-template/runtime';

package/es/control/form/edit-form/edit-form.d.ts

@@ -1,6 +1,6 @@
 import { EditFormController, IControlProvider } from '@ibiz-template/runtime';
 import { IDEEditForm } from '@ibiz/model-core';
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
 export declare const EditFormControl: import("vue").DefineComponent<{
     modelData: {
         type: PropType<IDEEditForm>;
@@ -32,6 +32,15 @@ export declare const EditFormControl: import("vue").DefineComponent<{
 }, {
     c: EditFormController;
     ns: import("@ibiz-template/core").Namespace;
+    anchorList: Ref<IData[]>;
+    anchorTargetRef: Ref<IData | undefined>;
+    calcNavBarConfig: () => {
+        navBarPos: string | undefined;
+        navBarSysCss: import("@ibiz/model-core").ISysCss | undefined;
+        navBarWidth: number | undefined;
+        navBarStyle: string | undefined;
+        navbarHeight: number | undefined;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEEditForm>;