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

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

@@ -6,6 +6,8 @@ var vue = require('vue');
 var ramda = require('ramda');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
+var core = require('@ibiz-template/core');
+var lodashEs = require('lodash-es');
 var mapChartUser_util = require('./map-chart-user.util.cjs');
 var mapUserManager = require('./map-user-manager.cjs');
 require('./map-chart-user.css');
@@ -33,6 +35,8 @@ const IBizMapChartUser = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("map-chart-user");
     const c = props.controller;
     let option = mapChartUser_util.defaultOpts;
+    const mapRef = vue.ref();
+    const isFull = vue.ref(false);
     if (c.controlParams.defaultopts) {
       const data = JSON.parse(c.controlParams.defaultopts);
       option = ramda.mergeDeepLeft(data, option);
@@ -42,9 +46,12 @@ const IBizMapChartUser = /* @__PURE__ */ vue.defineComponent({
         return ramda.isNil(z) ? x : z;
       }, option, props.options);
     });
+    let cleanup = core.NOOP;
     const {
       chartRef,
       historyNames,
+      processing,
+      areaLevelMap,
       changeMap,
       getCityInfo,
       goBack
@@ -58,13 +65,21 @@ const IBizMapChartUser = /* @__PURE__ */ vue.defineComponent({
         ...mapChartUser_util.getPointStaticOption(options.value),
         ...mapChartUser_util.getPointOption(pointData, areaData)
       };
+      const {
+        top,
+        bottom
+      } = options.value;
       const areaOption = {
+        top,
+        bottom,
         ...mapChartUser_util.getAreaStaticOption(options.value),
         ...mapChartUser_util.getAreaOption(mapName, pointData, areaData, cityInfo)
       };
       const result = {
         geo: {
-          map: mapName
+          map: mapName,
+          top,
+          bottom
         },
         tooltip,
         visualMap,
@@ -82,24 +97,85 @@ const IBizMapChartUser = /* @__PURE__ */ vue.defineComponent({
       const areaCode = c.state.strAreaCode ? "".concat(name) : Number(name);
       c.state.areaCode = areaCode;
       changeMap(name, areaCode, true);
+      c.evt.on("onDrillDown", async (args) => {
+        if (!processing.value) {
+          const {
+            data
+          } = args;
+          const code = data.areaCode;
+          const curAreaCode = c.state.strAreaCode ? "".concat(code) : Number(code);
+          const areaLevel = areaLevelMap.get(lodashEs.toNumber(curAreaCode)) || "";
+          c.state.areaCode = curAreaCode;
+          c.state.areaLevel = areaLevel;
+          await changeMap(code, code);
+        }
+      });
+      c.evt.on("onBackClick", () => {
+        if (!processing.value) {
+          goBack();
+        }
+      });
+      cleanup = core.listenJSEvent(window, "resize", () => {
+        if (isFull.value) {
+          isFull.value = ibiz.fullscreenUtil.isFullScreen;
+        }
+      });
     });
+    vue.onBeforeUnmount(() => {
+      if (cleanup !== core.NOOP) {
+        cleanup();
+      }
+    });
+    const onBack = async () => {
+      processing.value = true;
+      await c.evt.emit("onBackClick", void 0);
+      goBack();
+      processing.value = false;
+    };
+    const toggleFullScreen = () => {
+      if (mapRef.value) {
+        if (isFull.value) {
+          ibiz.fullscreenUtil.closeElementFullscreen();
+        } else {
+          ibiz.fullscreenUtil.openElementFullscreen(mapRef.value);
+        }
+        isFull.value = !isFull.value;
+      }
+    };
     return {
       ns,
+      c,
+      mapRef,
       chartRef,
       historyNames,
-      goBack
+      isFull,
+      onBack,
+      toggleFullScreen
     };
   },
   render() {
+    const {
+      enabledFullScreen
+    } = this.c.state;
     return vue.createVNode("div", {
-      "class": this.ns.b()
-    }, [vue.createVNode("div", {
+      "class": this.ns.b(),
+      "ref": "mapRef"
+    }, [enabledFullScreen ? vue.createVNode(vue.resolveComponent("el-button"), {
+      "type": "info",
+      "class": this.ns.e("fullscreen"),
+      "onClick": this.toggleFullScreen,
+      "title": this.isFull ? ibiz.i18n.t("app.cancelFullscreen") : ibiz.i18n.t("app.fullscreen")
+    }, {
+      default: () => [vue.createVNode("ion-icon", {
+        "name": this.isFull ? "contract-outline" : "expand-outline"
+      }, null)]
+    }) : null, vue.createVNode("div", {
       "class": this.ns.e("chart"),
       "ref": "chartRef"
     }, null), this.historyNames.length > 1 && vue.createVNode("div", {
       "class": this.ns.e("goback"),
       "onClick": () => {
-        this.goBack();
+        this.onBack();
       }
     }, [ibiz.i18n.t("app.return")])]);
   }

package/lib/common/map-chart-user/map-chart-user.css

@@ -1 +1 @@
-.ibiz-map-chart-user{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart-user__chart{width:100%;height:100%}.ibiz-map-chart-user__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:var(--ibiz-font-size-header-4);color:var(--ibiz-color-link);text-decoration:underline;letter-spacing:6px;cursor:pointer}.ibiz-map-chart-user__popper{padding:var(--ibiz-spacing-base)}
+.ibiz-map-chart-user{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart-user__chart{width:100%;height:100%}.ibiz-map-chart-user__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:var(--ibiz-font-size-header-4);color:var(--ibiz-color-link);text-decoration:underline;letter-spacing:6px;cursor:pointer}.ibiz-map-chart-user__fullscreen{position:absolute;top:var(--ibiz-spacing-tight);right:var(--ibiz-spacing-tight);z-index:9}.ibiz-map-chart-user__popper{padding:var(--ibiz-spacing-tight)}

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

@@ -38,7 +38,30 @@ const defaultOpts = {
   /** 地图json数据基础路径 */
   jsonBaseUrl: "".concat(ibiz.env.assetsUrl, "/json/map"),
   /** 默认打开的区域编码 */
-  defaultAreaCode: 1e5
+  defaultAreaCode: 1e5,
+  // 距离底部距离
+  bottom: 20,
+  // 距离顶部距离
+  top: 20
+};
+const getItemStyle = (item) => {
+  const itemStyle = [];
+  if (item._color) {
+    itemStyle.push("color:".concat(item._color));
+  }
+  if (item._bgcolor) {
+    itemStyle.push("background:".concat(item._bgcolor));
+  }
+  if (item._borderColor) {
+    itemStyle.push("border-color:".concat(item._borderColor));
+  }
+  if (item._borderWidth) {
+    itemStyle.push("border-width:".concat(item._borderWidth, "px"));
+  }
+  if (item._borderWidth && item._borderColor) {
+    itemStyle.push("border-style:solid");
+  }
+  return itemStyle.join(";");
 };
 const findData = (id, type, pointData = [], areaData = []) => {
   if (type === "area") {
@@ -100,7 +123,21 @@ const getPointOption = (pointData, areaData) => {
         return;
       }
       const find = findData(params.data._id, "point", pointData, areaData);
-      return '<div style="color:'.concat(find._color, ";background: ").concat(find._bgcolor, '" class="').concat(find._className, " ").concat(ns.e("popper"), '">').concat(find == null ? void 0 : find._tooltip, "</div>");
+      if (!find) {
+        return;
+      }
+      const { _deData: data } = find;
+      let text = data.srfmajortext;
+      if (find._value) {
+        text = "".concat(data.srfmajortext, ": ").concat(find._value);
+      }
+      if (find._tooltip) {
+        text = find._tooltip;
+      }
+      const style = getItemStyle(find);
+      return '<div style="'.concat(style, '" class="').concat(find._className, " ").concat(ns.e(
+        "popper"
+      ), '">').concat(text, "</div>");
     },
     padding: 0
   };
@@ -159,7 +196,21 @@ const getAreaOption = (mapName, pointData, areaData, cityInfo = []) => {
         return;
       }
       const find = findData(params.data._id, "area", pointData, areaData);
-      return '<div style="color:'.concat(find._color, ";background: ").concat(find._bgcolor, '" class="').concat(find._className, " ").concat(ns.e("popper"), '">').concat(find == null ? void 0 : find._tooltip, "</div>");
+      if (!find || !find._tooltip && !find._value) {
+        return;
+      }
+      const { _deData: data } = find;
+      let text = data.srfmajortext;
+      if (find._value) {
+        text = "".concat(data.srfmajortext, ": ").concat(find._value);
+      }
+      if (find._tooltip) {
+        text = find._tooltip;
+      }
+      const style = getItemStyle(find);
+      return '<div style="'.concat(style, '" class="').concat(find._className, " ").concat(ns.e(
+        "popper"
+      ), '">').concat(text, "</div>");
     },
     padding: 0
   };

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

@@ -3,6 +3,7 @@
 var echarts = require('echarts');
 var vue = require('vue');
 var core = require('@ibiz-template/core');
+var lodashEs = require('lodash-es');
 var mapChartUser_util = require('./map-chart-user.util.cjs');
 
 "use strict";
@@ -10,6 +11,8 @@ function useMapManager(controller, opts, calcEchartsOpts) {
   const mapInfos = /* @__PURE__ */ new Map();
   const currentName = vue.ref("");
   const historyNames = vue.ref([]);
+  const areaLevelMap = /* @__PURE__ */ new Map();
+  const processing = vue.ref(false);
   let chart;
   const chartRef = vue.ref();
   let resizeObserver;
@@ -19,8 +22,9 @@ function useMapManager(controller, opts, calcEchartsOpts) {
       noChild: json.features.length === 1
     };
     json.features.forEach((item) => {
-      const { adcode, name } = item.properties;
+      const { adcode, name, level } = item.properties;
       info.cityNames[adcode] = name;
+      areaLevelMap.set(adcode, level);
     });
     return info;
   };
@@ -48,15 +52,18 @@ function useMapManager(controller, opts, calcEchartsOpts) {
     }
   };
   const changeMap = async (name, areaCode, isInit = false) => {
-    if (!isInit) {
-      controller.onMapChange(areaCode);
-    }
     const strName = "".concat(name);
     if (!mapInfos.has(strName)) {
       await registerMap(strName);
     }
-    controller.state.mapInfo = getCityInfo();
+    if (!isInit) {
+      controller.onMapChange(areaCode);
+    } else {
+      const areaLevel = areaLevelMap.get(lodashEs.toNumber(areaCode)) || "";
+      controller.state.areaLevel = areaLevel;
+    }
     currentName.value = strName;
+    controller.state.mapInfo = getCityInfo();
     historyNames.value.push(strName);
     refresh();
   };
@@ -65,8 +72,9 @@ function useMapManager(controller, opts, calcEchartsOpts) {
       historyNames.value.pop();
       const name = historyNames.value.pop();
       const areaCode = opts.value.strAreaCode ? "".concat(name) : Number(name);
+      const areaLevel = areaLevelMap.get(lodashEs.toNumber(areaCode)) || "";
       controller.state.areaCode = areaCode;
-      await controller.evt.emit("onBackClick", void 0);
+      controller.state.areaLevel = areaLevel;
       changeMap(name, areaCode);
     }
   };
@@ -90,27 +98,53 @@ function useMapManager(controller, opts, calcEchartsOpts) {
           if (!params.data) {
             return;
           }
+          processing.value = true;
           const { pointData, areaData } = controller.state;
           const data = mapChartUser_util.findData(params.data._id, "point", pointData, areaData);
           if (data) {
             controller.onPointClick(data);
           }
+          processing.value = false;
           return;
         }
         if (params.seriesType === "map") {
+          processing.value = true;
           const areaCode = opts.value.strAreaCode ? "".concat(params.name) : Number(params.name);
-          controller.state.areaCode = areaCode;
-          const { pointData, areaData, enabledDrillDown } = controller.state;
+          const areaLevel = areaLevelMap.get(lodashEs.toNumber(areaCode)) || "";
+          const { pointData, areaData, enabledDrillDown, mdctrlActiveMode } = controller.state;
           if (params.data) {
             const data = mapChartUser_util.findData(params.data._id, "area", pointData, areaData);
             if (data) {
-              controller.onAreaClick(data);
+              controller.onAreaClick(data, areaCode, areaLevel);
             }
           }
-          if (params.name !== currentName.value && enabledDrillDown) {
+          if (params.name !== currentName.value && enabledDrillDown && mdctrlActiveMode !== 2) {
+            if (lodashEs.toNumber(areaCode) > lodashEs.toNumber(controller.state.areaCode)) {
+              controller.evt.emit("onDrillDown", { data: { areaCode } });
+            }
+            controller.state.areaCode = areaCode;
+            controller.state.areaLevel = areaLevel || "";
             changeMap(params.name, areaCode);
           }
+          processing.value = false;
+        }
+      }
+    });
+    chart.on("dblclick", (params) => {
+      const { enabledDrillDown, mdctrlActiveMode } = controller.state;
+      if (params.componentType === "series" && params.seriesType === "map" && mdctrlActiveMode === 2 && enabledDrillDown) {
+        processing.value = true;
+        const areaCode = opts.value.strAreaCode ? "".concat(params.name) : Number(params.name);
+        const areaLevel = areaLevelMap.get(lodashEs.toNumber(areaCode)) || "";
+        if (lodashEs.toNumber(areaCode) > lodashEs.toNumber(controller.state.areaCode)) {
+          controller.evt.emit("onDrillDown", { data: { areaCode } });
+        }
+        controller.state.areaCode = areaCode;
+        controller.state.areaLevel = areaLevel;
+        if (params.name !== currentName.value) {
+          changeMap(params.name, areaCode);
         }
+        processing.value = false;
       }
     });
     chart.on("mouseover", function(data) {
@@ -147,6 +181,8 @@ function useMapManager(controller, opts, calcEchartsOpts) {
     chartRef,
     historyNames,
     currentName,
+    processing,
+    areaLevelMap,
     changeMap,
     getCityInfo,
     goBack,

package/lib/control/calendar/components/calendar-daily/calendar-daily.cjs

@@ -35,8 +35,11 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
       handleDragStart,
       handleCurTime,
       initDrawData,
-      eventContextmenu
-    } = useCalendarDaily.useCalendarDaily(props, emit);
+      eventContextmenu,
+      contentMousemove,
+      eventMouseenter,
+      eventMouseleave
+    } = useCalendarDaily.useCalendarDaily(props, emit, ns);
     vue.watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
         const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
@@ -60,6 +63,23 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
         curTimeTimer.value = null;
       }
     });
+    const renderPopoverContent = (_event) => {
+      var _a;
+      const _tempEvent = {
+        ..._event,
+        color: "",
+        bkColor: ""
+      };
+      return vue.createVNode("div", {
+        "class": [ns.em("event-popover", "body")]
+      }, [vue.createVNode("div", {
+        "class": [ns.em("event-popover", "scroll")]
+      }, [(slots == null ? void 0 : slots.event) ? (_a = slots.event) == null ? void 0 : _a.call(slots, {
+        data: _tempEvent
+      }) : vue.createVNode("div", {
+        "class": [ns.em("event-popover", "content")]
+      }, ["".concat(_event.text || "", " ").concat(_event.timeRange || "")])])]);
+    };
     const renderEventItem = (location, eventBoxStyle, eventContentStyle, event, index, slotNme, classEName) => {
       var _a;
       let title = "".concat(event.text || "");
@@ -68,6 +88,7 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
       title = core.showTitle(title) || "";
       if (props.showDetail)
         title = "";
+      const component = renderPopoverContent(event);
       return vue.createVNode("div", {
         "key": index,
         "class": [ns.em(classEName, "event-box")],
@@ -81,6 +102,8 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
           handleEventDblClick(event, "head");
         },
         "onContextmenu": (e) => eventContextmenu(event, e),
+        "onMouseenter": (_e) => eventMouseenter(_e, component, location),
+        "onMouseleave": eventMouseleave,
         "style": eventContentStyle,
         "title": title
       }, [slots[slotNme] ? (_a = slots[slotNme]) == null ? void 0 : _a.call(slots, {
@@ -98,41 +121,6 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
         "class": ["fa fa-check", ns.em(classEName, "check")]
       }, null) : ""])]);
     };
-    const renderPopover = (content, event, placement) => {
-      if (!props.showDetail) {
-        return content;
-      }
-      const _tempEvent = {
-        ...event,
-        color: "",
-        bkColor: ""
-      };
-      return vue.createVNode(vue.resolveComponent("el-popover"), {
-        "show-after": 100,
-        "offset": 4,
-        "width": "auto",
-        "popper-class": [ns.e("event-popover")],
-        "placement": placement || "right-start"
-      }, {
-        reference: () => content,
-        default: () => {
-          var _a;
-          return vue.createVNode("div", {
-            "class": [ns.em("event-popover", "body")]
-          }, [vue.createVNode("div", {
-            "class": [ns.em("event-popover", "close")],
-            "onClick": (el) => util.handlePopClose(el),
-            "innerHTML": util.closeIcon
-          }, null), vue.createVNode("div", {
-            "class": [ns.em("event-popover", "scroll")]
-          }, [(slots == null ? void 0 : slots.event) ? (_a = slots.event) == null ? void 0 : _a.call(slots, {
-            data: _tempEvent
-          }) : vue.createVNode("div", {
-            "class": [ns.em("event-popover", "content")]
-          }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
-        }
-      });
-    };
     const renderHeader = () => {
       return vue.createVNode("div", {
         "class": [ns.e("calendar-daily__head")],
@@ -152,8 +140,7 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
         const eventContentStyle = {
           background: event.bkColorFade
         };
-        const tempContent = renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "allday-info");
-        return renderPopover(tempContent, event, "bottom");
+        return renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "allday-info");
       }) : vue.createVNode(vue.resolveComponent("iBizNoData"), {
         "hideNoDataImage": true
       }, null)])])]), vue.createVNode("div", {
@@ -167,7 +154,8 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
     };
     const renderContent = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("scroll-area")]
+        "class": [ns.e("scroll-area")],
+        "onMousemove": contentMousemove
       }, [vue.createVNode("div", {
         "class": ns.e("time-pane")
       }, [vue.createVNode("div", {
@@ -201,8 +189,7 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
           background: event.bkColorFade,
           "border-left": "3px solid ".concat(event.bkColor)
         };
-        const tempContent = renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "", "time-pane");
-        return renderPopover(tempContent, event);
+        return renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "", "time-pane");
       })])])]), util.isToday(props == null ? void 0 : props.selectedDay, /* @__PURE__ */ new Date()) ? vue.createVNode("div", {
         "class": ns.em("time-pane", "current-time"),
         "style": {

package/lib/control/calendar/components/calendar-daily/calendar-daily.css

@@ -1 +1 @@
-.ibiz-calendar-daily{width:100%;height:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.ibiz-calendar-daily__calendar-daily__head{width:100%;height:58px;min-height:58px;padding-bottom:0;display:flex;position:relative;z-index:100}.ibiz-calendar-daily__allday-info{min-width:90px;height:100%;padding-left:40px;color:var(--ibiz-color-text-3);overflow:hidden;display:flex;align-items:center}.ibiz-calendar-daily__allday-info--work-items{width:100%;height:100%;padding-top:5px;overflow:hidden}.ibiz-calendar-daily__allday-info--work-items-scroll{height:100%;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__allday-info--work-items-body{height:auto}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data){height:100%}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data) .ibiz-no-data{min-height:100%;min-width:100%}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data) .ibiz-no-data .el-empty__description{margin:0}.ibiz-calendar-daily__allday-info--event-box{width:100%;height:22px;line-height:22px;padding:0 8px;margin-top:4px}.ibiz-calendar-daily__allday-info--event-box:nth-child(1){margin-top:0}.ibiz-calendar-daily__allday-info--event-content{display:block;width:100%;height:100%;border:none;outline:0;text-align:left;border-radius:4px;background:var(--ibiz-color-tertiary-light-hover);border-radius:4px;position:relative;cursor:pointer}.ibiz-calendar-daily__allday-info--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-daily__allday-info--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__allday-info--event-icon{margin-right:6px}.ibiz-calendar-daily__allday-info--event-name{margin-right:6px}.ibiz-calendar-daily__allday-info--time-range{margin-right:6px}.ibiz-calendar-daily__allday-info--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-daily__allday-resize-line{width:100%;height:3px;background-color:var(--ibiz-color-border)}.ibiz-calendar-daily__resizable-handle{width:100%;height:10px;position:absolute;bottom:-4px;display:flex;align-items:center;cursor:row-resize}.ibiz-calendar-daily__scroll-area{flex:1;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__time-pane{height:auto;width:calc(100% - 5px);display:flex;flex-basis:0%;flex-grow:1;flex-shrink:1;position:relative}.ibiz-calendar-daily__time-pane--time-labels{width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border);position:sticky;left:0}.ibiz-calendar-daily__time-pane--time-label{margin-top:38px;height:22px;text-align:left}.ibiz-calendar-daily__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-daily__time-pane--time-columns{position:relative;flex:1;padding-bottom:59px}.ibiz-calendar-daily__time-pane--time-column{height:60px;border-top:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--time-column:first-child{border-top:none}.ibiz-calendar-daily__time-pane--time-column-last{border-bottom:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-daily__time-pane--container-scroll{position:relative;top:0;overflow:auto;height:100%;width:auto;overflow-y:hidden;overflow-x:auto}.ibiz-calendar-daily__time-pane--event-box{position:absolute;width:auto;height:auto;padding-left:4px}.ibiz-calendar-daily__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;min-height:22px;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-daily__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-daily__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-daily__time-pane--current-time{width:calc(100% - 36px);margin-left:40px;position:absolute;top:38px;left:-3px;height:2px;background-color:var(--ibiz-color-primary);display:flex;align-items:center}.ibiz-calendar-daily__time-pane--current-time-label{width:48px;min-width:48px;max-width:18px;height:24px;text-align:center;line-height:24px;border:none;border-radius:4px;background:var(--ibiz-color-primary);color:var(--ibiz-color-primary-text)}.ibiz-calendar-daily__event-popover{position:relative;width:auto;height:auto;padding:0}.ibiz-calendar-daily__event-popover.el-popover.el-popper{padding:8px}.ibiz-calendar-daily__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-daily__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-daily__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-daily__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-daily__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}.ibiz-calendar-daily__event-popover--close{position:absolute;top:8px;right:8px;display:none;cursor:pointer}.ibiz-calendar-daily__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-daily__event-popover--close:hover .el-icon svg{fill:var(--ibiz-color-white)}.ibiz-calendar-daily__event-popover .el-icon{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:20px}.ibiz-calendar-daily__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}
+.ibiz-calendar-daily{width:100%;height:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.ibiz-calendar-daily__calendar-daily__head{width:100%;height:58px;min-height:58px;padding-bottom:0;display:flex;position:relative;z-index:100}.ibiz-calendar-daily__allday-info{min-width:90px;height:100%;padding-left:40px;color:var(--ibiz-color-text-3);overflow:hidden;display:flex;align-items:center}.ibiz-calendar-daily__allday-info--work-items{width:100%;height:100%;padding-top:5px;overflow:hidden}.ibiz-calendar-daily__allday-info--work-items-scroll{height:100%;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__allday-info--work-items-body{height:auto}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data){height:100%}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data) .ibiz-no-data{min-height:100%;min-width:100%}.ibiz-calendar-daily__allday-info--work-items-body:has(.ibiz-no-data) .ibiz-no-data .el-empty__description{margin:0}.ibiz-calendar-daily__allday-info--event-box{width:100%;height:22px;line-height:22px;padding:0 8px;margin-top:4px}.ibiz-calendar-daily__allday-info--event-box:nth-child(1){margin-top:0}.ibiz-calendar-daily__allday-info--event-content{display:block;width:100%;height:100%;border:none;outline:0;text-align:left;border-radius:4px;background:var(--ibiz-color-tertiary-light-hover);position:relative;cursor:pointer}.ibiz-calendar-daily__allday-info--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-daily__allday-info--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__allday-info--event-icon{margin-right:6px}.ibiz-calendar-daily__allday-info--event-name{margin-right:6px}.ibiz-calendar-daily__allday-info--time-range{margin-right:6px}.ibiz-calendar-daily__allday-info--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-daily__allday-resize-line{width:100%;height:3px;background-color:var(--ibiz-color-border)}.ibiz-calendar-daily__resizable-handle{width:100%;height:10px;position:absolute;bottom:-4px;display:flex;align-items:center;cursor:row-resize}.ibiz-calendar-daily__scroll-area{flex:1;overflow-y:scroll;overflow-x:hidden}.ibiz-calendar-daily__time-pane{height:auto;width:calc(100% - 5px);display:flex;flex-basis:0%;flex-grow:1;flex-shrink:1;position:relative}.ibiz-calendar-daily__time-pane--time-labels{width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border);position:sticky;left:0}.ibiz-calendar-daily__time-pane--time-label{margin-top:38px;height:22px;text-align:left}.ibiz-calendar-daily__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-daily__time-pane--time-columns{position:relative;flex:1;padding-bottom:59px}.ibiz-calendar-daily__time-pane--time-column{height:60px;border-top:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--time-column:first-child{border-top:none}.ibiz-calendar-daily__time-pane--time-column-last{border-bottom:1px dashed var(--ibiz-color-border)}.ibiz-calendar-daily__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-daily__time-pane--container-scroll{position:relative;top:0;overflow:auto;height:100%;width:auto;overflow-y:hidden;overflow-x:auto}.ibiz-calendar-daily__time-pane--event-box{position:absolute;width:auto;height:auto;padding-left:4px}.ibiz-calendar-daily__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;min-height:22px;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-daily__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-daily__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-daily__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-daily__time-pane--current-time{width:calc(100% - 36px);margin-left:40px;position:absolute;top:38px;left:-3px;height:2px;background-color:var(--ibiz-color-primary);display:flex;align-items:center}.ibiz-calendar-daily__time-pane--current-time-label{width:48px;min-width:48px;max-width:18px;height:24px;text-align:center;line-height:24px;border:none;border-radius:4px;background:var(--ibiz-color-primary);color:var(--ibiz-color-primary-text)}.ibiz-calendar-daily__event-popover{width:auto;height:auto;padding:0}.ibiz-calendar-daily__event-popover.ibiz-popover{position:absolute;z-index:110;padding:var(--ibiz-spacing-tight);background:var(--ibiz-color-bg-1);border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-calendar-daily__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-daily__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-daily__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-daily__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-daily__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}

package/lib/control/calendar/components/calendar-daily/use-calendar-daily.cjs

@@ -5,7 +5,7 @@ require('../util/index.cjs');
 var util = require('../util/util.cjs');
 
 "use strict";
-const useCalendarDaily = (props, emit) => {
+const useCalendarDaily = (props, emit, _ns) => {
   const drawData = vue.ref([]);
   const curTimeTimer = vue.ref();
   const curTimeTop = vue.ref(0);
@@ -231,6 +231,36 @@ const useCalendarDaily = (props, emit) => {
   const eventContextmenu = async (item, evt) => {
     emit("eventContextmenu", { evt, data: [item] });
   };
+  const followElement = util.createFollowElement();
+  let overlay = null;
+  let eventLocation = "";
+  const contentMousemove = (_event) => {
+    if (eventLocation === "content" && overlay && followElement)
+      util.followMouseMove(_event, followElement);
+  };
+  const eventMouseenter = (_event, _component, _location) => {
+    if (!props.showDetail || overlay) {
+      return;
+    }
+    const isContent = _location === "content";
+    eventLocation = _location;
+    overlay = util.openPopover(
+      _component,
+      isContent ? followElement : _event.target,
+      {
+        placement: isContent ? "right-start" : "bottom",
+        modalClass: _ns.e("event-popover")
+      }
+    );
+  };
+  const eventMouseleave = (_e) => {
+    overlay == null ? void 0 : overlay.dismiss();
+    overlay = null;
+    eventLocation = "";
+  };
+  vue.onBeforeUnmount(() => {
+    util.removeFollowElement(followElement);
+  });
   return {
     drawData,
     curTimeTimer,
@@ -246,7 +276,10 @@ const useCalendarDaily = (props, emit) => {
     handleEventClick,
     handleEventDblClick,
     eventContextmenu,
-    initDrawData
+    initDrawData,
+    contentMousemove,
+    eventMouseenter,
+    eventMouseleave
   };
 };
 

package/lib/control/calendar/components/calendar-user/calendar-user.cjs

@@ -55,6 +55,7 @@ const CalendarUser = /* @__PURE__ */ vue.defineComponent({
         return [(_a = slots.event) == null ? void 0 : _a.call(slots, {
           data: items[0]
         }), vue.createVNode(vue.resolveComponent("el-popover"), {
+          "popper-class": ns.e("custom-user-popover"),
           "trigger": "click",
           "ref": (el) => {
             if (el && items[0].id === popoverValue.value) {

package/lib/control/calendar/components/calendar-user/calendar-user.css

@@ -1 +1 @@
-.ibiz-calendar-user{--ibiz-calendar-user-cell-min-height:60px;display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base);overflow:hidden}.ibiz-calendar-user__cell{min-height:var(--ibiz-calendar-user-cell-min-height);border-bottom:1px solid var(--ibiz-color-tertiary);border-left:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user .ibiz-calendar-user-more{flex-shrink:0;padding-left:var(--ibiz-spacing-tight);overflow:hidden;font-size:var(--ibiz-font-size-small);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-calendar-user .ibiz-calendar-user-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-calendar-user .ibiz-calendar-user-header{flex-shrink:0}.ibiz-calendar-user-header__top{border-top:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user-header__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-header__week-day{display:flex;flex:1;align-items:center;justify-content:center;width:100%}.ibiz-calendar-user-header__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-header__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user .ibiz-calendar-user-content{position:relative;flex:1;width:100%;height:100%;overflow:hidden}.ibiz-calendar-user-content__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-content__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user-content__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-content__wrapping{width:100%;height:100%;overflow:auto}.ibiz-calendar-user-content__wrapping::-webkit-scrollbar{display:none}.ibiz-calendar-user-scroll-bar{position:absolute;top:var(--ibiz-calendar-user-scroll-bar-thumb-top);right:0;z-index:10;width:4px;height:100%;border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-calendar-user-scroll-bar__thumb{width:4px;height:var(--ibiz-calendar-user-scroll-bar-thumb-height);cursor:pointer;background-color:#d3d3d3;border-radius:var(--ibiz-border-radius-extra-small)}
+.ibiz-calendar-user{--ibiz-calendar-user-cell-min-height:60px;display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base);overflow:hidden}.ibiz-calendar-user__cell{min-height:var(--ibiz-calendar-user-cell-min-height);padding:0 var(--ibiz-spacing-base);border-bottom:1px solid var(--ibiz-color-tertiary);border-left:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user__cell .ibiz-control-calendar-item{height:auto}.ibiz-calendar-user__cell .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user__custom-user-popover .ibiz-control-calendar-item{height:auto}.ibiz-calendar-user__custom-user-popover .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-calendar-user .ibiz-calendar-user-more{flex-shrink:0;padding-left:var(--ibiz-spacing-tight);overflow:hidden;font-size:var(--ibiz-font-size-small);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:var(--ibiz-spacing-extra-tight)}.ibiz-calendar-user .ibiz-calendar-user-more:hover{background-color:var(--ibiz-control-calendar-hover-bg-color)}.ibiz-calendar-user .ibiz-calendar-user-header{flex-shrink:0}.ibiz-calendar-user-header__top{border-top:1px solid var(--ibiz-color-tertiary)}.ibiz-calendar-user-header__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-header__week-day{display:flex;flex:1;align-items:center;justify-content:center;width:100%}.ibiz-calendar-user-header__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-header__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user .ibiz-calendar-user-content{position:relative;flex:1;width:100%;height:100%;overflow:hidden}.ibiz-calendar-user-content__time-item{display:flex;justify-content:space-between;width:100%}.ibiz-calendar-user-content__time-text{display:flex;flex:1;align-items:center;justify-content:center}.ibiz-calendar-user-content__week-item{display:flex;flex:1;flex-direction:column;flex-shrink:0;justify-content:center;overflow:hidden}.ibiz-calendar-user-content__wrapping{width:100%;height:100%;overflow:auto}.ibiz-calendar-user-content__wrapping::-webkit-scrollbar{display:none}.ibiz-calendar-user-scroll-bar{position:absolute;top:var(--ibiz-calendar-user-scroll-bar-thumb-top);right:0;z-index:10;width:4px;height:100%;border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-calendar-user-scroll-bar__thumb{width:4px;height:var(--ibiz-calendar-user-scroll-bar-thumb-height);cursor:pointer;background-color:#d3d3d3;border-radius:var(--ibiz-border-radius-extra-small)}