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

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

@@ -0,0 +1,384 @@
+import { ref, computed } from 'vue';
+import dayjs from 'dayjs';
+import localeData from '../../../../node_modules/.pnpm/dayjs@1.11.10/node_modules/dayjs/plugin/localeData.mjs';
+import { clone } from 'ramda';
+import { useLocale } from 'element-plus';
+import '../util/index.mjs';
+import { rangeArr, getCurWeekDates, isToday, isTimeGreaterThan, isDateInCurWeek, handleBkColor, handleTimeRange, handleEVentClick } from '../util/util.mjs';
+
+"use strict";
+const useCalendarMonth = (props, emit) => {
+  dayjs.extend(localeData);
+  const firstDayOfWeek = dayjs.localeData().firstDayOfWeek();
+  const { lang } = useLocale();
+  const now = dayjs().locale(lang.value);
+  const rows = ref([]);
+  const multiple = computed(() => props.multiple === true);
+  const selectedData = ref([]);
+  const popVisible = ref(true);
+  const tableTd = ref();
+  const legends = ref([]);
+  const selectedDay = ref();
+  const hideHeader = computed(() => props.hideHeader);
+  const isInRange = computed(() => !!props.range && !!props.range.length);
+  const weekDays = computed(() => {
+    const start = firstDayOfWeek;
+    let tempValue;
+    const tempWeeks = [
+      "sunday",
+      "monday",
+      "tuesday",
+      "wednesday",
+      "thursday",
+      "friday",
+      "saturday"
+    ];
+    if (start === 0) {
+      tempValue = tempWeeks.map((item) => {
+        return ibiz.i18n.t("control.calendar.calendarmonth.weeks.".concat(item));
+      });
+    } else {
+      tempValue = tempWeeks.slice(start).concat(tempWeeks.slice(0, start)).map((item) => {
+        return ibiz.i18n.t("control.calendar.calendarmonth.weeks.".concat(item));
+      });
+    }
+    return tempValue;
+  });
+  const getPrevMonthLastDays = (date, count) => {
+    const lastDay = date.subtract(1, "month").endOf("month").date();
+    return rangeArr(count).map(
+      (_, index) => lastDay - (count - index - 1)
+    );
+  };
+  const getMonthDays = (date) => {
+    const days = date.daysInMonth();
+    return rangeArr(days).map((_, index) => index + 1);
+  };
+  const toNestedArr = (days) => rangeArr(days.length / 7).map((index) => {
+    const start = index * 7;
+    return days.slice(start, start + 7);
+  });
+  const isDateRange = (curDate, event) => {
+    const startDate = new Date(event == null ? void 0 : event.beginTime);
+    const endDate = new Date(event == null ? void 0 : event.endTime);
+    startDate.setHours(0, 0, 0, 0);
+    endDate.setHours(0, 0, 0, 0);
+    return curDate && (event == null ? void 0 : event.beginTime) && (event == null ? void 0 : event.endTime) && curDate.getTime() <= new Date(endDate).getTime() && curDate.getTime() >= new Date(startDate).getTime() && startDate.getTime() !== endDate.getTime();
+  };
+  const handleCurDayEvent = (curDate, events, td) => {
+    let tempEvents = [];
+    const tempArray = [];
+    const todayEvents = [];
+    const rangeEvents = [];
+    const tempColors = /* @__PURE__ */ new Map();
+    const { firstDay, lastDay } = getCurWeekDates(curDate);
+    events.forEach((event) => {
+      const tempEvent = {};
+      Object.assign(tempEvent, event);
+      if (curDate && event.beginTime) {
+        if (!(event == null ? void 0 : event.endTime)) {
+          Object.assign(tempEvent, { endTime: event.beginTime });
+        }
+        if (isToday(tempEvent == null ? void 0 : tempEvent.beginTime, curDate) && isToday(tempEvent.beginTime, tempEvent.endTime)) {
+          todayEvents.push(tempEvent);
+        } else if (curDate && isDateRange(curDate, tempEvent)) {
+          Object.assign(tempEvent, { isRange: true });
+          rangeEvents.push(tempEvent);
+        } else if (!isToday(tempEvent.beginTime, tempEvent.endTime) && isTimeGreaterThan(curDate, tempEvent.beginTime) && (isDateInCurWeek(tempEvent.beginTime, firstDay, lastDay) || isDateInCurWeek(tempEvent.endTime, firstDay, lastDay))) {
+          Object.assign(tempEvent, { isShow: false });
+          rangeEvents.push(tempEvent);
+        }
+      }
+    });
+    rangeEvents.sort((a, b) => {
+      const type = new Date(a.beginTime).getTime() - new Date(b.beginTime).getTime();
+      return type;
+    });
+    todayEvents.sort((a, b) => {
+      const type = new Date(a.beginTime).getTime() - new Date(b.beginTime).getTime();
+      return type;
+    });
+    tempEvents = tempEvents.concat(rangeEvents, todayEvents);
+    tempEvents.forEach((event, index) => {
+      handleBkColor(tempColors, event.itemType);
+      const legendIndex = legends.value.findIndex(
+        (legendItem) => Object.is(legendItem.id, event.itemType)
+      );
+      const targetEvent = selectedData.value.find(
+        (item) => item.id === event.id
+      );
+      const tempEvent = {};
+      Object.assign(tempEvent, event);
+      Object.assign(tempEvent, {
+        beginTime: event.beginTime,
+        end: event.endTime,
+        id: event.id
+      });
+      if (event.endTime) {
+        const format = isToday(event == null ? void 0 : event.beginTime, event.endTime) ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+        const timeRange = handleTimeRange(
+          event.beginTime,
+          event.endTime,
+          format,
+          "~"
+        );
+        Object.assign(tempEvent, { timeRange });
+      }
+      if (!(event == null ? void 0 : event.bkColor)) {
+        const bkColor = legendIndex !== -1 ? legends.value[legendIndex].bkcolor : handleBkColor(tempColors, event.itemType);
+        Object.assign(tempEvent, { bkColor });
+      }
+      if (!(event == null ? void 0 : event.color)) {
+        Object.assign(tempEvent, { color: "#FFF" });
+      }
+      if (isToday(event == null ? void 0 : event.beginTime, curDate) && isToday(event == null ? void 0 : event.beginTime, event == null ? void 0 : event.endTime)) {
+        Object.assign(tempEvent, { isToday: true });
+      }
+      if (isDateRange(curDate, event) && (curDate.getDay() === 0 || isToday(event == null ? void 0 : event.beginTime, curDate))) {
+        if (td && index < 3) {
+          const currentDay = curDate.getDay();
+          const saturdayDate = new Date(curDate);
+          saturdayDate.setDate(curDate.getDate() + (6 - currentDay));
+          const endDate = new Date(event == null ? void 0 : event.endTime);
+          let week = 1;
+          if (currentDay === 0) {
+            if (endDate.getTime() > saturdayDate.getTime() || isToday(endDate, saturdayDate)) {
+              week = 7;
+            } else {
+              week = endDate.getDay() + 1;
+            }
+          } else if (endDate.getTime() > saturdayDate.getTime()) {
+            week = 7 - currentDay;
+          } else {
+            week = endDate.getDay() - currentDay;
+            week += 1;
+          }
+          const tempWidth = week * 100;
+          let tempVal = 0;
+          const fillUp = week - 1;
+          let widthDifference = 0;
+          if (currentDay === 0) {
+            widthDifference = 5;
+            tempVal += widthDifference * fillUp;
+            if (endDate.getTime() > saturdayDate.getTime()) {
+              tempVal += 3;
+            } else {
+              tempVal += 2;
+            }
+          } else if (week > 1) {
+            widthDifference = 4;
+            tempVal += widthDifference * fillUp;
+          }
+          const width = "calc(".concat(tempWidth, "% + ").concat(tempVal, "px)");
+          Object.assign(tempEvent, { width });
+        }
+        Object.assign(tempEvent, { isShow: true });
+      }
+      if (targetEvent) {
+        Object.assign(tempEvent, { isSelectedEvent: true });
+      } else {
+        Object.assign(tempEvent, { isSelectedEvent: false });
+      }
+      if (legendIndex !== -1 && legends.value[legendIndex].isShow || legendIndex === -1) {
+        tempArray.push(tempEvent);
+      }
+    });
+    tempColors.clear();
+    return tempArray;
+  };
+  const handleMonthDraw = () => {
+    let days = [];
+    if (isInRange.value) {
+      const [start, end] = props.range;
+      const currentMonthRange = rangeArr(
+        end.date() - start.date() + 1
+      ).map((index) => {
+        const curDate = new Date(
+          start.year(),
+          start.month(),
+          start.date() + index
+        );
+        const curDayEvents = handleCurDayEvent(
+          curDate,
+          props.events,
+          tableTd.value
+        );
+        return {
+          text: start.date() + index,
+          type: "current",
+          events: curDayEvents,
+          curDate: dayjs(curDate)
+        };
+      });
+      let remaining = currentMonthRange.length % 7;
+      remaining = remaining === 0 ? 0 : 7 - remaining;
+      const nextMonthRange = rangeArr(remaining).map(
+        (_, index) => {
+          const curDate = new Date(start.year(), start.month() + 1, index + 1);
+          const curDayEvents = handleCurDayEvent(
+            curDate,
+            props.events,
+            tableTd.value
+          );
+          return {
+            text: index + 1,
+            type: "next",
+            events: curDayEvents,
+            curDate: dayjs(curDate)
+          };
+        }
+      );
+      days = currentMonthRange.concat(nextMonthRange);
+    } else {
+      const firstDay = props.date.startOf("month").day();
+      const prevMonthDays = getPrevMonthLastDays(
+        props.date,
+        (firstDay - firstDayOfWeek + 7) % 7
+      ).map((day) => {
+        const curDate = new Date(
+          props.date.year(),
+          props.date.month() - 1,
+          day
+        );
+        const curDayEvents = handleCurDayEvent(
+          curDate,
+          props.events,
+          tableTd.value
+        );
+        return {
+          text: day,
+          type: "prev",
+          events: curDayEvents,
+          curDate: dayjs(curDate)
+        };
+      });
+      const currentMonthDays = getMonthDays(props.date).map(
+        (day) => {
+          const curDate = new Date(props.date.year(), props.date.month(), day);
+          const curDayEvents = handleCurDayEvent(
+            curDate,
+            props.events,
+            tableTd.value
+          );
+          return {
+            text: day,
+            type: "current",
+            events: curDayEvents,
+            curDate: dayjs(curDate)
+          };
+        }
+      );
+      days = [...prevMonthDays, ...currentMonthDays];
+      const remaining = 7 - (days.length % 7 || 7);
+      const nextMonthDays = rangeArr(remaining).map(
+        (_, index) => {
+          const curDate = new Date(
+            props.date.year(),
+            props.date.month() + 1,
+            index + 1
+          );
+          const curDayEvents = handleCurDayEvent(
+            curDate,
+            props.events,
+            tableTd.value
+          );
+          return {
+            text: index + 1,
+            type: "next",
+            events: curDayEvents,
+            curDate: dayjs(curDate)
+          };
+        }
+      );
+      days = days.concat(nextMonthDays);
+    }
+    rows.value = toNestedArr(days);
+  };
+  const getFormattedDate = (day, type) => {
+    switch (type) {
+      case "prev":
+        return props.date.startOf("month").subtract(1, "month").date(day);
+      case "next":
+        return props.date.startOf("month").add(1, "month").date(day);
+      case "current":
+        return props.date.date(day);
+      default:
+        return null;
+    }
+  };
+  const handlePickDay = ({ text, type }) => {
+    const date = getFormattedDate(text, type);
+    selectedDay.value = date;
+    if (type === "prev" || type === "next") {
+      emit("pickEvent", date);
+    }
+  };
+  const getSlotData = ({ text, type, events }) => {
+    const day = getFormattedDate(text, type);
+    return {
+      isSelected: day.isSame(props.selectedDay),
+      type: "".concat(type, "-month"),
+      day: day.format("YYYY-MM-DD"),
+      date: day.toDate(),
+      events
+    };
+  };
+  const getCellClass = ({ text, type }) => {
+    const classes = [type];
+    if (type === "current") {
+      const date = getFormattedDate(text, type);
+      if (date.isSame(selectedDay.value, "day")) {
+        classes.push("is-selected");
+      }
+      if (date.isSame(now, "day")) {
+        classes.push("is-today");
+      }
+    }
+    return classes;
+  };
+  const eventClick = async (item, location) => {
+    const res = await handleEVentClick(
+      item,
+      location,
+      props.events,
+      multiple.value,
+      selectedData.value,
+      emit
+    );
+    const { tempSelectedData } = res;
+    selectedData.value = tempSelectedData;
+    handleMonthDraw();
+  };
+  const handleEventsMoreData = (cell) => {
+    let events = clone(cell.events);
+    const { curDate } = cell;
+    const tempEvents = [];
+    events = events.splice(3, events.length);
+    events.forEach((event) => {
+      if (curDate && isDateRange(new Date(curDate), event) || isToday(event.beginTime, event.endTime)) {
+        tempEvents.push(event);
+      }
+    });
+    return tempEvents;
+  };
+  return {
+    isInRange,
+    rows,
+    weekDays,
+    hideHeader,
+    tableTd,
+    legends,
+    selectedDay,
+    selectedData,
+    popVisible,
+    getFormattedDate,
+    handlePickDay,
+    getSlotData,
+    getCellClass,
+    eventClick,
+    handleMonthDraw,
+    handleEventsMoreData
+  };
+};
+
+export { useCalendarMonth };

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

@@ -0,0 +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:12px 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;line-height:30px;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)}}

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

@@ -0,0 +1,18 @@
+import './calendar-week.scss';
+export declare const CalendarWeek: import("vue").DefineComponent<IParams, {
+    ns: import("@ibiz-template/core").Namespace;
+    calendarWeek: 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: 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;
+    onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
+}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}>;

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

@@ -0,0 +1,241 @@
+import { ref, watch, onMounted, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+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({
+  name: "CalendarWeek",
+  props: calendarWeekProps,
+  emits: calendarWeekEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = useNamespace("calendar-week");
+    const {
+      drawData,
+      resizableHand,
+      rows,
+      weekDays,
+      curTimeTimer,
+      calendarWeek,
+      selectedData,
+      legends,
+      rowsHeader,
+      popVisible,
+      eventClick,
+      handleDrag,
+      handleDragStart,
+      handleCurTime,
+      initDrawData,
+      handleUIEvents
+    } = useCalendarWeek(props, emit);
+    const hoverItem = ref("");
+    props.controller._evt.on("onActive", () => {
+      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
+    });
+    watch(() => props.legends, () => {
+      legends.value = props.legends || [];
+      handleUIEvents();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    watch(() => props.events, () => {
+      handleUIEvents();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    onMounted(() => {
+      handleCurTime();
+      drawData.value = initDrawData();
+      curTimeTimer.value = setInterval(() => handleCurTime(), 1e3);
+    });
+    onUnmounted(() => {
+      const timer = curTimeTimer.value;
+      if (timer) {
+        clearInterval(timer);
+        curTimeTimer.value = null;
+      }
+    });
+    const onMouseenter = (event) => {
+      hoverItem.value = String(event.id);
+      popVisible.value = true;
+    };
+    const onMouseleavee = () => {
+      hoverItem.value = "";
+      popVisible.value = false;
+    };
+    const renderEventItem = (location, eventBoxStyle, eventContentStyle, event, index, slotNme, classEName) => {
+      var _a;
+      return createVNode("div", {
+        "key": index,
+        "class": [ns.em(classEName, "event-box")],
+        "style": eventBoxStyle,
+        "onMouseenter": () => onMouseenter(event),
+        "onMouseleave": onMouseleavee
+      }, [createVNode("button", {
+        "class": [ns.em(classEName, "event-content"), event.isSelectedEvent ? "is-selected-event" : "", event.classname],
+        "onClick": () => eventClick(event, "head"),
+        "style": eventContentStyle
+      }, [slots[slotNme] ? (_a = slots[slotNme]) == null ? void 0 : _a.call(slots, {
+        data: event
+      }) : createVNode("div", {
+        "class": [ns.em(classEName, "event-summary"), event.classname],
+        "title": location === "header" ? "".concat(event.text || "", " ").concat(event.timeRange || "") : ""
+      }, [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")]
+      }, [event.text])]), location === "header" && event.isSelectedEvent ? createVNode("span", {
+        "class": ["fa fa-check", ns.em(classEName, "check")]
+      }, null) : ""])]);
+    };
+    const renderPopover = (content, event) => {
+      if (!props.controller.state.showDetail) {
+        return content;
+      }
+      return createVNode(resolveComponent("el-popover"), {
+        "visible": popVisible.value && event.id === hoverItem.value,
+        "show-after": 1e3,
+        "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")],
+        "ref": (el) => {
+          resizableHand.value = el;
+        }
+      }, [createVNode("div", {
+        "class": [ns.em("header", "dates")]
+      }, [createVNode("div", {
+        "class": [ns.em("header", "date-cell-first")]
+      }, null), weekDays.value.map((weekDay) => createVNode("div", {
+        "class": [ns.em("header", "date-cell")]
+      }, [createVNode("div", {
+        "class": [ns.em("header", "date-week")]
+      }, [weekDay.caption]), createVNode("div", {
+        "class": [ns.em("header", "date-day"), weekDay.isActivate ? "is-today" : ""]
+      }, [weekDay.day])]))]), createVNode("div", {
+        "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", {
+        "class": [ns.em("header", "event-cell")]
+      }, [item.map((event, index) => {
+        const eventBoxStyle = {
+          top: "".concat(Number(index * 26) + 2, "px"),
+          left: "".concat(event.styleLeft),
+          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", {
+        "class": ns.em("header", "resizable-handle"),
+        "draggable": "true",
+        "onDrag": (event) => handleDrag(event),
+        "onDragstart": (event) => handleDragStart(event)
+      }, [createVNode("div", {
+        "class": ns.em("header", "resize-line")
+      }, null)])]);
+    };
+    const renderContent = () => {
+      return createVNode("div", {
+        "class": [ns.e("scroll-area")]
+      }, [createVNode("div", {
+        "class": ns.e("time-pane")
+      }, [createVNode("div", {
+        "class": ns.em("time-pane", "time-labels")
+      }, [drawData.value.map((timescale) => createVNode("div", {
+        "key": timescale,
+        "class": [ns.em("time-pane", "time-label")]
+      }, [timescale]))]), rows.value.map((item) => createVNode("div", {
+        "class": ns.em("time-pane", "time-columns")
+      }, [drawData.value.map((timescale, index) => createVNode("div", {
+        "key": timescale,
+        "class": [ns.em("time-pane", "time-column"), index === drawData.value.length - 1 && ns.em("time-pane", "time-column-last")]
+      }, null)), createVNode("div", {
+        "class": ns.em("time-pane", "event-timed-container")
+      }, [createVNode("div", {
+        "class": ns.em("time-pane", "container-scroll")
+      }, [item.map((event, index) => {
+        const eventBoxStyle = {
+          top: "".concat(event.styleTop, "px"),
+          left: "".concat(event.styleLeft),
+          height: "".concat(event.height, "px"),
+          width: "".concat(event.width),
+          "min-height": "".concat(event.height, "px"),
+          "z-index": event.zIndex
+        };
+        const eventContentStyle = {
+          background: event.bkColorFade,
+          "border-left": "3px solid ".concat(event.bkColor),
+          color: event.color
+        };
+        const tempContent = renderEventItem("content", eventBoxStyle, eventContentStyle, event, index, "", "time-pane");
+        return renderPopover(tempContent, event);
+      })])])]))])]);
+    };
+    return {
+      ns,
+      calendarWeek,
+      renderHeader,
+      renderContent
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": (el) => {
+        this.calendarWeek = el;
+      },
+      "class": this.ns.b()
+    }, [this.renderHeader(), this.renderContent()]);
+  }
+});
+
+export { CalendarWeek };

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

@@ -0,0 +1,18 @@
+export declare const IBizCalendarWeek: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<IParams, {
+    ns: import("@ibiz-template/core").Namespace;
+    calendarWeek: 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: 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;
+    onPick?: ((value: import("dayjs").Dayjs) => any) | undefined;
+}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}>>;
+export default IBizCalendarWeek;

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

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