tdesign-mobile-vue
Version:
tdesign-mobile-vue
593 lines (585 loc) • 26.1 kB
JavaScript
/**
* tdesign v1.15.0
* (c) 2026 TDesign Group
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _typeof = require('@babel/runtime/helpers/typeof');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var Vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var button_index = require('../button/index.js');
var config = require('../config.js');
var calendar_templateProps = require('./template-props.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var calendar_utils = require('./utils.js');
var configProvider_useConfig = require('../_chunks/dep-9990e77b.js');
require('../button/button.js');
require('../loading/index.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/setStyle.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('../_chunks/dep-cb7c9eda.js');
require('../_chunks/dep-19edd656.js');
require('../_chunks/dep-194379ee.js');
require('../_chunks/dep-16ad1a12.js');
require('../_chunks/dep-642ebff4.js');
require('../_chunks/dep-527cf8f4.js');
require('../_chunks/dep-faa5bfcf.js');
require('../loading/icon/spinner.js');
require('../loading/props.js');
require('../shared/dom.js');
require('../_chunks/dep-9b240313.js');
require('../_chunks/dep-e224a131.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-7c3f62db.js');
require('../_chunks/dep-f6a2d298.js');
require('../_chunks/dep-800a2ea8.js');
require('../_chunks/dep-43708eba.js');
require('../_chunks/dep-fb97f75f.js');
require('../_chunks/dep-2a1aba78.js');
require('../_chunks/dep-2255a654.js');
require('../_chunks/dep-b9f96695.js');
require('../_chunks/dep-aee19c43.js');
require('../_chunks/dep-9d8a972e.js');
require('../_chunks/dep-f7499720.js');
require('../_chunks/dep-8e913c55.js');
require('../_chunks/dep-4bbf6d4f.js');
require('../_common/js/utils/general.js');
require('../_chunks/dep-00f961e4.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-60a4bcda.js');
require('../_chunks/dep-0f8521ff.js');
require('dayjs');
require('../_chunks/dep-663766d0.js');
require('../_chunks/dep-0abf2cb5.js');
require('../_chunks/dep-1232d344.js');
require('../_chunks/dep-4f58ec50.js');
require('../_chunks/dep-f527f423.js');
require('../_chunks/dep-e8a08cb5.js');
require('../_chunks/dep-3bfe327c.js');
require('../_chunks/dep-c6906728.js');
require('../_chunks/dep-858df101.js');
require('../_chunks/dep-310a1957.js');
require('../_chunks/dep-c4e7cd96.js');
require('../_chunks/dep-dfc30a62.js');
require('../loading/plugin.js');
require('../shared/component.js');
require('../button/props.js');
require('../form/hooks.js');
require('../_chunks/dep-f3575e93.js');
require('../shared/hover.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var prefix = config["default"].prefix;
var TCalendarTemplate = Vue.defineComponent({
name: "".concat(prefix, "-calendar-template"),
props: calendar_templateProps["default"],
emits: ["visible-change"],
setup: function setup(_props, context) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var _useConfig = configProvider_useConfig.useConfig("calendar"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var calendarClass = hooks_useClass.usePrefixClass("calendar");
var props2 = Vue.inject("templateProps");
var getYearMonthDay = function getYearMonthDay(date) {
return {
year: date.getFullYear(),
month: date.getMonth(),
date: date.getDate()
};
};
var usePopup = Vue.computed(function () {
return props2.usePopup;
});
var templateRef = Vue.ref(null);
var valueRef = Vue.ref(props2.value);
var currentMonth = Vue.ref([]);
var headerButtons = Vue.ref({
preYearBtnDisable: false,
prevMonthBtnDisable: false,
nextYearBtnDisable: false,
nextMonthBtnDisable: false
});
var selectedDate = Vue.ref();
var firstDayOfWeek = Vue.computed(function () {
return props2.firstDayOfWeek || 0;
});
var days = Vue.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 = Vue.computed(function () {
return props2.minDate ? new Date(props2.minDate) : today;
});
var maxDate = Vue.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 = Vue.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 = calendar_utils.getPrevYear(value).getTime();
var _prevMonthTimestamp = calendar_utils.getPrevMonth(value).getTime();
var _nextMonthTimestamp = calendar_utils.getNextMonth(value).getTime();
var _nextYearTimestamp = calendar_utils.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) {
var firstDate = selectedDate.value[0];
if (selected.getTime() === firstDate.getTime()) {
selectedDate.value = props2.allowSameDay ? [firstDate, selected] : [selected];
} else if (selected < firstDate) {
selectedDate.value = [selected];
} else {
selectedDate.value = [firstDate, 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__default["default"](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, Vue.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, Vue.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 = Vue.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__default["default"](selectedDate.value, 2),
startDate = _selectedDate$value[0],
endDate = _selectedDate$value[1];
var compareWithStart = startDate && isSameDate({
year: year,
month: month,
date: date
}, startDate);
var compareWithEnd = endDate && isSameDate({
year: year,
month: month,
date: date
}, endDate);
if (compareWithStart && compareWithEnd && props2.allowSameDay) return "start-end";
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;
});
var createDateTypeHandler = function createDateTypeHandler() {
var now = minDate.value;
var createRangePair = function createRangePair(baseDate) {
return props2.allowSameDay ? [baseDate, baseDate] : [baseDate, new Date(baseDate.getTime() + 24 * 3600 * 1e3)];
};
var convertToDateArray = function convertToDateArray(value) {
return value.map(function (item) {
return new Date(item);
});
};
return {
initialize: {
single: function single() {
return now;
},
multiple: function multiple() {
return [now];
},
range: function range() {
return createRangePair(now);
}
},
transform: {
single: function single(value) {
return new Date(value);
},
multiple: function multiple(value) {
var dates = convertToDateArray(value);
return dates.length ? dates : [now];
},
range: function range(value) {
var dates = convertToDateArray(value);
if (dates.length <= 1) {
return createRangePair(dates[0] || now);
}
return dates;
}
}
};
};
var dateTypeHandler = createDateTypeHandler();
Vue.watch(valueRef, function () {
if (!valueRef.value) {
var _dateTypeHandler$init, _dateTypeHandler$init2;
selectedDate.value = (_dateTypeHandler$init = (_dateTypeHandler$init2 = dateTypeHandler.initialize)[props2.type]) === null || _dateTypeHandler$init === void 0 ? void 0 : _dateTypeHandler$init.call(_dateTypeHandler$init2);
} else {
var _dateTypeHandler$tran, _dateTypeHandler$tran2, _dateTypeHandler$tran3, _dateTypeHandler$tran4;
selectedDate.value = props2.type === "single" ? (_dateTypeHandler$tran = (_dateTypeHandler$tran2 = dateTypeHandler.transform).single) === null || _dateTypeHandler$tran === void 0 ? void 0 : _dateTypeHandler$tran.call(_dateTypeHandler$tran2, valueRef.value) : (_dateTypeHandler$tran3 = (_dateTypeHandler$tran4 = dateTypeHandler.transform)[props2.type]) === null || _dateTypeHandler$tran3 === void 0 ? void 0 : _dateTypeHandler$tran3.call(_dateTypeHandler$tran4, valueRef.value);
}
}, {
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 Vue.createVNode(Vue.Fragment, null, [dateItem.prefix && Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__dates-item-prefix")
}, [dateItem.prefix]), dateItem.day, dateItem.suffix && Vue.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__default["default"](confirmBtn.value) !== "object") {
return confirmBtn.value;
}
if (confirmBtn.value && Array.isArray(confirmBtn.value)) {
return confirmBtn.value;
}
if (confirmBtn.value && _typeof__default["default"](confirmBtn.value) === "object") {
return Vue.createVNode(button_index.Button, Vue.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 calendar_utils.getPrevYear(date);
},
"pre-month": function preMonth() {
return calendar_utils.getPrevMonth(date);
},
"next-month": function nextMonth() {
return calendar_utils.getNextMonth(date);
},
"next-year": function nextYear() {
return calendar_utils.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 Vue.createVNode("div", {
"ref": templateRef,
"class": className
}, [Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__title")
}, [_props.title || globalConfig.value.title]), usePopup.value && Vue.createVNode(tdesignIconsVueNext.CloseIcon, {
"class": "".concat(calendarClass.value, "__close-btn"),
"size": "24",
"onClick": handleClose
}, null), props2.switchMode !== "none" && Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "-header")
}, [Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "-header__action")
}, [props2.switchMode === "year-month" && Vue.createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty__default["default"]({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.preYearBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("pre-year", headerButtons.value.preYearBtnDisable);
}
}, [Vue.createVNode(tdesignIconsVueNext.ChevronLeftDoubleIcon, null, null)]), Vue.createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty__default["default"]({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.prevMonthBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("pre-month", headerButtons.value.prevMonthBtnDisable);
}
}, [Vue.createVNode(tdesignIconsVueNext.ChevronLeftIcon, null, null)])]), Vue.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]
})]), Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "-header__action")
}, [Vue.createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty__default["default"]({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.nextMonthBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("next-month", headerButtons.value.nextMonthBtnDisable);
}
}, [Vue.createVNode(tdesignIconsVueNext.ChevronRightIcon, null, null)]), props2.switchMode === "year-month" && Vue.createVNode("div", {
"class": ["".concat(calendarClass.value, "-header__icon"), _defineProperty__default["default"]({}, "".concat(calendarClass.value, "-header__icon--disabled"), headerButtons.value.nextYearBtnDisable)],
"onClick": function onClick() {
return handleSwitchModeChange("next-year", headerButtons.value.nextYearBtnDisable);
}
}, [Vue.createVNode(tdesignIconsVueNext.ChevronRightDoubleIcon, null, null)])])]), Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__days")
}, [(days.value || []).map(function (item, index) {
return Vue.createVNode("div", {
"key": index,
"class": "".concat(calendarClass.value, "__days-item")
}, [item]);
})]), Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__months"),
"style": "overflow: auto",
"onScroll": onScroll
}, [(props2.switchMode === "none" ? months.value : currentMonth.value).map(function (item, index) {
return Vue.createVNode(Vue.Fragment, null, [props2.switchMode === "none" && Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__month"),
"key": index
}, [t(globalConfig.value.monthTitle, {
year: item.year,
month: globalConfig.value.months[item.month]
})]), Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__dates"),
"key": index
}, [new Array((item.weekdayOfFirstDay - firstDayOfWeek.value + 7) % 7).fill(0).map(function (emptyItem, index2) {
return Vue.createVNode("div", {
"key": index2
}, null);
}), item.months.map(function (dateItem, dateIndex) {
return Vue.createVNode(Vue.Fragment, null, [Vue.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 && Vue.createVNode("div", {
"class": "".concat(calendarClass.value, "__footer")
}, [renderConfirmBtn()])]);
};
}
});
exports["default"] = TCalendarTemplate;
//# sourceMappingURL=template.js.map