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

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./custom-menu-design.css');
 var core = require('@ibiz-template/core');
 var lodashEs = require('lodash-es');
+require('./custom-menu-design.css');
 
 "use strict";
 function _isSlot(s) {
@@ -46,6 +47,10 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
     const loading = vue.ref(false);
     const visible = vue.ref(false);
     const configs = vue.ref([]);
+    const hideSeparator = vue.ref([]);
+    vue.onMounted(() => {
+      hideSeparator.value = runtime.formatSeparator("APPMENU", c.model.appMenuItems, c.state.menuItemsState);
+    });
     const stopExpand = (event) => {
       event.stopPropagation();
     };
@@ -129,6 +134,9 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
       if (!((_a = c.state.menuItemsState[menu.key]) == null ? void 0 : _a.visible)) {
         return;
       }
+      if (hideSeparator.value.includes(menu.key)) {
+        return;
+      }
       if (menu.itemType === "MENUITEM") {
         let content;
         const provider = c.itemProviders[menu.key];
@@ -221,9 +229,10 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
       }, [renderMenuList(configs.value)]);
     };
     const openDesign = () => {
-      if (c.context.srfrunmode === "DESIGN") {
+      if (c.runMode === "DESIGN") {
         return;
       }
+      hideSeparator.value = runtime.formatSeparator("APPMENU", c.model.appMenuItems, c.state.menuItemsState);
       configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
       visible.value = true;
     };

package/lib/control/calendar/calendar.cjs

@@ -34,6 +34,10 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       type: Number,
       default: void 0
     },
+    isSimple: {
+      type: Boolean,
+      required: false
+    },
     loadDefault: {
       type: Boolean,
       default: true
@@ -43,14 +47,18 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.CalendarController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const calendarRef = vue.ref();
-    const popoverVisible = vue.ref(false);
+    const curPopover = vue.ref();
+    const popoverValue = vue.ref("");
     const selectDate = (tag) => {
       if (!calendarRef.value)
         return;
       calendarRef.value.selectDate(tag);
     };
     c.evt.on("onActive", () => {
-      popoverVisible.value = false;
+      if (curPopover.value) {
+        curPopover.value.hide();
+        curPopover.value = void 0;
+      }
     });
     vue.watch(() => c.state.selectedDate, (oldVal, newVal) => {
       const oldDateString = dayjs(oldVal).format("YYYY-MM");
@@ -66,17 +74,21 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         backgroundColor: data.bkColor
       };
     };
+    const onShowNavView = () => {
+      c.state.showNavView = !c.state.showNavView;
+    };
     return {
       c,
       ns,
+      curPopover,
       calendarRef,
-      popoverVisible,
+      popoverValue,
       selectDate,
-      calcItemStyle
+      calcItemStyle,
+      onShowNavView
     };
   },
   render() {
-    let _slot6;
     const renderPanelItem = (item, modelData) => {
       const {
         context,
@@ -131,8 +143,14 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       if (items.length > 1) {
         return [renderCalendarItem(items[0]), vue.createVNode(vue.resolveComponent("el-popover"), {
           "trigger": "click",
-          "visible": this.popoverVisible,
-          "onUpdate:visible": ($event) => this.popoverVisible = $event
+          "ref": (el) => {
+            if (el && items[0].id === this.popoverValue) {
+              this.curPopover = el;
+            }
+          },
+          "onShow": () => {
+            this.popoverValue = items[0].id;
+          }
         }, {
           reference: () => {
             return vue.createVNode("span", {
@@ -332,10 +350,24 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           return renderElCalender();
       }
     };
-    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+    return vue.createVNode(vue.resolveComponent("iBizControlNavigation"), {
       "controller": this.c
-    }, _isSlot(_slot6 = renderCalendar()) ? _slot6 : {
-      default: () => [_slot6]
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+        "controller": this.c
+      }, {
+        default: () => [renderCalendar(), this.c.state.enableNavView ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.showNav"),
+          "name": "eye-outline",
+          "onClick": this.onShowNavView
+        }, null) : vue.createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
+          "name": "eye-off-outline",
+          "onClick": this.onShowNavView
+        }, null) : null]
+      })]
     });
   }
 });

package/lib/control/calendar/calendar.css

@@ -1 +1 @@
-.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);width:100%;height:100%}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar .ibiz-control-calendar-item{margin:0}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:wrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height)}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-legend{display:flex;justify-content:flex-end;width:100%}.ibiz-control-calendar-legend>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}
+.ibiz-control-calendar{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);width:100%;height:100%;position:relative}.ibiz-control-calendar__nav-icon{right:0;top:18px;cursor:pointer;position:absolute;color:var(--ibiz-color-primary)}.ibiz-control-calendar__calendar-item{display:flex;align-items:center;padding:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar__icon{width:var(--ibiz-width-icon-small);height:var(--ibiz-width-icon-small);margin-right:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-circle)}.ibiz-control-calendar .ibiz-control-calendar-item{margin:0}.ibiz-control-calendar-content{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-calendar-content .el-calendar{display:flex;flex-direction:column;height:100%}.ibiz-control-calendar-content .el-calendar__header{flex-wrap:wrap}.ibiz-control-calendar-content .el-calendar-table,.ibiz-control-calendar-content .el-calendar-table .el-calendar-day{width:100%;height:100%;min-height:90px;cursor:pointer}.ibiz-control-calendar-content .el-calendar-table{flex:1;width:-moz-fit-content;width:fit-content}.ibiz-control-calendar-content .el-calendar-table .el-calendar-day:hover{cursor:pointer;background-color:var(--el-calendar-selected-bg-color)}.ibiz-control-calendar-content .el-calendar__body{display:flex;flex:1;padding:0;overflow:auto}.ibiz-control-calendar-more{width:100%;font-size:var(--ibiz-font-size-small);border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-control-calendar-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);height:100%;padding:var(--ibiz-control-calendar-item-padding);margin-bottom:var(--ibiz-control-calendar-margin);overflow:hidden;font-size:var(--ibiz-control-calendar-font-size);color:var(--ibiz-control-calendar-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border:solid .5px transparent;border-radius:var(--ibiz-control-calendar-border-radius)}.ibiz-control-calendar-item:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-control-calendar-item.is-active{background-color:var(--ibiz-control-calendar-active-bg-color);border:solid .5px var(--ibiz-control-calendar-border-color)}.ibiz-control-calendar-date-text{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);padding-bottom:var(--ibiz-control-calendar-item-padding);margin:0;text-align:center}.ibiz-control-calendar-day{height:-moz-fit-content;height:fit-content}.ibiz-control-calendar-content-title{line-height:var(--ibiz-editor-default-line-height)}.ibiz-control-calendar-content-header{--ibiz-control-calendar-text-color:var(--ibiz-color-text-0);--ibiz-control-calendar-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-border-color:var(--ibiz-color-primary-active);--ibiz-control-calendar-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-border-radius:var(--ibiz-border-radius-small);--ibiz-control-calendar-margin:var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-calendar-content-header>*+*{margin-left:var(--ibiz-control-calendar-item-padding)}.ibiz-control-calendar-legend{display:flex;justify-content:flex-end;width:100%}.ibiz-control-calendar-legend>*+*{margin-left:var(--ibiz-spacing-base-loose)}.ibiz-control-calendar-timeline-content .el-timeline{padding-left:0}

package/lib/control/dashboard/custom-dashboard-container/custom-dashboard-container.cjs

@@ -71,7 +71,15 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
       return tempModelDatas;
     };
     const handleCustomModelChange = async (args) => {
-      await props.dashboard.initPortlets(args.model);
+      var _a;
+      const filterModels = (_a = props.dashboard.model.controls) == null ? void 0 : _a.filter((element) => {
+        return element.portletType === "FILTER";
+      });
+      if (args.model && args.model.length > 0) {
+        await props.dashboard.initPortlets(args.model);
+      } else if (filterModels && filterModels.length > 0) {
+        await props.dashboard.initPortlets(filterModels);
+      }
       await props.dashboard.initPortletsConfig(args.config);
     };
     const onSaved = async (args) => {
@@ -125,8 +133,7 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
         });
         props.dashboard.refresh();
         emit("changed", {
-          model: modelDatas,
-          filter: true
+          model: modelDatas
         });
       });
     });

package/lib/control/dashboard/dashboard-design/dashboard-design.cjs

@@ -144,7 +144,8 @@ const DashboardDesign = /* @__PURE__ */ vue.defineComponent({
             return cat.codeName === ((_a2 = portlet.appPortletCat) == null ? void 0 : _a2.codeName);
           });
           if (categoryTag) {
-            if (!portletCat || portletCat.codeName !== categoryTag) {
+            const categoryRegex = new RegExp(categoryTag);
+            if (!portletCat || portletCat && portletCat.codeName && !categoryRegex.test(portletCat.codeName)) {
               return;
             }
           }

package/lib/control/dashboard/dashboard.cjs

@@ -77,6 +77,9 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
       anchorList.value = c.enableAnchorCtrls;
     });
     c.evt.on("onItemModelReset", async (args) => {
+      if (c.model.customizeMode !== 2) {
+        return;
+      }
       const {
         name
       } = args;
@@ -97,7 +100,8 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
     });
     const handleCustomModelChange = (args) => {
       const model = args.model;
-      if (args.filter && model && model.length > 0) {
+      const controls = c.model.controls;
+      if (model && model.length > 0) {
         model.forEach((element) => {
           if (element.portletType === "FILTER") {
             refreshTagObj[element.id] = {
@@ -105,6 +109,14 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
             };
           }
         });
+      } else if (controls && controls.length > 0) {
+        controls.forEach((element) => {
+          if (element.portletType === "FILTER") {
+            refreshTagObj[element.id] = {
+              refreshtag: lodashEs.uniqueId()
+            };
+          }
+        });
       }
       customModelDatas.value = model;
       vue$1.$forceUpdate();

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-design/filter-portlet-design.cjs

@@ -93,6 +93,7 @@ const IBizFilterPortletDesign = /* @__PURE__ */ vue.defineComponent({
       checkBoxList.value = runtime.filterPortletByID(model.value.id, props.context, props.items, props.dashboardStyle === "BIREPORTDASHBOARD" || props.dashboardStyle === "BIREPORTDASHBOARD2");
     };
     const init = async () => {
+      var _a;
       allFilters = getFilters();
       if (props.items) {
         formData.items = props.items.map((x) => x.id);
@@ -106,7 +107,7 @@ const IBizFilterPortletDesign = /* @__PURE__ */ vue.defineComponent({
           const selectAll = props.filter.filterConfig.scope === "all";
           if (!selectAll) {
             formData.selectAll = false;
-            formData.items = props.filter.filterConfig.scopedata.split(",");
+            formData.items = ((_a = props.filter.filterConfig.scopedata) == null ? void 0 : _a.split(",")) || [];
           }
           condition.value = props.filter.searchConds;
         }
@@ -231,7 +232,8 @@ const IBizFilterPortletDesign = /* @__PURE__ */ vue.defineComponent({
         "disabled": formData.selectAll
       }, _isSlot(_slot = checkBoxList.value.map((item) => {
         return vue.createVNode(vue.resolveComponent("el-checkbox"), {
-          "label": item.id
+          "label": item.id,
+          "disabled": onlyAdd && formData.items.includes(item.id)
         }, {
           default: () => [item.title]
         });
@@ -270,6 +272,7 @@ const IBizFilterPortletDesign = /* @__PURE__ */ vue.defineComponent({
           "props": "items"
         }, {
           default: () => [vue.createVNode(vue.resolveComponent("el-switch"), {
+            "title": ibiz.i18n.t("control.dashboard.filterPortletDesign.selectAll"),
             "modelValue": formData.selectAll,
             "onUpdate:modelValue": ($event) => formData.selectAll = $event,
             "onChange": onSwitchChange
@@ -307,11 +310,13 @@ const IBizFilterPortletDesign = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("div", {
         "class": ns.b("footer")
       }, [vue.createVNode(vue.resolveComponent("el-button"), {
-        "onClick": handleCancel
+        "onClick": handleCancel,
+        "title": ibiz.i18n.t("app.cancel")
       }, _isSlot(_slot2 = ibiz.i18n.t("app.cancel")) ? _slot2 : {
         default: () => [_slot2]
       }), vue.createVNode(vue.resolveComponent("el-button"), {
-        "onClick": handleConfirm
+        "onClick": handleConfirm,
+        "title": ibiz.i18n.t("app.confirm")
       }, _isSlot(_slot3 = ibiz.i18n.t("app.confirm")) ? _slot3 : {
         default: () => [_slot3]
       })]);

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-design/filter-portlet-design.css

@@ -1 +1 @@
-.ibiz-filter-portlet-design{--ibiz-filter-portlet-design-layout-left-width:260px;display:flex;width:100%;height:100%}.ibiz-filter-portlet-design__layout-left{width:var(--ibiz-filter-portlet-design-layout-left-width);background-color:var(--ibiz-color-bg-0);border-right:1px solid var(--ibiz-color-border)}.ibiz-filter-portlet-design__layout-right{display:flex;flex:1;flex-direction:column}.ibiz-filter-portlet-design-left-content__title{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-extra-loose);margin:var(--ibiz-spacing-extra-tight) 0;font-size:var(--ibiz-font-size-header-6);line-height:var(--ibiz-height-control-default)}.ibiz-filter-portlet-design-left-list{padding:0;padding:0 var(--ibiz-spacing-base-tight);margin:0;margin-top:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-regular);list-style:none outside none;color-scheme:light;cursor:pointer;visibility:visible;unicode-bidi:isolate}.ibiz-filter-portlet-design-left-list__item{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-base-loose);margin-bottom:var(--ibiz-spacing-base-tight);overflow:hidden;line-height:var(--ibiz-height-control-default);text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ibiz-border-radius-small);transition:background-color .3s,transform .3s}.ibiz-filter-portlet-design-left-list__item:last-child{margin-bottom:0}.ibiz-filter-portlet-design-left-list__item:hover{background-color:var(--ibiz-color-fill-0)}.ibiz-filter-portlet-design-left-list__item.is-actvie{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-primary-light-default)}.ibiz-filter-portlet-design-left-list__item.is-disabled{cursor:no-drop;background-color:transparent}.ibiz-filter-portlet-design-right-content{flex:auto}.ibiz-filter-portlet-design-right-content__title{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-extra-loose);margin:var(--ibiz-spacing-tight) 0;line-height:var(--ibiz-height-control-default)}.ibiz-filter-portlet-design-right-form{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-filter-portlet-design-right-form__checks{position:relative}.ibiz-filter-portlet-design-right-form__checks .el-form-item__content{position:static}.ibiz-filter-portlet-design-right-form__checks .el-switch{position:absolute;top:0;right:0}.ibiz-filter-portlet-design-right-form .el-form-item{display:flex;flex-flow:column nowrap;margin-bottom:var(--ibiz-spacing-base)}.ibiz-filter-portlet-design-right-form .el-form-item .el-form-item__label-wrap{margin-left:0!important}.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::before,.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::before{display:none}.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::after,.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::after{margin-right:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-extra-tight);color:var(--el-color-danger);content:"*"}.ibiz-filter-portlet-design-right-form .el-select{width:100%}.ibiz-filter-portlet-design-checkbox__label{padding-left:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked{cursor:not-allowed}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__inner{background-color:var(--el-checkbox-disabled-checked-input-fill);border-color:var(--el-checkbox-disabled-checked-input-border-color)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__inner::after{border-color:var(--el-checkbox-disabled-checked-icon-color)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__label{color:var(--el-disabled-text-color);cursor:not-allowed}.ibiz-filter-portlet-design-checkbox .ibiz-icon{padding-left:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-checkbox .el-checkbox__label{display:flex;align-items:center;padding-left:0}.ibiz-filter-portlet-design-checkbox .el-checkbox{--el-checkbox-input-border:var(--el-border-width) var(--el-border-style) var(--ibiz-color-border);--el-checkbox-disabled-checked-input-fill:var(--ibiz-color-border);--el-checkbox-text-color:var(--ibiz-color-disabled-text)}.ibiz-filter-portlet-design-condition{padding:0 var(--ibiz-spacing-extra-loose);overflow:auto}.ibiz-filter-portlet-design-footer{display:flex;justify-content:flex-end;padding:var(--ibiz-spacing-base) var(--ibiz-spacing-extra-loose)}
+.ibiz-filter-portlet-design{--ibiz-filter-portlet-design-layout-left-width:260px;display:flex;width:100%;height:100%}.ibiz-filter-portlet-design__layout-left{width:var(--ibiz-filter-portlet-design-layout-left-width);background-color:var(--ibiz-color-bg-0);border-right:1px solid var(--ibiz-color-border)}.ibiz-filter-portlet-design__layout-right{display:flex;flex:1;flex-direction:column}.ibiz-filter-portlet-design-left-content__title{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-extra-loose);margin:var(--ibiz-spacing-extra-tight) 0;font-size:var(--ibiz-font-size-header-6);line-height:var(--ibiz-height-control-default)}.ibiz-filter-portlet-design-left-list{padding:0;padding:0 var(--ibiz-spacing-base-tight);margin:0;margin-top:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-regular);list-style:none outside none;color-scheme:light;cursor:pointer;visibility:visible;unicode-bidi:isolate}.ibiz-filter-portlet-design-left-list__item{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-base-loose);margin-bottom:var(--ibiz-spacing-base-tight);overflow:hidden;line-height:var(--ibiz-height-control-default);text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ibiz-border-radius-small);transition:background-color .3s,transform .3s}.ibiz-filter-portlet-design-left-list__item:last-child{margin-bottom:0}.ibiz-filter-portlet-design-left-list__item:hover{background-color:var(--ibiz-color-fill-0)}.ibiz-filter-portlet-design-left-list__item.is-actvie{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-primary-light-default)}.ibiz-filter-portlet-design-left-list__item.is-disabled{cursor:no-drop;background-color:transparent}.ibiz-filter-portlet-design-right-content{flex:auto}.ibiz-filter-portlet-design-right-content__title{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-extra-loose);margin:var(--ibiz-spacing-tight) 0;line-height:var(--ibiz-height-control-default)}.ibiz-filter-portlet-design-right-form{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-filter-portlet-design-right-form__checks{position:relative}.ibiz-filter-portlet-design-right-form__checks .el-form-item__content{position:static}.ibiz-filter-portlet-design-right-form__checks .el-switch{position:absolute;top:0;right:0}.ibiz-filter-portlet-design-right-form .el-form-item{display:flex;flex-flow:column nowrap;margin-bottom:var(--ibiz-spacing-base)}.ibiz-filter-portlet-design-right-form .el-form-item .el-form-item__label-wrap{margin-left:0!important}.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::before,.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::before{display:none}.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::after,.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::after{margin-right:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-extra-tight);color:var(--el-color-danger);content:"*"}.ibiz-filter-portlet-design-right-form .el-select{width:100%}.ibiz-filter-portlet-design-checkbox__label{padding-left:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked{cursor:not-allowed}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__inner{background-color:var(--el-checkbox-disabled-checked-input-fill);border-color:var(--el-checkbox-disabled-checked-input-border-color)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__inner::after{border-color:var(--el-checkbox-disabled-checked-icon-color)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__label{color:var(--el-disabled-text-color);cursor:not-allowed}.ibiz-filter-portlet-design-checkbox .ibiz-icon{padding-left:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-checkbox .el-checkbox__label{display:flex;align-items:center;padding-left:0}.ibiz-filter-portlet-design-checkbox .el-checkbox{--el-checkbox-input-border:var(--el-border-width) var(--el-border-style) var(--ibiz-color-border);--el-checkbox-disabled-checked-input-fill:var(--ibiz-color-border);--el-checkbox-text-color:var(--ibiz-color-disabled-text)}.ibiz-filter-portlet-design-checkbox .el-checkbox__input{margin-right:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-condition{padding:0 var(--ibiz-spacing-extra-loose);overflow:auto}.ibiz-filter-portlet-design-footer{display:flex;justify-content:flex-end;padding:var(--ibiz-spacing-base) var(--ibiz-spacing-extra-loose)}

package/lib/control/data-view/data-view.cjs

@@ -302,6 +302,9 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     const onExpandData = () => {
       isCollapse.value = false;
     };
+    const onShowNavView = () => {
+      c.state.showNavView = !c.state.showNavView;
+    };
     const upIcon = () => {
       return vue.createVNode("div", {
         "class": ns.e("collapse-expand-icon")
@@ -384,6 +387,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       classNames,
       infiniteScroll,
       renderHasData,
+      onShowNavView,
       renderNoData,
       onPageChange,
       onPageRefresh,
@@ -417,11 +421,25 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "onPageRefresh": this.onPageRefresh
       }, null) : null];
     }
-    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": [this.ns.is("enable-page", !!this.c.state.enablePagingBar)],
+    return vue.createVNode(vue.resolveComponent("iBizControlNavigation"), {
       "controller": this.c
     }, {
-      default: () => [content, this.renderCollapseExpandIcon()]
+      default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+        "class": [this.ns.is("enable-page", !!this.c.state.enablePagingBar)],
+        "controller": this.c
+      }, {
+        default: () => [content, this.c.state.enableNavView ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.showNav"),
+          "name": "eye-outline",
+          "onClick": this.onShowNavView
+        }, null) : vue.createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
+          "name": "eye-off-outline",
+          "onClick": this.onShowNavView
+        }, null) : null, this.renderCollapseExpandIcon()]
+      })]
     });
   }
 });

package/lib/control/data-view/data-view.css

@@ -1 +1 @@
-.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color);will-change:height}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}
+.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__nav-icon{right:10px;top:20px;cursor:pointer;position:absolute;color:var(--ibiz-color-primary)}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color);will-change:height}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}

package/lib/control/drbar/drbar.controller.cjs

@@ -267,7 +267,7 @@ class DRBarController extends runtime.ControlController {
     } else {
       await this.calcDrBarItemsState();
     }
-    if (this.form.state.isLoaded) {
+    if (this.form && this.form.state.isLoaded) {
       this.doDefaultSelect();
     }
   }
@@ -390,7 +390,7 @@ class DRBarController extends runtime.ControlController {
    * @param {string} key
    * @memberof DRBarController
    */
-  handleSelectChange(key = this.state.defaultItem, isRoutePushed = false) {
+  handleSelectChange(key = this.state.selectedItem || this.state.defaultItem, isRoutePushed = false) {
     var _a;
     if (this.state.selectedItem === key) {
       return;

package/lib/control/drtab/drtab-control.util.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var vue = require('vue');
-var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.35-alpha.1_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.cjs');
+var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.38-alpha.32_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.cjs');
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

package/lib/control/drtab/drtab.cjs

@@ -7,8 +7,8 @@ var runtime = require('@ibiz-template/runtime');
 var ramda = require('ramda');
 var core = require('@ibiz-template/core');
 var drtab_controller = require('./drtab.controller.cjs');
-require('./drtab.css');
 var drtabControl_util = require('./drtab-control.util.cjs');
+require('./drtab.css');
 
 "use strict";
 const DRTabControl = /* @__PURE__ */ vue.defineComponent({
@@ -31,6 +31,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup() {
+    var _a;
     const c = vue3Util.useControlController((...args) => new drtab_controller.DRTabController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = vueRouter.useRouter();
@@ -43,20 +44,24 @@ const DRTabControl = /* @__PURE__ */ vue.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 = vue.computed(() => {
+      return c.state.drTabPages.find((tab) => tab.tag === c.state.activeName);
+    });
     vue.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();
     };
@@ -95,6 +100,55 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
         immediate: true
       });
     }
+    const renderDropdownList = () => {
+      return vue.createVNode(vue.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 vue.createVNode("div", {
+            "class": ns.be("dropdown-list", "trigger")
+          }, [((_a2 = activeTab.value) == null ? void 0 : _a2.sysImage) && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": activeTab.value.sysImage
+          }, null), vue.createVNode("div", {
+            "class": "caption"
+          }, [(_b = activeTab.value) == null ? void 0 : _b.caption, ((_c = activeTab.value) == null ? void 0 : _c.counterId) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+            "value": counterData[activeTab.value.counterId],
+            "counterMode": activeTab.value.counterMode
+          }, null)]), vue.createVNode("ion-icon", {
+            "name": "chevron-down-outline"
+          }, null)]);
+        },
+        dropdown: () => {
+          return vue.createVNode("div", {
+            "class": ns.bem("dropdown-list", "popper", "content")
+          }, [c.state.drTabPages.map((tab) => {
+            if (!tab.hidden) {
+              return vue.createVNode(vue.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 && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                  "icon": tab.sysImage
+                }, null), vue.createVNode("span", {
+                  "class": "caption"
+                }, [tab.caption]), tab.counterId && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+                  "value": counterData[tab.counterId],
+                  "counterMode": tab.counterMode
+                }, null), tab.tag === c.state.activeName && vue.createVNode("ion-icon", {
+                  "name": "checkmark-outline"
+                }, null)]
+              });
+            }
+            return null;
+          })]);
+        }
+      });
+    };
     return {
       c,
       ns,
@@ -102,8 +156,10 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       counterData,
       visibleItems,
       moreItems,
+      tabPosition,
+      onTabChange,
       handleTabChange,
-      handleMoreChange
+      renderDropdownList
     };
   },
   render() {
@@ -139,7 +195,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
             return this.moreItems.map((item) => {
               return vue.createVNode(vue.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: () => [vue.createVNode("span", {
                   "class": [this.ns.be("more-dropdown-popper", "label")]
@@ -162,7 +218,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       "controller": this.c,
       "class": [this.ns.b(), this.moreItems.length > 0 ? this.ns.b("more") : ""]
     }, {
-      default: () => [isCreated && isCalculatedPermission && vue.createVNode(vue.resolveComponent("el-tabs"), {
+      default: () => [isCreated && isCalculatedPermission && this.tabPosition === "top_dropdownlist" ? this.renderDropdownList() : vue.createVNode(vue.resolveComponent("el-tabs"), {
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
         "onTabChange": this.handleTabChange
@@ -179,7 +235,10 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
               label: () => {
                 return vue.createVNode("span", {
                   "class": this.ns.b("label")
-                }, [vue.createVNode("span", {
+                }, [tab.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                  "class": this.ns.be("label", "icon"),
+                  "icon": tab.sysImage
+                }, null), vue.createVNode("span", {
                   "class": this.ns.be("label", "text")
                 }, [tab.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
                   "class": this.ns.e("counter"),