Calendar.mjs 13 KB

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