@ibiz-template/vue3-components 0.7.41-alpha.14 → 0.7.41-alpha.16

package/es/panel-component/app-extend-menu/extend-menu-base/extend-standard-menu/extend-standard-menu.mjs

@@ -0,0 +1,278 @@
+import { isVNode, createVNode, resolveComponent, ref, computed, defineComponent } from 'vue';
+import { showTitle } from '@ibiz-template/core';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
+import { getMenus, findMenuItem } from '../extend-menu-base.util.mjs';
+import './extend-standard-menu.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ellipsisSvg = () => {
+  return createVNode("ion-icon", {
+    "name": "ellipsis-horizontal"
+  }, null);
+};
+function renderMenuItem(_params) {
+  var _a, _b, _c, _d;
+  const {
+    isFirst,
+    menu,
+    collapse,
+    ns,
+    menuAlign,
+    menuItemsState
+  } = _params;
+  if (!menu.id || menuItemsState && !((_a = menuItemsState[menu.id]) == null ? void 0 : _a.visible)) {
+    return;
+  }
+  if (menu.itemType === "MENUITEM") {
+    let content;
+    if (!(isFirst && collapse)) {
+      content = [menu.sysImage ? createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null) : null, createVNode("span", {
+        "class": ns.e("caption")
+      }, [menu.caption])];
+    } else {
+      content = [menu.sysImage ? createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null) : createVNode("span", {
+        "class": ns.e("caption")
+      }, [(_b = menu.caption) == null ? void 0 : _b.slice(0, 1)])];
+    }
+    return !(isFirst && collapse) ? createVNode(resolveComponent("el-menu-item"), {
+      "class": [ns.e("item"), "".concat(((_c = menu.sysCss) == null ? void 0 : _c.cssName) || "")],
+      "index": menu.id,
+      "title": showTitle(menu.tooltip)
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    }) : createVNode(resolveComponent("el-tooltip"), {
+      "class": ns.b("tooltip"),
+      "content": menu.caption,
+      "placement": menuAlign === "horizontal" ? "bottom" : "left",
+      "theme": "light"
+    }, {
+      default: () => {
+        var _a2;
+        return [createVNode(resolveComponent("el-menu-item"), {
+          "class": [ns.e("item"), "".concat(((_a2 = menu.sysCss) == null ? void 0 : _a2.cssName) || "")],
+          "index": menu.id
+        }, _isSlot(content) ? content : {
+          default: () => [content]
+        })];
+      }
+    });
+  }
+  if (menu.itemType === "SEPERATOR") {
+    const direction = menuAlign === "horizontal" && isFirst ? "vertical" : "horizontal";
+    return createVNode(resolveComponent("el-divider"), {
+      "direction": direction,
+      "class": ns.em("separator", direction),
+      "id": menu.id
+    }, null);
+  }
+  if (menu.itemType === "RAWITEM") {
+    return createVNode(resolveComponent("el-menu-item"), {
+      "index": menu.id,
+      "title": showTitle(menu.tooltip),
+      "class": [ns.e("rawitem"), "".concat(((_d = menu.sysCss) == null ? void 0 : _d.cssName) || "")]
+    }, {
+      default: () => [createVNode(resolveComponent("iBizRawItem"), {
+        "rawItem": menu
+      }, null)]
+    });
+  }
+}
+function renderSubmenu(_params) {
+  var _a, _b;
+  const {
+    isFirst,
+    menu,
+    collapse,
+    ns,
+    menuAlign,
+    menuItemsState
+  } = _params;
+  if (!menu.id || menuItemsState && !((_a = menuItemsState[menu.id]) == null ? void 0 : _a.visible)) {
+    return;
+  }
+  return createVNode(resolveComponent("el-sub-menu"), {
+    "class": [ns.b("submenu"), "".concat(((_b = menu.sysCss) == null ? void 0 : _b.cssName) || "")],
+    "index": menu.id,
+    "teleported": true,
+    "popper-class": [ns.b("popup-container")]
+  }, {
+    default: () => menu.children && menu.children.map((item) => {
+      if (item.children && item.children) {
+        return renderSubmenu({
+          isFirst: false,
+          menu: item,
+          collapse,
+          ns,
+          menuAlign,
+          menuItemsState
+        });
+      }
+      return renderMenuItem({
+        isFirst: false,
+        menu: item,
+        collapse,
+        ns,
+        menuAlign,
+        menuItemsState
+      });
+    }),
+    title: () => {
+      var _a2;
+      if (collapse) {
+        if (menu.sysImage) {
+          return createVNode(resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": menu.sysImage
+          }, null);
+        }
+        return [isFirst ? (_a2 = menu.caption) == null ? void 0 : _a2.slice(0, 1) : menu.caption, isFirst ? null : createVNode("ion-icon", {
+          "name": "chevron-forward-outline"
+        }, null)];
+      }
+      return [createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null), createVNode("span", {
+        "class": ns.e("caption")
+      }, [menu.caption])];
+    }
+  });
+}
+function renderMenuContent(_params) {
+  const {
+    refreshKey,
+    ns,
+    collapse,
+    menuAlign,
+    position,
+    menus,
+    menuItemsState,
+    handleMenuSelect
+  } = _params;
+  return createVNode("div", {
+    "class": [ns.e("content"), ns.is("collapse", collapse), ns.is(menuAlign, !!menuAlign), ns.is(position == null ? void 0 : position.toLowerCase(), !!position)]
+  }, [createVNode(resolveComponent("el-menu"), {
+    "key": refreshKey,
+    "popper-class": [ns.b("popper")],
+    "collapse": collapse,
+    "collapse-transition": false,
+    "onSelect": handleMenuSelect,
+    "theme": "light",
+    "mode": menuAlign,
+    "ellipsis-icon": () => ellipsisSvg(),
+    "ellipsis": menuAlign === "horizontal"
+  }, {
+    default: () => {
+      return menus.map((item) => {
+        if (item.children && item.children.length > 0) {
+          return renderSubmenu({
+            isFirst: true,
+            menu: item,
+            collapse,
+            ns,
+            menuAlign,
+            menuItemsState
+          });
+        }
+        return renderMenuItem({
+          isFirst: true,
+          menu: item,
+          collapse,
+          ns,
+          menuAlign,
+          menuItemsState
+        });
+      });
+    }
+  })]);
+}
+const ExtendStandardMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizExtendStandardMenu",
+  props: {
+    items: {
+      type: Object,
+      required: true
+    },
+    menuItemsState: {
+      type: Object,
+      required: true
+    },
+    providers: {
+      type: Object,
+      required: true
+    },
+    position: {
+      type: String,
+      required: true
+    },
+    layoutMode: {
+      type: String,
+      required: true
+    },
+    layout: {
+      type: Object
+    }
+  },
+  emits: {
+    /**
+     * @description 项点击事件
+     */
+    menuItemClick: (_item, _event) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("extend-standard-menu");
+    const defaultMenuRef = ref();
+    const refreshKey = ref(createUUID());
+    const collapse = ref(false);
+    const menuAlign = computed(() => ["TOP", "BOTTOM"].includes(props.position) ? "horizontal" : "vertical");
+    const menus = ref(getMenus(props.items));
+    const handleMenuSelect = async (_id, _event) => {
+      const menuItem = findMenuItem(_id, props.items);
+      if (!(menuItem == null ? void 0 : menuItem.appFuncId)) {
+        ibiz.log.warn(ibiz.i18n.t("runtime.controller.control.menu.noConfigured"));
+        return;
+      }
+      emit("menuItemClick", menuItem, _event);
+    };
+    return {
+      ns,
+      defaultMenuRef,
+      refreshKey,
+      collapse,
+      menuAlign,
+      menus,
+      handleMenuSelect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "defaultMenuRef",
+      "class": [this.ns.b(), this.ns.b(this.layoutMode.toLowerCase()), this.ns.is(this.position.toLowerCase(), true), this.ns.is(this.menuAlign, true), this.ns.is("collapse", this.collapse)]
+    }, [renderMenuContent({
+      isLayout: false,
+      position: this.position,
+      refreshKey: this.refreshKey,
+      ns: this.ns,
+      collapse: this.collapse,
+      menuAlign: this.menuAlign,
+      menus: this.menus,
+      menuLayout: this.layout,
+      menuItemsState: this.menuItemsState,
+      handleMenuSelect: this.handleMenuSelect
+    })]);
+  }
+});
+
+export { ExtendStandardMenu };

package/es/view-engine/index.mjs

@@ -206,6 +206,10 @@ const IBizViewEngine = {
       "VIEW_DEPICKUPDATAVIEW",
       (c) => new PickupDataViewEngine(c)
     );
+    ibiz.engine.register(
+      "VIEW_PickupDataView",
+      (c) => new PickupDataViewEngine(c)
+    );
     ibiz.engine.register(
       "VIEW_DEINDEXPICKUPDATAVIEW",
       (c) => new PickupDataViewEngine(c)

package/lib/common/carousel/carousel.css

@@ -1 +1 @@
-.ibiz-carousel-component .el-carousel__container .el-carousel__item{display:flex;align-items:center;justify-content:center}.ibiz-carousel-component .el-carousel__container .el-carousel__item img{display:inline-block;width:100%;height:100%}
+.ibiz-carousel-component .el-carousel__container .el-carousel__item{display:flex;align-items:center;justify-content:center}.ibiz-carousel-component .el-carousel__container .el-carousel__item img{display:inline-block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}

package/lib/common/index.cjs

@@ -37,10 +37,12 @@ var ganttSetting = require('./gantt-setting/gantt-setting.cjs');
 var navSplit = require('./nav-split/nav-split.cjs');
 var cropping = require('./cropping/cropping.cjs');
 var editorEmptyText = require('./editor-empty-text/editor-empty-text.cjs');
+var kanbenSetting = require('./kanben-setting/kanben-setting.cjs');
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(kanbenSetting.IBizKanbanSetting.name, kanbenSetting.IBizKanbanSetting);
     v.component(editorEmptyText.IBizEditorEmptyText.name, editorEmptyText.IBizEditorEmptyText);
     v.component(cropping.IBizCropping.name, cropping.IBizCropping);
     v.component(vue3Util.IBizControlBase.name, vue3Util.IBizControlBase);

package/lib/common/kanben-setting/kanben-setting.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./kanben-setting.css');
+
+"use strict";
+const IBizKanbanSetting = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizKanbanSetting",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    buttonStyle: {
+      type: Object,
+      default: () => ({
+        circle: false,
+        type: "info"
+      })
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("kanban-setting");
+    const groups = vue.computed(() => {
+      return props.controller.state.groups;
+    });
+    return {
+      ns,
+      groups
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(vue.resolveComponent("el-popover"), {
+      "trigger": "click",
+      "placement": "bottom",
+      "popper-class": this.ns.e("popover")
+    }, {
+      reference: () => {
+        return vue.createVNode(vue.resolveComponent("el-button"), this.buttonStyle, {
+          default: () => [vue.createVNode("ion-icon", {
+            "name": "options-outline",
+            "title": ibiz.i18n.t("component.kanbanSetting.hideGroup")
+          }, null)]
+        });
+      },
+      default: () => {
+        return vue.createVNode("div", {
+          "class": this.ns.em("popover", "content")
+        }, [this.groups.map((group) => {
+          return vue.createVNode(vue.resolveComponent("el-checkbox"), {
+            "size": "small",
+            "label": group.caption,
+            "model-value": !group.hidden,
+            "onChange": (val) => {
+              group.hidden = !val;
+            }
+          }, null);
+        })]);
+      }
+    })]);
+  }
+});
+
+exports.IBizKanbanSetting = IBizKanbanSetting;

package/lib/common/kanben-setting/kanben-setting.css

@@ -0,0 +1 @@
+.ibiz-kanban-setting__popover--content{display:flex;flex-direction:column;width:100%;max-height:500px;overflow-y:auto}

package/lib/common/map-chart/map-chart.cjs

@@ -46,8 +46,7 @@ const IBizMapChart = /* @__PURE__ */ vue.defineComponent({
       historyNames,
       changeMap,
       getCityName,
-      goBack,
-      refresh
+      goBack
     } = mapManager.useMapManager(options, (mapName) => {
       const {
         visualMap,
@@ -56,8 +55,8 @@ const IBizMapChart = /* @__PURE__ */ vue.defineComponent({
         hoverAreaColor,
         areaBorderColor
       } = options.value;
-      const areaData2 = props.areaData || [];
-      const pointData2 = props.pointData || [];
+      const areaData = props.areaData || [];
+      const pointData = props.pointData || [];
       const result = {
         geo: {
           map: mapName
@@ -127,7 +126,7 @@ const IBizMapChart = /* @__PURE__ */ vue.defineComponent({
             select: {
               disabled: true
             },
-            data: areaData2.map((item) => ({
+            data: areaData.map((item) => ({
               name: "".concat(item._areaCode),
               value: item._value,
               _id: item._id
@@ -163,7 +162,7 @@ const IBizMapChart = /* @__PURE__ */ vue.defineComponent({
                 return find == null ? void 0 : find._tooltip;
               }
             },
-            data: pointData2.map((item) => {
+            data: pointData.map((item) => {
               return {
                 _id: item._id,
                 symbol: item._symbol ? "image://".concat(item._symbol) : void 0,
@@ -194,13 +193,6 @@ const IBizMapChart = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       changeMap(options.value.defaultAreaCode, true);
     });
-    const {
-      areaData,
-      pointData
-    } = vue.toRefs(props);
-    vue.watch([areaData, pointData], () => {
-      refresh();
-    });
     return {
       ns,
       chartRef,

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

@@ -19,6 +19,36 @@ const isTimeBetween = (_argrs) => {
   const { date, beginTime, endTime, unit = "day" } = _argrs;
   return !!(beginTime && dayjs(date).isSame(beginTime, unit) || endTime && dayjs(date).isSame(endTime, unit) || beginTime && endTime && dayjs(date).isAfter(beginTime, unit) && dayjs(date).isBefore(endTime, unit));
 };
+function useCalendarLegend(ns) {
+  const getVarValue = (varName) => {
+    const root = document.documentElement;
+    return getComputedStyle(root).getPropertyValue(varName);
+  };
+  const bgColors = [
+    // 首个颜色用主题色
+    getVarValue("".concat(ns.cssVarName("color-primary"))),
+    "#2196F3",
+    "#4CAF50",
+    "#3F51B5",
+    "#FF9800",
+    "#673AB7",
+    "#757575"
+  ];
+  const actBdrColors = bgColors.map(
+    () => getVarValue("".concat(ns.cssVarName("color-black")))
+  );
+  const getBkColor = (_index) => {
+    return bgColors[_index] || bgColors[0];
+  };
+  const getActBdrColors = (_index) => {
+    return actBdrColors[_index] || getVarValue("".concat(ns.cssVarName("color-primary")));
+  };
+  const getFontColor = () => {
+    return getVarValue("".concat(ns.cssVarName("color-primary-text")));
+  };
+  return { getFontColor, getBkColor, getActBdrColors };
+}
 
 exports.getWeekRange = getWeekRange;
 exports.isTimeBetween = isTimeBetween;
+exports.useCalendarLegend = useCalendarLegend;

package/lib/control/calendar/calendar.cjs

@@ -70,10 +70,54 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
   setup() {
     const c = vue3Util.useControlController((...args) => new runtime.CalendarController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    const {
+      UIStore
+    } = vue3Util.useUIStore();
+    const {
+      getFontColor,
+      getBkColor,
+      getActBdrColors
+    } = calendarUtil.useCalendarLegend(ns);
     const calendarRef = vue.ref();
     const curPopover = vue.ref();
     const showDateRange = vue.ref(c.controlParams.showmode === "daterange");
     const showDateList = vue.ref(c.controlParams.showmode === "expand");
+    const monthLegendClick = (_item) => {
+      Object.assign(_item, {
+        isShow: !_item.isShow
+      });
+    };
+    const legendItems = vue.ref([]);
+    const legendType = ["DAY", "WEEK", "MONTH"];
+    const calcLegend = () => {
+      legendItems.value = c.state.legends.map((_item, index) => {
+        const tempItem = {
+          ..._item,
+          isShow: true
+        };
+        if (!c.model.calendarStyle || !legendType.includes(c.model.calendarStyle))
+          return tempItem;
+        if (!_item.bkcolor) {
+          Object.assign(tempItem, {
+            bkcolor: getBkColor(index),
+            actBdrColor: getActBdrColors(index)
+          });
+        }
+        if (!_item.color)
+          Object.assign(tempItem, {
+            color: getFontColor()
+          });
+        return tempItem;
+      });
+    };
+    vue.watch(() => c.state.legends, () => {
+      calcLegend();
+    }, {
+      deep: true
+    });
+    vue.watch(() => UIStore.theme, () => {
+      calcLegend();
+    });
     const popoverValue = vue.ref("");
     const selectDate = (tag) => {
       if (!calendarRef.value)
@@ -121,6 +165,9 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         }
         return false;
       }
+      if (c.model.calendarStyle === "TIMELINE") {
+        return dayjs(newVal).isSame(dayjs(oldVal), "millisecond");
+      }
       return false;
     };
     vue.watch(() => c.state.selectedDate, (newVal, oldVal) => {
@@ -130,14 +177,20 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       c.load();
     });
     const calcItemStyle = (data) => {
+      const _legend = legendItems.value.find((_item) => _item.id === data.itemType);
       return {
         color: data.color,
-        backgroundColor: data.bkColor
+        backgroundColor: data.bkColor,
+        ["".concat(ns.cssVarBlockName("item-color"))]: data.color,
+        ["".concat(ns.cssVarBlockName("item-active-border-color"))]: _legend == null ? void 0 : _legend.actBdrColor
       };
     };
     const calcCalendarItems = (date) => {
       const weekRange = calendarUtil.getWeekRange(date);
       const calendarItems = c.state.items.filter((item) => {
+        const _legend = legendItems.value.find((legend) => legend.id === item.itemType);
+        if (_legend && !_legend.isShow)
+          return false;
         if (!showDateRange.value) {
           return dayjs(date).isSame(item.beginTime, "day");
         }
@@ -158,7 +211,20 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           return result;
         });
       }
-      return calendarItems;
+      return calendarItems.map((_item) => {
+        const targetLegend = legendItems.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
+        if (!targetLegend)
+          return _item;
+        if (!_item.bkColor)
+          Object.assign(_item, {
+            bkColor: targetLegend.bkcolor
+          });
+        if (!_item.color)
+          Object.assign(_item, {
+            color: targetLegend.color
+          });
+        return _item;
+      });
     };
     let ContextMenu;
     const iBizRawItem = vue.resolveComponent("IBizRawItem");
@@ -311,10 +377,12 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       showDateRange,
       showDateList,
       popoverValue,
+      legendItems,
       selectDate,
       calcItemStyle,
       calcCalendarItems,
-      onNodeContextmenu
+      onNodeContextmenu,
+      monthLegendClick
     };
   },
   render() {
@@ -354,7 +422,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !calendarUtil.isTimeBetween({
+      const itemClass = [this.ns.b("item"), this.ns.be("item", "default"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !calendarUtil.isTimeBetween({
         beginTime: item.beginTime,
         endTime: item.endTime,
         date
@@ -422,11 +490,31 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         header: ({
           date
         }) => {
-          var _a;
           let _slot, _slot2, _slot3, _slot4, _slot5;
           return [vue.createVNode("span", {
             "class": this.ns.b("content-title")
           }, [date]), vue.createVNode("div", {
+            "class": this.ns.b("legend")
+          }, [this.legendItems && this.legendItems.length > 1 && this.legendItems.map((_legend) => {
+            var _a;
+            let label = _legend.name;
+            const _model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((_calendarItem) => _calendarItem.id === _legend.id);
+            if (_model == null ? void 0 : _model.nameLanguageRes) {
+              label = ibiz.i18n.t(_model.nameLanguageRes.lanResTag, _model.name);
+            }
+            return vue.createVNode("div", {
+              "class": [this.ns.be("legend", "item")],
+              "onClick": () => this.monthLegendClick(_legend)
+            }, [vue.createVNode("div", {
+              "class": this.ns.bem("legend", "item", "tip"),
+              "style": {
+                background: _legend.isShow ? _legend == null ? void 0 : _legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
+                color: _legend == null ? void 0 : _legend.color
+              }
+            }, null), vue.createVNode("div", {
+              "class": this.ns.bem("legend", "item", "text")
+            }, [label])]);
+          })]), vue.createVNode("div", {
             "class": this.ns.b("content-header")
           }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
             "modelValue": this.c.state.selectedDate,
@@ -464,23 +552,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
             }, _isSlot(_slot5 = ibiz.i18n.t("control.calendar.nextYear")) ? _slot5 : {
               default: () => [_slot5]
             })]
-          })]), vue.createVNode("div", {
-            "class": this.ns.b("legend")
-          }, [this.c.model.sysCalendarItems && this.c.model.sysCalendarItems.length > 1 && ((_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.map((calendarItem) => {
-            let label = calendarItem.name;
-            if (calendarItem.nameLanguageRes) {
-              label = ibiz.i18n.t(calendarItem.nameLanguageRes.lanResTag, calendarItem.name);
-            }
-            return vue.createVNode("div", {
-              "class": this.ns.e("calendar-item")
-            }, [vue.createVNode("div", {
-              "class": this.ns.e("icon"),
-              "style": {
-                background: calendarItem.bkcolor,
-                color: calendarItem.color
-              }
-            }, null), label]);
-          }))])];
+          })])];
         },
         "date-cell": ({
           data
@@ -544,7 +616,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         "ref": "calendarRef",
         "viewType": this.c.model.calendarStyle,
         "events": this.c.state.items,
-        "legends": this.c.state.legends,
+        "legends": this.legendItems,
         "multiple": !this.c.state.singleSelect,
         "selectedData": this.c.state.selectedData,
         "onEventClick": (value) => {
@@ -562,6 +634,15 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           const item = data[0];
           if (item)
             this.c.onDbRowClick(item);
+        },
+        "onEventContextmenu": (value) => {
+          const {
+            data,
+            evt
+          } = value;
+          const item = data[0];
+          if (item && evt)
+            this.onNodeContextmenu(item, evt);
         }
       }, _isSlot(slots) ? slots : {
         default: () => [slots]