Month.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  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. var _this$$el;
  87. return ((_this$$el = this.$el) == null ? void 0 : _this$$el.getBoundingClientRect().height) || 0;
  88. },
  89. scrollIntoView: function scrollIntoView(body) {
  90. var _this$$refs = this.$refs,
  91. days = _this$$refs.days,
  92. month = _this$$refs.month;
  93. var el = this.showSubtitle ? days : month;
  94. var scrollTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop;
  95. (0, _scroll.setScrollTop)(body, scrollTop);
  96. },
  97. getMultipleDayType: function getMultipleDayType(day) {
  98. var _this = this;
  99. var isSelected = function isSelected(date) {
  100. return _this.currentDate.some(function (item) {
  101. return (0, _utils2.compareDay)(item, date) === 0;
  102. });
  103. };
  104. if (isSelected(day)) {
  105. var prevDay = (0, _utils2.getPrevDay)(day);
  106. var nextDay = (0, _utils2.getNextDay)(day);
  107. var prevSelected = isSelected(prevDay);
  108. var nextSelected = isSelected(nextDay);
  109. if (prevSelected && nextSelected) {
  110. return 'multiple-middle';
  111. }
  112. if (prevSelected) {
  113. return 'end';
  114. }
  115. return nextSelected ? 'start' : 'multiple-selected';
  116. }
  117. return '';
  118. },
  119. getRangeDayType: function getRangeDayType(day) {
  120. var _this$currentDate = this.currentDate,
  121. startDay = _this$currentDate[0],
  122. endDay = _this$currentDate[1];
  123. if (!startDay) {
  124. return '';
  125. }
  126. var compareToStart = (0, _utils2.compareDay)(day, startDay);
  127. if (!endDay) {
  128. return compareToStart === 0 ? 'start' : '';
  129. }
  130. var compareToEnd = (0, _utils2.compareDay)(day, endDay);
  131. if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
  132. return 'start-end';
  133. }
  134. if (compareToStart === 0) {
  135. return 'start';
  136. }
  137. if (compareToEnd === 0) {
  138. return 'end';
  139. }
  140. if (compareToStart > 0 && compareToEnd < 0) {
  141. return 'middle';
  142. }
  143. },
  144. getDayType: function getDayType(day) {
  145. var type = this.type,
  146. minDate = this.minDate,
  147. maxDate = this.maxDate,
  148. currentDate = this.currentDate;
  149. if ((0, _utils2.compareDay)(day, minDate) < 0 || (0, _utils2.compareDay)(day, maxDate) > 0) {
  150. return 'disabled';
  151. }
  152. if (currentDate === null) {
  153. return;
  154. }
  155. if (type === 'single') {
  156. return (0, _utils2.compareDay)(day, currentDate) === 0 ? 'selected' : '';
  157. }
  158. if (type === 'multiple') {
  159. return this.getMultipleDayType(day);
  160. }
  161. /* istanbul ignore else */
  162. if (type === 'range') {
  163. return this.getRangeDayType(day);
  164. }
  165. },
  166. getBottomInfo: function getBottomInfo(type) {
  167. if (this.type === 'range') {
  168. if (type === 'start' || type === 'end') {
  169. return (0, _utils2.t)(type);
  170. }
  171. if (type === 'start-end') {
  172. return (0, _utils2.t)('startEnd');
  173. }
  174. }
  175. },
  176. getDayStyle: function getDayStyle(type, index) {
  177. var style = {
  178. height: this.rowHeightWithUnit
  179. };
  180. if (type === 'placeholder') {
  181. style.width = '100%';
  182. return style;
  183. }
  184. if (index === 0) {
  185. style.marginLeft = 100 * this.offset / 7 + "%";
  186. }
  187. if (this.color) {
  188. if (type === 'start' || type === 'end' || type === 'start-end' || type === 'multiple-selected' || type === 'multiple-middle') {
  189. style.background = this.color;
  190. } else if (type === 'middle') {
  191. style.color = this.color;
  192. }
  193. }
  194. return style;
  195. },
  196. genTitle: function genTitle() {
  197. var h = this.$createElement;
  198. if (this.showMonthTitle) {
  199. return h("div", {
  200. "class": (0, _utils2.bem)('month-title')
  201. }, [this.title]);
  202. }
  203. },
  204. genMark: function genMark() {
  205. var h = this.$createElement;
  206. if (this.showMark && this.shouldRender) {
  207. return h("div", {
  208. "class": (0, _utils2.bem)('month-mark')
  209. }, [this.date.getMonth() + 1]);
  210. }
  211. },
  212. genDays: function genDays() {
  213. var h = this.$createElement;
  214. var days = this.shouldRender ? this.days : this.placeholders;
  215. return h("div", {
  216. "ref": "days",
  217. "attrs": {
  218. "role": "grid"
  219. },
  220. "class": (0, _utils2.bem)('days')
  221. }, [this.genMark(), days.map(this.genDay)]);
  222. },
  223. genTopInfo: function genTopInfo(item) {
  224. var h = this.$createElement;
  225. var slot = this.$scopedSlots['top-info'];
  226. if (item.topInfo || slot) {
  227. return h("div", {
  228. "class": (0, _utils2.bem)('top-info')
  229. }, [slot ? slot(item) : item.topInfo]);
  230. }
  231. },
  232. genBottomInfo: function genBottomInfo(item) {
  233. var h = this.$createElement;
  234. var slot = this.$scopedSlots['bottom-info'];
  235. if (item.bottomInfo || slot) {
  236. return h("div", {
  237. "class": (0, _utils2.bem)('bottom-info')
  238. }, [slot ? slot(item) : item.bottomInfo]);
  239. }
  240. },
  241. genDay: function genDay(item, index) {
  242. var _this2 = this;
  243. var h = this.$createElement;
  244. var type = item.type;
  245. var style = this.getDayStyle(type, index);
  246. var disabled = type === 'disabled';
  247. var onClick = function onClick() {
  248. if (!disabled) {
  249. _this2.$emit('click', item);
  250. }
  251. };
  252. if (type === 'selected') {
  253. return h("div", {
  254. "attrs": {
  255. "role": "gridcell",
  256. "tabindex": -1
  257. },
  258. "style": style,
  259. "class": [(0, _utils2.bem)('day'), item.className],
  260. "on": {
  261. "click": onClick
  262. }
  263. }, [h("div", {
  264. "class": (0, _utils2.bem)('selected-day'),
  265. "style": {
  266. width: this.rowHeightWithUnit,
  267. height: this.rowHeightWithUnit,
  268. background: this.color
  269. }
  270. }, [this.genTopInfo(item), item.text, this.genBottomInfo(item)])]);
  271. }
  272. return h("div", {
  273. "attrs": {
  274. "role": "gridcell",
  275. "tabindex": disabled ? null : -1
  276. },
  277. "style": style,
  278. "class": [(0, _utils2.bem)('day', type), item.className],
  279. "on": {
  280. "click": onClick
  281. }
  282. }, [this.genTopInfo(item), item.text, this.genBottomInfo(item)]);
  283. }
  284. },
  285. render: function render() {
  286. var h = arguments[0];
  287. return h("div", {
  288. "class": (0, _utils2.bem)('month'),
  289. "ref": "month"
  290. }, [this.genTitle(), this.genDays()]);
  291. }
  292. });
  293. exports.default = _default;