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

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

@@ -18,6 +18,10 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
         type: NumberConstructor;
         default: undefined;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,10 +29,12 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
 }, {
     c: import("@ibiz-template/runtime").CalendarController;
     ns: import("@ibiz-template/core").Namespace;
+    curPopover: import("vue").Ref<IData | undefined>;
     calendarRef: import("vue").Ref<IData | undefined>;
-    popoverVisible: import("vue").Ref<boolean>;
+    popoverValue: import("vue").Ref<string>;
     selectDate: (tag: string) => void;
     calcItemStyle: (data: import("@ibiz-template/runtime").ICalendarItemData) => IData;
+    onShowNavView: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").ISysCalendar>;
@@ -49,6 +55,10 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
         type: NumberConstructor;
         default: undefined;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -56,6 +66,7 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
 }>>, {
     params: IParams;
     mdctrlActiveMode: number;
+    isSimple: boolean;
     loadDefault: boolean;
 }, {}>>;
 export default IBizCalendarControl;

package/es/control/calendar/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 { CalendarControl } from './calendar.mjs';
 import { CalendarProvider } from './calendar.provider.mjs';

package/es/control/caption-bar/caption-bar.mjs

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

package/es/control/caption-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 { CaptionBarControl } from './caption-bar.mjs';
 import { CaptionBarProvider } from './caption-bar.provider.mjs';

package/es/control/chart/chart.mjs

@@ -1,8 +1,8 @@
-import { isVNode, ref, watch, nextTick, onMounted, resolveComponent, createVNode, onBeforeUnmount, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, watch, nextTick, onMounted, createVNode, resolveComponent, onBeforeUnmount } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { init } from 'echarts';
 import { createUUID } from 'qx-util';
-import { ChartController } from '@ibiz-template/runtime';
+import { ChartController, ControlVO } from '@ibiz-template/runtime';
 import './chart.css';
 
 "use strict";
@@ -61,7 +61,7 @@ const ChartControl = /* @__PURE__ */ defineComponent({
       if (!props.data) {
         return;
       }
-      c.state.items = props.data;
+      c.state.items = props.data.map((item) => new ControlVO(item));
       c.afterLoad({}, c.state.items);
     };
     c.evt.on("onCreated", async () => {

package/es/control/chart/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { ControlLoadingPlaceholder } from '@ibiz-template/vue3-util';
 import { defineAsyncComponent } from 'vue';
 import { ChartProvider } from './chart.provider.mjs';

package/es/control/context-menu/context-menu.d.ts

@@ -1,5 +1,5 @@
 import { PropType, Ref } from 'vue';
-import { IDEContextMenu, IDETBUIActionItem, IDETreeNode } from '@ibiz/model-core';
+import { IAppDEUIActionGroupDetail, IDEContextMenu, IDETBUIActionItem, IDETreeNode } from '@ibiz/model-core';
 import './context-menu.scss';
 import { ContextMenuController, ITreeNodeData } from '@ibiz-template/runtime';
 export declare const ContextMenuControl: import("vue").DefineComponent<{
@@ -39,7 +39,9 @@ export declare const ContextMenuControl: import("vue").DefineComponent<{
     groupButtonRef: Ref<any>;
     dropdownRef: Ref<any>;
     popoverVisible: Ref<boolean>;
-    handleClick: (detail: IDETBUIActionItem, e: MouseEvent) => Promise<void>;
+    handleClick: (detail: IDETBUIActionItem, e: MouseEvent) => void;
+    renderActions: (items: IDETBUIActionItem[], isExpand?: boolean) => (JSX.Element | (false | JSX.Element | undefined)[] | ((false | JSX.Element | undefined)[] | null)[] | null | undefined)[];
+    renderActionButton: (detail: IAppDEUIActionGroupDetail, isExpand?: boolean) => (false | JSX.Element | undefined)[] | null;
     calcActionItemClass: (item: IDETBUIActionItem) => string[];
     actionDetails: IDETBUIActionItem[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/control/context-menu/context-menu.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './context-menu.css';
 import { ContextMenuController } from '@ibiz-template/runtime';
@@ -81,10 +81,11 @@ const ContextMenuControl = /* @__PURE__ */ 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)];
     };
     watch(() => props.nodeData, async (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -94,7 +95,7 @@ const ContextMenuControl = /* @__PURE__ */ 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) {
@@ -102,96 +103,140 @@ const ContextMenuControl = /* @__PURE__ */ 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 createVNode(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), createVNode(resolveComponent("el-button"), {
+          "text": true,
+          "size": "small",
+          "title": showTitle(detail.tooltip),
+          "class": calcActionItemClass(detail),
+          "disabled": c.state.buttonsState[detail.id].disabled,
+          "onClick": (e) => handleClick(detail, e)
+        }, {
+          default: () => [createVNode("div", {
+            "class": ns.e("action-content")
+          }, [detail.showIcon && detail.sysImage && createVNode("div", {
+            "class": ns.e("action-content-icon")
+          }, [createVNode(resolveComponent("iBizIcon"), {
+            "icon": detail.sysImage
+          }, null)]), detail.showCaption ? 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 createVNode(resolveComponent("el-popover"), {
+          "placement": "right-start",
+          "popper-class": ns.e("popover"),
+          "teleported": false,
+          "popper-options": {
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 4]
+              }
+            }]
+          }
+        }, {
+          reference: () => {
+            return createVNode(resolveComponent("el-button"), {
+              "text": true,
+              "size": "small",
+              "onClick": (e) => handleClick(detail, e),
+              "title": showTitle(detail.tooltip),
+              "class": calcActionItemClass(detail),
+              "disabled": c.state.buttonsState[detail.id].disabled
+            }, {
+              default: () => [createVNode("div", {
+                "class": ns.e("action-content")
+              }, [detail.showIcon && detail.sysImage && createVNode("div", {
+                "class": ns.e("action-content-icon")
+              }, [createVNode(resolveComponent("iBizIcon"), {
+                "icon": detail.sysImage
+              }, null)]), detail.showCaption ? createVNode("div", {
+                "class": [ns.e("action-content-caption"), ns.e("action-content-group-caption")]
+              }, [detail.caption]) : "", 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), createVNode(resolveComponent("el-button"), {
-            "text": true,
-            "size": "small",
-            "onClick": (e) => this.handleClick(detail, e),
-            "title": showTitle(detail.tooltip),
-            "disabled": this.c.state.buttonsState[detail.id].disabled,
-            "class": this.calcActionItemClass(detail)
-          }, {
-            default: () => [createVNode("div", {
-              "class": this.ns.e("action-content")
-            }, [detail.showIcon && detail.sysImage && createVNode("div", {
-              "class": this.ns.e("action-content-icon")
-            }, [createVNode(resolveComponent("iBizIcon"), {
-              "icon": detail.sysImage
-            }, null)]), detail.showCaption ? createVNode("div", {
-              "class": this.ns.e("action-content-caption")
-            }, [detail.caption]) : ""])]
-          })];
+        if (detail.itemType === "DEUIACTION") {
+          return renderActionButton(detail, isExpand);
         }
         if (detail.itemType === "ITEMS") {
-          return createVNode(resolveComponent("el-popover"), {
-            "placement": "right-start",
-            "popper-class": this.ns.e("popover"),
-            "teleported": false
-          }, {
-            reference: () => {
-              return [detail.addSeparator && renderDivider(isExpand), createVNode(resolveComponent("el-button"), {
-                "text": true,
-                "size": "small",
-                "onClick": (e) => this.handleClick(detail, e),
-                "title": showTitle(detail.tooltip),
-                "disabled": this.c.state.buttonsState[detail.id].disabled,
-                "class": this.calcActionItemClass(detail)
-              }, {
-                default: () => [createVNode("div", {
-                  "class": this.ns.e("action-content")
-                }, [detail.showIcon && detail.sysImage && createVNode("div", {
-                  "class": this.ns.e("action-content-icon")
-                }, [createVNode(resolveComponent("iBizIcon"), {
-                  "icon": detail.sysImage
-                }, null)]), detail.showCaption ? createVNode("div", {
-                  "class": [this.ns.e("action-content-caption"), this.ns.e("action-content-group-caption")]
-                }, [detail.caption]) : "", 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) {
@@ -226,7 +271,7 @@ const ContextMenuControl = /* @__PURE__ */ 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]
       })];
     };
@@ -237,7 +282,7 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
       return createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")],
         "onClick": (e) => e.stopPropagation()
-      }, [renderActions(this.expandDetails), renderGroup()]);
+      }, [this.renderActions(this.expandDetails), renderGroup()]);
     }
     return createVNode(resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",

package/es/control/context-menu/index.d.ts

@@ -35,7 +35,9 @@ export declare const IBizContextMenuControl: import("@ibiz-template/vue3-util").
     groupButtonRef: import("vue").Ref<any>;
     dropdownRef: import("vue").Ref<any>;
     popoverVisible: import("vue").Ref<boolean>;
-    handleClick: (detail: import("@ibiz/model-core").IDETBUIActionItem, e: MouseEvent) => Promise<void>;
+    handleClick: (detail: import("@ibiz/model-core").IDETBUIActionItem, e: MouseEvent) => void;
+    renderActions: (items: import("@ibiz/model-core").IDETBUIActionItem[], isExpand?: boolean) => (JSX.Element | (false | JSX.Element | undefined)[] | ((false | JSX.Element | undefined)[] | null)[] | null | undefined)[];
+    renderActionButton: (detail: import("@ibiz/model-core").IAppDEUIActionGroupDetail, isExpand?: boolean) => (false | JSX.Element | undefined)[] | null;
     calcActionItemClass: (item: import("@ibiz/model-core").IDETBUIActionItem) => string[];
     actionDetails: import("@ibiz/model-core").IDETBUIActionItem[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/control/context-menu/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 { ContextMenuControl } from './context-menu.mjs';
 import { ContextMenuProvider } from './context-menu.provider.mjs';

package/es/control/dashboard/custom-dashboard-container/custom-dashboard-container.d.ts

@@ -18,6 +18,22 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
         model: {
             customizeMode?: number | undefined;
             dashboardStyle?: string | undefined;
+            navBarSysCss?: {
+                codeName?: string | undefined;
+                cssName?: string | undefined;
+                cssStyle?: string | undefined;
+                designCssStyle?: string | undefined;
+                appId: string;
+                id?: string | undefined;
+                name?: string | undefined;
+                userParam?: Record<string, string> | undefined;
+                modelId?: string | undefined;
+                modelType?: string | undefined;
+            } | undefined;
+            navBarPos?: string | undefined;
+            navBarStyle?: string | undefined;
+            navBarWidth?: number | undefined;
+            navbarHeight?: number | undefined;
             appDynaDashboardUtilId?: string | undefined;
             enableCustomized?: boolean | undefined;
             showDashboardNavBar?: boolean | undefined;
@@ -2042,6 +2058,7 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
             };
             dynaPortletMap: Map<string, IData>;
             customDashboard: any | undefined;
+            enableAnchorCtrls: IData[];
             setCustomDashboard: (customDashboard: CustomDashboardController) => void;
             getCustomDashboard: () => CustomDashboardController | undefined;
             initPortlets: (portletModels: IDBPortletPart[], parent?: import("@ibiz-template/runtime").IPortletContainerController | undefined) => Promise<void>;
@@ -2299,6 +2316,7 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
                         triggerCustom: (id: string, executeParams: Partial<import("@ibiz-template/runtime").IUILogicParams>) => any;
                         triggerControlEvent: (ctrlName: string, eventName: string, executeParams?: Partial<import("@ibiz-template/runtime").IUILogicParams> | undefined) => void;
                     } | undefined;
+                    runMode: "DESIGN" | "RUNTIME";
                     startLoading: () => Promise<void>;
                     endLoading: () => Promise<void>;
                     onActivated: () => void;
@@ -16154,6 +16172,7 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
                     triggerCustom: (id: string, executeParams: Partial<import("@ibiz-template/runtime").IUILogicParams>) => any;
                     triggerControlEvent: (ctrlName: string, eventName: string, executeParams?: Partial<import("@ibiz-template/runtime").IUILogicParams> | undefined) => void;
                 } | undefined;
+                runMode: "DESIGN" | "RUNTIME";
                 startLoading: () => Promise<void>;
                 endLoading: () => Promise<void>;
                 onActivated: () => void;
@@ -19042,6 +19061,7 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
             triggerKey: string;
             awaitActiveCbs: Map<string, () => void>;
             delayCbs: Map<string, NodeJS.Timeout>;
+            runMode: "DESIGN" | "RUNTIME";
             getEventArgs: () => Omit<import("@ibiz-template/runtime").EventBase, "eventName">;
             updateContextParams: (opts: {
                 context?: IContext | undefined;
@@ -19067,6 +19087,22 @@ export declare const CustomDashboardContainer: import("vue").DefineComponent<{
             readonly model: {
                 customizeMode?: number | undefined;
                 dashboardStyle?: string | undefined;
+                navBarSysCss?: {
+                    codeName?: string | undefined;
+                    cssName?: string | undefined;
+                    cssStyle?: string | undefined;
+                    designCssStyle?: string | undefined;
+                    appId: string;
+                    id?: string | undefined;
+                    name?: string | undefined;
+                    userParam?: Record<string, string> | undefined;
+                    modelId?: string | undefined;
+                    modelType?: string | undefined;
+                } | undefined;
+                navBarPos?: string | undefined;
+                navBarStyle?: string | undefined;
+                navBarWidth?: number | undefined;
+                navbarHeight?: number | undefined;
                 appDynaDashboardUtilId?: string | undefined;
                 enableCustomized?: boolean | undefined;
                 showDashboardNavBar?: boolean | undefined;

package/es/control/dashboard/custom-dashboard-container/custom-dashboard-container.mjs

@@ -1,4 +1,4 @@
-import { reactive, ref, nextTick, onMounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, reactive, ref, nextTick, onMounted, createVNode, resolveComponent } from 'vue';
 import { CustomDashboardController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './custom-dashboard-container.css';

package/es/control/dashboard/dashboard-design/dashboard-design.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, computed, watch, onUnmounted, resolveComponent, createVNode, h, createTextVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, computed, watch, onUnmounted, createVNode, resolveComponent, h, createTextVNode } from 'vue';
 import { getPortletProvider } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { clone } from 'ramda';

package/es/control/dashboard/dashboard.d.ts

@@ -22,6 +22,15 @@ export declare const DashboardControl: import("vue").DefineComponent<{
     c: DashboardController;
     ns: import("@ibiz-template/core").Namespace;
     customModelDatas: Ref<IModel>;
+    anchorList: Ref<IData[]>;
+    dashboardRef: Ref<any>;
+    calcNavBarConfig: () => {
+        navBarPos: string | undefined;
+        navBarSysCss: import("@ibiz/model-core").ISysCss | undefined;
+        navBarWidth: number | undefined;
+        navBarStyle: string | undefined;
+        navbarHeight: number | undefined;
+    };
     handleCustomModelChange: (args: IData) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {

package/es/control/dashboard/dashboard.mjs

@@ -1,4 +1,4 @@
-import { isVNode, createVNode, resolveComponent, h, getCurrentInstance, ref, isReactive, reactive, defineComponent } from 'vue';
+import { isVNode, createVNode, resolveComponent, h, defineComponent, getCurrentInstance, ref, isReactive, reactive } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './dashboard.css';
 import { DashboardController } from '@ibiz-template/runtime';
@@ -25,7 +25,8 @@ function renderPortletByType(model, c, opts) {
     const container = model;
     return h(providerComp, {
       ...commonProps,
-      key: model.id
+      key: model.id,
+      id: model.id
     }, {
       default: () => {
         var _a2;
@@ -35,7 +36,8 @@ function renderPortletByType(model, c, opts) {
   }
   return 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__ */ defineComponent({
@@ -61,6 +63,8 @@ const DashboardControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new DashboardController(...args));
     const vue = getCurrentInstance().proxy;
     const customModelDatas = ref([]);
+    const anchorList = ref([]);
+    const dashboardRef = ref();
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     c.evt.on("onInitPortlets", () => {
       Object.values(c.portlets).forEach((portlet) => {
@@ -68,6 +72,7 @@ const DashboardControl = /* @__PURE__ */ defineComponent({
           portlet.state = reactive(portlet.state);
         }
       });
+      anchorList.value = c.enableAnchorCtrls;
     });
     c.evt.on("onItemModelReset", async (args) => {
       const {
@@ -102,21 +107,40 @@ const DashboardControl = /* @__PURE__ */ defineComponent({
       customModelDatas.value = model;
       vue.$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 createVNode(resolveComponent("iBizRow"), {
+        "ref": "dashboardRef",
         "class": [this.ns.b()],
         "layout": model.layout
       }, {
@@ -146,17 +170,38 @@ const DashboardControl = /* @__PURE__ */ defineComponent({
       });
       return slots;
     };
-    return createVNode(resolveComponent("iBizControlBase"), {
-      "controller": this.c,
-      "class": [this.ns.b()]
-    }, {
-      default: () => [state.isCreated && (model.enableCustomized ? createVNode(resolveComponent("iBizCustomDashboardContainer"), {
+    let content = null;
+    if (model.enableCustomized) {
+      let _slot2;
+      content = createVNode(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 = createVNode(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 createVNode(resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.b()]
+    }, {
+      default: () => [state.isCreated && content]
     });
   }
 });

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

@@ -19,6 +19,15 @@ export declare const IBizDashboardControl: import("@ibiz-template/vue3-util").Ty
     c: import("@ibiz-template/runtime").DashboardController;
     ns: import("@ibiz-template/core").Namespace;
     customModelDatas: import("vue").Ref<IModel>;
+    anchorList: import("vue").Ref<IData[]>;
+    dashboardRef: import("vue").Ref<any>;
+    calcNavBarConfig: () => {
+        navBarPos: string | undefined;
+        navBarSysCss: import("@ibiz/model-core").ISysCss | undefined;
+        navBarWidth: number | undefined;
+        navBarStyle: string | undefined;
+        navbarHeight: number | undefined;
+    };
     handleCustomModelChange: (args: IData) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {

package/es/control/dashboard/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 { DashboardControl } from './dashboard.mjs';
 import { DashboardDesign } from './dashboard-design/dashboard-design.mjs';

package/es/control/dashboard/portlet/actionbar-portlet/actionbar-portlet.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { ActionBarPortletController } from '@ibiz-template/runtime';