CalendarMonth.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  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. default: () => stdin_default
  31. });
  32. module.exports = __toCommonJS(stdin_exports);
  33. var import_vue = require("vue");
  34. var import_utils = require("../utils");
  35. var import_utils2 = require("../date-picker/utils");
  36. var import_utils3 = require("./utils");
  37. var import_use = require("@vant/use");
  38. var import_use_expose = require("../composables/use-expose");
  39. var import_use_height = require("../composables/use-height");
  40. var import_CalendarDay = __toESM(require("./CalendarDay"));
  41. const [name] = (0, import_utils.createNamespace)("calendar-month");
  42. const calendarMonthProps = {
  43. date: (0, import_utils.makeRequiredProp)(Date),
  44. type: String,
  45. color: String,
  46. minDate: Date,
  47. maxDate: Date,
  48. showMark: Boolean,
  49. rowHeight: import_utils.numericProp,
  50. formatter: Function,
  51. lazyRender: Boolean,
  52. currentDate: [Date, Array],
  53. allowSameDay: Boolean,
  54. showSubtitle: Boolean,
  55. showMonthTitle: Boolean,
  56. firstDayOfWeek: Number
  57. };
  58. var stdin_default = (0, import_vue.defineComponent)({
  59. name,
  60. props: calendarMonthProps,
  61. emits: ["click", "clickDisabledDate"],
  62. setup(props, {
  63. emit,
  64. slots
  65. }) {
  66. const [visible, setVisible] = (0, import_use.useToggle)();
  67. const daysRef = (0, import_vue.ref)();
  68. const monthRef = (0, import_vue.ref)();
  69. const height = (0, import_use_height.useHeight)(monthRef);
  70. const title = (0, import_vue.computed)(() => (0, import_utils3.formatMonthTitle)(props.date));
  71. const rowHeight = (0, import_vue.computed)(() => (0, import_utils.addUnit)(props.rowHeight));
  72. const offset = (0, import_vue.computed)(() => {
  73. const date = props.date.getDate();
  74. const day = props.date.getDay();
  75. const realDay = (day - date % 7 + 8) % 7;
  76. if (props.firstDayOfWeek) {
  77. return (realDay + 7 - props.firstDayOfWeek) % 7;
  78. }
  79. return realDay;
  80. });
  81. const totalDay = (0, import_vue.computed)(() => (0, import_utils2.getMonthEndDay)(props.date.getFullYear(), props.date.getMonth() + 1));
  82. const shouldRender = (0, import_vue.computed)(() => visible.value || !props.lazyRender);
  83. const getTitle = () => title.value;
  84. const getMultipleDayType = (day) => {
  85. const isSelected = (date) => props.currentDate.some((item) => (0, import_utils3.compareDay)(item, date) === 0);
  86. if (isSelected(day)) {
  87. const prevDay = (0, import_utils3.getPrevDay)(day);
  88. const nextDay = (0, import_utils3.getNextDay)(day);
  89. const prevSelected = isSelected(prevDay);
  90. const nextSelected = isSelected(nextDay);
  91. if (prevSelected && nextSelected) {
  92. return "multiple-middle";
  93. }
  94. if (prevSelected) {
  95. return "end";
  96. }
  97. if (nextSelected) {
  98. return "start";
  99. }
  100. return "multiple-selected";
  101. }
  102. return "";
  103. };
  104. const getRangeDayType = (day) => {
  105. const [startDay, endDay] = props.currentDate;
  106. if (!startDay) {
  107. return "";
  108. }
  109. const compareToStart = (0, import_utils3.compareDay)(day, startDay);
  110. if (!endDay) {
  111. return compareToStart === 0 ? "start" : "";
  112. }
  113. const compareToEnd = (0, import_utils3.compareDay)(day, endDay);
  114. if (props.allowSameDay && compareToStart === 0 && compareToEnd === 0) {
  115. return "start-end";
  116. }
  117. if (compareToStart === 0) {
  118. return "start";
  119. }
  120. if (compareToEnd === 0) {
  121. return "end";
  122. }
  123. if (compareToStart > 0 && compareToEnd < 0) {
  124. return "middle";
  125. }
  126. return "";
  127. };
  128. const getDayType = (day) => {
  129. const {
  130. type,
  131. minDate,
  132. maxDate,
  133. currentDate
  134. } = props;
  135. if (minDate && (0, import_utils3.compareDay)(day, minDate) < 0 || maxDate && (0, import_utils3.compareDay)(day, maxDate) > 0) {
  136. return "disabled";
  137. }
  138. if (currentDate === null) {
  139. return "";
  140. }
  141. if (Array.isArray(currentDate)) {
  142. if (type === "multiple") {
  143. return getMultipleDayType(day);
  144. }
  145. if (type === "range") {
  146. return getRangeDayType(day);
  147. }
  148. } else if (type === "single") {
  149. return (0, import_utils3.compareDay)(day, currentDate) === 0 ? "selected" : "";
  150. }
  151. return "";
  152. };
  153. const getBottomInfo = (dayType) => {
  154. if (props.type === "range") {
  155. if (dayType === "start" || dayType === "end") {
  156. return (0, import_utils3.t)(dayType);
  157. }
  158. if (dayType === "start-end") {
  159. return `${(0, import_utils3.t)("start")}/${(0, import_utils3.t)("end")}`;
  160. }
  161. }
  162. };
  163. const renderTitle = () => {
  164. if (props.showMonthTitle) {
  165. return (0, import_vue.createVNode)("div", {
  166. "class": (0, import_utils3.bem)("month-title")
  167. }, [slots["month-title"] ? slots["month-title"]({
  168. date: props.date,
  169. text: title.value
  170. }) : title.value]);
  171. }
  172. };
  173. const renderMark = () => {
  174. if (props.showMark && shouldRender.value) {
  175. return (0, import_vue.createVNode)("div", {
  176. "class": (0, import_utils3.bem)("month-mark")
  177. }, [props.date.getMonth() + 1]);
  178. }
  179. };
  180. const placeholders = (0, import_vue.computed)(() => {
  181. const count = Math.ceil((totalDay.value + offset.value) / 7);
  182. return Array(count).fill({
  183. type: "placeholder"
  184. });
  185. });
  186. const days = (0, import_vue.computed)(() => {
  187. const days2 = [];
  188. const year = props.date.getFullYear();
  189. const month = props.date.getMonth();
  190. for (let day = 1; day <= totalDay.value; day++) {
  191. const date = new Date(year, month, day);
  192. const type = getDayType(date);
  193. let config = {
  194. date,
  195. type,
  196. text: day,
  197. bottomInfo: getBottomInfo(type)
  198. };
  199. if (props.formatter) {
  200. config = props.formatter(config);
  201. }
  202. days2.push(config);
  203. }
  204. return days2;
  205. });
  206. const disabledDays = (0, import_vue.computed)(() => days.value.filter((day) => day.type === "disabled"));
  207. const scrollToDate = (body, targetDate) => {
  208. if (daysRef.value) {
  209. const daysRect = (0, import_use.useRect)(daysRef.value);
  210. const totalRows = placeholders.value.length;
  211. const currentRow = Math.ceil((targetDate.getDate() + offset.value) / 7);
  212. const rowOffset = (currentRow - 1) * daysRect.height / totalRows;
  213. (0, import_utils.setScrollTop)(body, daysRect.top + rowOffset + body.scrollTop - (0, import_use.useRect)(body).top);
  214. }
  215. };
  216. const renderDay = (item, index) => (0, import_vue.createVNode)(import_CalendarDay.default, {
  217. "item": item,
  218. "index": index,
  219. "color": props.color,
  220. "offset": offset.value,
  221. "rowHeight": rowHeight.value,
  222. "onClick": (item2) => emit("click", item2),
  223. "onClickDisabledDate": (item2) => emit("clickDisabledDate", item2)
  224. }, (0, import_utils.pick)(slots, ["top-info", "bottom-info", "text"]));
  225. const renderDays = () => (0, import_vue.createVNode)("div", {
  226. "ref": daysRef,
  227. "role": "grid",
  228. "class": (0, import_utils3.bem)("days")
  229. }, [renderMark(), (shouldRender.value ? days : placeholders).value.map(renderDay)]);
  230. (0, import_use_expose.useExpose)({
  231. getTitle,
  232. getHeight: () => height.value,
  233. setVisible,
  234. scrollToDate,
  235. disabledDays
  236. });
  237. return () => (0, import_vue.createVNode)("div", {
  238. "class": (0, import_utils3.bem)("month"),
  239. "ref": monthRef
  240. }, [renderTitle(), renderDays()]);
  241. }
  242. });