UNPKG

tdesign-mobile-vue

Version:
495 lines (491 loc) 21.2 kB
/** * 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