UNPKG

tdesign-mobile-vue

Version:
538 lines (530 loc) 23.5 kB
/** * 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