@ibiz-template/vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.131

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

@@ -7,8 +7,8 @@ require('../interface/index.cjs');
 require('../util/index.cjs');
 var useCalendarDaily = require('./use-calendar-daily.cjs');
 require('./calendar-daily.css');
-var calendarDaily = require('../interface/calendar-daily.cjs');
 var util = require('../util/util.cjs');
+var calendarDaily = require('../interface/calendar-daily.cjs');
 
 "use strict";
 const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
@@ -29,12 +29,17 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
       curTimeTimer,
       calendarDaily,
       selectedData,
-      eventClick,
+      handleEventClick,
+      handleEventDblClick,
       handleDrag,
       handleDragStart,
       handleCurTime,
-      initDrawData
-    } = useCalendarDaily.useCalendarDaily(props, emit);
+      initDrawData,
+      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;
@@ -58,21 +63,64 @@ 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 || "");
+      if (location === "header" && event.timeRange)
+        title = "".concat(title, "     ").concat(event.timeRange || "");
+      title = core.showTitle(title) || "";
+      if (props.showDetail)
+        title = "";
+      const component = renderPopoverContent(event);
       return vue.createVNode("div", {
         "key": index,
-        "class": [ns.em(classEName, "event-box")],
-        "style": eventBoxStyle
+        "style": {
+          ...eventBoxStyle,
+          ...props.semanticStyle("item", {
+            item: event,
+            location,
+            index
+          })
+        },
+        "class": [ns.e("item"), ns.em(classEName, "event-box"), props.semanticClass("item", {
+          item: event,
+          location,
+          index
+        })]
       }, [vue.createVNode("button", {
         "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
-        "onClick": () => eventClick(event, "head"),
-        "style": eventContentStyle
+        "onClick": () => {
+          handleEventClick(event, "head");
+        },
+        "onDblclick": () => {
+          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, {
         data: event
       }) : vue.createVNode("div", {
-        "class": [ns.em(classEName, "event-summary"), event.classname],
-        "title": core.showTitle("".concat(event.text || "", " ").concat(event.timeRange || ""))
+        "class": [ns.em(classEName, "event-summary"), event.classname]
       }, [event.icon && vue.createVNode("span", {
         "class": [event.icon, ns.em(classEName, "event-icon")],
         "style": {
@@ -86,7 +134,7 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
     };
     const renderHeader = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("calendar-daily__head")],
+        "class": ns.e("calendar-daily__head"),
         "ref": (el) => {
           resizableHand.value = el;
         }
@@ -98,14 +146,15 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
         "class": ns.em("allday-info", "work-items-scroll")
       }, [vue.createVNode("div", {
         "class": ns.em("allday-info", "work-items-body")
-      }, [events.value.map((event, index) => {
+      }, [events.value.length > 0 ? events.value.map((event, index) => {
         const eventBoxStyle = {};
         const eventContentStyle = {
-          color: event.color,
           background: event.bkColorFade
         };
         return renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "allday-info");
-      })])])]), vue.createVNode("div", {
+      }) : vue.createVNode(vue.resolveComponent("iBizNoData"), {
+        "hideNoDataImage": true
+      }, null)])])]), vue.createVNode("div", {
         "class": ns.e("resizable-handle"),
         "draggable": "true",
         "onDrag": (event) => handleDrag(event),
@@ -116,7 +165,8 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
     };
     const renderContent = () => {
       return vue.createVNode("div", {
-        "class": [ns.e("scroll-area")]
+        "onMousemove": contentMousemove,
+        "class": ns.e("scroll-area")
       }, [vue.createVNode("div", {
         "class": ns.e("time-pane")
       }, [vue.createVNode("div", {
@@ -148,11 +198,9 @@ const CalendarDaily = /* @__PURE__ */ vue.defineComponent({
         }
         const eventContentStyle = {
           background: event.bkColorFade,
-          "border-left": "3px solid ".concat(event.bkColor),
-          color: event.color
+          "border-left": "3px solid ".concat(event.bkColor)
         };
-        const tempContent = renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "event", "time-pane");
-        return tempContent;
+        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:#999;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--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:#f5f5f5;border-radius:4px;position:relative;cursor:pointer}.ibiz-calendar-daily__allday-info--event-content:active{animation:move 1s linear}.ibiz-calendar-daily__allday-info--morphing-animation{height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:pink;animation:move 1s linear}.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{width:100%;height:100%;padding:12px 8px;line-height:100%;border:none;outline:0;text-align:left;overflow:hidden;position:relative;z-index:3;cursor:pointer}.ibiz-calendar-daily__time-pane--event-content:active{animation:pulse 1s linear}.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%;line-height:30px;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:#fff}.ibiz-calendar-daily__event-popover{padding:0;width:auto;height:auto;position:relative}.ibiz-calendar-daily__event-popover.el-popover.el-popper{padding:24px 12px 8px 12px}.ibiz-calendar-daily__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-daily__event-popover--scroll{width:auto;height:auto;min-width:200px;min-height:100px;overflow:auto}.ibiz-calendar-daily__event-popover--close{position:absolute;right:8px;top:8px;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:#fff}.ibiz-calendar-daily__event-popover .el-icon{font-size:20px;min-height:24px;min-width:24px;display:flex;justify-content:center;align-items:center}.ibiz-calendar-daily__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes move{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
+.ibiz-calendar-daily{--ibiz-control-calendar-day-header-height:58px;--ibiz-control-calendar-day-header-text-color:var(--ibiz-color-text-3);--ibiz-control-calendar-day-header-item-line-height:22px;--ibiz-control-calendar-day-header-item-border-radius:4px;--ibiz-control-calendar-day-header-item-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-calendar-day-header-item-active-border-color:var(--ibiz-color-primary);--ibiz-control-calendar-day-header-item-bg-color:var(--ibiz-color-tertiary-light-hover);--ibiz-control-calendar-day-header-item-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-calendar-day-body-item-min-height:22px;--ibiz-control-calendar-day-body-item-padding:var(--ibiz-spacing-tight);--ibiz-control-calendar-day-body-item-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-calendar-day-body-item-active-border-color:var(--ibiz-color-primary);--ibiz-control-calendar-day-current-width:48px;--ibiz-control-calendar-day-current-height:24px;--ibiz-control-calendar-day-current-border-radius:4px;--ibiz-control-calendar-day-current-bg-color:var(--ibiz-color-primary);--ibiz-control-calendar-day-current-text-color:var(--ibiz-color-primary-text);display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-daily__calendar-daily__head{position:relative;z-index:100;display:flex;width:100%;height:var(--ibiz-control-calendar-day-header-height);min-height:var(--ibiz-control-calendar-day-header-height);padding-bottom:0}.ibiz-calendar-daily__allday-info{display:flex;align-items:center;min-width:90px;height:100%;padding-left:40px;overflow:hidden;color:var(--ibiz-control-calendar-day-header-text-color)}.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:hidden scroll}.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-width:100%;min-height: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:var(--ibiz-control-calendar-day-header-item-height);padding:var(--ibiz-control-calendar-day-header-item-padding);margin-top:var(--ibiz-control-calendar-day-header-item-gap);line-height:var(--ibiz-control-calendar-day-header-item-line-height)}.ibiz-calendar-daily__allday-info--event-box:nth-child(1){margin-top:0}.ibiz-calendar-daily__allday-info--event-content{position:relative;display:block;width:100%;height:100%;text-align:left;cursor:pointer;background-color:var(--ibiz-control-calendar-day-header-item-bg-color);border:none;border-radius:var(--ibiz-control-calendar-day-header-item-border-radius);outline:0}.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{position:absolute;top:50%;right:6px;color:var(--ibiz-control-calendar-day-active-color);transform:translate(0,-50%)}.ibiz-calendar-daily__allday-resize-line{width:100%;height:3px;background-color:var(--ibiz-control-calendar-day-border-color)}.ibiz-calendar-daily__resizable-handle{position:absolute;bottom:-4px;display:flex;align-items:center;width:100%;height:10px;cursor:row-resize}.ibiz-calendar-daily__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-daily__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 5px);height:auto}.ibiz-calendar-daily__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-control-calendar-day-border-color)}.ibiz-calendar-daily__time-pane--time-label{height:22px;margin-top:38px;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-control-calendar-day-border-color)}.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-control-calendar-day-border-color)}.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;width:auto;height:100%;overflow:auto;overflow:auto hidden}.ibiz-calendar-daily__time-pane--event-box{position:absolute;width:auto;height:auto;padding-left:var(--ibiz-control-calendar-day-body-item-gap)}.ibiz-calendar-daily__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;min-height:var(--ibiz-control-calendar-day-body-item-min-height);padding:var(--ibiz-control-calendar-day-body-item-padding);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-control-calendar-day-body-item-active-border-color)}.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{position:absolute;top:38px;left:-3px;display:flex;align-items:center;width:calc(100% - 36px);height:2px;margin-left:40px;background-color:var(--ibiz-control-calendar-day-current-bg-color)}.ibiz-calendar-daily__time-pane--current-time-label{width:var(--ibiz-control-calendar-day-current-width);height:var(--ibiz-control-calendar-day-current-height);line-height:var(--ibiz-control-calendar-day-current-height);color:var(--ibiz-control-calendar-day-current-text-color);text-align:center;background-color:var(--ibiz-control-calendar-day-current-bg-color);border:none;border-radius:var(--ibiz-control-calendar-day-current-border-radius)}.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);
@@ -26,7 +26,8 @@ const useCalendarDaily = (props, emit) => {
   };
   const handleDrag = (event) => {
     const heightChange = event.clientY - initialMouseY + initialHeight;
-    resizableHand.value.style.height = "".concat(heightChange, "px");
+    if (heightChange < 320)
+      resizableHand.value.style.height = "".concat(heightChange, "px");
   };
   const events = vue.computed(() => {
     return computeUIEvents(
@@ -36,14 +37,17 @@ const useCalendarDaily = (props, emit) => {
       calendarDaily.value
     );
   });
-  const computeUIEvents = (events2, curDate, legends2, calendarDaily2) => {
+  const computeUIEvents = (_events, curDate, _legends, _calendarDaily) => {
     const tempEvents = [];
     const tempColors = /* @__PURE__ */ new Map();
     let contentWidth = 0;
-    if (calendarDaily2) {
-      contentWidth = parseInt(window.getComputedStyle(calendarDaily2).width, 10);
+    if (_calendarDaily) {
+      contentWidth = parseInt(
+        window.getComputedStyle(_calendarDaily).width,
+        10
+      );
     }
-    events2.sort((a, b) => {
+    _events.sort((a, b) => {
       const beginTimeDifference = new Date(a.beginTime).getTime() - new Date(b.beginTime).getTime();
       let type;
       if (beginTimeDifference === 0) {
@@ -53,18 +57,33 @@ const useCalendarDaily = (props, emit) => {
       }
       return type;
     });
-    const tempArray = events2.filter((event) => {
-      return event && event.beginTime && event.endTime && util.isToday(curDate, event.beginTime) && util.isToday(curDate, event.endTime);
+    const tempArray = [];
+    _events.forEach((event) => {
+      const targetLegend = _legends.find(
+        (legendItem) => Object.is(legendItem.id, event.itemType)
+      );
+      if (!targetLegend || !targetLegend.isShow)
+        return;
+      if (event && event.beginTime && util.checkDateRangeIncludes(event.beginTime, event.endTime, curDate)) {
+        const item = { ...event, targetLegend };
+        const targetEvent = selectedData.value.find(
+          (tempItem) => tempItem.id === event.id
+        );
+        if (targetEvent) {
+          Object.assign(item, { isSelectedEvent: true });
+        } else {
+          Object.assign(item, { isSelectedEvent: false });
+        }
+        if (!event.endTime && event.beginTime) {
+          Object.assign(item, { endTime: event.beginTime });
+        }
+        tempArray.push(item);
+      }
     });
     tempArray.forEach((event, index) => {
+      const { targetLegend } = event;
       const tempItem = {};
       Object.assign(tempItem, event);
-      const targetLegend = legends2.find(
-        (legendItem) => Object.is(legendItem.id, event.itemType)
-      );
-      const targetEvent = selectedData.value.find(
-        (item) => item.id === event.id
-      );
       Object.assign(tempItem, { zIndex: index + 1 });
       const length = tempArray.length;
       const itemWidth = (contentWidth - 90) / length;
@@ -76,25 +95,40 @@ const useCalendarDaily = (props, emit) => {
         styleLeft = "".concat(index * 100, "px");
       }
       Object.assign(tempItem, { width, styleLeft });
-      if (event.beginTime && event.endTime) {
-        const height = handleEventHeight(
-          event.beginTime,
-          event.endTime,
-          curDate
-        );
-        const timeRange = util.handleTimeRange(
-          event.beginTime,
-          event.endTime,
-          "HH:mm"
-        );
-        Object.assign(tempItem, { height, timeRange });
-      }
-      if (event.beginTime) {
-        const { styleTop } = handleTopOrCurVal(new Date(event.beginTime));
-        Object.assign(tempItem, { styleTop });
+      let height = "auto";
+      let styleTop = 60;
+      const timeRange = util.handleTimeRange(
+        event.beginTime,
+        event.endTime,
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      if (util.isToday(event.beginTime, event.endTime)) {
+        height = getEventHeight(event.beginTime, event.endTime);
+        const tempVal = handleTopOrCurVal(new Date(event.beginTime));
+        styleTop = tempVal.styleTop;
+      } else if (util.isToday(event.beginTime, curDate) && !util.isToday(event.endTime, curDate)) {
+        const endDate = new Date(curDate);
+        endDate.setHours(23, 59, 59, 0);
+        height = getEventHeight(event.beginTime, endDate);
+        const tempVal = handleTopOrCurVal(new Date(event.beginTime));
+        styleTop = tempVal.styleTop;
+      } else if (util.isToday(event.endTime, curDate) && !util.isToday(event.beginTime, curDate)) {
+        const beginDate = new Date(curDate);
+        beginDate.setHours(0, 0, 0, 0);
+        height = getEventHeight(beginDate, event.endTime);
+        const tempVal = handleTopOrCurVal(new Date(beginDate));
+        styleTop = tempVal.styleTop;
+      } else {
+        const date = new Date(curDate);
+        const beginDate = new Date(date.setHours(0, 0, 0, 0));
+        const endDate = new Date(date.setHours(23, 59, 59, 59));
+        height = getEventHeight(beginDate, endDate);
+        const tempVal = handleTopOrCurVal(new Date(beginDate));
+        styleTop = tempVal.styleTop;
       }
+      Object.assign(tempItem, { height, styleTop, timeRange });
       if (!(event == null ? void 0 : event.bkColor)) {
-        const bkColor = targetLegend ? targetLegend.bkcolor : util.handleBkColor(tempColors, event.itemType);
+        const bkColor = targetLegend && targetLegend.bkcolor || util.handleBkColor(tempColors, event.itemType);
         Object.assign(tempItem, { bkColor });
       }
       if (tempItem.bkColor) {
@@ -103,27 +137,26 @@ const useCalendarDaily = (props, emit) => {
           bkColorFade: tempBkColor
         });
       }
+      if (!(event == null ? void 0 : event.color)) {
+        const tempColor = targetLegend && targetLegend.color;
+        Object.assign(tempItem, {
+          color: tempColor
+        });
+      }
       if ((tempItem == null ? void 0 : tempItem.height) && (tempItem == null ? void 0 : tempItem.height) > 10) {
         const border = "1px solid #FFF";
         Object.assign(tempItem, { border });
       } else {
         Object.assign(tempItem, { border: "none" });
       }
-      if (targetEvent) {
-        Object.assign(tempItem, { isSelectedEvent: true });
-      } else {
-        Object.assign(tempItem, { isSelectedEvent: false });
-      }
-      if (targetLegend && targetLegend.isShow || !targetLegend) {
-        tempEvents.push(tempItem);
-      }
+      tempEvents.push(tempItem);
     });
     tempColors.clear();
     return tempEvents;
   };
-  const handleEventHeight = (startTime, endTime, date) => {
+  const getEventHeight = (startTime, endTime) => {
     let height = 1;
-    if (util.isToday(startTime, date) && util.isToday(endTime, date)) {
+    if (util.isToday(startTime, endTime)) {
       const difference = new Date(endTime).getTime() - new Date(startTime).getTime();
       height = Math.floor(difference / (1e3 * 60));
     }
@@ -163,8 +196,25 @@ const useCalendarDaily = (props, emit) => {
     }
     return tempDrawData;
   };
-  const eventClick = async (item, location) => {
-    const res = await util.handleEVentClick(
+  const handleEventClick = (item, location) => {
+    const res = util.handleEmit(
+      "eventClick",
+      item,
+      location,
+      props.events,
+      multiple.value,
+      selectedData.value,
+      emit
+    );
+    const { tempSelectedData, isSelectedEvent } = res;
+    if (!isSelectedEvent) {
+      Object.assign(item, { isSelectedEvent });
+    }
+    selectedData.value = tempSelectedData;
+  };
+  const handleEventDblClick = (item, location) => {
+    const res = util.handleEmit(
+      "eventDblClick",
       item,
       location,
       props.events,
@@ -178,6 +228,39 @@ const useCalendarDaily = (props, emit) => {
     }
     selectedData.value = tempSelectedData;
   };
+  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,
@@ -190,8 +273,13 @@ const useCalendarDaily = (props, emit) => {
     handleCurTime,
     handleDrag,
     handleDragStart,
-    eventClick,
-    initDrawData
+    handleEventClick,
+    handleEventDblClick,
+    eventContextmenu,
+    initDrawData,
+    contentMousemove,
+    eventMouseenter,
+    eventMouseleave
   };
 };
 

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

@@ -22,14 +22,6 @@ const CalendarUser = /* @__PURE__ */ vue.defineComponent({
     timeList.value = useCalendarUser.getDayTime();
     const popoverValue = vue.ref("");
     const curPopover = vue.ref();
-    const scrollContainerRef = vue.ref();
-    const scrollTop = vue.ref(0);
-    const thumbHeight = vue.ref(0);
-    const enableScroll = vue.ref(false);
-    const orginY = vue.ref(0);
-    const realHeight = vue.ref(1);
-    const visibleHeight = vue.ref(1);
-    const isScroll = vue.ref(false);
     vue.watch(() => props.selectedDay, () => {
       if (props.selectedDay) {
         weekday.value = useCalendarUser.calcCurWeek(new Date(props.selectedDay));
@@ -45,12 +37,11 @@ const CalendarUser = /* @__PURE__ */ vue.defineComponent({
     };
     const renderCalendarList = (items) => {
       var _a;
-      if (items.length === 0) {
+      if (items.length === 0)
         return vue.createVNode("div", {
           "class": ns.e("black"),
           "onClick": onBlackClick
         }, null);
-      }
       if (items.length > 1) {
         return [(_a = slots.event) == null ? void 0 : _a.call(slots, {
           data: items[0]
@@ -61,13 +52,16 @@ const CalendarUser = /* @__PURE__ */ vue.defineComponent({
               curPopover.value = el;
             }
           },
+          "popper-class": [ns.em("more", "popper"), ns.e("custom-user-popover"), props.semanticClass("popup")],
+          "popper-style": props.semanticStyle("popup"),
           "onShow": () => {
             popoverValue.value = items[0].id;
           }
         }, {
           reference: () => {
             return vue.createVNode("span", {
-              "class": ns.b("more")
+              "style": props.semanticStyle("more"),
+              "class": [ns.e("more"), props.semanticClass("more")]
             }, ["+".concat(items.length - 1, " ").concat(ibiz.i18n.t("app.more"), "...")]);
           },
           default: () => {
@@ -93,106 +87,40 @@ const CalendarUser = /* @__PURE__ */ vue.defineComponent({
     };
     const renderWeekHeader = () => {
       return vue.createVNode("div", {
-        "class": ns.b("header")
+        "class": ns.e("header")
       }, [vue.createVNode("div", {
-        "class": ns.be("header", "time-item")
+        "class": [ns.e("row"), ns.em("header", "row")]
       }, [vue.createVNode("div", {
-        "class": [ns.e("cell"), ns.be("header", "time-text"), ns.be("header", "top")]
+        "class": [ns.e("cell"), ns.em("cell", "top"), ns.em("header", "cell")]
       }, null), weekday.value.map((item) => {
         return vue.createVNode("div", {
-          "class": [ns.be("header", "week-day"), ns.e("cell"), ns.be("header", "top")]
+          "class": [ns.e("cell"), ns.em("cell", "top"), ns.em("header", "cell")]
         }, [item.text, item.date]);
       })]), vue.createVNode("div", {
-        "class": ns.be("header", "time-item")
+        "class": [ns.e("row"), ns.em("header", "row")]
       }, [vue.createVNode("div", {
-        "class": [ns.e("cell"), ns.be("header", "time-text")]
-      }, [vue.createTextVNode("\u5168\u5929")]), weekday.value.map((item) => {
+        "class": [ns.e("cell"), ns.em("header", "cell")]
+      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), weekday.value.map((item) => {
         return vue.createVNode("div", {
-          "class": [ns.be("header", "week-item"), ns.e("cell")]
+          "class": [ns.e("cell"), ns.em("header", "cell")]
         }, [renderEvent(item)]);
       })])]);
     };
-    const onMouseMove = (event) => {
-      if (enableScroll.value) {
-        const y = event.clientY - orginY.value;
-        scrollTop.value += y;
-        orginY.value = event.clientY;
-        if (scrollContainerRef.value) {
-          scrollContainerRef.value.scrollTop = realHeight.value * (scrollTop.value / visibleHeight.value);
-        }
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    const onMouseUp = (event) => {
-      enableScroll.value = false;
-      event.preventDefault();
-      event.stopPropagation();
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
-    const onMouseDown = (event) => {
-      orginY.value = event.clientY;
-      enableScroll.value = true;
-      event.preventDefault();
-      event.stopPropagation();
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
-    };
-    const renderScrollbar = () => {
-      return vue.createVNode("div", {
-        "class": ns.b("scroll-bar")
-      }, [vue.createVNode("div", {
-        "class": ns.be("scroll-bar", "thumb"),
-        "onMousedown": onMouseDown
-      }, null)]);
-    };
-    const onScroll = (event) => {
-      var _a, _b, _c;
-      const realTop = ((_a = event.target) == null ? void 0 : _a.scrollTop) || 0;
-      realHeight.value = (_b = event.target) == null ? void 0 : _b.scrollHeight;
-      visibleHeight.value = (_c = event.target) == null ? void 0 : _c.clientHeight;
-      const realRatio = realTop / realHeight.value;
-      scrollTop.value = realRatio * visibleHeight.value;
-    };
     const renderWeekContent = () => {
       return vue.createVNode("div", {
-        "class": ns.b("content"),
-        "style": {
-          ["--".concat(ns.namespace, "-calendar-user-scroll-bar-thumb-height")]: "".concat(thumbHeight.value, "px"),
-          ["--".concat(ns.namespace, "-calendar-user-scroll-bar-thumb-top")]: "".concat(scrollTop.value, "px")
-        }
-      }, [vue.createVNode("div", {
-        "class": ns.be("content", "wrapping"),
-        "ref": (el) => {
-          scrollContainerRef.value = el;
-        },
-        "onScroll": onScroll
+        "class": ns.e("body")
       }, [timeList.value.map((item) => {
         return vue.createVNode("div", {
-          "class": ns.be("content", "time-item")
+          "class": [ns.e("row"), ns.em("body", "row")]
         }, [vue.createVNode("div", {
-          "class": [ns.be("content", "time-text"), ns.e("cell")]
+          "class": [ns.e("cell"), ns.em("body", "cell")]
         }, [item.text]), weekday.value.map((day) => {
           return vue.createVNode("div", {
-            "class": [ns.be("content", "week-item"), ns.e("cell")]
+            "class": [ns.e("cell"), ns.em("body", "cell")]
           }, [renderEvent(day, item)]);
         })]);
-      })]), isScroll.value && renderScrollbar()]);
+      })]);
     };
-    vue.watch(() => scrollContainerRef.value, () => {
-      if (scrollContainerRef.value) {
-        realHeight.value = scrollContainerRef.value.scrollHeight;
-        visibleHeight.value = scrollContainerRef.value.clientHeight;
-        if (realHeight.value > visibleHeight.value) {
-          isScroll.value = true;
-        }
-        thumbHeight.value = visibleHeight.value * (visibleHeight.value / realHeight.value);
-      }
-    }, {
-      immediate: true,
-      deep: true
-    });
     return {
       ns,
       renderWeekHeader,

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-control-calendar-user-cell-min-height:60px;--ibiz-control-calendar-user-cell-min-width:114px;--ibiz-control-calendar-user-cell-head-min-width:75px;--ibiz-control-calendar-user-cell-border-color:var(--ibiz-color-tertiary);--ibiz-control-calendar-user-cell-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);--ibiz-control-calendar-user-more-font-size:var(--ibiz-font-size-small);--ibiz-control-calendar-user-more-padding:0 0 0 var(--ibiz-spacing-tight);--ibiz-control-calendar-user-more-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-calendar-user-more-border-radius:var(--ibiz-spacing-extra-tight);display:flex;flex-direction:column;width:calc(100% - var(--ibiz-spacing-base) * 2);height:calc(100% - var(--ibiz-spacing-base) * 2);margin:var(--ibiz-spacing-base);overflow:auto hidden}.ibiz-calendar-user__row{display:flex}.ibiz-calendar-user__cell{display:flex;flex:1;align-items:center;justify-content:center;min-height:var(--ibiz-control-calendar-user-cell-min-height);padding:var(--ibiz-control-calendar-user-cell-padding);border-bottom:1px solid var(--ibiz-control-calendar-user-cell-border-color);border-left:1px solid var(--ibiz-control-calendar-user-cell-border-color)}.ibiz-calendar-user__cell:first-child{min-width:var(--ibiz-control-calendar-user-cell-head-min-width)}.ibiz-calendar-user__cell:not(:first-child){min-width:var(--ibiz-control-calendar-user-cell-min-width)}.ibiz-calendar-user__cell:last-child{border-right:1px solid var(--ibiz-control-calendar-user-cell-border-color)}.ibiz-calendar-user__cell--top{border-top:1px solid var(--ibiz-control-calendar-user-cell-border-color)}.ibiz-calendar-user__black{width:100%;height:100%}.ibiz-calendar-user__custom-user-popover{max-height:300px;overflow:auto}.ibiz-calendar-user .ibiz-control-calendar-item{height:auto}.ibiz-calendar-user .ibiz-control-calendar-item.is-active{color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-calendar-user__more{flex-shrink:0;padding:var(--ibiz-control-calendar-user-more-padding);overflow:hidden;font-size:var(--ibiz-control-calendar-user-more-font-size);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:var(--ibiz-control-calendar-user-more-border-radius)}.ibiz-calendar-user__more:hover{background-color:var(--ibiz-control-calendar-user-more-hover-bg-color)}.ibiz-calendar-user__header{flex-shrink:0;width:100%;min-width:-moz-fit-content;min-width:fit-content;overflow:hidden scroll}.ibiz-calendar-user__body{flex:1;width:100%;min-width:-moz-fit-content;min-width:fit-content;overflow:hidden scroll}