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

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

@@ -0,0 +1,285 @@
+'use strict';
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var vue3Util = require('@ibiz-template/vue3-util');
+var index$2 = require('../calendar-daily/index.cjs');
+var index$1 = require('../calendar-week/index.cjs');
+var index = require('../calendar-month/index.cjs');
+var useCustomCalendar = require('./use-custom-calendar.cjs');
+require('./custom-calendar.css');
+require('../interface/index.cjs');
+var customCalendar = require('../interface/custom-calendar.cjs');
+
+"use strict";
+const CustomCalendar = /* @__PURE__ */ vue.defineComponent({
+  name: "CustomCalendar",
+  props: customCalendar.customCalendarProps,
+  emits: customCalendar.customCalendarEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = vue3Util.useNamespace("custom-calendar");
+    const {
+      date,
+      events,
+      i18nDate,
+      shortcuts,
+      viewType,
+      validatedRange,
+      realSelectedDay,
+      curWeek,
+      legends,
+      multiple,
+      selectedData,
+      pickDay,
+      handleEVentClick,
+      handleEVentDblClick,
+      selectDate,
+      selectLegend
+    } = useCustomCalendar.useCustomCalendar(props, emit, "custom-calendar");
+    vue.onMounted(() => {
+      pickDay(dayjs(/* @__PURE__ */ new Date()));
+    });
+    const renderMonth = () => {
+      var _a;
+      return vue.createVNode("div", {
+        "class": [ns.e("calendar-month")]
+      }, [(slots == null ? void 0 : slots.header) ? vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "header")]
+      }, [(_a = slots == null ? void 0 : slots.header) == null ? void 0 : _a.call(slots, {
+        date: i18nDate.value,
+        legends: legends.value
+      })]) : vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "header")]
+      }, [vue.createVNode("div", {
+        "class": [ns.em("header", "title")]
+      }, [i18nDate.value]), vue.createVNode("div", {
+        "class": ns.em("calendar-month", "legend")
+      }, [legends.value.length > 1 && legends.value.map((legend) => {
+        return vue.createVNode("div", {
+          "class": ns.em("calendar-month", "legend-item"),
+          "onClick": () => selectLegend(legend)
+        }, [vue.createVNode("div", {
+          "class": ns.em("calendar-month", "legend-item-tip"),
+          "style": {
+            background: legend.isShow ? legend.bkcolor : "#CCCCCC"
+          }
+        }, null), vue.createVNode("div", {
+          "class": ns.em("calendar-month", "legend-item-text"),
+          "style": {
+            color: legend.isShow ? legend.color : "#CCCCCC"
+          },
+          "title": legend.name
+        }, [legend.name])]);
+      })]), validatedRange.value.length === 0 && vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "button-group")]
+      }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+        "modelValue": realSelectedDay.value,
+        "onUpdate:modelValue": ($event) => realSelectedDay.value = $event,
+        "type": "month"
+      }, null), vue.createVNode(vue.resolveComponent("el-button-group"), null, {
+        default: () => [vue.createVNode(vue.resolveComponent("el-button"), {
+          "size": "small",
+          "onClick": () => {
+            selectDate("prev-year");
+          }
+        }, {
+          default: () => [vue.createTextVNode("\u53BB\u5E74")]
+        }), vue.createVNode(vue.resolveComponent("el-button"), {
+          "size": "small",
+          "onClick": () => {
+            selectDate("prev-month");
+          }
+        }, {
+          default: () => [vue.createTextVNode("\u4E0A\u4E2A\u6708")]
+        }), vue.createVNode(vue.resolveComponent("el-button"), {
+          "size": "small",
+          "onClick": () => {
+            selectDate("today");
+          }
+        }, {
+          default: () => [vue.createTextVNode("\u4ECA\u5929")]
+        }), vue.createVNode(vue.resolveComponent("el-button"), {
+          "size": "small",
+          "onClick": () => {
+            selectDate("next-month");
+          }
+        }, {
+          default: () => [vue.createTextVNode("\u4E0B\u4E2A\u6708")]
+        }), vue.createVNode(vue.resolveComponent("el-button"), {
+          "size": "small",
+          "onClick": () => {
+            selectDate("next-year");
+          }
+        }, {
+          default: () => [vue.createTextVNode("\u660E\u5E74")]
+        })]
+      })])]), validatedRange.value.length === 0 ? vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "body")]
+      }, [vue.createVNode(index.IBizCalendarMonth, {
+        "date": date.value,
+        "controller": props.controller,
+        "selected-day": realSelectedDay.value,
+        "events": events.value,
+        "legends": legends.value,
+        "multiple": multiple.value,
+        "selectedData": selectedData.value,
+        "onPickEvent": (day) => pickDay(day),
+        "onEventClick": (value) => handleEVentClick(value),
+        "onEventDblClick": (value) => handleEVentDblClick(value)
+      }, slots)]) : vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "body")]
+      }, [validatedRange.value.map((item, index$1) => {
+        return vue.createVNode(index.IBizCalendarMonth, {
+          "date": item[0],
+          "controller": props.controller,
+          "selected-day": realSelectedDay.value,
+          "range": item,
+          "hide-header": index$1 !== 0,
+          "onPickEvent": (day) => pickDay(day),
+          "events": events.value,
+          "legends": legends.value,
+          "multiple": multiple.value,
+          "selectedData": selectedData.value,
+          "onEventClick": (value) => handleEVentClick(value),
+          "onEventDblClick": (value) => handleEVentDblClick(value)
+        }, slots);
+      })])]);
+    };
+    const renderWeek = () => {
+      var _a;
+      return vue.createVNode("div", {
+        "class": [ns.e("calendar-week")]
+      }, [(slots == null ? void 0 : slots.header) ? vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "header")]
+      }, [(_a = slots == null ? void 0 : slots.header) == null ? void 0 : _a.call(slots, {
+        date: dayjs(realSelectedDay.value).format("YYYY-MM-DD"),
+        legends: legends.value
+      })]) : vue.createVNode("div", {
+        "class": [ns.em("calendar-week", "header")]
+      }, [vue.createVNode("div", {
+        "class": ns.em("calendar-week", "header-top")
+      }, [vue.createVNode("div", {
+        "class": ns.em("calendar-week", "title")
+      }, [props.controller.state.calendarTitle || ibiz.i18n.t("control.calendar.title")]), vue.createVNode("div", {
+        "class": ns.em("calendar-week", "legend")
+      }, [legends.value.length > 1 && legends.value.map((item) => {
+        return vue.createVNode("div", {
+          "class": ns.em("calendar-week", "legend-item"),
+          "onClick": () => selectLegend(item)
+        }, [vue.createVNode("div", {
+          "class": ns.em("calendar-week", "legend-item-tip"),
+          "style": {
+            background: item.isShow ? item.bkcolor : "#CCCCCC"
+          }
+        }, null), vue.createVNode("div", {
+          "class": ns.em("calendar-week", "legend-item-text"),
+          "style": {
+            color: item.isShow ? item.color : "#CCCCCC"
+          },
+          "title": item.name
+        }, [item.name])]);
+      })]), vue.createVNode("div", {
+        "class": ns.em("calendar-week", "select-time")
+      }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+        "modelValue": realSelectedDay.value,
+        "onUpdate:modelValue": ($event) => realSelectedDay.value = $event,
+        "type": "date",
+        "placeholder": "\u9009\u62E9\u65E5\u671F",
+        "shortcuts": shortcuts
+      }, null)])])]), vue.createVNode(index$1.IBizCalendarWeek, {
+        "selected-day": realSelectedDay.value,
+        "controller": props.controller,
+        "events": events.value,
+        "legends": legends.value,
+        "multiple": multiple.value,
+        "selectedData": selectedData.value,
+        "onEventClick": (value) => handleEVentClick(value),
+        "onEventDblClick": (value) => handleEVentDblClick(value)
+      }, slots)]);
+    };
+    const renderDay = () => {
+      var _a;
+      return vue.createVNode("div", {
+        "class": [ns.e("calendar-week")]
+      }, [(slots == null ? void 0 : slots.header) ? vue.createVNode("div", {
+        "class": [ns.em("calendar-month", "header")]
+      }, [(_a = slots == null ? void 0 : slots.header) == null ? void 0 : _a.call(slots, {
+        date: dayjs(realSelectedDay.value).format("YYYY-MM-DD"),
+        legends: legends.value
+      })]) : vue.createVNode("div", {
+        "class": [ns.em("calendar-week", "header")]
+      }, [vue.createVNode("div", {
+        "class": ns.em("calendar-week", "header-top")
+      }, [vue.createVNode("div", {
+        "class": ns.em("calendar-week", "title")
+      }, [props.controller.state.calendarTitle || ibiz.i18n.t("control.calendar.title")]), vue.createVNode("div", {
+        "class": ns.em("calendar-week", "legend")
+      }, [legends.value.length > 1 && legends.value.map((item) => {
+        return vue.createVNode("div", {
+          "class": ns.em("calendar-week", "legend-item"),
+          "onClick": () => selectLegend(item)
+        }, [vue.createVNode("div", {
+          "class": ns.em("calendar-week", "legend-item-tip"),
+          "style": {
+            background: item.isShow ? item.bkcolor : "#CCCCCC"
+          }
+        }, null), vue.createVNode("div", {
+          "class": ns.em("calendar-week", "legend-item-text"),
+          "style": {
+            color: item.isShow ? item.color : "#CCCCCC"
+          },
+          "title": item.name
+        }, [item.name])]);
+      })]), vue.createVNode("div", {
+        "class": ns.em("calendar-week", "select-time")
+      }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
+        "modelValue": realSelectedDay.value,
+        "onUpdate:modelValue": ($event) => realSelectedDay.value = $event,
+        "type": "date",
+        "placeholder": "\u9009\u62E9\u65E5\u671F",
+        "shortcuts": shortcuts
+      }, null)])]), vue.createVNode("div", {
+        "class": ns.em("calendar-week", "text-secondary")
+      }, [curWeek.value])]), vue.createVNode(index$2.IBizCalendarDaily, {
+        "selected-day": realSelectedDay.value,
+        "controller": props.controller,
+        "events": events.value,
+        "legends": legends.value,
+        "multiple": multiple.value,
+        "selectedData": selectedData.value,
+        "onEventClick": (value) => handleEVentClick(value),
+        "onEventDblClick": (value) => handleEVentDblClick(value)
+      }, slots)]);
+    };
+    const renderContent = () => {
+      switch (viewType.value) {
+        case "MONTH":
+          return renderMonth();
+        case "DAY":
+          return renderDay();
+        case "WEEK":
+          return renderWeek();
+        default:
+          return null;
+      }
+    };
+    return {
+      ns,
+      date,
+      validatedRange,
+      pickDay,
+      selectDate,
+      renderContent
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [this.renderContent()]);
+  }
+});
+
+exports.CustomCalendar = CustomCalendar;

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

@@ -0,0 +1 @@
+.ibiz-custom-calendar{width:100%;height:100%}.ibiz-custom-calendar__calendar-day{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;min-height:900px;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-day--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-day--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-day--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-day--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-day--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-day--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-day--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-day--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-day--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-week{display:flex;flex-direction:column;width:100%;min-width:380px;height:100%;border:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header{padding:0 40px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-week--header-top{display:flex;align-items:center;justify-content:space-between;height:70px}.ibiz-custom-calendar__calendar-week--title{min-width:80px;font-size:20px}.ibiz-custom-calendar__calendar-week--text-secondary{height:56px;line-height:56px;text-align:left}.ibiz-custom-calendar__calendar-week--select-time{width:130px;height:32px}.ibiz-custom-calendar__calendar-week--select-time .el-input__suffix{display:none}.ibiz-custom-calendar__calendar-week--legend{display:flex;flex-grow:1;align-items:center;justify-content:center;height:100%;overflow:auto}.ibiz-custom-calendar__calendar-week--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-week--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-week--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month{display:flex;flex-direction:column;width:100%;height:100%}.ibiz-custom-calendar__calendar-month--body{flex-grow:1;width:100%;height:calc(100% - 58px)}.ibiz-custom-calendar__calendar-month--legend{display:flex;align-items:center;justify-content:center;width:auto;height:100%}.ibiz-custom-calendar__calendar-month--legend-item{display:flex;align-items:center;width:auto;height:auto;padding:0 3px;cursor:pointer}.ibiz-custom-calendar__calendar-month--legend-item-tip{display:inline-block;width:26px;height:14px;margin-right:6px;border-radius:4px}.ibiz-custom-calendar__calendar-month--legend-item-text{display:inline-block;width:auto;max-width:100px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-custom-calendar__calendar-month--header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:12px 20px;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-calendar__calendar-month--button-group{display:flex;align-items:center;justify-content:space-between;width:388px}.ibiz-custom-calendar__header--title{min-width:120px}.ibiz-custom-calendar .el-date-editor.el-input,.ibiz-custom-calendar .el-date-editor.el-input__wrapper{width:130px;height:32px}

package/lib/control/calendar/components/custom-calendar/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue3Util = require('@ibiz-template/vue3-util');
+var customCalendar = require('./custom-calendar.cjs');
+
+"use strict";
+const IBizCustomCalendar = vue3Util.withInstall(
+  customCalendar.CustomCalendar,
+  function(v) {
+    v.component(customCalendar.CustomCalendar.name, customCalendar.CustomCalendar);
+  }
+);
+
+exports.IBizCustomCalendar = IBizCustomCalendar;
+exports.default = IBizCustomCalendar;

package/lib/control/calendar/components/custom-calendar/use-custom-calendar.cjs

@@ -0,0 +1,266 @@
+'use strict';
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var ElementPlus = require('element-plus');
+require('../util/index.cjs');
+require('../constant/index.cjs');
+var util = require('../util/util.cjs');
+var event = require('../constant/event.cjs');
+
+"use strict";
+const adjacentMonth = (start, end) => {
+  const firstMonthLastDay = start.endOf("month");
+  const lastMonthFirstDay = end.startOf("month");
+  const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, "week");
+  const lastMonthStartDay = isSameWeek ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
+  return [
+    [start, firstMonthLastDay],
+    [lastMonthStartDay.startOf("week"), end]
+  ];
+};
+const threeConsecutiveMonth = (start, end) => {
+  const firstMonthLastDay = start.endOf("month");
+  const secondMonthFirstDay = start.add(1, "month").startOf("month");
+  const secondMonthStartDay = firstMonthLastDay.isSame(
+    secondMonthFirstDay,
+    "week"
+  ) ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
+  const secondMonthLastDay = secondMonthStartDay.endOf("month");
+  const lastMonthFirstDay = end.startOf("month");
+  const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
+  return [
+    [start, firstMonthLastDay],
+    [secondMonthStartDay.startOf("week"), secondMonthLastDay],
+    [lastMonthStartDay.startOf("week"), end]
+  ];
+};
+const useCustomCalendar = (props, emit, _componentName) => {
+  const { lang } = ElementPlus.useLocale();
+  const selectedDay = vue.ref();
+  const now = dayjs().locale(lang.value);
+  const tempRealSelectedDay = vue.ref();
+  const viewType = vue.computed(() => props.viewType);
+  const legends = vue.ref([]);
+  const tempColors = /* @__PURE__ */ new Map();
+  const multiple = vue.computed(() => props.multiple === true);
+  const selectedData = vue.computed(() => props.selectedData);
+  vue.watch(
+    () => props.legends,
+    (newVal) => {
+      const tempLegend = [];
+      if (newVal) {
+        props.legends.forEach((item) => {
+          const tempItem = {};
+          Object.assign(tempItem, item);
+          Object.assign(tempItem, { isShow: true });
+          if (item && !item.bkcolor) {
+            const bkcolor = util.handleBkColor(tempColors, item.id);
+            Object.assign(tempItem, { bkcolor });
+          }
+          tempLegend.push(tempItem);
+        });
+      }
+      legends.value = tempLegend;
+    },
+    { immediate: true, deep: true }
+  );
+  const calculateValidatedDateRange = (startDayjs, endDayjs) => {
+    const firstDay = startDayjs.startOf("week");
+    const lastDay = endDayjs.endOf("week");
+    const firstMonth = firstDay.get("month");
+    const lastMonth = lastDay.get("month");
+    let dateRange;
+    if (firstMonth === lastMonth) {
+      dateRange = [[firstDay, lastDay]];
+    } else if ((firstMonth + 1) % 12 === lastMonth) {
+      dateRange = adjacentMonth(firstDay, lastDay);
+    } else if (
+      // 连续三个月（兼容时间：2021-01-30至2021-02-28）
+      firstMonth + 2 === lastMonth || (firstMonth + 1) % 11 === lastMonth
+    ) {
+      dateRange = threeConsecutiveMonth(firstDay, lastDay);
+    } else {
+      dateRange = [];
+    }
+    return dateRange;
+  };
+  const validatedRange = vue.computed(() => {
+    if (!props.range)
+      return [];
+    let tempRange = [];
+    const rangeArrDayjs = props.range.map(
+      (item) => dayjs(item).locale(lang.value)
+    );
+    const [startDayjs, endDayjs] = rangeArrDayjs;
+    if (startDayjs.isAfter(endDayjs)) {
+      tempRange = [];
+    }
+    if (startDayjs.isSame(endDayjs, "month")) {
+      tempRange = calculateValidatedDateRange(startDayjs, endDayjs);
+    } else {
+      if (startDayjs.add(1, "month").month() !== endDayjs.month()) {
+        tempRange = [];
+      }
+      tempRange = calculateValidatedDateRange(startDayjs, endDayjs);
+    }
+    return tempRange;
+  });
+  const date = vue.computed(() => {
+    let tempVal;
+    if (!props.modelValue) {
+      tempVal = tempRealSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now);
+    } else {
+      tempVal = dayjs(props.modelValue).locale(lang.value);
+    }
+    return tempVal;
+  });
+  const realSelectedDay = vue.computed({
+    get() {
+      let tempVal = date.value;
+      if (!props.modelValue) {
+        tempVal = selectedDay.value;
+      }
+      tempRealSelectedDay.value = tempVal;
+      return tempVal;
+    },
+    set(val) {
+      if (!val)
+        return;
+      const tempVal = dayjs(val);
+      selectedDay.value = tempVal;
+      const result = tempVal.toDate();
+      emit(event.INPUT_EVENT, result);
+      emit(event.CHANGE_EVENT, result);
+      emit(event.UPDATE_MODEL_EVENT, result);
+    }
+  });
+  const events = vue.computed(() => {
+    if (props.events.length > 0)
+      return props.events.map((event) => {
+        const tempItem = {};
+        Object.assign(tempItem, event);
+        Object.assign(tempItem, {
+          deData: event.deData,
+          beginTime: event.beginTime,
+          endTime: event.endTime,
+          id: event.id,
+          classname: event.classname,
+          text: event.text,
+          content: event.content,
+          tips: event.tips,
+          icon: event.icon,
+          color: event.color,
+          bkColor: event.bkColor,
+          itemType: event.itemType
+        });
+        return tempItem;
+      });
+  });
+  const prevMonthDayjs = vue.computed(
+    () => date.value.subtract(1, "month").date(1)
+  );
+  const nextMonthDayjs = vue.computed(() => date.value.add(1, "month").date(1));
+  const prevYearDayjs = vue.computed(() => date.value.subtract(1, "year").date(1));
+  const nextYearDayjs = vue.computed(() => date.value.add(1, "year").date(1));
+  const pickDay = (day) => {
+    realSelectedDay.value = day;
+  };
+  const selectDate = (type) => {
+    const dateMap = {
+      "prev-month": prevMonthDayjs.value,
+      "next-month": nextMonthDayjs.value,
+      "prev-year": prevYearDayjs.value,
+      "next-year": nextYearDayjs.value,
+      today: now
+    };
+    const day = dateMap[type];
+    if (!day.isSame(date.value, "day")) {
+      pickDay(day);
+    }
+  };
+  const i18nDate = vue.computed(() => {
+    const pickedMonth = "".concat(date.value.format("M"));
+    return "".concat(date.value.year(), " ").concat(ibiz.i18n.t(
+      "control.calendar.year"
+    ), " ").concat(pickedMonth, " ").concat(ibiz.i18n.t("control.calendar.month"));
+  });
+  const shortcuts = [
+    {
+      text: ibiz.i18n.t("control.calendar.today"),
+      value: /* @__PURE__ */ new Date()
+    },
+    {
+      text: ibiz.i18n.t("control.calendar.calendardaily.tomorrow"),
+      value: () => {
+        const tempDate = /* @__PURE__ */ new Date();
+        tempDate.setTime(tempDate.getTime() + 3600 * 1e3 * 24);
+        return tempDate;
+      }
+    },
+    {
+      text: ibiz.i18n.t("control.calendar.calendardaily.nextweek"),
+      value: () => {
+        const tempDate = /* @__PURE__ */ new Date();
+        tempDate.setTime(tempDate.getTime() + 3600 * 1e3 * 24 * 7);
+        return tempDate;
+      }
+    }
+  ];
+  const handleEVentClick = (value) => {
+    emit("eventClick", value);
+  };
+  const handleEVentDblClick = (value) => {
+    emit("eventDblClick", value);
+  };
+  const curWeek = vue.computed(() => {
+    let tempWeek = "";
+    if (realSelectedDay.value) {
+      const curDate = realSelectedDay.value.day();
+      const tempWeeks = [
+        "sunday",
+        "monday",
+        "tuesday",
+        "wednesday",
+        "thursday",
+        "friday",
+        "saturday"
+      ];
+      const weeks = tempWeeks.map((item) => {
+        return ibiz.i18n.t("control.calendar.calendardaily.weeks.".concat(item));
+      });
+      tempWeek = weeks[curDate];
+    }
+    return tempWeek;
+  });
+  const selectLegend = (item) => {
+    const targetLegend = legends.value.find(
+      (legend) => {
+        return item.id === legend.id;
+      }
+    );
+    if (targetLegend)
+      Object.assign(targetLegend, { isShow: !item.isShow });
+  };
+  return {
+    date,
+    viewType,
+    i18nDate,
+    events,
+    shortcuts,
+    validatedRange,
+    realSelectedDay,
+    curWeek,
+    legends,
+    multiple,
+    selectedData,
+    calculateValidatedDateRange,
+    pickDay,
+    selectDate,
+    handleEVentClick,
+    handleEVentDblClick,
+    selectLegend
+  };
+};
+
+exports.useCustomCalendar = useCustomCalendar;

package/lib/control/calendar/components/interface/calendar-daily.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+require('../util/index.cjs');
+var util = require('../util/util.cjs');
+var lodashEs = require('lodash-es');
+
+"use strict";
+const calendarDailyProps = util.handleProps({
+  controller: {
+    type: Object
+  },
+  selectedDay: {
+    type: util.definePropType(Object)
+  },
+  events: {
+    type: Array,
+    default: []
+  },
+  legends: {
+    type: Array,
+    default: []
+  },
+  multiple: {
+    type: Boolean
+  },
+  selectedData: {
+    type: Object
+  }
+});
+const calendarDailyEmits = {
+  pick: (value) => lodashEs.isObject(value),
+  eventClick: (value) => value,
+  eventDblClick: (value) => value
+};
+
+exports.calendarDailyEmits = calendarDailyEmits;
+exports.calendarDailyProps = calendarDailyProps;

package/lib/control/calendar/components/interface/calendar-month.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+require('../util/index.cjs');
+var util = require('../util/util.cjs');
+
+"use strict";
+const calendarMonthProps = util.handleProps({
+  controller: {
+    type: Object
+  },
+  selectedDay: {
+    type: util.definePropType(Object)
+  },
+  range: {
+    type: util.definePropType(Array)
+  },
+  date: {
+    type: util.definePropType(Object),
+    required: true
+  },
+  hideHeader: {
+    type: Boolean
+  },
+  events: {
+    type: Array,
+    default: []
+  },
+  legends: {
+    type: Array,
+    default: []
+  },
+  multiple: {
+    type: Boolean
+  },
+  selectedData: {
+    type: Object
+  }
+});
+const calendarMonthEmits = {
+  pickEvent: (value) => value,
+  eventClick: (value) => value,
+  eventDblClick: (value) => value
+};
+
+exports.calendarMonthEmits = calendarMonthEmits;
+exports.calendarMonthProps = calendarMonthProps;