Calendar.mjs 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. import { ref, watch, computed, defineComponent, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. import { pick, isDate, truthProp, numericProp, getScrollTop, makeStringProp, makeNumericProp } from "../utils/index.mjs";
  3. import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset, getMonthByOffset } from "./utils.mjs";
  4. import { raf, useRect, onMountedOrActivated } from "@vant/use";
  5. import { useRefs } from "../composables/use-refs.mjs";
  6. import { useExpose } from "../composables/use-expose.mjs";
  7. import { Popup } from "../popup/index.mjs";
  8. import { Button } from "../button/index.mjs";
  9. import { showToast } from "../toast/index.mjs";
  10. import CalendarMonth from "./CalendarMonth.mjs";
  11. import CalendarHeader from "./CalendarHeader.mjs";
  12. const calendarProps = {
  13. show: Boolean,
  14. type: makeStringProp("single"),
  15. switchMode: makeStringProp("none"),
  16. title: String,
  17. color: String,
  18. round: truthProp,
  19. readonly: Boolean,
  20. poppable: truthProp,
  21. maxRange: makeNumericProp(null),
  22. position: makeStringProp("bottom"),
  23. teleport: [String, Object],
  24. showMark: truthProp,
  25. showTitle: truthProp,
  26. formatter: Function,
  27. rowHeight: numericProp,
  28. confirmText: String,
  29. rangePrompt: String,
  30. lazyRender: truthProp,
  31. showConfirm: truthProp,
  32. defaultDate: [Date, Array],
  33. allowSameDay: Boolean,
  34. showSubtitle: truthProp,
  35. closeOnPopstate: truthProp,
  36. showRangePrompt: truthProp,
  37. confirmDisabledText: String,
  38. closeOnClickOverlay: truthProp,
  39. safeAreaInsetTop: Boolean,
  40. safeAreaInsetBottom: truthProp,
  41. minDate: {
  42. type: Date,
  43. validator: isDate
  44. },
  45. maxDate: {
  46. type: Date,
  47. validator: isDate
  48. },
  49. firstDayOfWeek: {
  50. type: numericProp,
  51. default: 0,
  52. validator: (val) => val >= 0 && val <= 6
  53. }
  54. };
  55. var stdin_default = defineComponent({
  56. name,
  57. props: calendarProps,
  58. emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle", "clickDisabledDate", "panelChange"],
  59. setup(props, {
  60. emit,
  61. slots
  62. }) {
  63. const canSwitch = computed(() => props.switchMode !== "none");
  64. const minDate = computed(() => {
  65. if (!props.minDate && !canSwitch.value) {
  66. return getToday();
  67. }
  68. return props.minDate;
  69. });
  70. const maxDate = computed(() => {
  71. if (!props.maxDate && !canSwitch.value) {
  72. return getMonthByOffset(getToday(), 6);
  73. }
  74. return props.maxDate;
  75. });
  76. const limitDateRange = (date, min = minDate.value, max = maxDate.value) => {
  77. if (min && compareDay(date, min) === -1) {
  78. return min;
  79. }
  80. if (max && compareDay(date, max) === 1) {
  81. return max;
  82. }
  83. return date;
  84. };
  85. const getInitialDate = (defaultDate = props.defaultDate) => {
  86. const {
  87. type,
  88. allowSameDay
  89. } = props;
  90. if (defaultDate === null) {
  91. return defaultDate;
  92. }
  93. const now = getToday();
  94. if (type === "range") {
  95. if (!Array.isArray(defaultDate)) {
  96. defaultDate = [];
  97. }
  98. if (defaultDate.length === 1 && compareDay(defaultDate[0], now) === 1) {
  99. defaultDate = [];
  100. }
  101. const min = minDate.value;
  102. const max = maxDate.value;
  103. const start = limitDateRange(defaultDate[0] || now, min, max ? allowSameDay ? max : getPrevDay(max) : void 0);
  104. const end = limitDateRange(defaultDate[1] || (allowSameDay ? now : getNextDay(now)), min ? allowSameDay ? min : getNextDay(min) : void 0);
  105. return [start, end];
  106. }
  107. if (type === "multiple") {
  108. if (Array.isArray(defaultDate)) {
  109. return defaultDate.map((date) => limitDateRange(date));
  110. }
  111. return [limitDateRange(now)];
  112. }
  113. if (!defaultDate || Array.isArray(defaultDate)) {
  114. defaultDate = now;
  115. }
  116. return limitDateRange(defaultDate);
  117. };
  118. const getInitialPanelDate = () => {
  119. const date = Array.isArray(currentDate.value) ? currentDate.value[0] : currentDate.value;
  120. return date ? date : limitDateRange(getToday());
  121. };
  122. let bodyHeight;
  123. const bodyRef = ref();
  124. const currentDate = ref(getInitialDate());
  125. const currentPanelDate = ref(getInitialPanelDate());
  126. const currentMonthRef = ref();
  127. const [monthRefs, setMonthRefs] = useRefs();
  128. const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
  129. const months = computed(() => {
  130. const months2 = [];
  131. if (!minDate.value || !maxDate.value) {
  132. return months2;
  133. }
  134. const cursor = new Date(minDate.value);
  135. cursor.setDate(1);
  136. do {
  137. months2.push(new Date(cursor));
  138. cursor.setMonth(cursor.getMonth() + 1);
  139. } while (compareMonth(cursor, maxDate.value) !== 1);
  140. return months2;
  141. });
  142. const buttonDisabled = computed(() => {
  143. if (currentDate.value) {
  144. if (props.type === "range") {
  145. return !currentDate.value[0] || !currentDate.value[1];
  146. }
  147. if (props.type === "multiple") {
  148. return !currentDate.value.length;
  149. }
  150. }
  151. return !currentDate.value;
  152. });
  153. const getSelectedDate = () => currentDate.value;
  154. const onScroll = () => {
  155. const top = getScrollTop(bodyRef.value);
  156. const bottom = top + bodyHeight;
  157. const heights = months.value.map((item, index) => monthRefs.value[index].getHeight());
  158. const heightSum = heights.reduce((a, b) => a + b, 0);
  159. if (bottom > heightSum && top > 0) {
  160. return;
  161. }
  162. let height = 0;
  163. let currentMonth;
  164. const visibleRange = [-1, -1];
  165. for (let i = 0; i < months.value.length; i++) {
  166. const month = monthRefs.value[i];
  167. const visible = height <= bottom && height + heights[i] >= top;
  168. if (visible) {
  169. visibleRange[1] = i;
  170. if (!currentMonth) {
  171. currentMonth = month;
  172. visibleRange[0] = i;
  173. }
  174. if (!monthRefs.value[i].showed) {
  175. monthRefs.value[i].showed = true;
  176. emit("monthShow", {
  177. date: month.date,
  178. title: month.getTitle()
  179. });
  180. }
  181. }
  182. height += heights[i];
  183. }
  184. months.value.forEach((month, index) => {
  185. const visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
  186. monthRefs.value[index].setVisible(visible);
  187. });
  188. if (currentMonth) {
  189. currentMonthRef.value = currentMonth;
  190. }
  191. };
  192. const scrollToDate = (targetDate) => {
  193. if (canSwitch.value) {
  194. currentPanelDate.value = targetDate;
  195. } else {
  196. raf(() => {
  197. months.value.some((month, index) => {
  198. if (compareMonth(month, targetDate) === 0) {
  199. if (bodyRef.value) {
  200. monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
  201. }
  202. return true;
  203. }
  204. return false;
  205. });
  206. onScroll();
  207. });
  208. }
  209. };
  210. const scrollToCurrentDate = () => {
  211. if (props.poppable && !props.show) {
  212. return;
  213. }
  214. if (currentDate.value) {
  215. const targetDate = props.type === "single" ? currentDate.value : currentDate.value[0];
  216. if (isDate(targetDate)) {
  217. scrollToDate(targetDate);
  218. }
  219. } else if (!canSwitch.value) {
  220. raf(onScroll);
  221. }
  222. };
  223. const init = () => {
  224. if (props.poppable && !props.show) {
  225. return;
  226. }
  227. if (!canSwitch.value) {
  228. raf(() => {
  229. bodyHeight = Math.floor(useRect(bodyRef).height);
  230. });
  231. }
  232. scrollToCurrentDate();
  233. };
  234. const reset = (date = getInitialDate()) => {
  235. currentDate.value = date;
  236. scrollToCurrentDate();
  237. };
  238. const checkRange = (date) => {
  239. const {
  240. maxRange,
  241. rangePrompt,
  242. showRangePrompt
  243. } = props;
  244. if (maxRange && calcDateNum(date) > +maxRange) {
  245. if (showRangePrompt) {
  246. showToast(rangePrompt || t("rangePrompt", maxRange));
  247. }
  248. emit("overRange");
  249. return false;
  250. }
  251. return true;
  252. };
  253. const onPanelChange = (date) => {
  254. currentPanelDate.value = date;
  255. emit("panelChange", {
  256. date
  257. });
  258. };
  259. const onConfirm = () => {
  260. var _a;
  261. return emit("confirm", (_a = currentDate.value) != null ? _a : cloneDates(currentDate.value));
  262. };
  263. const select = (date, complete) => {
  264. const setCurrentDate = (date2) => {
  265. currentDate.value = date2;
  266. emit("select", cloneDates(date2));
  267. };
  268. if (complete && props.type === "range") {
  269. const valid = checkRange(date);
  270. if (!valid) {
  271. setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
  272. return;
  273. }
  274. }
  275. setCurrentDate(date);
  276. if (complete && !props.showConfirm) {
  277. onConfirm();
  278. }
  279. };
  280. const getDisabledDate = (disabledDays2, startDay, date) => {
  281. var _a;
  282. return (_a = disabledDays2.find((day) => compareDay(startDay, day.date) === -1 && compareDay(day.date, date) === -1)) == null ? void 0 : _a.date;
  283. };
  284. const disabledDays = computed(() => monthRefs.value.reduce((arr, ref2) => {
  285. var _a, _b;
  286. arr.push(...(_b = (_a = ref2.disabledDays) == null ? void 0 : _a.value) != null ? _b : []);
  287. return arr;
  288. }, []));
  289. const onClickDay = (item) => {
  290. if (props.readonly || !item.date) {
  291. return;
  292. }
  293. const {
  294. date
  295. } = item;
  296. const {
  297. type
  298. } = props;
  299. if (type === "range") {
  300. if (!currentDate.value) {
  301. select([date]);
  302. return;
  303. }
  304. const [startDay, endDay] = currentDate.value;
  305. if (startDay && !endDay) {
  306. const compareToStart = compareDay(date, startDay);
  307. if (compareToStart === 1) {
  308. const disabledDay = getDisabledDate(disabledDays.value, startDay, date);
  309. if (disabledDay) {
  310. const endDay2 = getPrevDay(disabledDay);
  311. if (compareDay(startDay, endDay2) === -1) {
  312. select([startDay, endDay2]);
  313. } else {
  314. select([date]);
  315. }
  316. } else {
  317. select([startDay, date], true);
  318. }
  319. } else if (compareToStart === -1) {
  320. select([date]);
  321. } else if (props.allowSameDay) {
  322. select([date, date], true);
  323. }
  324. } else {
  325. select([date]);
  326. }
  327. } else if (type === "multiple") {
  328. if (!currentDate.value) {
  329. select([date]);
  330. return;
  331. }
  332. const dates = currentDate.value;
  333. const selectedIndex = dates.findIndex((dateItem) => compareDay(dateItem, date) === 0);
  334. if (selectedIndex !== -1) {
  335. const [unselectedDate] = dates.splice(selectedIndex, 1);
  336. emit("unselect", cloneDate(unselectedDate));
  337. } else if (props.maxRange && dates.length >= +props.maxRange) {
  338. showToast(props.rangePrompt || t("rangePrompt", props.maxRange));
  339. } else {
  340. select([...dates, date]);
  341. }
  342. } else {
  343. select(date, true);
  344. }
  345. };
  346. const updateShow = (value) => emit("update:show", value);
  347. const renderMonth = (date, index) => {
  348. const showMonthTitle = index !== 0 || !props.showSubtitle;
  349. return _createVNode(CalendarMonth, _mergeProps({
  350. "ref": canSwitch.value ? currentMonthRef : setMonthRefs(index),
  351. "date": date,
  352. "currentDate": currentDate.value,
  353. "showMonthTitle": showMonthTitle,
  354. "firstDayOfWeek": dayOffset.value,
  355. "lazyRender": canSwitch.value ? false : props.lazyRender,
  356. "maxDate": maxDate.value,
  357. "minDate": minDate.value
  358. }, pick(props, ["type", "color", "showMark", "formatter", "rowHeight", "showSubtitle", "allowSameDay"]), {
  359. "onClick": onClickDay,
  360. "onClickDisabledDate": (item) => emit("clickDisabledDate", item)
  361. }), pick(slots, ["top-info", "bottom-info", "month-title", "text"]));
  362. };
  363. const renderFooterButton = () => {
  364. if (slots.footer) {
  365. return slots.footer();
  366. }
  367. if (props.showConfirm) {
  368. const slot = slots["confirm-text"];
  369. const disabled = buttonDisabled.value;
  370. const text = disabled ? props.confirmDisabledText : props.confirmText;
  371. return _createVNode(Button, {
  372. "round": true,
  373. "block": true,
  374. "type": "primary",
  375. "color": props.color,
  376. "class": bem("confirm"),
  377. "disabled": disabled,
  378. "nativeType": "button",
  379. "onClick": onConfirm
  380. }, {
  381. default: () => [slot ? slot({
  382. disabled
  383. }) : text || t("confirm")]
  384. });
  385. }
  386. };
  387. const renderFooter = () => _createVNode("div", {
  388. "class": [bem("footer"), {
  389. "van-safe-area-bottom": props.safeAreaInsetBottom
  390. }]
  391. }, [renderFooterButton()]);
  392. const renderCalendar = () => {
  393. var _a, _b;
  394. return _createVNode("div", {
  395. "class": bem()
  396. }, [_createVNode(CalendarHeader, {
  397. "date": (_a = currentMonthRef.value) == null ? void 0 : _a.date,
  398. "maxDate": maxDate.value,
  399. "minDate": minDate.value,
  400. "title": props.title,
  401. "subtitle": (_b = currentMonthRef.value) == null ? void 0 : _b.getTitle(),
  402. "showTitle": props.showTitle,
  403. "showSubtitle": props.showSubtitle,
  404. "switchMode": props.switchMode,
  405. "firstDayOfWeek": dayOffset.value,
  406. "onClickSubtitle": (event) => emit("clickSubtitle", event),
  407. "onPanelChange": onPanelChange
  408. }, pick(slots, ["title", "subtitle", "prev-month", "prev-year", "next-month", "next-year"])), _createVNode("div", {
  409. "ref": bodyRef,
  410. "class": bem("body"),
  411. "onScroll": canSwitch.value ? void 0 : onScroll
  412. }, [canSwitch.value ? renderMonth(currentPanelDate.value, 0) : months.value.map(renderMonth)]), renderFooter()]);
  413. };
  414. watch(() => props.show, init);
  415. watch(() => [props.type, props.minDate, props.maxDate, props.switchMode], () => reset(getInitialDate(currentDate.value)));
  416. watch(() => props.defaultDate, (value) => {
  417. reset(value);
  418. });
  419. useExpose({
  420. reset,
  421. scrollToDate,
  422. getSelectedDate
  423. });
  424. onMountedOrActivated(init);
  425. return () => {
  426. if (props.poppable) {
  427. return _createVNode(Popup, {
  428. "show": props.show,
  429. "class": bem("popup"),
  430. "round": props.round,
  431. "position": props.position,
  432. "closeable": props.showTitle || props.showSubtitle,
  433. "teleport": props.teleport,
  434. "closeOnPopstate": props.closeOnPopstate,
  435. "safeAreaInsetTop": props.safeAreaInsetTop,
  436. "closeOnClickOverlay": props.closeOnClickOverlay,
  437. "onUpdate:show": updateShow
  438. }, {
  439. default: renderCalendar
  440. });
  441. }
  442. return renderCalendar();
  443. };
  444. }
  445. });
  446. export {
  447. calendarProps,
  448. stdin_default as default
  449. };