Calendar.js 17 KB

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