123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 |
- "use strict";
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../../utils");
- var _scroll = require("../../utils/dom/scroll");
- var _utils2 = require("../utils");
- var _utils3 = require("../../datetime-picker/utils");
- var _createNamespace = (0, _utils.createNamespace)('calendar-month'),
- createComponent = _createNamespace[0];
- var _default = createComponent({
- props: {
- date: Date,
- type: String,
- color: String,
- minDate: Date,
- maxDate: Date,
- showMark: Boolean,
- rowHeight: [Number, String],
- formatter: Function,
- lazyRender: Boolean,
- currentDate: [Date, Array],
- allowSameDay: Boolean,
- showSubtitle: Boolean,
- showMonthTitle: Boolean,
- firstDayOfWeek: Number
- },
- data: function data() {
- return {
- visible: false
- };
- },
- computed: {
- title: function title() {
- return (0, _utils2.formatMonthTitle)(this.date);
- },
- rowHeightWithUnit: function rowHeightWithUnit() {
- return (0, _utils.addUnit)(this.rowHeight);
- },
- offset: function offset() {
- var firstDayOfWeek = this.firstDayOfWeek;
- var realDay = this.date.getDay();
- if (!firstDayOfWeek) {
- return realDay;
- }
- return (realDay + 7 - this.firstDayOfWeek) % 7;
- },
- totalDay: function totalDay() {
- return (0, _utils3.getMonthEndDay)(this.date.getFullYear(), this.date.getMonth() + 1);
- },
- shouldRender: function shouldRender() {
- return this.visible || !this.lazyRender;
- },
- placeholders: function placeholders() {
- var rows = [];
- var count = Math.ceil((this.totalDay + this.offset) / 7);
- for (var day = 1; day <= count; day++) {
- rows.push({
- type: 'placeholder'
- });
- }
- return rows;
- },
- days: function days() {
- var days = [];
- var year = this.date.getFullYear();
- var month = this.date.getMonth();
- for (var day = 1; day <= this.totalDay; day++) {
- var date = new Date(year, month, day);
- var type = this.getDayType(date);
- var config = {
- date: date,
- type: type,
- text: day,
- bottomInfo: this.getBottomInfo(type)
- };
- if (this.formatter) {
- config = this.formatter(config);
- }
- days.push(config);
- }
- return days;
- }
- },
- methods: {
- getHeight: function getHeight() {
- var _this$$el;
- return ((_this$$el = this.$el) == null ? void 0 : _this$$el.getBoundingClientRect().height) || 0;
- },
- scrollIntoView: function scrollIntoView(body) {
- var _this$$refs = this.$refs,
- days = _this$$refs.days,
- month = _this$$refs.month;
- var el = this.showSubtitle ? days : month;
- var scrollTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop;
- (0, _scroll.setScrollTop)(body, scrollTop);
- },
- getMultipleDayType: function getMultipleDayType(day) {
- var _this = this;
- var isSelected = function isSelected(date) {
- return _this.currentDate.some(function (item) {
- return (0, _utils2.compareDay)(item, date) === 0;
- });
- };
- if (isSelected(day)) {
- var prevDay = (0, _utils2.getPrevDay)(day);
- var nextDay = (0, _utils2.getNextDay)(day);
- var prevSelected = isSelected(prevDay);
- var nextSelected = isSelected(nextDay);
- if (prevSelected && nextSelected) {
- return 'multiple-middle';
- }
- if (prevSelected) {
- return 'end';
- }
- return nextSelected ? 'start' : 'multiple-selected';
- }
- return '';
- },
- getRangeDayType: function getRangeDayType(day) {
- var _this$currentDate = this.currentDate,
- startDay = _this$currentDate[0],
- endDay = _this$currentDate[1];
- if (!startDay) {
- return '';
- }
- var compareToStart = (0, _utils2.compareDay)(day, startDay);
- if (!endDay) {
- return compareToStart === 0 ? 'start' : '';
- }
- var compareToEnd = (0, _utils2.compareDay)(day, endDay);
- if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
- return 'start-end';
- }
- if (compareToStart === 0) {
- return 'start';
- }
- if (compareToEnd === 0) {
- return 'end';
- }
- if (compareToStart > 0 && compareToEnd < 0) {
- return 'middle';
- }
- },
- getDayType: function getDayType(day) {
- var type = this.type,
- minDate = this.minDate,
- maxDate = this.maxDate,
- currentDate = this.currentDate;
- if ((0, _utils2.compareDay)(day, minDate) < 0 || (0, _utils2.compareDay)(day, maxDate) > 0) {
- return 'disabled';
- }
- if (currentDate === null) {
- return;
- }
- if (type === 'single') {
- return (0, _utils2.compareDay)(day, currentDate) === 0 ? 'selected' : '';
- }
- if (type === 'multiple') {
- return this.getMultipleDayType(day);
- }
- /* istanbul ignore else */
- if (type === 'range') {
- return this.getRangeDayType(day);
- }
- },
- getBottomInfo: function getBottomInfo(type) {
- if (this.type === 'range') {
- if (type === 'start' || type === 'end') {
- return (0, _utils2.t)(type);
- }
- if (type === 'start-end') {
- return (0, _utils2.t)('startEnd');
- }
- }
- },
- getDayStyle: function getDayStyle(type, index) {
- var style = {
- height: this.rowHeightWithUnit
- };
- if (type === 'placeholder') {
- style.width = '100%';
- return style;
- }
- if (index === 0) {
- style.marginLeft = 100 * this.offset / 7 + "%";
- }
- if (this.color) {
- if (type === 'start' || type === 'end' || type === 'start-end' || type === 'multiple-selected' || type === 'multiple-middle') {
- style.background = this.color;
- } else if (type === 'middle') {
- style.color = this.color;
- }
- }
- return style;
- },
- genTitle: function genTitle() {
- var h = this.$createElement;
- if (this.showMonthTitle) {
- return h("div", {
- "class": (0, _utils2.bem)('month-title')
- }, [this.title]);
- }
- },
- genMark: function genMark() {
- var h = this.$createElement;
- if (this.showMark && this.shouldRender) {
- return h("div", {
- "class": (0, _utils2.bem)('month-mark')
- }, [this.date.getMonth() + 1]);
- }
- },
- genDays: function genDays() {
- var h = this.$createElement;
- var days = this.shouldRender ? this.days : this.placeholders;
- return h("div", {
- "ref": "days",
- "attrs": {
- "role": "grid"
- },
- "class": (0, _utils2.bem)('days')
- }, [this.genMark(), days.map(this.genDay)]);
- },
- genTopInfo: function genTopInfo(item) {
- var h = this.$createElement;
- var slot = this.$scopedSlots['top-info'];
- if (item.topInfo || slot) {
- return h("div", {
- "class": (0, _utils2.bem)('top-info')
- }, [slot ? slot(item) : item.topInfo]);
- }
- },
- genBottomInfo: function genBottomInfo(item) {
- var h = this.$createElement;
- var slot = this.$scopedSlots['bottom-info'];
- if (item.bottomInfo || slot) {
- return h("div", {
- "class": (0, _utils2.bem)('bottom-info')
- }, [slot ? slot(item) : item.bottomInfo]);
- }
- },
- genDay: function genDay(item, index) {
- var _this2 = this;
- var h = this.$createElement;
- var type = item.type;
- var style = this.getDayStyle(type, index);
- var disabled = type === 'disabled';
- var onClick = function onClick() {
- if (!disabled) {
- _this2.$emit('click', item);
- }
- };
- if (type === 'selected') {
- return h("div", {
- "attrs": {
- "role": "gridcell",
- "tabindex": -1
- },
- "style": style,
- "class": [(0, _utils2.bem)('day'), item.className],
- "on": {
- "click": onClick
- }
- }, [h("div", {
- "class": (0, _utils2.bem)('selected-day'),
- "style": {
- width: this.rowHeightWithUnit,
- height: this.rowHeightWithUnit,
- background: this.color
- }
- }, [this.genTopInfo(item), item.text, this.genBottomInfo(item)])]);
- }
- return h("div", {
- "attrs": {
- "role": "gridcell",
- "tabindex": disabled ? null : -1
- },
- "style": style,
- "class": [(0, _utils2.bem)('day', type), item.className],
- "on": {
- "click": onClick
- }
- }, [this.genTopInfo(item), item.text, this.genBottomInfo(item)]);
- }
- },
- render: function render() {
- var h = arguments[0];
- return h("div", {
- "class": (0, _utils2.bem)('month'),
- "ref": "month"
- }, [this.genTitle(), this.genDays()]);
- }
- });
- exports.default = _default;
|