@ibiz-template/mob-vue3-components 0.0.1-alpha.19

package/es/node_modules/.pnpm/vue3-hash-calendar@1.1.3_vue@3.3.8/node_modules/vue3-hash-calendar/es/Calendar.mjs

@@ -0,0 +1,562 @@
+import { ref, computed, watch, createVNode, Fragment, mergeProps, defineComponent } from 'vue';
+import './constant/index.mjs';
+import './utils/index.mjs';
+import stdin_default$1 from './language/index.mjs';
+import './hooks/index.mjs';
+import stdin_default$2 from './CalendarDate.mjs';
+import stdin_default$3 from './CalendarTime.mjs';
+import stdin_default$4 from './CalendarYearMonth.mjs';
+import { truthProp, makeStringProp, makeDateProp, makeNumberProp, makeArrayProp } from './utils/props.mjs';
+import { transDateToYearMonthDay, compareDay, getToday, getPrevDay, getNextDay, transDateToHourMinute, transHourMinuteToDate, transYearMontDayToDate, formatDate, calcMiddleDay, fillNumber, pick } from './utils/basic.mjs';
+import { useExpose } from './hooks/use-expose.mjs';
+import { useMountedOrActivated } from './hooks/use-mounted-or-activated.mjs';
+import { ARROW_DOWN_IMG, ARROW_UP_IMG } from './constant/img.mjs';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const calendarProps = {
+  themeColor: {
+    type: Object,
+    default: () => ({})
+  },
+  changeYearFast: Boolean,
+  showArrow: Boolean,
+  showWeekView: Boolean,
+  visible: Boolean,
+  disabledWeekView: Boolean,
+  showAction: truthProp,
+  pickerType: makeStringProp("datetime"),
+  selectType: makeStringProp("single"),
+  defaultYearMonth: {
+    type: Object,
+    default: {}
+  },
+  allowSameDay: Boolean,
+  showTodayButton: truthProp,
+  defaultDatetime: [Date, Array],
+  minDate: makeDateProp(null),
+  maxDate: makeDateProp(null),
+  maxRange: makeNumberProp(0),
+  format: makeStringProp(""),
+  model: makeStringProp("inline"),
+  markType: makeStringProp("dot"),
+  markDate: makeArrayProp(),
+  disabledDate: {
+    type: Function,
+    default: () => false
+  },
+  disabledTime: {
+    type: Function,
+    default: () => false
+  },
+  lang: makeStringProp("CN"),
+  scrollChangeDate: truthProp,
+  minuteStep: makeNumberProp(1),
+  weekStart: makeStringProp("Sunday"),
+  disabledScroll: {
+    type: [Boolean, String],
+    default: () => false
+  },
+  showNotCurrentMonthDay: truthProp,
+  firstDayOfMonthClassName: makeStringProp(""),
+  todayClassName: makeStringProp(""),
+  checkedDayClassName: makeStringProp(""),
+  notCurrentMonthDayClassName: makeStringProp(""),
+  disabledClassName: makeStringProp("")
+};
+var stdin_default = defineComponent({
+  name: "VueHashCalendar",
+  props: calendarProps,
+  emits: ["update:visible", "update:showWeekView", "calendarTypeChange", "click", "confirm", "change", "overRange", "slidechange", "touchstart", "touchmove", "touchend"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const calendarRef = ref();
+    const isShowCalendar = ref(true);
+    const isShowWeek = ref(props.showWeekView);
+    const calendarBodyHeight = ref(0);
+    const firstTimes = ref(true);
+    const currentYearMonth = ref({
+      year: new Date().getFullYear(),
+      month: new Date().getMonth()
+    });
+    const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
+      if (minDate && compareDay(transDateToYearMonthDay(date), transDateToYearMonthDay(minDate)) === -1) {
+        return minDate;
+      }
+      if (maxDate && compareDay(transDateToYearMonthDay(date), transDateToYearMonthDay(maxDate)) === 1) {
+        return maxDate;
+      }
+      return date;
+    };
+    const getInitialDateTime = (defaultDatetime = props.defaultDatetime) => {
+      const {
+        selectType,
+        minDate,
+        maxDate,
+        allowSameDay
+      } = props;
+      if (defaultDatetime === null)
+        return defaultDatetime;
+      const nowDate = getToday();
+      const nowDatetime = new Date();
+      if (selectType === "range") {
+        if (!Array.isArray(defaultDatetime)) {
+          defaultDatetime = [];
+        }
+        const start = limitDateRange(defaultDatetime[0] || nowDate, minDate, allowSameDay ? maxDate : getPrevDay(transDateToYearMonthDay(maxDate)));
+        const end = limitDateRange(defaultDatetime[1] || nowDate, allowSameDay ? minDate : getNextDay(transDateToYearMonthDay(minDate)));
+        return [start, end];
+      }
+      if (selectType === "multiple") {
+        if (Array.isArray(defaultDatetime)) {
+          return defaultDatetime.map((date) => limitDateRange(date));
+        }
+        return [limitDateRange(nowDate)];
+      }
+      if (!defaultDatetime || Array.isArray(defaultDatetime)) {
+        defaultDatetime = nowDatetime;
+      }
+      return limitDateRange(defaultDatetime);
+    };
+    const currDateTime = ref(getInitialDateTime());
+    const checkedDate = ref([transDateToHourMinute(new Date())]);
+    const yearMonthType = ref("date");
+    const isShowDatetimePicker = computed({
+      get() {
+        return props.model === "inline" ? true : props.visible;
+      },
+      set(val) {
+        emit("update:visible", val);
+      }
+    });
+    const isShowArrowImg = computed(() => props.showArrow && props.model === "inline");
+    const calendarContentHeight = computed(() => {
+      if (props.pickerType === "time") {
+        return 245;
+      }
+      return calendarBodyHeight.value;
+    });
+    const slideChange = (direction) => {
+      emit("slidechange", direction);
+    };
+    const toggleWeek = () => {
+      isShowWeek.value = !isShowWeek.value;
+      if (isShowWeek.value)
+        slideChange("up");
+      else
+        slideChange("down");
+    };
+    const today = () => {
+      var _a;
+      if (props.disabledDate(new Date()))
+        return;
+      (_a = calendarRef.value) == null ? void 0 : _a.today();
+    };
+    const reset = (date = getInitialDateTime()) => {
+      currDateTime.value = date;
+    };
+    const lastMonth = () => {
+      var _a;
+      (_a = calendarRef.value) == null ? void 0 : _a.getLastMonth();
+    };
+    const nextMonth = () => {
+      var _a;
+      (_a = calendarRef.value) == null ? void 0 : _a.getNextMonth();
+    };
+    const lastWeek = () => {
+      var _a, _b;
+      (_a = calendarRef.value) == null ? void 0 : _a.getLastMonth();
+      (_b = calendarRef.value) == null ? void 0 : _b.changeWeekView({
+        isNext: false
+      });
+    };
+    const nextWeek = () => {
+      var _a, _b;
+      (_a = calendarRef.value) == null ? void 0 : _a.getNextMonth();
+      (_b = calendarRef.value) == null ? void 0 : _b.changeWeekView({
+        isNext: true
+      });
+    };
+    const dateChange = (date) => {
+      if (props.selectType === "single") {
+        checkedDate.value = [__spreadValues(__spreadValues({}, checkedDate.value[0]), date[0])];
+      } else {
+        checkedDate.value = date;
+      }
+    };
+    const dateClick = (date) => {
+      if (!date.day)
+        return;
+      let fDate;
+      if (props.selectType === "single") {
+        const checked = checkedDate.value[0];
+        date.minutes = checked.minutes;
+        date.hours = checked.hours;
+        fDate = transHourMinuteToDate(date);
+      } else {
+        fDate = transYearMontDayToDate(date);
+      }
+      currDateTime.value = new Date(fDate);
+      if (props.format) {
+        fDate = formatDate(fDate, props.format, props.lang);
+      }
+      emit("click", fDate);
+    };
+    const yearMonthClick = (date, type) => {
+      if (type) {
+        switch (type) {
+          case "yearRange":
+            yearMonthType.value = "year";
+            break;
+          case "year":
+            yearMonthType.value = "month";
+            break;
+          case "month":
+            yearMonthType.value = "date";
+            break;
+        }
+        emit("calendarTypeChange", yearMonthType.value);
+      }
+      currentYearMonth.value = {
+        year: date.year,
+        month: date.month
+      };
+      dateClick(date);
+      if (props.selectType === "single") {
+        const {
+          day,
+          hours,
+          minutes
+        } = checkedDate.value[0];
+        let emitDate = transHourMinuteToDate(__spreadProps(__spreadValues({}, currentYearMonth.value), {
+          day,
+          hours,
+          minutes
+        }));
+        if (props.format) {
+          emitDate = formatDate(emitDate, props.format, props.lang);
+        }
+        emit("change", emitDate);
+      }
+    };
+    const timeChange = (date) => {
+      const {
+        minutes,
+        hours
+      } = date;
+      const checked = checkedDate.value[0];
+      checkedDate.value = [__spreadProps(__spreadValues({}, checked), {
+        minutes,
+        hours
+      })];
+    };
+    const close = () => {
+      isShowDatetimePicker.value = false;
+    };
+    const makeEmitDate = () => {
+      const dateArr = checkedDate.value.map((item) => {
+        let date = transYearMontDayToDate(item);
+        if (props.selectType === "single") {
+          date = transHourMinuteToDate(item);
+        }
+        if (props.format) {
+          return formatDate(date, props.format, props.lang);
+        }
+        return date;
+      });
+      if (props.selectType === "single") {
+        return dateArr[0];
+      }
+      return dateArr;
+    };
+    const confirm = () => {
+      emit("confirm", makeEmitDate());
+      if (props.model === "dialog") {
+        close();
+      }
+    };
+    const formatDatetime = (time, format) => formatDate(time, format, props.lang);
+    const showYearMonthPicker = () => {
+      if (!props.changeYearFast)
+        return;
+      if (yearMonthType.value === "date") {
+        yearMonthType.value = "month";
+      } else if (yearMonthType.value === "month") {
+        yearMonthType.value = "year";
+      } else if (yearMonthType.value === "year") {
+        yearMonthType.value = "yearRange";
+      } else {
+        yearMonthType.value = "date";
+      }
+      emit("calendarTypeChange", yearMonthType.value);
+    };
+    const showCalendar = () => {
+      if (isShowCalendar.value) {
+        showYearMonthPicker();
+      } else {
+        emit("calendarTypeChange", "date");
+      }
+      isShowCalendar.value = true;
+    };
+    const showTime = () => {
+      isShowCalendar.value = false;
+      emit("calendarTypeChange", "time");
+      yearMonthType.value = "date";
+    };
+    const heightChange = (height) => {
+      if (!firstTimes.value && props.model === "dialog")
+        return;
+      calendarBodyHeight.value = height;
+      firstTimes.value = false;
+    };
+    const getThemeColor = () => {
+      const cssVar = {};
+      if (props.themeColor) {
+        const themeColorKeys = Object.keys(props.themeColor || {});
+        if (themeColorKeys.length) {
+          themeColorKeys.forEach((k) => {
+            cssVar[`--hash-calendar-${k}`] = props.themeColor[k];
+          });
+        }
+      }
+      return cssVar;
+    };
+    const touchStart = (event) => {
+      emit("touchstart", event);
+    };
+    const touchMove = (event) => {
+      emit("touchmove", event);
+    };
+    const touchEnd = (event) => {
+      emit("touchend", event);
+    };
+    watch(checkedDate, () => {
+      const emitDate = makeEmitDate();
+      if (props.selectType === "range" && Array.isArray(emitDate) && emitDate.length === 1) {
+        return;
+      }
+      emit("change", emitDate);
+    }, {
+      deep: true
+    });
+    watch(() => props.showWeekView, (val) => {
+      isShowWeek.value = val;
+    });
+    watch(() => [props.selectType, props.minDate, props.maxDate], () => {
+      if (props.selectType === "single") {
+        reset(getInitialDateTime());
+      } else {
+        reset(getInitialDateTime(currDateTime.value));
+      }
+    });
+    useExpose({
+      today,
+      reset,
+      lastMonth,
+      nextMonth,
+      lastWeek,
+      nextWeek
+    });
+    const init = () => {
+      const date = currDateTime.value;
+      if (!date) {
+        checkedDate.value = [];
+      } else if (date instanceof Date) {
+        currentYearMonth.value = {
+          year: date.getFullYear(),
+          month: date.getMonth()
+        };
+        checkedDate.value = [transDateToHourMinute(date)];
+      } else if (Array.isArray(date)) {
+        if (props.selectType === "range") {
+          const dateArr = calcMiddleDay([__spreadProps(__spreadValues({}, transDateToHourMinute(date[0])), {
+            type: "start"
+          }), __spreadProps(__spreadValues({}, transDateToHourMinute(date[1])), {
+            type: "end"
+          })]);
+          checkedDate.value = dateArr.map((item) => transDateToHourMinute(transYearMontDayToDate(item)));
+        } else {
+          checkedDate.value = date.map((item) => transDateToHourMinute(item));
+        }
+      }
+      if (props.pickerType === "time") {
+        showTime();
+      } else {
+        isShowCalendar.value = true;
+      }
+    };
+    useMountedOrActivated(init);
+    const renderTodayButton = () => {
+      let todayEle = stdin_default$1[props.lang].TODAY;
+      if (slots.today) {
+        todayEle = slots.today();
+      }
+      if (props.showTodayButton) {
+        return createVNode("div", {
+          "class": `calendar_confirm ${props.disabledDate(new Date()) ? "today_disable" : ""}`,
+          "onClick": today
+        }, [todayEle]);
+      }
+    };
+    const renderConfirmButton = () => {
+      let confirmEle = stdin_default$1[props.lang].CONFIRM;
+      if (slots.confirm) {
+        confirmEle = slots.confirm();
+      }
+      if (props.model === "dialog") {
+        return createVNode("div", {
+          "class": "calendar_confirm",
+          "onClick": confirm
+        }, [confirmEle]);
+      }
+    };
+    const renderAction = () => {
+      let timeText = "";
+      const {
+        year,
+        month
+      } = currentYearMonth.value;
+      let dateText = formatDatetime(`${year}/${month + 1}`, stdin_default$1[props.lang].DEFAULT_YEAR_MONTH_FORMAT);
+      if (props.selectType === "single") {
+        const {
+          day,
+          hours,
+          minutes
+        } = checkedDate.value[0];
+        timeText = formatDatetime(`${year}/${month + 1}/${day} ${fillNumber(hours)}:${fillNumber(minutes)}`, stdin_default$1[props.lang].DEFAULT_TIME_FORMAT);
+        dateText = formatDatetime(`${year}/${month + 1}/${day}`, stdin_default$1[props.lang].DEFAULT_DATE_FORMAT);
+      }
+      if (props.showAction) {
+        return createVNode("div", {
+          "class": "calendar_title",
+          "onClick": (e) => {
+            if (e.cancelable)
+              e.preventDefault();
+            e.stopPropagation();
+          },
+          "style": {
+            bottom: props.model === "dialog" ? `${calendarContentHeight.value}px` : "unset"
+          }
+        }, [slots.action ? slots.action() : createVNode(Fragment, null, [createVNode("div", {
+          "class": "calendar_title_date"
+        }, [props.pickerType !== "time" ? createVNode("span", {
+          "class": `calendar_title_date_year ${isShowCalendar.value ? "calendar_title_date_active" : ""}`,
+          "onClick": showCalendar
+        }, [dateText]) : null, props.pickerType !== "date" && props.selectType === "single" ? createVNode("span", {
+          "class": `calendar_title_date_time ${!isShowCalendar.value ? "calendar_title_date_active" : ""}`,
+          "onClick": showTime
+        }, [timeText]) : null]), renderTodayButton(), renderConfirmButton()])]);
+      }
+      return null;
+    };
+    const updateShowWeekView = (val) => {
+      if (isShowWeek.value === val)
+        return;
+      if (val) {
+        emit("calendarTypeChange", "week");
+      } else {
+        emit("calendarTypeChange", "date");
+      }
+      isShowWeek.value = val;
+    };
+    const yearMonthChange = (yearMonth) => {
+      currentYearMonth.value = yearMonth;
+    };
+    const renderCalendar = () => createVNode(stdin_default$2, mergeProps({
+      "ref": calendarRef,
+      "show": isShowCalendar.value,
+      "onHeight": heightChange,
+      "defaultDate": currDateTime.value,
+      "onTouchstart": touchStart,
+      "onTouchmove": touchMove,
+      "onTouchend": touchEnd,
+      "onSlidechange": slideChange,
+      "onYearMonthChange": yearMonthChange,
+      "onChange": dateChange,
+      "onOverRange": () => emit("overRange"),
+      "onClick": dateClick,
+      "showWeekView": isShowWeek.value,
+      "onUpdate:showWeekView": updateShowWeekView
+    }, pick(props, ["minDate", "maxDate", "maxRange", "disabledWeekView", "markType", "selectType", "allowSameDay", "defaultYearMonth", "markDate", "disabledDate", "lang", "weekStart", "disabledScroll", "scrollChangeDate", "showNotCurrentMonthDay", "firstDayOfMonthClassName", "todayClassName", "checkedDayClassName", "notCurrentMonthDayClassName", "disabledClassName"])), pick(slots, ["week", "day"]));
+    const renderTimePicker = () => {
+      if (props.pickerType === "datetime" || props.pickerType === "time") {
+        return createVNode(stdin_default$3, mergeProps({
+          "show": !isShowCalendar.value,
+          "defaultTime": currDateTime.value,
+          "calendarDate": checkedDate.value[0],
+          "onChange": timeChange
+        }, pick(props, ["minuteStep", "disabledTime"])), null);
+      }
+    };
+    const renderYearMonthPicker = () => createVNode(stdin_default$4, mergeProps({
+      "calendarContentHeight": calendarContentHeight.value,
+      "currentYearMonth": currentYearMonth.value,
+      "type": yearMonthType.value,
+      "onTouchstart": touchStart,
+      "onTouchmove": touchMove,
+      "onTouchend": touchEnd,
+      "onSlidechange": slideChange,
+      "onClick": yearMonthClick
+    }, pick(props, ["minDate", "maxDate", "disabledDate", "lang", "disabledScroll", "checkedDayClassName", "notCurrentMonthDayClassName", "disabledClassName"])), null);
+    const renderCtrlImg = () => {
+      let confirmEle = createVNode("img", {
+        "src": isShowWeek.value ? ARROW_DOWN_IMG : ARROW_UP_IMG
+      }, null);
+      if (slots.arrow) {
+        confirmEle = slots.arrow({
+          isShowWeek: isShowWeek.value
+        });
+      }
+      if (isShowArrowImg.value) {
+        return createVNode("div", {
+          "class": "ctrl-img",
+          "onClick": toggleWeek,
+          "style": {
+            "margin-top": props.model === "dialog" ? `${calendarContentHeight.value}px` : "unset"
+          }
+        }, [confirmEle]);
+      }
+    };
+    const renderHashCalendar = () => {
+      if (isShowDatetimePicker.value || props.model === "inline") {
+        return createVNode("div", {
+          "class": `hash-calendar ${props.model === "inline" ? "calendar_inline" : ""}`,
+          "style": __spreadValues({}, getThemeColor()),
+          "onClick": close
+        }, [renderAction(), createVNode("div", {
+          "class": "calendar_content",
+          "style": {
+            height: `${calendarContentHeight.value}px`
+          },
+          "onClick": (e) => {
+            if (e.cancelable)
+              e.preventDefault();
+            e.stopImmediatePropagation();
+          }
+        }, [props.pickerType !== "time" ? renderCalendar() : "", props.selectType === "single" && renderTimePicker(), props.changeYearFast ? renderYearMonthPicker() : ""]), renderCtrlImg()]);
+      }
+    };
+    return () => renderHashCalendar();
+  }
+});
+
+export { calendarProps, stdin_default as default };