tdesign-mobile-vue
Version:
tdesign-mobile-vue
538 lines (530 loc) • 23.5 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 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-21f18d3b.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-6b5052db.js');
require('../_chunks/dep-f11711eb.js');
require('../_chunks/dep-c3cb976c.js');
require('../_chunks/dep-2f809ed9.js');
require('../_chunks/dep-757b152c.js');
require('../_chunks/dep-5be9198d.js');
require('../_chunks/dep-ff4786c0.js');
require('../loading/icon/spinner.js');
require('../loading/props.js');
require('../shared/dom.js');
require('../_chunks/dep-88fe047a.js');
require('../_chunks/dep-ef223206.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-a7319409.js');
require('../_chunks/dep-afa9f3f2.js');
require('../_chunks/dep-ae809b86.js');
require('../_chunks/dep-2b08c0a6.js');
require('../_chunks/dep-288156c7.js');
require('../_chunks/dep-3d4c38f1.js');
require('../_chunks/dep-6df33aaf.js');
require('../_chunks/dep-675798b4.js');
require('../_chunks/dep-ccc9ad3d.js');
require('../_chunks/dep-d950aa21.js');
require('../_chunks/dep-a697b1b9.js');
require('../_chunks/dep-4dfb9b9c.js');
require('../_chunks/dep-7c911ba3.js');
require('../_common/js/utils/general.js');
require('../_chunks/dep-b9642a56.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-28b1e09d.js');
require('../_chunks/dep-57aa1aa0.js');
require('dayjs');
require('../_chunks/dep-85204fa0.js');
require('../_chunks/dep-f6b14f80.js');
require('../_chunks/dep-a8d60643.js');
require('../_chunks/dep-49f0a63e.js');
require('../_chunks/dep-c65deed7.js');
require('../_chunks/dep-94eeec5a.js');
require('../_chunks/dep-060bf1cf.js');
require('../_chunks/dep-0e05e959.js');
require('../_chunks/dep-324da301.js');
require('../_chunks/dep-da6dc2cf.js');
require('../loading/plugin.js');
require('../shared/component.js');
require('../button/props.js');
require('../form/hooks.js');
require('../_chunks/dep-d5bc9590.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) {
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__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];
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;
});
vue.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 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