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

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

@@ -30,15 +30,24 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
       selectedData,
       legends,
       rowsHeader,
-      eventClick,
+      headerEventRef,
+      thumbHeight,
+      scrollTop,
+      realHeight,
+      isScroll,
+      handleEventClick,
+      handleEventDblClick,
       handleDrag,
       handleDragStart,
+      handleDragEnd,
       handleCurTime,
       initDrawData,
-      handleUIEvents
+      handleUIEvents,
+      onScrollbarMouseDown,
+      onHeaderEventScroll,
+      initHeaderEventScroll,
+      eventContextmenu
     } = useCalendarWeek.useCalendarWeek(props, emit);
-    const hoverItem = vue.ref("");
-    const visible = vue.ref(false);
     vue.watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
         const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
@@ -59,6 +68,7 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
     });
     vue.watch(() => props.events, () => {
       handleUIEvents();
+      initHeaderEventScroll();
     }, {
       immediate: true,
       deep: true
@@ -75,60 +85,67 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
         curTimeTimer.value = null;
       }
     });
-    const onMouseenter = (event) => {
-      hoverItem.value = String(event.id);
-      visible.value = true;
-    };
-    const onClickCalendarItem = () => {
-      visible.value = false;
-    };
-    const onMouseleavee = () => {
-      hoverItem.value = "";
-      visible.value = false;
+    const renderScrollbar = () => {
+      return vue.createVNode("div", {
+        "class": ns.b("scroll-bar")
+      }, [vue.createVNode("div", {
+        "class": ns.be("scroll-bar", "thumb"),
+        "onMousedown": onScrollbarMouseDown
+      }, null)]);
     };
     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 = "";
       return vue.createVNode("div", {
         "key": index,
         "class": [ns.em(classEName, "event-box")],
-        "style": eventBoxStyle,
-        "onMouseenter": () => onMouseenter(event),
-        "onMouseleave": onMouseleavee,
-        "onClick": onClickCalendarItem
+        "style": eventBoxStyle
       }, [vue.createVNode("button", {
-        "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
+        "class": [ns.em(classEName, "event-content"), ns.is("selected-event", !!event.isSelectedEvent), event.classname],
         "onClick": () => {
-          eventClick(event, "head");
+          handleEventClick(event, "head");
+        },
+        "onDblclick": () => {
+          handleEventDblClick(event, "head");
         },
-        "style": eventContentStyle
+        "onContextmenu": (e) => eventContextmenu(event, e),
+        "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(location === "header" ? "".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": {
           color: event.bkColor
         }
       }, null), event.text && vue.createVNode("span", {
-        "class": [ns.em(classEName, "event-name")],
-        "title": event.text
+        "class": [ns.em(classEName, "event-name")]
       }, [event.text])]), location === "header" && event.isSelectedEvent ? vue.createVNode("span", {
         "class": ["fa fa-check", ns.em(classEName, "check")]
       }, null) : ""])]);
     };
-    const renderPopover = (content, event) => {
+    const renderPopover = (content, event, placement) => {
       if (!props.showDetail) {
         return content;
       }
+      const _tempEvent = {
+        ...event,
+        color: "",
+        bkColor: ""
+      };
       return vue.createVNode(vue.resolveComponent("el-popover"), {
-        "visible": visible.value && event.id === hoverItem.value,
         "show-after": 100,
         "offset": 4,
         "width": "auto",
         "popper-class": [ns.e("event-popover")],
-        "placement": "right-start"
+        "placement": placement || "right-start"
       }, {
         reference: () => content,
         default: () => {
@@ -142,7 +159,7 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
           }, 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: event
+            data: _tempEvent
           }) : vue.createVNode("div", {
             "class": [ns.em("event-popover", "content")]
           }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
@@ -169,7 +186,15 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
         "class": [ns.em("header", "events")]
       }, [vue.createVNode("div", {
         "class": [ns.em("header", "event-cell-first")]
-      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), rowsHeader.value.map((item) => vue.createVNode("div", {
+      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), vue.createVNode("div", {
+        "class": ns.em("header", "event-container"),
+        "ref": (el) => {
+          headerEventRef.value = el;
+        },
+        "onScroll": onHeaderEventScroll
+      }, [vue.createVNode("div", {
+        "class": ns.em("header", "container-scroll")
+      }, [rowsHeader.value.map((item) => vue.createVNode("div", {
         "class": [ns.em("header", "event-cell")]
       }, [item.map((event, index) => {
         const eventBoxStyle = {
@@ -178,15 +203,18 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
           width: "".concat(event == null ? void 0 : event.width)
         };
         const eventContentStyle = {
-          color: event.color,
           background: event.bkColorFade
         };
-        return event.isShow ? renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "header") : "";
-      })]))]), vue.createVNode("div", {
+        if (!event.isShow)
+          return "";
+        const tempContent = renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "header");
+        return renderPopover(tempContent, event, "bottom");
+      })]))]), isScroll.value && renderScrollbar()])]), vue.createVNode("div", {
         "class": ns.em("header", "resizable-handle"),
         "draggable": "true",
         "onDrag": (event) => handleDrag(event),
-        "onDragstart": (event) => handleDragStart(event)
+        "onDragstart": (event) => handleDragStart(event),
+        "onDragend": () => handleDragEnd()
       }, [vue.createVNode("div", {
         "class": ns.em("header", "resize-line")
       }, null)])]);
@@ -226,8 +254,7 @@ const CalendarWeek = /* @__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, "", "time-pane");
         return renderPopover(tempContent, event);
@@ -235,7 +262,11 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
     };
     return {
       ns,
+      thumbHeight,
       calendarWeek,
+      scrollTop,
+      realHeight,
+      headerEventRef,
       renderHeader,
       renderContent
     };
@@ -245,7 +276,12 @@ const CalendarWeek = /* @__PURE__ */ vue.defineComponent({
       "ref": (el) => {
         this.calendarWeek = el;
       },
-      "class": this.ns.b()
+      "class": this.ns.b(),
+      "style": {
+        ["".concat(this.ns.cssVarBlockName("header-event-scroll-bar-thumb-height"))]: "".concat(this.thumbHeight, "px"),
+        ["".concat(this.ns.cssVarBlockName("header-event-scroll-bar-thumb-top"))]: "".concat(this.scrollTop, "px"),
+        ["".concat(this.ns.cssVarBlockName("header-event-scroll-real-height"))]: "".concat(this.realHeight, "px")
+      }
     }, [this.renderHeader(), this.renderContent()]);
   }
 });

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

@@ -1 +1 @@
-.ibiz-calendar-week{display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__header{position:relative;z-index:100;display:flex;flex-direction:column;width:calc(100% - 7px);height:150px;min-height:150px}.ibiz-calendar-week__header--date-cell-first{width:90px;max-width:90px;height:100%;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-cell-first{display:flex;align-items:center;justify-content:center;width:90px;max-width:90px;height:100%;padding-left:40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--dates{display:flex;justify-content:space-between;width:100%;height:96px}.ibiz-calendar-week__header--date-cell{display:flex;flex:1;flex-direction:column;align-items:center;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--date-week{width:100%;height:26px;margin-top:6px;text-align:center}.ibiz-calendar-week__header--date-day{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:6px;font-weight:600;border:none;border-radius:50%}.ibiz-calendar-week__header--date-day.is-today{color:#fff;background:var(--ibiz-color-primary)}.ibiz-calendar-week__header--events{display:flex;flex:1;justify-content:space-between;width:100%;height:30px;overflow:hidden}.ibiz-calendar-week__header--event-cell{position:relative;top:0;left:0;flex:1;width:100%;height:100%;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-box{position:absolute}.ibiz-calendar-week__header--event-content{position:relative;z-index:2;width:100%;height:22px;padding-left:4px;cursor:pointer;background-color:var(--ibiz-color-primary);border:none;border-radius:4px;outline:0}.ibiz-calendar-week__header--event-summary{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__header--resizable-handle{position:absolute;bottom:-6px;display:flex;align-items:center;width:100%;height:10PX;cursor:row-resize}.ibiz-calendar-week__header--resize-line{width:100%;height:1px;background-color:var(--ibiz-color-border)}.ibiz-calendar-week__header--check{position:absolute;top:50%;right:6px;color:var(--ibiz-color-primary);transform:translate(0,-50%)}.ibiz-calendar-week__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-week__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 3px);height:auto}.ibiz-calendar-week__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-label{height:22px;margin-top:38px;line-height:22px;text-align:left}.ibiz-calendar-week__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-week__time-pane--time-columns{position:relative;flex:1;padding-bottom:60px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column{height:60px;border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column:nth-child(1){border-top:none}.ibiz-calendar-week__time-pane--time-column-last{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__time-pane--container-scroll{position:relative;top:0;width:100%;height:100%;overflow:auto;overflow:hidden}.ibiz-calendar-week__time-pane--event-box{position:absolute;width:auto;height:auto;padding:0 2px}.ibiz-calendar-week__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-week__time-pane--event-content:active{animation:pulse 1s linear}.ibiz-calendar-week__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-week__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-week__event-popover{position:relative;width:auto;height:auto;padding:0}.ibiz-calendar-week__event-popover.el-popover.el-popper{padding:24px 12px 8px}.ibiz-calendar-week__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-week__event-popover--scroll{width:auto;min-width:450px;height:auto;min-height:200px;overflow:auto}.ibiz-calendar-week__event-popover--close{position:absolute;top:8px;right:8px;cursor:pointer}.ibiz-calendar-week__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-week__event-popover--close:hover .el-icon svg{fill:#fff}.ibiz-calendar-week__event-popover .el-icon{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:20px}.ibiz-calendar-week__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-week{display:flex;flex:1;flex-direction:column;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__header{position:relative;z-index:100;display:flex;flex-direction:column;width:100%;height:150px;min-height:150px}.ibiz-calendar-week__header--date-cell-first{width:90px;max-width:90px;height:100%;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-cell-first{display:flex;align-items:center;justify-content:center;width:90px;max-width:90px;height:100%;padding-left:40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--dates{display:flex;justify-content:space-between;width:calc(100% - 7px);height:96px}.ibiz-calendar-week__header--date-cell{display:flex;flex:1;flex-direction:column;align-items:center;border-right:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--date-week{width:100%;height:26px;margin-top:6px;text-align:center}.ibiz-calendar-week__header--date-day{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-top:6px;font-weight:600;border:none;border-radius:50%}.ibiz-calendar-week__header--date-day.is-today{color:var(--ibiz-color-primary-text);background:var(--ibiz-color-primary)}.ibiz-calendar-week__header--events{display:flex;flex:1;width:100%;height:30px;overflow:hidden;position:relative}.ibiz-calendar-week__header--event-container{width:calc(100% - 97px);height:100%;overflow-y:auto;overflow-x:hidden}.ibiz-calendar-week__header--event-container::-webkit-scrollbar{display:none}.ibiz-calendar-week__header--container-scroll{display:flex;height:auto}.ibiz-calendar-week__header--event-cell{position:relative;top:0;left:0;flex:1;width:100%;height:auto}.ibiz-calendar-week__header--event-cell::after{content:"";display:block;position:absolute;top:0;right:0;width:1px;height:var(--ibiz-calendar-week-header-event-scroll-real-height);border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__header--event-box{position:absolute;display:flex;min-width:32px}.ibiz-calendar-week__header--event-box:has(.ibiz-calendar-week__header--check){min-width:50px}.ibiz-calendar-week__header--event-content{position:relative;z-index:2;width:100%;height:100%;min-height:22px;padding-left:4px;cursor:pointer;background-color:var(--ibiz-color-primary);border:none;outline:0}.ibiz-calendar-week__header--event-content.is-selected-event{padding-right:20px}.ibiz-calendar-week__header--event-summary{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__header--resizable-handle{position:absolute;bottom:-6px;display:flex;align-items:center;width:calc(100% - 7px);height:10px;cursor:row-resize}.ibiz-calendar-week__header--resize-line{width:100%;height:1px;background-color:var(--ibiz-color-border)}.ibiz-calendar-week__header--check{position:absolute;top:50%;right:6px;color:var(--ibiz-color-primary);transform:translate(0,-50%)}.ibiz-calendar-week__scroll-area{flex:1;overflow:hidden scroll}.ibiz-calendar-week__time-pane{position:relative;display:flex;flex:1 1 0%;width:calc(100% - 3px);height:auto}.ibiz-calendar-week__time-pane--time-labels{position:sticky;left:0;width:90px;min-width:90px;padding:27px 0 27px 40px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-label{height:22px;margin-top:38px;line-height:22px;text-align:left}.ibiz-calendar-week__time-pane--time-label:nth-child(1){height:22px;margin-top:22px}.ibiz-calendar-week__time-pane--time-columns{position:relative;flex:1;padding-bottom:60px;border-right:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column{height:60px;border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--time-column:nth-child(1){border-top:none}.ibiz-calendar-week__time-pane--time-column-last{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-week__time-pane--event-timed-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden}.ibiz-calendar-week__time-pane--container-scroll{position:relative;top:0;width:100%;height:100%;overflow:auto;overflow:hidden}.ibiz-calendar-week__time-pane--event-box{position:absolute;width:auto;height:auto;padding:0 2px}.ibiz-calendar-week__time-pane--event-content{position:relative;z-index:3;width:100%;height:100%;padding:8px;overflow:hidden;line-height:100%;text-align:left;cursor:pointer;border:none;outline:0}.ibiz-calendar-week__time-pane--event-content.is-selected-event{border:1px solid var(--ibiz-color-primary)}.ibiz-calendar-week__time-pane--event-summary{width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-calendar-week__time-pane--event-summary>span{margin-right:4px}.ibiz-calendar-week__event-popover{position:relative;width:auto;height:auto;padding:0}.ibiz-calendar-week__event-popover.el-popover.el-popper{padding:8px}.ibiz-calendar-week__event-popover:has(.ibiz-control-calendar-item-default){display:none!important}.ibiz-calendar-week__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-week__event-popover--scroll{width:auto;min-width:200px;height:auto;max-height:80%;overflow:auto;pointer-events:none}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item:last-child{margin-bottom:0}.ibiz-calendar-week__event-popover--scroll .ibiz-control-calendar-item.is-active{background-color:transparent;border-color:transparent}.ibiz-calendar-week__event-popover--close{position:absolute;top:8px;right:8px;display:none;cursor:pointer}.ibiz-calendar-week__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-week__event-popover--close:hover .el-icon svg{fill:var(--ibiz-color-white)}.ibiz-calendar-week__event-popover .el-icon{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;font-size:20px}.ibiz-calendar-week__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}.ibiz-calendar-week-scroll-bar{position:absolute;top:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-top);right:0;z-index:10;width:4px;height:100%;border-radius:var(--ibiz-border-radius-extra-small)}.ibiz-calendar-week-scroll-bar__thumb{width:4px;height:var(--ibiz-calendar-week-header-event-scroll-bar-thumb-height);cursor:pointer;background-color:var(--ibiz-color-fill-2);border-radius:var(--ibiz-border-radius-extra-small)}