@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

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

@@ -1,12 +1,10 @@
-import { ref, watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../interface/index.mjs';
 import { useCalendarWeek } from './use-calendar-week.mjs';
 import './calendar-week.css';
-import '../util/index.mjs';
 import { calendarWeekProps, calendarWeekEmits } from '../interface/calendar-week.mjs';
-import { handlePopClose, closeIcon } from '../util/util.mjs';
 
 "use strict";
 const CalendarWeek = /* @__PURE__ */ defineComponent({
@@ -28,15 +26,27 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
       selectedData,
       legends,
       rowsHeader,
-      eventClick,
+      headerEventRef,
+      thumbHeight,
+      scrollTop,
+      realHeight,
+      isScroll,
+      handleEventClick,
+      handleEventDblClick,
       handleDrag,
       handleDragStart,
+      handleDragEnd,
       handleCurTime,
       initDrawData,
-      handleUIEvents
-    } = useCalendarWeek(props, emit);
-    const hoverItem = ref("");
-    const visible = ref(false);
+      handleUIEvents,
+      onScrollbarMouseDown,
+      onHeaderEventScroll,
+      initHeaderEventScroll,
+      eventContextmenu,
+      contentMousemove,
+      eventMouseenter,
+      eventMouseleave
+    } = useCalendarWeek(props, emit, ns);
     watch(() => props.selectedData, () => {
       if (props.selectedData && props.selectedData.length > 0) {
         const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
@@ -57,6 +67,7 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
     });
     watch(() => props.events, () => {
       handleUIEvents();
+      initHeaderEventScroll();
     }, {
       immediate: true,
       deep: true
@@ -73,80 +84,72 @@ const CalendarWeek = /* @__PURE__ */ defineComponent({
         curTimeTimer.value = null;
       }
     });
-    const onMouseenter = (event) => {
-      hoverItem.value = String(event.id);
-      visible.value = true;
-    };
-    const onClickCalendarItem = () => {
-      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 onMouseleavee = () => {
-      hoverItem.value = "";
-      visible.value = false;
+    const renderPopoverContent = (_event) => {
+      var _a;
+      const _tempEvent = {
+        ..._event,
+        color: "",
+        bkColor: ""
+      };
+      return createVNode("div", {
+        "class": [ns.em("event-popover", "body")]
+      }, [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
+      }) : 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 = showTitle(title) || "";
+      if (props.showDetail)
+        title = "";
+      const component = renderPopoverContent(event);
       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),
+        "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
       }) : 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) => {
-      if (!props.showDetail) {
-        return content;
-      }
-      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"
-      }, {
-        reference: () => content,
-        default: () => {
-          var _a;
-          return createVNode("div", {
-            "class": [ns.em("event-popover", "body")]
-          }, [createVNode("div", {
-            "class": [ns.em("event-popover", "close")],
-            "onClick": (el) => handlePopClose(el),
-            "innerHTML": closeIcon
-          }, 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
-          }) : createVNode("div", {
-            "class": [ns.em("event-popover", "content")]
-          }, ["".concat(event.text || "", " ").concat(event.timeRange || "")])])]);
-        }
-      });
-    };
     const renderHeader = () => {
       return createVNode("div", {
         "class": [ns.e("header")],
@@ -167,7 +170,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,22 +187,25 @@ 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 "";
+        return renderEventItem("header", eventBoxStyle, eventContentStyle, event, index, "head-event", "header");
+      })]))]), 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)])]);
     };
     const renderContent = () => {
       return createVNode("div", {
-        "class": [ns.e("scroll-area")]
+        "class": [ns.e("scroll-area")],
+        "onMousemove": contentMousemove
       }, [createVNode("div", {
         "class": ns.e("time-pane")
       }, [createVNode("div", {
@@ -224,16 +238,18 @@ 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);
+        return renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "", "time-pane");
       })])])]))])]);
     };
     return {
       ns,
+      thumbHeight,
       calendarWeek,
+      scrollTop,
+      realHeight,
+      headerEventRef,
       renderHeader,
       renderContent
     };
@@ -243,7 +259,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

@@ -1,6 +1,7 @@
-import type { SetupContext } from 'vue';
+import type { SetupContext, VNode } from 'vue';
+import { Namespace } from '@ibiz-template/core';
 import { CalendarWeekEmits, CalendarWeekProps, IUIEvent } from '../interface';
-export declare const useCalendarWeek: (props: CalendarWeekProps, emit: SetupContext<CalendarWeekEmits>['emit']) => {
+export declare const useCalendarWeek: (props: CalendarWeekProps, emit: SetupContext<CalendarWeekEmits>['emit'], _ns: Namespace) => {
     drawData: import("vue").Ref<string[]>;
     curTimeTimer: import("vue").Ref<any>;
     curTimeTop: import("vue").Ref<number>;
@@ -150,10 +151,24 @@ 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>;
+    contentMousemove: (_event: MouseEvent) => void;
+    eventMouseenter: (_event: MouseEvent, _component: VNode, _location: string) => void;
+    eventMouseleave: (_e: MouseEvent) => void;
 };