tdesign-mobile-vue
Version:
tdesign-mobile-vue
380 lines (376 loc) • 14.5 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
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, resolveComponent, mergeProps } from 'vue';
import { CloseIcon } 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 { useConfig } from '../config-provider/useConfig.js';
import '../button/button.js';
import '@babel/runtime/helpers/defineProperty';
import '../loading/index.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/set-style.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/isString';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isNumber';
import 'lodash/isArray';
import '../loading/icon/spinner.js';
import '../loading/props.js';
import '../shared/dom.js';
import 'lodash/isFunction';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import '../loading/plugin.js';
import '../shared/component.js';
import '../button/props.js';
import '../form/hooks.js';
import 'lodash/isBoolean';
import '../shared/hover.js';
var prefix = config.prefix;
var name = "".concat(prefix, "-calendar");
var calendarTemplate = defineComponent({
name: name,
components: {
TButton: Button
},
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 props = inject("templateProps");
var getYearMonthDay = function getYearMonthDay(date) {
return {
year: date.getFullYear(),
month: date.getMonth(),
date: date.getDate()
};
};
var usePopup = computed(function () {
return props.usePopup;
});
var templateRef = ref(null);
var valueRef = ref(props.value);
var selectedDate = ref();
var firstDayOfWeek = computed(function () {
return props.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 props.minDate ? new Date(props.minDate) : today;
});
var maxDate = computed(function () {
return props.maxDate ? new Date(props.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 handleSelect = function handleSelect(year, month, date, dateItem) {
var _props$onSelect;
if (dateItem.type === "disabled") return;
var selected = new Date(year, month, date);
if (props.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 _props$onChange;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, selectedDate.value);
}
}
} else if (props.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 _props$onChange2;
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, selectedDate.value);
}
}
(_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, toRaw(selectedDate.value));
};
var handleConfirm = function handleConfirm() {
var _props$onClose, _props$onConfirm;
context.emit("visible-change");
(_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props, "confirm-btn");
(_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 || _props$onConfirm.call(props, toRaw(selectedDate.value));
};
var handleClose = function handleClose() {
var _props$onClose2;
context.emit("visible-change");
(_props$onClose2 = props.onClose) === null || _props$onClose2 === void 0 || _props$onClose2.call(props, "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 (props.type === "single") {
if (isSameDate({
year: year,
month: month,
date: date
}, selectedDate.value)) return "selected";
}
if (props.type === "multiple") {
var hit = selectedDate.value.some(function (item) {
return isSameDate({
year: year,
month: month,
date: date
}, item);
});
if (hit) {
return "selected";
}
}
if (props.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(props.format ? props.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 = props.type === "multiple" ? [new Date()] : new Date();
}
}, {
immediate: true
});
context.expose({
valueRef: valueRef,
templateRef: templateRef
});
var getDateItemClass = function getDateItemClass(dateItem) {
var className = "".concat(calendarClass.value, "__dates-item");
if (dateItem.type) {
className = "".concat(className, " ").concat(calendarClass.value, "__dates-item--").concat(dateItem.type);
}
if (dateItem.className) {
className = "".concat(className, " ").concat(dateItem.className);
}
return className;
};
return function () {
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(resolveComponent("t-button"), mergeProps({
"block": true,
"theme": "primary"
}, confirmBtn.value, {
"onClick": handleConfirm
}), null);
}
};
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), 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"
}, [months.value.map(function (item, index) {
return createVNode(Fragment, null, [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 { calendarTemplate as default };
//# sourceMappingURL=template.js.map