tdesign-mobile-vue
Version:
tdesign-mobile-vue
495 lines (491 loc) • 21.2 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _typeof from '@babel/runtime/helpers/typeof';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import { defineComponent, inject, computed, ref, watch, createVNode, Fragment, toRaw, mergeProps } from 'vue';
import { CloseIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightIcon, ChevronRightDoubleIcon } from 'tdesign-icons-vue-next';
import { Button } from '../button/index.js';
import config from '../config.js';
import props from './template-props.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { getPrevYear, getPrevMonth, getNextMonth, getNextYear } from './utils.js';
import { useConfig } from '../config-provider/useConfig.js';
import '../button/button.js';
import '../loading/index.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/setStyle.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash-es';
import '../loading/icon/spinner.js';
import '../loading/props.js';
import '../shared/dom.js';
import '../hooks/render-tnode.js';
import '../_common/js/utils/general.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-f785f3d3.js';
import '../_chunks/dep-0d44b254.js';
import 'dayjs';
import '../loading/plugin.js';
import '../shared/component.js';
import '../button/props.js';
import '../form/hooks.js';
import '../shared/hover.js';
var prefix = config.prefix;
var TCalendarTemplate = defineComponent({
name: "".concat(prefix, "-calendar-template"),
props: props,
emits: ["visible-change"],
setup: function setup(_props, context) {
var renderTNodeJSX = useTNodeJSX();
var _useConfig = useConfig("calendar"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var calendarClass = usePrefixClass("calendar");
var props2 = inject("templateProps");
var getYearMonthDay = function getYearMonthDay(date) {
return {
year: date.getFullYear(),
month: date.getMonth(),
date: date.getDate()
};
};
var usePopup = computed(function () {
return props2.usePopup;
});
var templateRef = ref(null);
var valueRef = ref(props2.value);
var currentMonth = ref([]);
var headerButtons = ref({
preYearBtnDisable: false,
prevMonthBtnDisable: false,
nextYearBtnDisable: false,
nextMonthBtnDisable: false
});
var selectedDate = ref();
var firstDayOfWeek = computed(function () {
return props2.firstDayOfWeek || 0;
});
var days = computed(function () {
var raw = globalConfig.value.weekdays;
var ans = [];
var i = firstDayOfWeek.value % 7;
while (ans.length < 7) {
ans.push(raw[i]);
i = (i + 1) % 7;
}
return ans;
});
var today = new Date();
var minDate = computed(function () {
return props2.minDate ? new Date(props2.minDate) : today;
});
var maxDate = computed(function () {
return props2.maxDate ? new Date(props2.maxDate) : new Date(today.getFullYear(), today.getMonth() + 6, today.getDate());
});
var getDate = function getDate(year, month, day) {
return new Date(year, month, day);
};
var confirmBtn = computed(function () {
if (typeof _props.confirmBtn === "string") {
return {
content: _props.confirmBtn || globalConfig.value.confirm
};
}
return _props.confirmBtn;
});
var getCurrentDate = function getCurrentDate() {
var _currentMonth$value;
var time = Array.isArray(selectedDate.value) ? selectedDate.value[0] : selectedDate.value;
if (((_currentMonth$value = currentMonth.value) === null || _currentMonth$value === void 0 ? void 0 : _currentMonth$value.length) > 0) {
var _currentMonth$value$, _currentMonth$value$2;
var year = (_currentMonth$value$ = currentMonth.value[0]) === null || _currentMonth$value$ === void 0 ? void 0 : _currentMonth$value$.year;
var month = (_currentMonth$value$2 = currentMonth.value[0]) === null || _currentMonth$value$2 === void 0 ? void 0 : _currentMonth$value$2.month;
time = new Date(year, month, 1).getTime();
}
return time;
};
var getCurrentYearAndMonth = function getCurrentYearAndMonth(v) {
var date = new Date(v);
return {
year: date.getFullYear(),
month: date.getMonth()
};
};
var updateActionButton = function updateActionButton(value) {
var _min = getCurrentYearAndMonth(minDate.value);
var _max = getCurrentYearAndMonth(maxDate.value);
var _minTimestamp = new Date(_min.year, _min.month, 1).getTime();
var _maxTimestamp = new Date(_max.year, _max.month, 1).getTime();
var _prevYearTimestamp = getPrevYear(value).getTime();
var _prevMonthTimestamp = getPrevMonth(value).getTime();
var _nextMonthTimestamp = getNextMonth(value).getTime();
var _nextYearTimestamp = getNextYear(value).getTime();
var preYearBtnDisable = _prevYearTimestamp < _minTimestamp || _prevMonthTimestamp < _minTimestamp;
var prevMonthBtnDisable = _prevMonthTimestamp < _minTimestamp;
var nextYearBtnDisable = _nextMonthTimestamp > _maxTimestamp || _nextYearTimestamp > _maxTimestamp;
var nextMonthBtnDisable = _nextMonthTimestamp > _maxTimestamp;
headerButtons.value = {
preYearBtnDisable: preYearBtnDisable,
prevMonthBtnDisable: prevMonthBtnDisable,
nextYearBtnDisable: nextYearBtnDisable,
nextMonthBtnDisable: nextMonthBtnDisable
};
};
var calcCurrentMonth = function calcCurrentMonth(newValue) {
var date = newValue || getCurrentDate();
var _getCurrentYearAndMon = getCurrentYearAndMonth(date),
year = _getCurrentYearAndMon.year,
month = _getCurrentYearAndMon.month;
currentMonth.value = months.value.filter(function (item) {
return item.year === year && item.month === month;
});
updateActionButton(date);
};
var handleSelect = function handleSelect(year, month, date, dateItem) {
var _props2$onSelect;
if (dateItem.type === "disabled" || props2.readonly) return;
var selected = new Date(year, month, date);
if (props2.type === "range" && Array.isArray(selectedDate.value)) {
if (selectedDate.value.length === 1) {
if (selectedDate.value[0] > selected) {
selectedDate.value = [selected];
} else {
selectedDate.value = [selectedDate.value[0], selected];
}
} else {
selectedDate.value = [selected];
if (!confirmBtn.value && selectedDate.value.length === 2) {
var _props2$onChange;
(_props2$onChange = props2.onChange) === null || _props2$onChange === void 0 || _props2$onChange.call(props2, selectedDate.value);
}
}
} else if (props2.type === "multiple") {
var newVal = _toConsumableArray(selectedDate.value);
var index = selectedDate.value.findIndex(function (item) {
return isSameDate(item, selected);
});
if (index > -1) {
newVal.splice(index, 1);
} else {
newVal.push(selected);
}
selectedDate.value = newVal;
} else {
selectedDate.value = selected;
if (!confirmBtn.value) {
var _props2$onChange2;
(_props2$onChange2 = props2.onChange) === null || _props2$onChange2 === void 0 || _props2$onChange2.call(props2, selectedDate.value);
}
}
if (props2.switchMode !== "none") {
var date2 = getCurrentDate();
calcCurrentMonth(date2);
}
(_props2$onSelect = props2.onSelect) === null || _props2$onSelect === void 0 || _props2$onSelect.call(props2, toRaw(selectedDate.value));
};
var handleConfirm = function handleConfirm() {
var _props2$onClose, _props2$onConfirm;
context.emit("visible-change");
(_props2$onClose = props2.onClose) === null || _props2$onClose === void 0 || _props2$onClose.call(props2, "confirm-btn");
(_props2$onConfirm = props2.onConfirm) === null || _props2$onConfirm === void 0 || _props2$onConfirm.call(props2, toRaw(selectedDate.value));
};
var handleClose = function handleClose() {
var _props2$onClose2;
context.emit("visible-change");
(_props2$onClose2 = props2.onClose) === null || _props2$onClose2 === void 0 || _props2$onClose2.call(props2, "close-btn");
};
var getMonthDates = function getMonthDates(date) {
var _getYearMonthDay = getYearMonthDay(date),
year = _getYearMonthDay.year,
month = _getYearMonthDay.month;
var firstDay = getDate(year, month, 1);
var weekdayOfFirstDay = firstDay.getDay();
var lastDate = new Date(+getDate(year, month + 1, 1) - 24 * 3600 * 1e3).getDate();
return {
year: year,
month: month,
weekdayOfFirstDay: weekdayOfFirstDay,
lastDate: lastDate
};
};
var isSameDate = function isSameDate(date1, date2) {
if (date1 instanceof Date) date1 = getYearMonthDay(date1);
if (date2 instanceof Date) date2 = getYearMonthDay(date2);
var keys = ["year", "month", "date"];
return keys.every(function (key) {
return date1[key] === date2[key];
});
};
var months = computed(function () {
var ans = [];
var _getYearMonthDay2 = getYearMonthDay(minDate.value),
minYear = _getYearMonthDay2.year,
minMonth = _getYearMonthDay2.month;
var _getYearMonthDay3 = getYearMonthDay(maxDate.value),
maxYear = _getYearMonthDay3.year,
maxMonth = _getYearMonthDay3.month;
var calcType = function calcType(year, month, date) {
var curDate = new Date(year, month, date, 23, 59, 59);
if (props2.type === "single") {
if (isSameDate({
year: year,
month: month,
date: date
}, selectedDate.value)) return "selected";
}
if (props2.type === "multiple") {
var hit = selectedDate.value.some(function (item) {
return isSameDate({
year: year,
month: month,
date: date
}, item);
});
if (hit) {
return "selected";
}
}
if (props2.type === "range") {
if (Array.isArray(selectedDate.value)) {
var _selectedDate$value = _slicedToArray(selectedDate.value, 2),
startDate = _selectedDate$value[0],
endDate = _selectedDate$value[1];
if (startDate && isSameDate({
year: year,
month: month,
date: date
}, startDate)) return "start";
if (endDate && isSameDate({
year: year,
month: month,
date: date
}, endDate)) return "end";
if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime()) return "centre";
}
}
var minCurDate = new Date(year, month, date, 0, 0, 0);
if (curDate.getTime() < minDate.value.getTime() || minCurDate.getTime() > maxDate.value.getTime()) {
return "disabled";
}
return "";
};
while (minYear < maxYear || minYear === maxYear && minMonth <= maxMonth) {
var target = getMonthDates(getDate(minYear, minMonth, 1));
var months2 = [];
for (var i = 1; i <= 31; i++) {
if (i > target.lastDate) break;
var dateObj = {
date: getDate(minYear, minMonth, i),
day: i,
type: calcType(minYear, minMonth, i)
};
months2.push(props2.format ? props2.format(dateObj) : dateObj);
}
ans.push({
year: minYear,
month: minMonth,
months: months2,
weekdayOfFirstDay: target.weekdayOfFirstDay
});
var curDate = getYearMonthDay(getDate(minYear, minMonth + 1, 1));
minYear = curDate.year;
minMonth = curDate.month;
}
return ans;
});
watch(valueRef, function () {
if (Array.isArray(valueRef.value)) {
selectedDate.value = valueRef.value.map(function (item) {
return new Date(item);
});
} else if (valueRef.value) {
selectedDate.value = new Date(valueRef.value);
} else {
selectedDate.value = props2.type === "multiple" ? [new Date()] : new Date();
}
}, {
immediate: true
});
context.expose({
valueRef: valueRef,
templateRef: templateRef
});
var getDateItemClass = function getDateItemClass(dateItem) {
var className2 = "".concat(calendarClass.value, "__dates-item");
if (dateItem.type) {
className2 = "".concat(className2, " ").concat(calendarClass.value, "__dates-item--").concat(dateItem.type);
}
if (dateItem.className) {
className2 = "".concat(className2, " ").concat(dateItem.className);
}
return className2;
};
var renderCell = function renderCell(dateItem) {
var cell = renderTNodeJSX("cell", {
params: {
item: dateItem
}
});
if (cell) {
return cell;
}
var className2 = "".concat(calendarClass.value, "__dates-item-suffix");
if (dateItem.type) {
className2 = "".concat(className2, " ").concat(calendarClass.value, "__dates-item-suffix--").concat(dateItem.type);
}
return createVNode(Fragment, null, [dateItem.prefix && createVNode("div", {
"class": "".concat(calendarClass.value, "__dates-item-prefix")
}, [dateItem.prefix]), dateItem.day, dateItem.suffix && createVNode("div", {
"class": className2
}, [dateItem.suffix])]);
};
var className = usePopup.value ? "".concat(calendarClass.value, " ").concat(calendarClass.value, "--popup") : "".concat(calendarClass.value);
var renderConfirmBtn = function renderConfirmBtn() {
if (confirmBtn.value && _typeof(confirmBtn.value) !== "object") {
return confirmBtn.value;
}
if (confirmBtn.value && Array.isArray(confirmBtn.value)) {
return confirmBtn.value;
}
if (confirmBtn.value && _typeof(confirmBtn.value) === "object") {
return createVNode(Button, mergeProps({
"block": true,
"theme": "primary"
}, confirmBtn.value, {
"onClick": handleConfirm
}), null);
}
};
if (props2.switchMode !== "none") {
calcCurrentMonth();
}
var handleSwitchModeChange = function handleSwitchModeChange(type, disabled) {
var _props2$onPanelChange;
if (disabled) return;
var date = getCurrentDate();
var funcMap = {
"pre-year": function preYear() {
return getPrevYear(date);
},
"pre-month": function preMonth() {
return getPrevMonth(date);
},
"next-month": function nextMonth() {
return getNextMonth(date);
},
"next-year": function nextYear() {
return getNextYear(date);
}
};
var newValue = funcMap[type]();
if (!newValue) return;
var _getCurrentYearAndMon2 = getCurrentYearAndMonth(newValue),
year = _getCurrentYearAndMon2.year,
month = _getCurrentYearAndMon2.month;
(_props2$onPanelChange = props2.onPanelChange) === null || _props2$onPanelChange === void 0 || _props2$onPanelChange.call(props2, {
year: year,
month: month + 1
});
calcCurrentMonth(newValue);
};
var onScroll = function onScroll(e) {
var _props2$onScroll;
(_props2$onScroll = props2.onScroll) === null || _props2$onScroll === void 0 || _props2$onScroll.call(props2, {
e: e
});
};
return function () {
var _currentMonth$value$3, _currentMonth$value$4;
return createVNode("div", {
"ref": templateRef,
"class": className
}, [createVNode("div", {
"class": "".concat(calendarClass.value, "__title")
}, [_props.title || globalConfig.value.title]), usePopup.value && createVNode(CloseIcon, {
"class": "".concat(calendarClass.value, "__close-btn"),
"size": "24",
"onClick": handleClose
}, null), props2.switchMode !== "none" && createVNode("div", {
"class": "".concat(calendarClass.value, "-header")
}, [createVNode("div", {
"class": "".concat(calendarClass.value, "-header__action")
}, [props2.switchMode === "year-month" && createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.preYearBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("pre-year", headerButtons.value.preYearBtnDisable);
}
}, [createVNode(ChevronLeftDoubleIcon, null, null)]), createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.prevMonthBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("pre-month", headerButtons.value.prevMonthBtnDisable);
}
}, [createVNode(ChevronLeftIcon, null, null)])]), createVNode("div", {
"class": "".concat(calendarClass.value, "-header__title")
}, [t(globalConfig.value.monthTitle, {
year: (_currentMonth$value$3 = currentMonth.value[0]) === null || _currentMonth$value$3 === void 0 ? void 0 : _currentMonth$value$3.year,
month: globalConfig.value.months[(_currentMonth$value$4 = currentMonth.value[0]) === null || _currentMonth$value$4 === void 0 ? void 0 : _currentMonth$value$4.month]
})]), createVNode("div", {
"class": "".concat(calendarClass.value, "-header__action")
}, [createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.nextMonthBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("next-month", headerButtons.value.nextMonthBtnDisable);
}
}, [createVNode(ChevronRightIcon, null, null)]), props2.switchMode === "year-month" && createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.nextYearBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("next-year", headerButtons.value.nextYearBtnDisable);
}
}, [createVNode(ChevronRightDoubleIcon, null, null)])])]), createVNode("div", {
"class": "".concat(calendarClass.value, "__days")
}, [(days.value || []).map(function (item, index) {
return createVNode("div", {
"key": index,
"class": "".concat(calendarClass.value, "__days-item")
}, [item]);
})]), createVNode("div", {
"class": "".concat(calendarClass.value, "__months"),
"style": "overflow: auto",
"onScroll": onScroll
}, [(props2.switchMode === "none" ? months.value : currentMonth.value).map(function (item, index) {
return createVNode(Fragment, null, [props2.switchMode === "none" && createVNode("div", {
"class": "".concat(calendarClass.value, "__month"),
"key": index
}, [t(globalConfig.value.monthTitle, {
year: item.year,
month: globalConfig.value.months[item.month]
})]), createVNode("div", {
"class": "".concat(calendarClass.value, "__dates"),
"key": index
}, [new Array((item.weekdayOfFirstDay - firstDayOfWeek.value + 7) % 7).fill(0).map(function (emptyItem, index2) {
return createVNode("div", {
"key": index2
}, null);
}), item.months.map(function (dateItem, dateIndex) {
return createVNode(Fragment, null, [createVNode("div", {
"key": "".concat(index, "_").concat(dateIndex),
"class": getDateItemClass(dateItem),
"onClick": function onClick() {
return handleSelect(item.year, item.month, dateItem.day, dateItem);
}
}, [renderCell(dateItem)])]);
})])]);
})]), usePopup.value && createVNode("div", {
"class": "".concat(calendarClass.value, "__footer")
}, [renderConfirmBtn()])]);
};
}
});
export { TCalendarTemplate as default };
//# sourceMappingURL=template.js.map