Calendar.js 15 KB

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