Month.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _utils = require("../../utils");
  5. var _scroll = require("../../utils/dom/scroll");
  6. var _utils2 = require("../utils");
  7. var _utils3 = require("../../datetime-picker/utils");
  8. var _createNamespace = (0, _utils.createNamespace)('calendar-month'),
  9. createComponent = _createNamespace[0];
  10. var _default = createComponent({
  11. props: {
  12. date: Date,
  13. type: String,
  14. color: String,
  15. minDate: Date,
  16. maxDate: Date,
  17. showMark: Boolean,
  18. rowHeight: [Number, String],
  19. formatter: Function,
  20. lazyRender: Boolean,
  21. currentDate: [Date, Array],
  22. allowSameDay: Boolean,
  23. showSubtitle: Boolean,
  24. showMonthTitle: Boolean,
  25. firstDayOfWeek: Number
  26. },
  27. data: function data() {
  28. return {
  29. visible: false
  30. };
  31. },
  32. computed: {
  33. title: function title() {
  34. return (0, _utils2.formatMonthTitle)(this.date);
  35. },
  36. rowHeightWithUnit: function rowHeightWithUnit() {
  37. return (0, _utils.addUnit)(this.rowHeight);
  38. },
  39. offset: function offset() {
  40. var firstDayOfWeek = this.firstDayOfWeek;
  41. var realDay = this.date.getDay();
  42. if (!firstDayOfWeek) {
  43. return realDay;
  44. }
  45. return (realDay + 7 - this.firstDayOfWeek) % 7;
  46. },
  47. totalDay: function totalDay() {
  48. return (0, _utils3.getMonthEndDay)(this.date.getFullYear(), this.date.getMonth() + 1);
  49. },
  50. shouldRender: function shouldRender() {
  51. return this.visible || !this.lazyRender;
  52. },
  53. placeholders: function placeholders() {
  54. var rows = [];
  55. var count = Math.ceil((this.totalDay + this.offset) / 7);
  56. for (var day = 1; day <= count; day++) {
  57. rows.push({
  58. type: 'placeholder'
  59. });
  60. }
  61. return rows;
  62. },
  63. days: function days() {
  64. var days = [];
  65. var year = this.date.getFullYear();
  66. var month = this.date.getMonth();
  67. for (var day = 1; day <= this.totalDay; day++) {
  68. var date = new Date(year, month, day);
  69. var type = this.getDayType(date);
  70. var config = {
  71. date: date,
  72. type: type,
  73. text: day,
  74. bottomInfo: this.getBottomInfo(type)
  75. };
  76. if (this.formatter) {
  77. config = this.formatter(config);
  78. }
  79. days.push(config);
  80. }
  81. return days;
  82. }
  83. },
  84. methods: {
  85. getHeight: function getHeight() {
  86. if (!this.height) {
  87. this.height = this.$el.getBoundingClientRect().height;
  88. }
  89. return this.height;
  90. },
  91. scrollIntoView: function scrollIntoView(body) {
  92. var _this$$refs = this.$refs,
  93. days = _this$$refs.days,
  94. month = _this$$refs.month;
  95. var el = this.showSubtitle ? days : month;
  96. var scrollTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop;
  97. (0, _scroll.setScrollTop)(body, scrollTop);
  98. },
  99. getMultipleDayType: function getMultipleDayType(day) {
  100. var _this = this;
  101. var isSelected = function isSelected(date) {
  102. return _this.currentDate.some(function (item) {
  103. return (0, _utils2.compareDay)(item, date) === 0;
  104. });
  105. };
  106. if (isSelected(day)) {
  107. var prevDay = (0, _utils2.getPrevDay)(day);
  108. var nextDay = (0, _utils2.getNextDay)(day);
  109. var prevSelected = isSelected(prevDay);
  110. var nextSelected = isSelected(nextDay);
  111. if (prevSelected && nextSelected) {
  112. return 'multiple-middle';
  113. }
  114. if (prevSelected) {
  115. return 'end';
  116. }
  117. return nextSelected ? 'start' : 'multiple-selected';
  118. }
  119. return '';
  120. },
  121. getRangeDayType: function getRangeDayType(day) {
  122. var _this$currentDate = this.currentDate,
  123. startDay = _this$currentDate[0],
  124. endDay = _this$currentDate[1];
  125. if (!startDay) {
  126. return '';
  127. }
  128. var compareToStart = (0, _utils2.compareDay)(day, startDay);
  129. if (!endDay) {
  130. return compareToStart === 0 ? 'start' : '';
  131. }
  132. var compareToEnd = (0, _utils2.compareDay)(day, endDay);
  133. if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
  134. return 'start-end';
  135. }
  136. if (compareToStart === 0) {
  137. return 'start';
  138. }
  139. if (compareToEnd === 0) {
  140. return 'end';
  141. }
  142. if (compareToStart > 0 && compareToEnd < 0) {
  143. return 'middle';
  144. }
  145. },
  146. getDayType: function getDayType(day) {
  147. var type = this.type,
  148. minDate = this.minDate,
  149. maxDate = this.maxDate,
  150. currentDate = this.currentDate;
  151. if ((0, _utils2.compareDay)(day, minDate) < 0 || (0, _utils2.compareDay)(day, maxDate) > 0) {
  152. return 'disabled';
  153. }
  154. if (currentDate === null) {
  155. return;
  156. }
  157. if (type === 'single') {
  158. return (0, _utils2.compareDay)(day, currentDate) === 0 ? 'selected' : '';
  159. }
  160. if (type === 'multiple') {
  161. return this.getMultipleDayType(day);
  162. }
  163. /* istanbul ignore else */
  164. if (type === 'range') {
  165. return this.getRangeDayType(day);
  166. }
  167. },
  168. getBottomInfo: function getBottomInfo(type) {
  169. if (this.type === 'range') {
  170. if (type === 'start' || type === 'end') {
  171. return (0, _utils2.t)(type);
  172. }
  173. if (type === 'start-end') {
  174. return (0, _utils2.t)('startEnd');
  175. }
  176. }
  177. },
  178. getDayStyle: function getDayStyle(type, index) {
  179. var style = {
  180. height: this.rowHeightWithUnit
  181. };
  182. if (type === 'placeholder') {
  183. style.width = '100%';
  184. return style;
  185. }
  186. if (index === 0) {
  187. style.marginLeft = 100 * this.offset / 7 + "%";
  188. }
  189. if (this.color) {
  190. if (type === 'start' || type === 'end' || type === 'start-end' || type === 'multiple-selected' || type === 'multiple-middle') {
  191. style.background = this.color;
  192. } else if (type === 'middle') {
  193. style.color = this.color;
  194. }
  195. }
  196. return style;
  197. },
  198. genTitle: function genTitle() {
  199. var h = this.$createElement;
  200. if (this.showMonthTitle) {
  201. return h("div", {
  202. "class": (0, _utils2.bem)('month-title')
  203. }, [this.title]);
  204. }
  205. },
  206. genMark: function genMark() {
  207. var h = this.$createElement;
  208. if (this.showMark && this.shouldRender) {
  209. return h("div", {
  210. "class": (0, _utils2.bem)('month-mark')
  211. }, [this.date.getMonth() + 1]);
  212. }
  213. },
  214. genDays: function genDays() {
  215. var h = this.$createElement;
  216. var days = this.shouldRender ? this.days : this.placeholders;
  217. return h("div", {
  218. "ref": "days",
  219. "attrs": {
  220. "role": "grid"
  221. },
  222. "class": (0, _utils2.bem)('days')
  223. }, [this.genMark(), days.map(this.genDay)]);
  224. },
  225. genDay: function genDay(item, index) {
  226. var _this2 = this;
  227. var h = this.$createElement;
  228. var type = item.type,
  229. topInfo = item.topInfo,
  230. bottomInfo = item.bottomInfo;
  231. var style = this.getDayStyle(type, index);
  232. var disabled = type === 'disabled';
  233. var onClick = function onClick() {
  234. if (!disabled) {
  235. _this2.$emit('click', item);
  236. }
  237. };
  238. var TopInfo = topInfo && h("div", {
  239. "class": (0, _utils2.bem)('top-info')
  240. }, [topInfo]);
  241. var BottomInfo = bottomInfo && h("div", {
  242. "class": (0, _utils2.bem)('bottom-info')
  243. }, [bottomInfo]);
  244. if (type === 'selected') {
  245. return h("div", {
  246. "attrs": {
  247. "role": "gridcell",
  248. "tabindex": -1
  249. },
  250. "style": style,
  251. "class": [(0, _utils2.bem)('day'), item.className],
  252. "on": {
  253. "click": onClick
  254. }
  255. }, [h("div", {
  256. "class": (0, _utils2.bem)('selected-day'),
  257. "style": {
  258. width: this.rowHeightWithUnit,
  259. height: this.rowHeightWithUnit,
  260. background: this.color
  261. }
  262. }, [TopInfo, item.text, BottomInfo])]);
  263. }
  264. return h("div", {
  265. "attrs": {
  266. "role": "gridcell",
  267. "tabindex": disabled ? null : -1
  268. },
  269. "style": style,
  270. "class": [(0, _utils2.bem)('day', type), item.className],
  271. "on": {
  272. "click": onClick
  273. }
  274. }, [TopInfo, item.text, BottomInfo]);
  275. }
  276. },
  277. render: function render() {
  278. var h = arguments[0];
  279. return h("div", {
  280. "class": (0, _utils2.bem)('month'),
  281. "ref": "month"
  282. }, [this.genTitle(), this.genDays()]);
  283. }
  284. });
  285. exports.default = _default;