@ibiz-template/vue3-components 0.7.26-alpha.1 → 0.7.26-alpha.2

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

@@ -0,0 +1,154 @@
+import type { SetupContext } from 'vue';
+import { CalendarDailyEmits, CalendarDailyProps, IUIEvent } from '../interface';
+export declare const useCalendarDaily: (props: CalendarDailyProps, emit: SetupContext<CalendarDailyEmits>['emit']) => {
+    drawData: import("vue").Ref<string[]>;
+    curTimeTimer: import("vue").Ref<any>;
+    curTimeTop: import("vue").Ref<number>;
+    curTimeVal: import("vue").Ref<string>;
+    events: import("vue").ComputedRef<IUIEvent[]>;
+    resizableHand: import("vue").Ref<any>;
+    calendarDaily: import("vue").Ref<any>;
+    selectedData: import("vue").Ref<{
+        beginTime: string | {
+            toString: () => string;
+            toDateString: () => string;
+            toTimeString: () => string;
+            toLocaleString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleDateString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleTimeString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            valueOf: () => number;
+            getTime: () => number;
+            getFullYear: () => number;
+            getUTCFullYear: () => number;
+            getMonth: () => number;
+            getUTCMonth: () => number;
+            getDate: () => number;
+            getUTCDate: () => number;
+            getDay: () => number;
+            getUTCDay: () => number;
+            getHours: () => number;
+            getUTCHours: () => number;
+            getMinutes: () => number;
+            getUTCMinutes: () => number;
+            getSeconds: () => number;
+            getUTCSeconds: () => number;
+            getMilliseconds: () => number;
+            getUTCMilliseconds: () => number;
+            getTimezoneOffset: () => number;
+            setTime: (time: number) => number;
+            setMilliseconds: (ms: number) => number;
+            setUTCMilliseconds: (ms: number) => number;
+            setSeconds: (sec: number, ms?: number | undefined) => number;
+            setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+            setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setDate: (date: number) => number;
+            setUTCDate: (date: number) => number;
+            setMonth: (month: number, date?: number | undefined) => number;
+            setUTCMonth: (month: number, date?: number | undefined) => number;
+            setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            toUTCString: () => string;
+            toISOString: () => string;
+            toJSON: (key?: any) => string;
+            [Symbol.toPrimitive]: {
+                (hint: "default"): string;
+                (hint: "string"): string;
+                (hint: "number"): number;
+                (hint: string): string | number;
+            };
+        };
+        endTime: string | {
+            toString: () => string;
+            toDateString: () => string;
+            toTimeString: () => string;
+            toLocaleString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleDateString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            toLocaleTimeString: {
+                (): string;
+                (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+            };
+            valueOf: () => number;
+            getTime: () => number;
+            getFullYear: () => number;
+            getUTCFullYear: () => number;
+            getMonth: () => number;
+            getUTCMonth: () => number;
+            getDate: () => number;
+            getUTCDate: () => number;
+            getDay: () => number;
+            getUTCDay: () => number;
+            getHours: () => number;
+            getUTCHours: () => number;
+            getMinutes: () => number;
+            getUTCMinutes: () => number;
+            getSeconds: () => number;
+            getUTCSeconds: () => number;
+            getMilliseconds: () => number;
+            getUTCMilliseconds: () => number;
+            getTimezoneOffset: () => number;
+            setTime: (time: number) => number;
+            setMilliseconds: (ms: number) => number;
+            setUTCMilliseconds: (ms: number) => number;
+            setSeconds: (sec: number, ms?: number | undefined) => number;
+            setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+            setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+            setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+            setDate: (date: number) => number;
+            setUTCDate: (date: number) => number;
+            setMonth: (month: number, date?: number | undefined) => number;
+            setUTCMonth: (month: number, date?: number | undefined) => number;
+            setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+            toUTCString: () => string;
+            toISOString: () => string;
+            toJSON: (key?: any) => string;
+            [Symbol.toPrimitive]: {
+                (hint: "default"): string;
+                (hint: "string"): string;
+                (hint: "number"): number;
+                (hint: string): string | number;
+            };
+        };
+        id: string | number;
+        classname: string;
+        text: string;
+        content: string;
+        tips: string;
+        icon: string;
+        color: string;
+        bkColor: string;
+        itemType: string;
+        deData: IData;
+    }[]>;
+    handleCurTime: () => void;
+    handleDrag: (event: DragEvent) => void;
+    handleDragStart: (event: DragEvent) => void;
+    eventClick: (item: IUIEvent, location: string) => Promise<void>;
+    initDrawData: () => string[];
+};

package/es/control/calendar/components/calendar-daily/use-calendar-daily.mjs

@@ -0,0 +1,196 @@
+import { ref, computed } from 'vue';
+import '../util/index.mjs';
+import { isToday, handleTimeRange, handleBkColor, fade, handleEVentClick } from '../util/util.mjs';
+
+"use strict";
+const useCalendarDaily = (props, emit) => {
+  const drawData = ref([]);
+  const curTimeTimer = ref();
+  const curTimeTop = ref(0);
+  const curTimeVal = ref("00:00");
+  const resizableHand = ref();
+  const calendarDaily = ref();
+  const legends = computed(() => props.legends || []);
+  const multiple = computed(() => props.multiple === true);
+  const selectedData = ref([]);
+  let initialMouseY = 0;
+  let initialHeight = 0;
+  const handleDragStart = (event) => {
+    initialMouseY = event.clientY;
+    initialHeight = parseInt(
+      window.getComputedStyle(resizableHand.value).height,
+      10
+    );
+  };
+  const handleDrag = (event) => {
+    const heightChange = event.clientY - initialMouseY + initialHeight;
+    resizableHand.value.style.height = "".concat(heightChange, "px");
+  };
+  const events = computed(() => {
+    return computeUIEvents(
+      props.events,
+      props == null ? void 0 : props.selectedDay,
+      legends.value,
+      calendarDaily.value
+    );
+  });
+  const computeUIEvents = (events2, curDate, legends2, calendarDaily2) => {
+    const tempEvents = [];
+    const tempColors = /* @__PURE__ */ new Map();
+    let contentWidth = 0;
+    if (calendarDaily2) {
+      contentWidth = parseInt(window.getComputedStyle(calendarDaily2).width, 10);
+    }
+    events2.sort((a, b) => {
+      const beginTimeDifference = new Date(a.beginTime).getTime() - new Date(b.beginTime).getTime();
+      let type;
+      if (beginTimeDifference === 0) {
+        type = new Date(a.endTime).getTime() - new Date(b.endTime).getTime();
+      } else {
+        type = beginTimeDifference;
+      }
+      return type;
+    });
+    const tempArray = events2.filter((event) => {
+      return event && event.beginTime && event.endTime && isToday(curDate, event.beginTime) && isToday(curDate, event.endTime);
+    });
+    tempArray.forEach((event, index) => {
+      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;
+      const percentage = Number((100 / length).toFixed(3));
+      let width = "".concat(percentage, "%");
+      let styleLeft = "".concat(index * percentage, "%");
+      if (itemWidth < 100) {
+        width = "100px";
+        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 = 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 });
+      }
+      if (!(event == null ? void 0 : event.bkColor)) {
+        const bkColor = targetLegend ? targetLegend.bkcolor : handleBkColor(tempColors, event.itemType);
+        Object.assign(tempItem, { bkColor });
+      }
+      if (tempItem.bkColor) {
+        const tempBkColor = fade(tempItem.bkColor, 10);
+        Object.assign(tempItem, {
+          bkColorFade: tempBkColor
+        });
+      }
+      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);
+      }
+    });
+    tempColors.clear();
+    return tempEvents;
+  };
+  const handleEventHeight = (startTime, endTime, date) => {
+    let height = 1;
+    if (isToday(startTime, date) && isToday(endTime, date)) {
+      const difference = new Date(endTime).getTime() - new Date(startTime).getTime();
+      height = Math.floor(difference / (1e3 * 60));
+    }
+    if (height < 3) {
+      height = 3;
+    }
+    return height;
+  };
+  const handleTopOrCurVal = (date) => {
+    const currentHours = date.getHours();
+    const currentMinutes = date.getMinutes();
+    const hours = String(currentHours).padStart(2, "0");
+    const minutes = String(currentMinutes).padStart(2, "0");
+    let styleTop;
+    let timeVal;
+    if (currentHours === 0 && currentMinutes === 0) {
+      styleTop = 0;
+      timeVal = "00:00";
+    } else {
+      const topVal = currentHours * 60 + currentMinutes;
+      styleTop = topVal;
+      timeVal = "".concat(hours, ":").concat(minutes);
+    }
+    return { styleTop, timeVal };
+  };
+  const handleCurTime = () => {
+    const { styleTop, timeVal } = handleTopOrCurVal(/* @__PURE__ */ new Date());
+    curTimeTop.value = styleTop;
+    curTimeVal.value = timeVal;
+  };
+  const initDrawData = () => {
+    const tempDrawData = [];
+    for (let i = 1; i < 24; i++) {
+      const hours = String(i).padStart(2, "0");
+      const timescale = "".concat(hours, ":00");
+      tempDrawData.push(timescale);
+    }
+    return tempDrawData;
+  };
+  const eventClick = async (item, location) => {
+    const res = await handleEVentClick(
+      item,
+      location,
+      props.events,
+      multiple.value,
+      selectedData.value,
+      emit
+    );
+    const { tempSelectedData, isSelectedEvent } = res;
+    if (!isSelectedEvent) {
+      Object.assign(item, { isSelectedEvent });
+    }
+    selectedData.value = tempSelectedData;
+  };
+  return {
+    drawData,
+    curTimeTimer,
+    curTimeTop,
+    curTimeVal,
+    events,
+    resizableHand,
+    calendarDaily,
+    selectedData,
+    handleCurTime,
+    handleDrag,
+    handleDragStart,
+    eventClick,
+    initDrawData
+  };
+};
+
+export { useCalendarDaily };

package/es/control/calendar/components/calendar-month/calendar-month.css

@@ -0,0 +1 @@
+.ibiz-calendar-month{width:100%;height:100%;display:flex;flex-direction:column}.ibiz-calendar-month__thead{width:100%;height:46px}.ibiz-calendar-month__thead th{padding:12px 0;font-weight:400}.ibiz-calendar-month__tbody{width:100%;height:100%;table-layout:fixed;width:100%}.ibiz-calendar-month__tbody:not(.is-range) td.next,.ibiz-calendar-month__tbody:not(.is-range) td.prev{color:var(--el-text-color-placeholder)}.ibiz-calendar-month__table-body{width:100%;height:100%;flex:1;padding-bottom:8px;overflow:scroll}.ibiz-calendar-month__table-body--scroll{width:auto;height:auto;overflow:scroll}.ibiz-calendar-month__row{min-height:126px}.ibiz-calendar-month__row:first-child td{border-top:1px solid var(--ibiz-color-border)}.ibiz-calendar-month__row--td{width:auto;border-bottom:1px solid var(--ibiz-color-border);border-right:1px solid var(--ibiz-color-border);vertical-align:top;transition:background-color var(--ibiz-color-border) ease;cursor:pointer}.ibiz-calendar-month__row--td.is-today{color:var(--el-color-primary)}.ibiz-calendar-month__row--td.is-selected{background-color:#ecf5ff}.ibiz-calendar-month__row--td.is-selected .ibiz-calendar-month__cell{background:#ecf5ff}.ibiz-calendar-month__row--td:first-child{border-left:1px solid var(--ibiz-color-border)}.ibiz-calendar-month__row--calendar-day{position:relative;z-index:1;height:auto}.ibiz-calendar-month__row--calendar-day:hover{background:0 0}.ibiz-calendar-month__cell{height:126px;width:100%;min-height:126px;display:flex;flex-direction:column;position:relative}.ibiz-calendar-month__container{width:100%;height:100%;position:absolute;left:0;right:0}.ibiz-calendar-month__container__events{position:relative;z-index:2}.ibiz-calendar-month__event-box{width:100%;height:auto;min-height:24px;display:flex;align-items:center;position:absolute;left:0;top:0}.ibiz-calendar-month__event-content{width:100%;height:20px;line-height:20px;padding:0 4px;border:none;outline:0;text-align:left;border-radius:4px;background:var(--ibiz-color-primary);color:#fff;position:relative;overflow:hidden;cursor:pointer}.ibiz-calendar-month__event-content:active{animation:pulse 1s linear}.ibiz-calendar-month__event-content--btn-ripple{position:absolute;display:block;width:50px;height:20px;border-radius:10px;background:rgba(255,255,255,.4);animation:ripple 1s ease}.ibiz-calendar-month__event-content--event-summary{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ibiz-calendar-month__event-content--event-name{margin-right:6px}.ibiz-calendar-month__event-content--time-range{margin-right:6px}.ibiz-calendar-month__event-content--check{color:var(--ibiz-color-primary);position:absolute;right:6px;top:50%;transform:translate(0,-50%)}.ibiz-calendar-month__more-popover.el-popper.el-popper{padding:0;border-radius:4px}.ibiz-calendar-month__more-popover--more-events{height:20px;padding:2px;position:absolute;left:0;top:106px}.ibiz-calendar-month__more-popover--body{width:100%;height:auto}.ibiz-calendar-month__more-popover--title{padding:6px 8px;font-size:16px;text-align:left;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-calendar-month__more-popover--events-content{width:100%;height:auto;max-height:380px;padding:8px 10px;overflow-x:hidden;overflow-y:scroll}.ibiz-calendar-month__more-popover .event-box{position:static}.ibiz-calendar-month__more-popover .event-box:nth-child(1){margin-top:0}.ibiz-calendar-month__event-popover{padding:0;width:auto;height:auto;position:relative}.ibiz-calendar-month__event-popover.el-popover.el-popper{padding:24px 12px 8px 12px}.ibiz-calendar-month__event-popover--body{width:auto;height:auto;overflow:hidden}.ibiz-calendar-month__event-popover--scroll{width:auto;height:auto;min-width:450px;min-height:200px;overflow:auto}.ibiz-calendar-month__event-popover--close{position:absolute;right:8px;top:8px;cursor:pointer}.ibiz-calendar-month__event-popover--close:hover .el-icon{background:var(--ibiz-color-primary);border-radius:50%}.ibiz-calendar-month__event-popover--close:hover .el-icon svg{fill:#fff}.ibiz-calendar-month__event-popover .el-icon{font-size:20px;min-height:24px;min-width:24px;display:flex;justify-content:center;align-items:center}.ibiz-calendar-month__event-popover .el-icon svg{fill:var(--el-text-color-secondary)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

package/es/control/calendar/components/calendar-month/calendar-month.d.ts

@@ -0,0 +1,18 @@
+import './calendar-month.scss';
+export declare const CalendarMonth: import("vue").DefineComponent<IParams, {
+    ns: import("@ibiz-template/core").Namespace;
+    isInRange: any;
+    renderThead: () => JSX.Element | null;
+    renderTbody: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pickEvent: (value: import("dayjs").Dayjs) => import("dayjs").Dayjs;
+    eventClick: (value: IParams) => IParams;
+    eventDblClick: (value: IParams) => IParams;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<IParams>> & {
+    onEventClick?: ((value: IParams) => any) | undefined;
+    onEventDblClick?: ((value: IParams) => any) | undefined;
+    onPickEvent?: ((value: import("dayjs").Dayjs) => any) | undefined;
+}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}>;

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

@@ -0,0 +1,242 @@
+import { nextTick, watch, onMounted, resolveComponent, createVNode, createTextVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
+import '../interface/index.mjs';
+import { useCalendarMonth } from './use-calendar-month.mjs';
+import './calendar-month.css';
+import '../util/index.mjs';
+import { calendarMonthProps, calendarMonthEmits } from '../interface/calendar-month.mjs';
+import { handlePopClose, closeIcon } from '../util/util.mjs';
+
+"use strict";
+const CalendarMonth = /* @__PURE__ */ defineComponent({
+  name: "CalendarMonth",
+  props: calendarMonthProps,
+  emits: calendarMonthEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = useNamespace("calendar-month");
+    const {
+      isInRange,
+      rows,
+      weekDays,
+      hideHeader,
+      tableTd,
+      legends,
+      popVisible,
+      selectedDay,
+      selectedData,
+      getCellClass,
+      getSlotData,
+      handlePickDay,
+      eventClick,
+      handleMonthDraw,
+      handleEventsMoreData
+    } = useCalendarMonth(props, emit);
+    props.controller._evt.on("onActive", () => {
+      nextTick(() => {
+        popVisible.value = false;
+      });
+    });
+    watch(() => props.selectedData, () => {
+      if (props.selectedData && props.selectedData.length > 0) {
+        const data = props.selectedData.length > selectedData.value.length ? props.selectedData : selectedData.value;
+        selectedData.value = data;
+      } else {
+        selectedData.value = [];
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    onMounted(() => {
+      handleMonthDraw();
+    });
+    watch(() => props.events, () => {
+      handleMonthDraw();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    watch(() => props.legends, () => {
+      legends.value = props.legends || [];
+      handleMonthDraw();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    watch(() => props.selectedDay, () => {
+      selectedDay.value = props.selectedDay;
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const renderPopover = (content, event) => {
+      return createVNode(resolveComponent("el-popover"), {
+        "show-after": 10,
+        "offset": 4,
+        "width": "auto",
+        "popper-class": ns.e("event-popover"),
+        "placement": "top"
+      }, {
+        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 renderEvent = (event) => {
+      const node = createVNode("div", {
+        "class": ns.em("event-content", "event-summary")
+      }, [event.text && createVNode("span", {
+        "class": [ns.em("event-content", "event-name")]
+      }, [event.text]), event.timeRange && createVNode("span", {
+        "class": [ns.em("event-content", "time-range")]
+      }, [event.timeRange])]);
+      if (!props.controller.state.showDetail) {
+        return node;
+      }
+      return renderPopover(node, event);
+    };
+    const renderEventItem = (event, eventIndex) => {
+      let node = null;
+      node = createVNode("div", {
+        "key": eventIndex,
+        "class": [ns.e("event-box"), "event-box"],
+        "style": {
+          top: "".concat(Number(eventIndex * 24) + 30, "px"),
+          width: "".concat(event == null ? void 0 : event.width)
+        }
+      }, [createVNode("button", {
+        "class": ["event-content", ns.e("event-content"), event.isSelectedEvent ? "is-selected-event" : "", event == null ? void 0 : event.classname],
+        "style": {
+          background: event == null ? void 0 : event.bkColor,
+          color: event == null ? void 0 : event.color
+        },
+        "onClick": (el) => {
+          el.stopPropagation();
+          eventClick(event, "content");
+        }
+      }, [renderEvent(event), event.isSelectedEvent ? createVNode("span", {
+        "class": [ns.em("event-content", "check"), "fa fa-check"]
+      }, null) : ""])]);
+      return node;
+    };
+    const renderEvents = (cell) => {
+      const eventsNode = cell.events.map((event, eventIndex) => {
+        let node = null;
+        const uuid = createUUID();
+        Object.assign(event, {
+          popId: uuid
+        });
+        if (eventIndex < 3 && (event.isShow || event.isToday)) {
+          node = renderEventItem(event, eventIndex);
+        }
+        return node;
+      });
+      let moreNode = null;
+      if (cell.events.length > 3) {
+        const tempEvents = handleEventsMoreData(cell);
+        moreNode = tempEvents.length > 0 ? createVNode(resolveComponent("el-popover"), {
+          "visible": popVisible.value,
+          "onUpdate:visible": ($event) => popVisible.value = $event,
+          "placement": "top",
+          "width": 400,
+          "trigger": "click",
+          "popper-class": ns.e("more-popover")
+        }, {
+          reference: () => {
+            return createVNode(resolveComponent("el-button"), {
+              "class": ns.em("more-popover", "more-events"),
+              "type": "text",
+              "onClick": (event) => event.stopPropagation()
+            }, {
+              default: () => [createTextVNode("+"), tempEvents.length, createTextVNode(" \u66F4\u591A")]
+            });
+          },
+          default: () => {
+            return createVNode("div", {
+              "class": [ns.em("more-popover", "body")]
+            }, [createVNode("div", {
+              "class": ns.em("more-popover", "title")
+            }, [cell.curDate ? cell.curDate.format("YYYY-MM-DD") : cell.text]), createVNode("div", {
+              "class": ns.em("more-popover", "events-content")
+            }, [tempEvents.map((event, eventIndex) => renderEventItem(event, eventIndex))])]);
+          }
+        }) : null;
+      }
+      return createVNode("div", {
+        "class": [ns.e("container__events")]
+      }, [eventsNode, moreNode]);
+    };
+    const renderThead = () => {
+      if (hideHeader.value) {
+        return null;
+      }
+      return createVNode("thead", null, [weekDays.value.map((day) => createVNode("th", {
+        "key": day
+      }, [day]))]);
+    };
+    const renderTbody = () => {
+      return createVNode("tbody", null, [rows.value.map((row, index) => createVNode("tr", {
+        "key": index,
+        "class": [ns.e("row"), index === 0 && hideHeader.value ? "el-calendar-table__row--hide-border" : ""]
+      }, [row.map((cell, key) => {
+        var _a;
+        return createVNode("td", {
+          "key": key,
+          "class": [...getCellClass(cell), ns.em("row", "td")],
+          "onClick": () => handlePickDay(cell),
+          "ref": (el) => {
+            tableTd.value = el;
+          }
+        }, [createVNode("div", {
+          "class": [ns.e("cell")]
+        }, [createVNode("div", {
+          "class": [ns.em("row", "calendar-day")]
+        }, [slots["date-cell"] ? (_a = slots["date-cell"]) == null ? void 0 : _a.call(slots, {
+          key,
+          data: getSlotData(cell)
+        }) : createVNode("span", null, [cell.text])]), createVNode("div", {
+          "class": ns.e("container")
+        }, [renderEvents(cell)])])]);
+      })]))]);
+    };
+    return {
+      ns,
+      isInRange,
+      renderThead,
+      renderTbody
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("table", {
+      "class": [this.ns.e("thead")]
+    }, [this.renderThead()]), createVNode("div", {
+      "class": this.ns.e("table-body")
+    }, [createVNode("div", {
+      "class": this.ns.em("table-body", "scroll")
+    }, [createVNode("table", {
+      "class": [this.ns.e("tbody"), this.isInRange && "is-range"]
+    }, [this.renderTbody()])])])]);
+  }
+});
+
+export { CalendarMonth };

package/es/control/calendar/components/calendar-month/index.d.ts

@@ -0,0 +1,18 @@
+export declare const IBizCalendarMonth: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<IParams, {
+    ns: import("@ibiz-template/core").Namespace;
+    isInRange: any;
+    renderThead: () => JSX.Element | null;
+    renderTbody: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pickEvent: (value: import("dayjs").Dayjs) => import("dayjs").Dayjs;
+    eventClick: (value: IParams) => IParams;
+    eventDblClick: (value: IParams) => IParams;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<IParams>> & {
+    onEventClick?: ((value: IParams) => any) | undefined;
+    onEventDblClick?: ((value: IParams) => any) | undefined;
+    onPickEvent?: ((value: import("dayjs").Dayjs) => any) | undefined;
+}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}>>;
+export default IBizCalendarMonth;

package/es/control/calendar/components/calendar-month/index.mjs

@@ -0,0 +1,9 @@
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CalendarMonth } from './calendar-month.mjs';
+
+"use strict";
+const IBizCalendarMonth = withInstall(CalendarMonth, function(v) {
+  v.component(CalendarMonth.name, CalendarMonth);
+});
+
+export { IBizCalendarMonth, IBizCalendarMonth as default };

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

@@ -0,0 +1,3 @@
+import type { SetupContext } from 'vue';
+import { CalendarMonthEmits, CalendarMonthProps } from '../interface';
+export declare const useCalendarMonth: (props: CalendarMonthProps, emit: SetupContext<CalendarMonthEmits>['emit']) => IData;