@ibiz-template/vue3-components 0.7.38-alpha.43 → 0.7.39

package/es/control/calendar/calendar.mjs

@@ -1,5 +1,5 @@
-import { isVNode, defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { isVNode, ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useControlController, useNamespace, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { CalendarController } from '@ibiz-template/runtime';
 import dayjs from 'dayjs';
 import { showTitle } from '@ibiz-template/core';
@@ -109,9 +109,6 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         backgroundColor: data.bkColor
       };
     };
-    const onShowNavView = () => {
-      c.state.showNavView = !c.state.showNavView;
-    };
     const calcCalendarItems = (date) => {
       const weekRange = getWeekRange(date);
       const calendarItems = c.state.items.filter((item) => {
@@ -137,6 +134,146 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       }
       return calendarItems;
     };
+    let ContextMenu;
+    const iBizRawItem = resolveComponent("IBizRawItem");
+    const iBizIcon = resolveComponent("IBizIcon");
+    c.evt.on("onMounted", () => {
+      if (Object.values(c.contextMenus).length > 0) {
+        const importMenu = () => import('@imengyu/vue3-context-menu');
+        importMenu().then((value) => {
+          ContextMenu = value.default;
+          if (ContextMenu.default && !ContextMenu.showContextMenu) {
+            ContextMenu = ContextMenu.default;
+          }
+        });
+      }
+    });
+    const calcContextMenuItems = (toolbarItems, calendarData, evt, menuState) => {
+      const result = [];
+      toolbarItems.forEach((item) => {
+        var _a, _b;
+        if (item.itemType === "SEPERATOR") {
+          result.push({
+            divided: "self"
+          });
+          return;
+        }
+        const buttonState = menuState[item.id];
+        if (buttonState && !buttonState.visible) {
+          return;
+        }
+        let menuItem = {};
+        if (item.showCaption && item.caption) {
+          menuItem.label = item.caption;
+        }
+        if (item.sysImage && item.showIcon) {
+          menuItem.icon = createVNode(iBizIcon, {
+            "icon": item.sysImage
+          }, null);
+        }
+        if (item.itemType === "DEUIACTION") {
+          menuItem.disabled = buttonState.disabled;
+          menuItem.clickClose = true;
+          const {
+            uiactionId
+          } = item;
+          if (uiactionId) {
+            menuItem.onClick = () => {
+              c.doUIAction(uiactionId, calendarData, evt, item.appId);
+            };
+          }
+        } else if (item.itemType === "RAWITEM") {
+          const {
+            rawItem
+          } = item;
+          if (rawItem) {
+            menuItem.label = createVNode(iBizRawItem, {
+              "rawItem": item
+            }, null);
+          }
+        } else if (item.itemType === "ITEMS") {
+          const group = item;
+          if ((_a = group.detoolbarItems) == null ? void 0 : _a.length) {
+            menuItem.children = calcContextMenuItems(group.detoolbarItems, calendarData, evt, menuState);
+          }
+          if (group.uiactionGroup && group.groupExtractMode) {
+            const menuItems = (_b = group.uiactionGroup.uiactionGroupDetails) == null ? void 0 : _b.filter((detail) => {
+              const detailState = menuState[detail.id];
+              return detailState.visible;
+            }).map((detail) => {
+              const detailState = menuState[detail.id];
+              const {
+                sysImage
+              } = detail;
+              return {
+                label: detail.showCaption ? detail.caption : void 0,
+                icon: detail.showIcon ? createVNode(iBizIcon, {
+                  "icon": sysImage
+                }, null) : void 0,
+                disabled: detailState.disabled,
+                clickableWhenHasChildren: true,
+                onClick: () => {
+                  ContextMenu.closeContextMenu();
+                  c.doUIAction(detail.uiactionId, calendarData, evt, detail.appId);
+                }
+              };
+            });
+            switch (group.groupExtractMode) {
+              case "ITEMS":
+                menuItem.children = menuItems;
+                break;
+              case "ITEMX":
+                if (menuItems) {
+                  menuItem = menuItems[0];
+                  menuItem.children = menuItems.slice(1);
+                }
+                break;
+              case "ITEM":
+              default:
+                menuItem = void 0;
+                if (menuItems) {
+                  result.push(...menuItems);
+                }
+                break;
+            }
+          }
+        }
+        if (menuItem) {
+          result.push(menuItem);
+        }
+      });
+      return result;
+    };
+    const onNodeContextmenu = async (item, evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      const {
+        sysCalendarItems
+      } = c.model;
+      const targetCalendarItem = sysCalendarItems == null ? void 0 : sysCalendarItems.find((_item) => {
+        return _item.id === item.itemType;
+      });
+      if (!(targetCalendarItem == null ? void 0 : targetCalendarItem.decontextMenu)) {
+        return;
+      }
+      const contextMenuC = c.contextMenus[targetCalendarItem.decontextMenu.id];
+      if (!contextMenuC.model.detoolbarItems) {
+        return;
+      }
+      await contextMenuC.calcButtonState(item.deData || (item.deData ? item : void 0), targetCalendarItem.appDataEntityId);
+      const menuState = contextMenuC.state.buttonsState;
+      const menus = calcContextMenuItems(contextMenuC.model.detoolbarItems, item, evt, menuState);
+      if (!menus.length) {
+        return;
+      }
+      ContextMenu.showContextMenu({
+        x: evt.x,
+        y: evt.y,
+        customClass: ns.b("context-menu"),
+        items: menus,
+        zIndex: 9999
+      });
+    };
     return {
       c,
       ns,
@@ -146,8 +283,8 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       popoverValue,
       selectDate,
       calcItemStyle,
-      onShowNavView,
-      calcCalendarItems
+      calcCalendarItems,
+      onNodeContextmenu
     };
   },
   render() {
@@ -163,7 +300,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         beginTime: item.beginTime,
         endTime: item.endTime,
         date
-      })), this.ns.is("end-time", date && dayjs(date).isSame(item.endTime, "day"))];
+      })), this.ns.is("no-begin-time", this.showDateRange && !item.beginTime), this.ns.is("no-end-time", this.showDateRange && !item.endTime), this.ns.is("end-time", date && dayjs(date).isSame(item.endTime, "day"))];
       const style = this.calcItemStyle(item);
       return createVNode(resolveComponent("iBizControlShell"), {
         "class": itemClass,
@@ -179,7 +316,8 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         "onDblclick": (e) => {
           e.stopPropagation();
           return this.c.onDbRowClick(item);
-        }
+        },
+        "onContextmenu": (e) => this.onNodeContextmenu(item, e)
       }, null);
     };
     const renderDefaultItem = (item, date) => {
@@ -190,7 +328,7 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         beginTime: item.beginTime,
         endTime: item.endTime,
         date
-      })), this.ns.is("end-time", date && dayjs(date).isSame(item.endTime, "day"))];
+      })), this.ns.is("no-begin-time", this.showDateRange && !item.beginTime), this.ns.is("no-end-time", this.showDateRange && !item.endTime), this.ns.is("end-time", date && dayjs(date).isSame(item.endTime, "day"))];
       const style = this.calcItemStyle(item);
       return createVNode("div", {
         "class": itemClass,
@@ -198,8 +336,9 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
         "style": style,
         "title": showTitle(item.tips || item.text),
         "onClick": () => this.c.onRowClick(item),
-        "onDblclick": () => this.c.onDbRowClick(item)
-      }, [this.showDateRange ? date && (dayjs(date).isSame(item.beginTime, "day") || dayjs(date).day() === 0) ? item.text : "" : item.text]);
+        "onDblclick": () => this.c.onDbRowClick(item),
+        "onContextmenu": (evt) => this.onNodeContextmenu(item, evt)
+      }, [this.showDateRange ? date && (dayjs(date).isSame(item.beginTime, "day") || dayjs(date).day() === 0 || !item.beginTime && dayjs(date).isSame(item.endTime, "day")) ? item.text : "" : item.text]);
     };
     const renderCalendarItem = (item, date) => {
       var _a;
@@ -333,11 +472,21 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       const {
         isLoaded
       } = this.c.state;
+      const noDataSlots = {};
+      if (hasEmptyPanelRenderer(this.c)) {
+        Object.assign(noDataSlots, {
+          customRender: () => createVNode(IBizCustomRender, {
+            "controller": this.c
+          }, null)
+        });
+      }
       return isLoaded && createVNode(resolveComponent("iBizNoData"), {
         "text": this.c.model.emptyText,
         "emptyTextLanguageRes": this.c.model.emptyTextLanguageRes,
         "hideNoDataImage": this.c.state.hideNoDataImage
-      }, null);
+      }, _isSlot(noDataSlots) ? noDataSlots : {
+        default: () => [noDataSlots]
+      });
     };
     const renderWeekDay = () => {
       const slots = {};
@@ -423,16 +572,16 @@ const CalendarControl = /* @__PURE__ */ defineComponent({
       default: () => [createVNode(resolveComponent("iBizControlBase"), {
         "controller": this.c
       }, {
-        default: () => [renderCalendar(), this.c.state.enableNavView ? !this.c.state.showNavView ? createVNode("ion-icon", {
+        default: () => [renderCalendar(), this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? createVNode("ion-icon", {
           "class": this.ns.e("nav-icon"),
           "title": ibiz.i18n.t("component.controlNavigation.showNav"),
           "name": "eye-outline",
-          "onClick": this.onShowNavView
+          "onClick": () => this.c.onShowNavViewChange()
         }, null) : createVNode("ion-icon", {
           "class": this.ns.e("nav-icon"),
           "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
           "name": "eye-off-outline",
-          "onClick": this.onShowNavView
+          "onClick": () => this.c.onShowNavViewChange()
         }, null) : null]
       })]
     });

package/es/control/calendar/components/calendar-daily/calendar-daily.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, watch, onMounted, onUnmounted, createVNode } from 'vue';
+import { watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';

package/es/control/calendar/components/calendar-user/calendar-user.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, createVNode, resolveComponent, createTextVNode } from 'vue';
+import { ref, watch, createVNode, resolveComponent, createTextVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import '../interface/index.mjs';
 import { getDayTime, calcCurWeek, calcCurtimeEvents } from './use-calendar-user.mjs';

package/es/control/calendar/components/calendar-week/calendar-week.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, createVNode, resolveComponent } from 'vue';
+import { ref, watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';

package/es/control/calendar/components/custom-calendar/custom-calendar.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, createVNode, resolveComponent } from 'vue';
+import { onMounted, createVNode, resolveComponent, defineComponent } from 'vue';
 import dayjs from 'dayjs';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';

package/es/control/calendar/components/interface/calendar-daily.mjs

@@ -1,5 +1,5 @@
 import '../util/index.mjs';
-import { handleProps, definePropType } from '../util/util.mjs';
+import { definePropType, handleProps } from '../util/util.mjs';
 import { isObject } from 'lodash-es';
 
 "use strict";

package/es/control/calendar/components/interface/calendar-user.mjs

@@ -1,5 +1,5 @@
 import '../util/index.mjs';
-import { handleProps, definePropType } from '../util/util.mjs';
+import { definePropType, handleProps } from '../util/util.mjs';
 
 "use strict";
 const calendarUserProps = handleProps({

package/es/control/calendar/components/interface/calendar-week.mjs

@@ -1,5 +1,5 @@
 import '../util/index.mjs';
-import { handleProps, definePropType } from '../util/util.mjs';
+import { definePropType, handleProps } from '../util/util.mjs';
 import { isObject } from 'lodash-es';
 
 "use strict";

package/es/control/calendar/components/interface/custom-calendar.mjs

@@ -1,7 +1,7 @@
 import '../util/index.mjs';
 import '../constant/index.mjs';
 import { isArray, isDate } from 'lodash-es';
-import { handleProps, definePropType } from '../util/util.mjs';
+import { definePropType, handleProps } from '../util/util.mjs';
 import { UPDATE_MODEL_EVENT, INPUT_EVENT, CHANGE_EVENT, EVENT_CLICK_EVENT, EVENT_DBL_CLICK_EVENT } from '../constant/event.mjs';
 
 "use strict";

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

@@ -35,8 +35,8 @@ export declare const IBizCalendarControl: import("@ibiz-template/vue3-util").Typ
     popoverValue: import("vue").Ref<string>;
     selectDate: (tag: string) => void;
     calcItemStyle: (data: import("@ibiz-template/runtime").ICalendarItemData) => IData;
-    onShowNavView: () => void;
     calcCalendarItems: (date: Date) => import("@ibiz-template/runtime").ICalendarItemData[];
+    onNodeContextmenu: (item: import("@ibiz-template/runtime").ICalendarItemData, evt: MouseEvent) => Promise<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>;

package/es/control/calendar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } 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 { defineComponent, onActivated, computed, createVNode, resolveComponent } from 'vue';
+import { onActivated, computed, resolveComponent, createVNode, defineComponent } 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 { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } 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,5 +1,5 @@
-import { isVNode, defineComponent, ref, watch, nextTick, onMounted, createVNode, resolveComponent, onBeforeUnmount } from 'vue';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { isVNode, ref, watch, nextTick, onMounted, resolveComponent, createVNode, onBeforeUnmount, defineComponent } from 'vue';
+import { useControlController, useNamespace, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
 import { init } from 'echarts';
 import { createUUID } from 'qx-util';
 import { ChartController, ControlVO } from '@ibiz-template/runtime';
@@ -197,11 +197,21 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     };
     const renderNoData = () => {
       if (c.state.items.length === 0) {
+        const noDataSlots = {};
+        if (hasEmptyPanelRenderer(c)) {
+          Object.assign(noDataSlots, {
+            customRender: () => createVNode(IBizCustomRender, {
+              "controller": c
+            }, null)
+          });
+        }
         return createVNode(resolveComponent("iBizNoData"), {
           "text": c.model.emptyText,
           "emptyTextLanguageRes": c.model.emptyTextLanguageRes,
           "hideNoDataImage": c.state.hideNoDataImage
-        }, null);
+        }, _isSlot(noDataSlots) ? noDataSlots : {
+          default: () => [noDataSlots]
+        });
       }
     };
     onBeforeUnmount(() => {

package/es/control/chart/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } 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.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-context-menu{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-context-menu-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0)}.ibiz-context-menu__item{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-context-menu__item+.ibiz-context-menu__item{margin:var(--ibiz-context-menu-item-margin)}.ibiz-context-menu__item .ibiz-context-menu__action-content-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-context-menu__action-content{display:flex}.ibiz-context-menu__action-content-icon{display:flex;align-items:center;justify-content:center;padding:0 var(--ibiz-spacing-super-tight);font-size:var(--ibiz-width-icon-medium)}.ibiz-context-menu__action-content-caption{display:flex;align-items:center;justify-content:center}.ibiz-context-menu__popover{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-context-menu-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-context-menu-popover-padding)}.ibiz-context-menu__popover .el-button{--el-button-size:40px;display:block;width:100%;padding:var(--ibiz-context-menu-popover-button-padding);margin:var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-context-menu-popover-button-color);text-align:left;border-radius:0}.ibiz-context-menu__popover .el-button:hover{background-color:var(--ibiz-context-menu-popover-button-hover-bg)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-caption{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-icon{position:absolute;right:var(--ibiz-spacing-base-loose);font-size:var(--ibiz-font-size-header-6)}.ibiz-context-menu__separator{margin:var(--ibiz-spacing-none)}.ibiz-context-menu__separator.el-divider--horizontal{width:calc(100% - 2 * var(--ibiz-spacing-base-loose));margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose)}.ibiz-context-menu--dropdown .ibiz-context-menu__caption{cursor:pointer}.ibiz-context-menu--dropdown .ibiz-context-menu__caption-icon{vertical-align:bottom}
+@charset "UTF-8";.ibiz-context-menu{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-context-menu-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);--ibiz-context-menu-transfer-zindex:1000}.ibiz-context-menu__item{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-context-menu__item+.ibiz-context-menu__item{margin:var(--ibiz-context-menu-item-margin)}.ibiz-context-menu__item .ibiz-context-menu__action-content-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-context-menu__action-content{display:flex}.ibiz-context-menu__action-content-icon{display:flex;align-items:center;justify-content:center;padding:0 var(--ibiz-spacing-super-tight);font-size:var(--ibiz-width-icon-medium)}.ibiz-context-menu__action-content-caption{display:flex;align-items:center;justify-content:center}.ibiz-context-menu__popover{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-context-menu-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);--ibiz-context-menu-transfer-zindex:1000;width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-context-menu-popover-padding)}.ibiz-context-menu__popover .el-button{--el-button-size:40px;display:block;width:100%;padding:var(--ibiz-context-menu-popover-button-padding);margin:var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-context-menu-popover-button-color);text-align:left;border-radius:0}.ibiz-context-menu__popover .el-button:hover{background-color:var(--ibiz-context-menu-popover-button-hover-bg)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-caption{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-context-menu__popover .el-button .ibiz-context-menu__action-content-group-icon{position:absolute;right:var(--ibiz-spacing-base-loose);font-size:var(--ibiz-font-size-header-6)}.ibiz-context-menu__separator{margin:var(--ibiz-spacing-none)}.ibiz-context-menu__separator.el-divider--horizontal{width:calc(100% - 2 * var(--ibiz-spacing-base-loose));margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose)}.ibiz-context-menu__transfer{--ibiz-context-menu-item-margin:0 0 0 4px;--ibiz-context-menu-separator-height:20px;--ibiz-context-menu-separator-width:2px;--ibiz-context-menu-separator-color:var(--ibiz-color-border);--ibiz-context-menu-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-context-menu-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-context-menu-popover-button-color:var(--ibiz-color-text-2);--ibiz-context-menu-popover-button-hover-bg:var(--ibiz-color-bg-0);--ibiz-context-menu-transfer-zindex:1000;z-index:var(--ibiz-context-menu-transfer-zindex)!important}.ibiz-context-menu--dropdown .ibiz-context-menu__caption{cursor:pointer}.ibiz-context-menu--dropdown .ibiz-context-menu__caption-icon{vertical-align:bottom}

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

@@ -31,18 +31,23 @@ export declare const ContextMenuControl: import("vue").DefineComponent<{
         type: PropType<IDETreeNode>;
         required: true;
     };
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }, {
     c: ContextMenuController;
     ns: import("@ibiz-template/core").Namespace;
+    popoverid: string;
     expandDetails: Ref<IDETBUIActionItem[]>;
     groupDetails: Ref<IDETBUIActionItem[]>;
-    groupButtonRef: Ref<any>;
+    groupButtonRef: Ref<HTMLElement | null | undefined>;
     dropdownRef: Ref<any>;
     popoverVisible: Ref<boolean>;
-    handleClick: (detail: IDETBUIActionItem, e: MouseEvent) => void;
+    handleClick: (detail: IDETBUIActionItem, e: MouseEvent) => Promise<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[];
+    setPopoverZIndex: (zIndexClass: string) => void;
     actionDetails: IDETBUIActionItem[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
@@ -73,6 +78,9 @@ export declare const ContextMenuControl: import("vue").DefineComponent<{
         type: PropType<IDETreeNode>;
         required: true;
     };
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }>>, {
     mode: "dropdown" | "buttons";
     groupLevelKeys: number[];

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

@@ -1,5 +1,5 @@
-import { isVNode, defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { isVNode, ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useControlController, useNamespace, usePopoverVisible, usePopoverzIndex } from '@ibiz-template/vue3-util';
 import './context-menu.css';
 import { ContextMenuController } from '@ibiz-template/runtime';
 import { showTitle } from '@ibiz-template/core';
@@ -43,6 +43,11 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
     nodeModel: {
       type: Object,
       required: true
+    },
+    // 行为回调，和action-click事件互斥，二者只有一个生效，actionCallBack优先级大于行为回调
+    // 二者区别在于：行为回调为同步执行（主要解决pop打开视图位置异常），action-click为异步执行（不关心执行是否完成）
+    actionCallBack: {
+      type: Function
     }
   },
   setup(props, {
@@ -54,8 +59,17 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
     const expandDetails = ref([]);
     const groupDetails = ref([]);
     const groupButtonRef = ref();
+    const {
+      popoverVisible,
+      setPopoverVisible
+    } = usePopoverVisible(groupButtonRef, (ele) => {
+      return ele.ref;
+    });
     const dropdownRef = ref();
-    const popoverVisible = ref(false);
+    const {
+      popoverid,
+      setPopoverZIndex
+    } = usePopoverzIndex();
     const transformLanguage = (items) => {
       if (!Array.isArray(items)) {
         return;
@@ -95,15 +109,21 @@ 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 = (detail, e) => {
+    const handleClick = async (detail, e) => {
+      e.stopPropagation();
+      if (!detail.uiactionId) {
+        setPopoverVisible(false);
+        return;
+      }
+      if (props.actionCallBack) {
+        await props.actionCallBack(detail, e);
+      }
       if (props.mode === "buttons") {
-        popoverVisible.value = false;
+        setPopoverVisible(false);
       } else if (dropdownRef.value) {
         dropdownRef.value.handleClose();
       }
-      e.stopPropagation();
-      popoverVisible.value = false;
-      if (detail.uiactionId) {
+      if (!props.actionCallBack) {
         emit("action-click", detail, e);
       }
     };
@@ -223,6 +243,7 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
+      popoverid,
       expandDetails,
       groupDetails,
       groupButtonRef,
@@ -232,6 +253,7 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
       renderActions,
       renderActionButton,
       calcActionItemClass,
+      setPopoverZIndex,
       actionDetails
     };
   },
@@ -256,7 +278,10 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
         "text": true,
         "disabled": pdisabled,
         "ref": "groupButtonRef",
-        "class": [this.ns.e("item"), this.ns.is("expand", this.popoverVisible)]
+        "class": [this.ns.e("item"), this.ns.is("expand", this.popoverVisible)],
+        "onClick": () => {
+          this.popoverVisible = !this.popoverVisible;
+        }
       }, {
         icon: () => createVNode("ion-icon", {
           "class": this.ns.e("icon"),
@@ -265,12 +290,11 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
       }), createVNode(resolveComponent("el-popover"), {
         "placement": "bottom-start",
         "virtual-ref": this.groupButtonRef,
-        "trigger": "click",
         "visible": this.popoverVisible,
-        "onUpdate:visible": ($event) => this.popoverVisible = $event,
-        "popper-class": this.ns.e("popover"),
+        "popper-class": [this.popoverid, this.ns.e("popover"), this.ns.e("transfer")],
         "virtual-triggering": true,
-        "transition": "none"
+        "transition": "none",
+        "onBefore-enter": () => this.setPopoverZIndex("--".concat(this.ns.namespace, "-context-menu-transfer-zindex"))
       }, _isSlot(_slot = this.renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
       })];
@@ -287,6 +311,8 @@ const ContextMenuControl = /* @__PURE__ */ defineComponent({
     return createVNode(resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",
       "onCommand": (command) => this.handleClick(command, new MouseEvent("click")),
+      "onVisible-change": () => this.setPopoverZIndex("--".concat(this.ns.namespace, "-context-menu-transfer-zindex")),
+      "popper-class": [this.popoverid, this.ns.e("transfer")],
       "class": [this.ns.b(), this.ns.m("dropdown")]
     }, {
       default: () => createVNode("span", {

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

@@ -27,18 +27,23 @@ export declare const IBizContextMenuControl: import("@ibiz-template/vue3-util").
         type: import("vue").PropType<import("@ibiz/model-core").IDETreeNode>;
         required: true;
     };
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }, {
     c: import("@ibiz-template/runtime").ContextMenuController;
     ns: import("@ibiz-template/core").Namespace;
+    popoverid: string;
     expandDetails: import("vue").Ref<import("@ibiz/model-core").IDETBUIActionItem[]>;
     groupDetails: import("vue").Ref<import("@ibiz/model-core").IDETBUIActionItem[]>;
-    groupButtonRef: import("vue").Ref<any>;
+    groupButtonRef: import("vue").Ref<HTMLElement | null | undefined>;
     dropdownRef: import("vue").Ref<any>;
     popoverVisible: import("vue").Ref<boolean>;
-    handleClick: (detail: import("@ibiz/model-core").IDETBUIActionItem, e: MouseEvent) => void;
+    handleClick: (detail: import("@ibiz/model-core").IDETBUIActionItem, e: MouseEvent) => Promise<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[];
+    setPopoverZIndex: (zIndexClass: string) => void;
     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<{
     modelData: {
@@ -69,6 +74,9 @@ export declare const IBizContextMenuControl: import("@ibiz-template/vue3-util").
         type: import("vue").PropType<import("@ibiz/model-core").IDETreeNode>;
         required: true;
     };
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }>>, {
     mode: "dropdown" | "buttons";
     groupLevelKeys: number[];

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

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { ContextMenuControl } from './context-menu.mjs';
 import { ContextMenuProvider } from './context-menu.provider.mjs';