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

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

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';
@@ -28,15 +28,24 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
       selectedData,
       legends,
       rowsHeader,
-      eventClick,
+      headerEventRef,
+      thumbHeight,
+      scrollTop,
+      realHeight,
+      isScroll,
+      handleEventClick,
+      handleEventDblClick,
       handleDrag,
       handleDragStart,
+      handleDragEnd,
       handleCurTime,
       initDrawData,
-      handleUIEvents
+      handleUIEvents,
+      onScrollbarMouseDown,
+      onHeaderEventScroll,
+      initHeaderEventScroll,
+      eventContextmenu
     } = useCalendarWeek(props, emit);
-    const hoverItem = ref("");
-    const visible = ref(false);
     watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
         const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
@@ -57,6 +66,7 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
     });
     watch(() => props.events, () => {
       handleUIEvents();
+      initHeaderEventScroll();
     }, {
       immediate: true,
       deep: true
@@ -73,60 +83,67 @@ const CalendarWeek = /* @__PURE__ */ 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 createVNode("div", {
+        "class": ns.b("scroll-bar")
+      }, [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 = showTitle(title) || "";
+      if (props.showDetail)
+        title = "";
       return createVNode("div", {
         "key": index,
         "class": [ns.em(classEName, "event-box")],
-        "style": eventBoxStyle,
-        "onMouseenter": () => onMouseenter(event),
-        "onMouseleave": onMouseleavee,
-        "onClick": onClickCalendarItem
+        "style": eventBoxStyle
       }, [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
       }) : createVNode("div", {
-        "class": [ns.em(classEName, "event-summary"), event.classname],
-        "title": showTitle(location === "header" ? "".concat(event.text || "", " ").concat(event.timeRange || "") : "")
+        "class": [ns.em(classEName, "event-summary"), event.classname]
       }, [event.icon && createVNode("span", {
         "class": [event.icon, ns.em(classEName, "event-icon")],
         "style": {
           color: event.bkColor
         }
       }, null), event.text && createVNode("span", {
-        "class": [ns.em(classEName, "event-name")],
-        "title": event.text
+        "class": [ns.em(classEName, "event-name")]
       }, [event.text])]), location === "header" && event.isSelectedEvent ? 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 createVNode(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: () => {
@@ -140,7 +157,7 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
           }, null), 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
           }) : createVNode("div", {
             "class": [ns.em("event-popover", "content")]
           }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
@@ -167,7 +184,15 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
         "class": [ns.em("header", "events")]
       }, [createVNode("div", {
         "class": [ns.em("header", "event-cell-first")]
-      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), rowsHeader.value.map((item) => createVNode("div", {
+      }, [ibiz.i18n.t("control.calendar.calendardaily.tip")]), createVNode("div", {
+        "class": ns.em("header", "event-container"),
+        "ref": (el) => {
+          headerEventRef.value = el;
+        },
+        "onScroll": onHeaderEventScroll
+      }, [createVNode("div", {
+        "class": ns.em("header", "container-scroll")
+      }, [rowsHeader.value.map((item) => createVNode("div", {
         "class": [ns.em("header", "event-cell")]
       }, [item.map((event, index) => {
         const eventBoxStyle = {
@@ -176,15 +201,18 @@ const CalendarWeek = /* @__PURE__ */ 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") : "";
-      })]))]), 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()])]), createVNode("div", {
         "class": ns.em("header", "resizable-handle"),
         "draggable": "true",
         "onDrag": (event) => handleDrag(event),
-        "onDragstart": (event) => handleDragStart(event)
+        "onDragstart": (event) => handleDragStart(event),
+        "onDragend": () => handleDragEnd()
       }, [createVNode("div", {
         "class": ns.em("header", "resize-line")
       }, null)])]);
@@ -224,8 +252,7 @@ const CalendarWeek = /* @__PURE__ */ 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);
@@ -233,7 +260,11 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
     };
     return {
       ns,
+      thumbHeight,
       calendarWeek,
+      scrollTop,
+      realHeight,
+      headerEventRef,
       renderHeader,
       renderContent
     };
@@ -243,7 +274,12 @@ const CalendarWeek = /* @__PURE__ */ 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/es/control/calendar/components/calendar-week/index.d.ts

@@ -1,16 +1,22 @@
 export declare const IBizCalendarWeek: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<import("@ibiz-template/core").IApiParams, {
     ns: import("@ibiz-template/core").Namespace;
+    thumbHeight: import("vue").Ref<number>;
     calendarWeek: import("vue").Ref<any>;
+    scrollTop: import("vue").Ref<number>;
+    realHeight: import("vue").Ref<number>;
+    headerEventRef: import("vue").Ref<any>;
     renderHeader: () => JSX.Element;
     renderContent: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pick: (value: import("dayjs").Dayjs) => boolean;
     eventClick: (value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
     eventDblClick: (value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
+    eventContextmenu: (_value: import("@ibiz-template/core").IApiParams) => import("@ibiz-template/core").IApiParams;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<import("@ibiz-template/core").IApiParams>> & {
     onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
     onEventClick?: ((value: import("@ibiz-template/core").IApiParams) => any) | undefined;
     onEventDblClick?: ((value: import("@ibiz-template/core").IApiParams) => any) | undefined;
+    onEventContextmenu?: ((_value: import("@ibiz-template/core").IApiParams) => any) | undefined;
 }, {
     [x: string]: any;
     [x: symbol]: any;

package/es/control/calendar/components/calendar-week/use-calendar-week.d.ts

@@ -150,10 +150,21 @@ export declare const useCalendarWeek: (props: CalendarWeekProps, emit: SetupCont
     legends: import("vue").Ref<any>;
     rowsHeader: import("vue").Ref<import("@ibiz-template/core").IApiData[]>;
     popVisible: import("vue").Ref<boolean>;
+    headerEventRef: import("vue").Ref<any>;
+    thumbHeight: import("vue").Ref<number>;
+    realHeight: import("vue").Ref<number>;
+    scrollTop: import("vue").Ref<number>;
+    isScroll: import("vue").Ref<boolean>;
     handleCurTime: () => void;
     handleDrag: (event: DragEvent) => void;
     handleDragStart: (event: DragEvent) => void;
-    eventClick: (item: IUIEvent, location: string) => Promise<void>;
+    handleDragEnd: () => void;
+    handleEventClick: (item: IUIEvent, location: string) => void;
+    handleEventDblClick: (item: IUIEvent, location: string) => void;
     initDrawData: () => string[];
     handleUIEvents: () => void;
+    onScrollbarMouseDown: (event: MouseEvent) => void;
+    onHeaderEventScroll: (event: Event) => void;
+    initHeaderEventScroll: () => void;
+    eventContextmenu: (item: IUIEvent, evt: MouseEvent) => Promise<void>;
 };