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

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

@@ -83,10 +83,11 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const calcActionItemClass = (item) => {
+      var _a;
       const {
         actionLevel
       } = item;
-      return [ns.e("item"), ns.is("disabled", false), ns.em("item", "level-".concat(actionLevel))];
+      return [ns.e("item"), "".concat((_a = item == null ? void 0 : item.sysCss) == null ? void 0 : _a.cssName), ns.em("item", "level-".concat(actionLevel)), ns.is("disabled", c.state.buttonsState[item.id].disabled)];
     };
     vue.watch(() => props.nodeData, async (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -96,7 +97,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
     c.evt.on("onCreated", async () => {
       await c.calcButtonState(props.nodeData._deData || (props.nodeData.srfkey ? props.nodeData : void 0), props.nodeModel.appDataEntityId);
     });
-    const handleClick = async (detail, e) => {
+    const handleClick = (detail, e) => {
       if (props.mode === "buttons") {
         popoverVisible.value = false;
       } else if (dropdownRef.value) {
@@ -104,96 +105,140 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       }
       e.stopPropagation();
       popoverVisible.value = false;
-      emit("action-click", detail, e);
-    };
-    return {
-      c,
-      ns,
-      expandDetails,
-      groupDetails,
-      groupButtonRef,
-      dropdownRef,
-      popoverVisible,
-      handleClick,
-      calcActionItemClass,
-      actionDetails
+      if (detail.uiactionId) {
+        emit("action-click", detail, e);
+      }
     };
-  },
-  render() {
-    const details = this.actionDetails || [];
     const renderDivider = (isExpand) => {
       return vue.createVNode(vue.resolveComponent("el-divider"), {
-        "class": this.ns.e("separator"),
+        "class": ns.e("separator"),
         "border-style": "double",
         "direction": isExpand ? "vertical" : "horizontal"
       }, null);
     };
+    const renderActionButton = (detail, isExpand = true) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
+          "text": true,
+          "size": "small",
+          "title": core.showTitle(detail.tooltip),
+          "class": calcActionItemClass(detail),
+          "disabled": c.state.buttonsState[detail.id].disabled,
+          "onClick": (e) => handleClick(detail, e)
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": ns.e("action-content")
+          }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+            "class": ns.e("action-content-icon")
+          }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": detail.sysImage
+          }, null)]), detail.showCaption ? vue.createVNode("div", {
+            "class": ns.e("action-content-caption")
+          }, [detail.caption]) : ""])]
+        })];
+      }
+      return null;
+    };
+    const renderGroupItem = (item, isExpand = true) => {
+      var _a, _b, _c;
+      const {
+        groupExtractMode,
+        uiactionGroup
+      } = item;
+      let detail = item;
+      if (uiactionGroup && groupExtractMode === "ITEM") {
+        return (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((_item) => renderActionButton(_item, isExpand));
+      }
+      const details = (_c = (_b = item.uiactionGroup) == null ? void 0 : _b.uiactionGroupDetails) == null ? void 0 : _c.filter((_item) => c.state.buttonsState[_item.id].visible);
+      if (uiactionGroup && groupExtractMode === "ITEMX" && details) {
+        detail = details[0];
+      }
+      if (detail) {
+        return vue.createVNode(vue.resolveComponent("el-popover"), {
+          "placement": "right-start",
+          "popper-class": ns.e("popover"),
+          "teleported": false,
+          "popper-options": {
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 4]
+              }
+            }]
+          }
+        }, {
+          reference: () => {
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "text": true,
+              "size": "small",
+              "onClick": (e) => handleClick(detail, e),
+              "title": core.showTitle(detail.tooltip),
+              "class": calcActionItemClass(detail),
+              "disabled": c.state.buttonsState[detail.id].disabled
+            }, {
+              default: () => [vue.createVNode("div", {
+                "class": ns.e("action-content")
+              }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+                "class": ns.e("action-content-icon")
+              }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": detail.sysImage
+              }, null)]), detail.showCaption ? vue.createVNode("div", {
+                "class": [ns.e("action-content-caption"), ns.e("action-content-group-caption")]
+              }, [detail.caption]) : "", vue.createVNode("ion-icon", {
+                "class": ns.e("action-content-group-icon"),
+                "name": "chevron-forward-outline"
+              }, null)])]
+            });
+          },
+          default: () => {
+            if (uiactionGroup) {
+              return details == null ? void 0 : details.map((_item, index) => {
+                if (groupExtractMode === "ITEMX" && index === 0) {
+                  return null;
+                }
+                return renderActionButton(_item, isExpand);
+              });
+            }
+            return renderActions(item.detoolbarItems || [], isExpand);
+          }
+        });
+      }
+    };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        var _a, _b;
-        if (!((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
+        var _a;
+        if (!((_a = c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
           return null;
         }
         if (detail.itemType === "SEPERATOR") {
           return renderDivider(isExpand);
         }
-        if (detail.itemType === "DEUIACTION" || detail.itemType === "ITEMS" && !((_b = detail.detoolbarItems) == null ? void 0 : _b.length)) {
-          return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
-            "text": true,
-            "size": "small",
-            "onClick": (e) => this.handleClick(detail, e),
-            "title": core.showTitle(detail.tooltip),
-            "disabled": this.c.state.buttonsState[detail.id].disabled,
-            "class": this.calcActionItemClass(detail)
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": this.ns.e("action-content")
-            }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
-              "class": this.ns.e("action-content-icon")
-            }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-              "icon": detail.sysImage
-            }, null)]), detail.showCaption ? vue.createVNode("div", {
-              "class": this.ns.e("action-content-caption")
-            }, [detail.caption]) : ""])]
-          })];
+        if (detail.itemType === "DEUIACTION") {
+          return renderActionButton(detail, isExpand);
         }
         if (detail.itemType === "ITEMS") {
-          return vue.createVNode(vue.resolveComponent("el-popover"), {
-            "placement": "right-start",
-            "popper-class": this.ns.e("popover"),
-            "teleported": false
-          }, {
-            reference: () => {
-              return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
-                "text": true,
-                "size": "small",
-                "onClick": (e) => this.handleClick(detail, e),
-                "title": core.showTitle(detail.tooltip),
-                "disabled": this.c.state.buttonsState[detail.id].disabled,
-                "class": this.calcActionItemClass(detail)
-              }, {
-                default: () => [vue.createVNode("div", {
-                  "class": this.ns.e("action-content")
-                }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
-                  "class": this.ns.e("action-content-icon")
-                }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "icon": detail.sysImage
-                }, null)]), detail.showCaption ? vue.createVNode("div", {
-                  "class": [this.ns.e("action-content-caption"), this.ns.e("action-content-group-caption")]
-                }, [detail.caption]) : "", vue.createVNode("ion-icon", {
-                  "class": this.ns.e("action-content-group-icon"),
-                  "name": "chevron-forward-outline"
-                }, null)])]
-              })];
-            },
-            default: () => {
-              return renderActions(detail.detoolbarItems || [], isExpand);
-            }
-          });
+          return renderGroupItem(detail, isExpand);
         }
         return null;
       });
     };
+    return {
+      c,
+      ns,
+      expandDetails,
+      groupDetails,
+      groupButtonRef,
+      dropdownRef,
+      popoverVisible,
+      handleClick,
+      renderActions,
+      renderActionButton,
+      calcActionItemClass,
+      actionDetails
+    };
+  },
+  render() {
+    const details = this.actionDetails || [];
     const renderGroup = () => {
       let _slot;
       if (this.groupDetails.length === 0) {
@@ -228,7 +273,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
         "popper-class": this.ns.e("popover"),
         "virtual-triggering": true,
         "transition": "none"
-      }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
+      }, _isSlot(_slot = this.renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
       })];
     };
@@ -239,7 +284,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")],
         "onClick": (e) => e.stopPropagation()
-      }, [renderActions(this.expandDetails), renderGroup()]);
+      }, [this.renderActions(this.expandDetails), renderGroup()]);
     }
     return vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",

package/lib/control/dashboard/dashboard.cjs

@@ -27,7 +27,8 @@ function renderPortletByType(model, c, opts) {
     const container = model;
     return vue.h(providerComp, {
       ...commonProps,
-      key: model.id
+      key: model.id,
+      id: model.id
     }, {
       default: () => {
         var _a2;
@@ -37,7 +38,8 @@ function renderPortletByType(model, c, opts) {
   }
   return vue.h(providerComp, {
     ...commonProps,
-    key: ((_a = refreshTagObj[model.id]) == null ? void 0 : _a.refreshtag) ? refreshTagObj[model.id].refreshtag : model.id
+    key: ((_a = refreshTagObj[model.id]) == null ? void 0 : _a.refreshtag) ? refreshTagObj[model.id].refreshtag : model.id,
+    id: model.id
   });
 }
 const DashboardControl = /* @__PURE__ */ vue.defineComponent({
@@ -63,6 +65,8 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.DashboardController(...args));
     const vue$1 = vue.getCurrentInstance().proxy;
     const customModelDatas = vue.ref([]);
+    const anchorList = vue.ref([]);
+    const dashboardRef = vue.ref();
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     c.evt.on("onInitPortlets", () => {
       Object.values(c.portlets).forEach((portlet) => {
@@ -70,6 +74,7 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
           portlet.state = vue.reactive(portlet.state);
         }
       });
+      anchorList.value = c.enableAnchorCtrls;
     });
     c.evt.on("onItemModelReset", async (args) => {
       const {
@@ -104,21 +109,40 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
       customModelDatas.value = model;
       vue$1.$forceUpdate();
     };
+    const calcNavBarConfig = () => {
+      const {
+        navBarPos,
+        navBarSysCss,
+        navBarWidth,
+        navBarStyle,
+        navbarHeight
+      } = c.model;
+      return {
+        navBarPos,
+        navBarSysCss,
+        navBarWidth,
+        navBarStyle,
+        navbarHeight
+      };
+    };
     return {
       c,
       ns,
       customModelDatas,
+      anchorList,
+      dashboardRef,
+      calcNavBarConfig,
       handleCustomModelChange
     };
   },
   render() {
-    let _slot2;
     const {
       state,
       model
     } = this.c;
     const renderDefaultContent = () => {
       return vue.createVNode(vue.resolveComponent("iBizRow"), {
+        "ref": "dashboardRef",
         "class": [this.ns.b()],
         "layout": model.layout
       }, {
@@ -148,17 +172,38 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
       });
       return slots;
     };
-    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "controller": this.c,
-      "class": [this.ns.b()]
-    }, {
-      default: () => [state.isCreated && (model.enableCustomized ? vue.createVNode(vue.resolveComponent("iBizCustomDashboardContainer"), {
+    let content = null;
+    if (model.enableCustomized) {
+      let _slot2;
+      content = vue.createVNode(vue.resolveComponent("iBizCustomDashboardContainer"), {
         "modelData": this.modelData,
         "dashboard": this.c,
         "onChanged": this.handleCustomModelChange
       }, _isSlot(_slot2 = renderCustomSlots()) ? _slot2 : {
         default: () => [_slot2]
-      }) : renderDefaultContent())]
+      });
+    } else if (model.showDashboardNavBar) {
+      let _slot3;
+      content = vue.createVNode(vue.resolveComponent("iBizAnchorContainer"), {
+        "anchorList": this.anchorList.map((item) => {
+          return {
+            id: item.id,
+            title: item.title
+          };
+        }),
+        "anchorTargetEle": this.dashboardRef,
+        "navBarConfig": this.calcNavBarConfig()
+      }, _isSlot(_slot3 = renderDefaultContent()) ? _slot3 : {
+        default: () => [_slot3]
+      });
+    } else {
+      content = renderDefaultContent();
+    }
+    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.b()]
+    }, {
+      default: () => [state.isCreated && content]
     });
   }
 });

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;
         }

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

@@ -42,6 +42,15 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
         props.controller.onActionClick(props.linkAction, event);
       }
     };
+    const clickPorlet = (event, position) => {
+      event.stopPropagation();
+      c.dashboard.view.evt.emit("onPorletClick", {
+        data: {
+          tag: c.model.codeName,
+          position
+        }
+      });
+    };
     return {
       c,
       ns,
@@ -49,7 +58,8 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       portletType,
       isShowHeader,
       onActionClick,
-      openLink
+      openLink,
+      clickPorlet
     };
   },
   render() {
@@ -64,7 +74,8 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       "key": "header",
       "class": this.ns.b("header")
     }, [vue.createVNode("div", {
-      "class": this.ns.be("header", "left")
+      "class": this.ns.be("header", "left"),
+      "onClick": (event) => this.clickPorlet(event, "title")
     }, [model.showTitleBar && vue.createVNode("div", {
       "class": [this.ns.e("caption"), this.ns.is("link", !!this.linkAction)],
       "onClick": this.openLink
@@ -85,7 +96,8 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       "onActionClick": this.onActionClick
     }, null)])]), vue.createVNode("div", {
       "key": "content",
-      "class": this.ns.b("content")
+      "class": this.ns.b("content"),
+      "onClick": (event) => this.clickPorlet(event, "content")
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
   }
 });

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

@@ -46,6 +46,14 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       type: Boolean,
       default: void 0
     },
+    isSimple: {
+      type: Boolean,
+      required: false
+    },
+    data: {
+      type: Array,
+      required: false
+    },
     loadDefault: {
       type: Boolean,
       default: true
@@ -57,6 +65,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     const classNames = vue.computed(() => {
       return [ns.is("enable-page", c.model.enablePagingBar === true)];
     });
+    const isCollapse = vue.ref(false);
     const isLodeMoreDisabled = vue.computed(() => {
       if (c.model.enablePagingBar === true) {
         return true;
@@ -66,6 +75,9 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }
       return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
     });
+    const showCollapseOrExpandIcon = vue.computed(() => {
+      return !c.model.enableGroup && (c.model.pagingMode === 2 || c.model.pagingMode === 3);
+    });
     const infiniteScroll = vue.ref();
     const infiniteScrollKey = vue.ref(qxUtil.createUUID());
     vue.watch(() => c.state.curPage, () => {
@@ -79,6 +91,27 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }
       }
     });
+    const initSimpleData = () => {
+      if (!props.data) {
+        return;
+      }
+      c.state.items = props.data.map((item) => new runtime.ControlVO(item));
+      c.afterLoad({}, c.state.items);
+    };
+    c.evt.on("onCreated", async () => {
+      if (props.isSimple) {
+        initSimpleData();
+        c.state.isSimple = true;
+        c.state.isLoaded = true;
+      }
+    });
+    vue.watch(() => props.data, () => {
+      if (props.isSimple) {
+        initSimpleData();
+      }
+    }, {
+      deep: true
+    });
     const {
       onPageChange,
       onPageRefresh,
@@ -168,7 +201,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         groupSysCss
       } = c.model;
       return vue.createVNode("div", {
-        "class": [ns.be("group-content", "item"), groupSysCss == null ? void 0 : groupSysCss.cssName]
+        "class": [ns.be("group-content", "item"), groupSysCss == null ? void 0 : groupSysCss.cssName, ns.is("collapse", c.state.collapseKeys.includes(group.key.toString()))]
       }, [vue.createVNode("div", {
         "class": ns.be("group-content", "item-header")
       }, [vue.createVNode("span", {
@@ -223,11 +256,15 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           }, [renderGroup(group)]);
         })]);
       }
+      let tempItems = c.state.items;
+      if (isCollapse.value) {
+        tempItems = c.state.items.slice(0, c.state.size);
+      }
       if (cardColXS || cardColSM || cardColMD || cardColLG) {
         let _slot3;
         return vue.createVNode(vue.resolveComponent("el-row"), {
           "class": [ns.b("item-row")]
-        }, _isSlot(_slot3 = c.state.items.map((item) => {
+        }, _isSlot(_slot3 = tempItems.map((item) => {
           let _slot2;
           return vue.createVNode(vue.resolveComponent("el-col"), {
             "xs": cardColXS,
@@ -242,28 +279,70 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           default: () => [_slot3]
         });
       }
-      return c.state.items.map((item) => {
+      return tempItems.map((item) => {
         return vue.createVNode("div", {
           "class": [ns.b("scroll-item")]
         }, [renderCard(item)]);
       });
     };
+    const scrollToTop = () => {
+      var _a;
+      (_a = infiniteScroll.value) == null ? void 0 : _a.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    };
+    c.evt.on("onScrollToTop", () => {
+      scrollToTop();
+    });
+    const onCollapseData = () => {
+      isCollapse.value = true;
+      scrollToTop();
+    };
+    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")
+      }, [vue.createVNode("i", {
+        "class": "fa fa-angle-double-up",
+        "title": ibiz.i18n.t("control.common.collapseData"),
+        "onClick": onCollapseData,
+        "aria-hidden": "true"
+      }, null)]);
+    };
+    const downIcon = () => {
+      return vue.createVNode("div", {
+        "class": ns.e("collapse-expand-icon")
+      }, [vue.createVNode("i", {
+        "class": "fa fa-angle-double-down",
+        "title": ibiz.i18n.t("control.common.expandData"),
+        "onClick": onExpandData,
+        "aria-hidden": "true"
+      }, null)]);
+    };
+    const loadMoreIcon = () => {
+      return vue.createVNode("div", {
+        "class": ns.e("load-more")
+      }, [vue.createVNode("i", {
+        "class": "fa fa-angle-double-down",
+        "title": ibiz.i18n.t("control.common.loadMore"),
+        "onClick": () => c.loadMore(),
+        "aria-hidden": "true"
+      }, null)]);
+    };
     const renderHasData = () => {
-      let _slot4;
       return vue.withDirectives(vue.createVNode("div", {
         "class": [ns.b("scroll"), ns.e("content")],
         "infinite-scroll-distance": 10,
         "infinite-scroll-disabled": isLodeMoreDisabled.value,
         "ref": "infiniteScroll",
         "key": infiniteScrollKey.value
-      }, [renderDataViewContent(), c.model.pagingMode === 3 && !(c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size) && vue.createVNode("div", {
-        "class": ns.e("load-more-button")
-      }, [vue.createVNode(vue.resolveComponent("el-button"), {
-        "text": true,
-        "onClick": () => c.loadMore()
-      }, _isSlot(_slot4 = ibiz.i18n.t("control.common.loadMore")) ? _slot4 : {
-        default: () => [_slot4]
-      })])]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
+      }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };
     const renderNoData = () => {
       const {
@@ -279,16 +358,41 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "enableShowImage": c.state.hideNoDataImage
       }, null);
     };
+    const renderCollapseExpandIcon = () => {
+      let icon = null;
+      const loadMore = !(c.state.items.length >= c.state.total || c.state.total <= c.state.size);
+      if (showCollapseOrExpandIcon.value) {
+        if (c.model.pagingMode === 2) {
+          if (isCollapse.value) {
+            icon = downIcon();
+          } else if (c.state.items.length > c.state.size) {
+            icon = upIcon();
+          }
+        }
+        if (c.model.pagingMode === 3) {
+          if (isCollapse.value) {
+            icon = downIcon();
+          } else if (loadMore) {
+            icon = loadMoreIcon();
+          } else if (c.state.isCreated && c.state.items.length > c.state.size) {
+            icon = upIcon();
+          }
+        }
+      }
+      return icon;
+    };
     return {
       c,
       ns,
       classNames,
       infiniteScroll,
       renderHasData,
+      onShowNavView,
       renderNoData,
       onPageChange,
       onPageRefresh,
-      onPageSizeChange
+      onPageSizeChange,
+      renderCollapseExpandIcon
     };
   },
   render() {
@@ -317,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
-    }, _isSlot(content) ? content : {
-      default: () => [content]
+    }, {
+      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()]
+      })]
     });
   }
 });