use-calendar.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
  2. const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
  3. const require_event = require("../../../constants/event.js");
  4. const require_error = require("../../../utils/error.js");
  5. const require_index = require("../../../hooks/use-locale/index.js");
  6. let vue = require("vue");
  7. let dayjs = require("dayjs");
  8. dayjs = require_runtime.__toESM(dayjs);
  9. let _vue_shared = require("@vue/shared");
  10. //#region ../../packages/components/calendar/src/use-calendar.ts
  11. const adjacentMonth = (start, end) => {
  12. const firstMonthLastDay = start.endOf("month");
  13. const lastMonthFirstDay = end.startOf("month");
  14. const lastMonthStartDay = firstMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
  15. return [[start, firstMonthLastDay], [lastMonthStartDay.startOf("week"), end]];
  16. };
  17. const threeConsecutiveMonth = (start, end) => {
  18. const firstMonthLastDay = start.endOf("month");
  19. const secondMonthFirstDay = start.add(1, "month").startOf("month");
  20. const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
  21. const secondMonthLastDay = secondMonthStartDay.endOf("month");
  22. const lastMonthFirstDay = end.startOf("month");
  23. const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
  24. return [
  25. [start, firstMonthLastDay],
  26. [secondMonthStartDay.startOf("week"), secondMonthLastDay],
  27. [lastMonthStartDay.startOf("week"), end]
  28. ];
  29. };
  30. const useCalendar = (props, emit, componentName) => {
  31. const { lang } = require_index.useLocale();
  32. const selectedDay = (0, vue.ref)();
  33. const now = (0, dayjs.default)().locale(lang.value);
  34. const realSelectedDay = (0, vue.computed)({
  35. get() {
  36. if (!props.modelValue) return selectedDay.value;
  37. return date.value;
  38. },
  39. set(val) {
  40. if (!val) return;
  41. selectedDay.value = val;
  42. const result = val.toDate();
  43. emit(require_event.INPUT_EVENT, result);
  44. emit(require_event.UPDATE_MODEL_EVENT, result);
  45. }
  46. });
  47. const validatedRange = (0, vue.computed)(() => {
  48. if (!props.range || !(0, _vue_shared.isArray)(props.range) || props.range.length !== 2 || props.range.some((item) => !(0, _vue_shared.isDate)(item))) return [];
  49. const [startDayjs, endDayjs] = props.range.map((_) => (0, dayjs.default)(_).locale(lang.value));
  50. if (startDayjs.isAfter(endDayjs)) {
  51. require_error.debugWarn(componentName, "end time should be greater than start time");
  52. return [];
  53. }
  54. if (startDayjs.isSame(endDayjs, "month")) return calculateValidatedDateRange(startDayjs, endDayjs);
  55. else {
  56. if (startDayjs.add(1, "month").month() !== endDayjs.month()) {
  57. require_error.debugWarn(componentName, "start time and end time interval must not exceed two months");
  58. return [];
  59. }
  60. return calculateValidatedDateRange(startDayjs, endDayjs);
  61. }
  62. });
  63. const date = (0, vue.computed)(() => {
  64. if (!props.modelValue) return realSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now);
  65. else return (0, dayjs.default)(props.modelValue).locale(lang.value);
  66. });
  67. const prevMonthDayjs = (0, vue.computed)(() => date.value.subtract(1, "month").date(1));
  68. const nextMonthDayjs = (0, vue.computed)(() => date.value.add(1, "month").date(1));
  69. const prevYearDayjs = (0, vue.computed)(() => date.value.subtract(1, "year").date(1));
  70. const nextYearDayjs = (0, vue.computed)(() => date.value.add(1, "year").date(1));
  71. const calculateValidatedDateRange = (startDayjs, endDayjs) => {
  72. const firstDay = startDayjs.startOf("week");
  73. const lastDay = endDayjs.endOf("week");
  74. const firstMonth = firstDay.get("month");
  75. const lastMonth = lastDay.get("month");
  76. if (firstMonth === lastMonth) return [[firstDay, lastDay]];
  77. else if ((firstMonth + 1) % 12 === lastMonth) return adjacentMonth(firstDay, lastDay);
  78. else if (firstMonth + 2 === lastMonth || (firstMonth + 1) % 11 === lastMonth) return threeConsecutiveMonth(firstDay, lastDay);
  79. else {
  80. require_error.debugWarn(componentName, "start time and end time interval must not exceed two months");
  81. return [];
  82. }
  83. };
  84. const pickDay = (day) => {
  85. realSelectedDay.value = day;
  86. };
  87. const selectDate = (type) => {
  88. const day = {
  89. "prev-month": prevMonthDayjs.value,
  90. "next-month": nextMonthDayjs.value,
  91. "prev-year": prevYearDayjs.value,
  92. "next-year": nextYearDayjs.value,
  93. today: now
  94. }[type];
  95. if (!day.isSame(date.value, "day")) pickDay(day);
  96. };
  97. const handleDateChange = (date) => {
  98. if (date === "today") selectDate("today");
  99. else pickDay(date);
  100. };
  101. return {
  102. calculateValidatedDateRange,
  103. date,
  104. realSelectedDay,
  105. pickDay,
  106. selectDate,
  107. validatedRange,
  108. handleDateChange
  109. };
  110. };
  111. //#endregion
  112. exports.useCalendar = useCalendar;
  113. //# sourceMappingURL=use-calendar.js.map