123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
- import { ref, watch, computed, defineComponent } from "vue";
- import { pick, isDate, truthProp, numericProp, getScrollTop, makeStringProp, makeNumericProp } from "../utils/index.mjs";
- import { t, bem, name, getToday, cloneDate, cloneDates, getPrevDay, getNextDay, compareDay, calcDateNum, compareMonth, getDayByOffset } from "./utils.mjs";
- import { raf, useRect, onMountedOrActivated } from "@vant/use";
- import { useRefs } from "../composables/use-refs.mjs";
- import { useExpose } from "../composables/use-expose.mjs";
- import { Popup } from "../popup/index.mjs";
- import { Button } from "../button/index.mjs";
- import { Toast } from "../toast/index.mjs";
- import CalendarMonth from "./CalendarMonth.mjs";
- import CalendarHeader from "./CalendarHeader.mjs";
- const calendarProps = {
- show: Boolean,
- type: makeStringProp("single"),
- title: String,
- color: String,
- round: truthProp,
- readonly: Boolean,
- poppable: truthProp,
- maxRange: makeNumericProp(null),
- position: makeStringProp("bottom"),
- teleport: [String, Object],
- showMark: truthProp,
- showTitle: truthProp,
- formatter: Function,
- rowHeight: numericProp,
- confirmText: String,
- rangePrompt: String,
- lazyRender: truthProp,
- showConfirm: truthProp,
- defaultDate: [Date, Array],
- allowSameDay: Boolean,
- showSubtitle: truthProp,
- closeOnPopstate: truthProp,
- showRangePrompt: truthProp,
- confirmDisabledText: String,
- closeOnClickOverlay: truthProp,
- safeAreaInsetTop: Boolean,
- safeAreaInsetBottom: truthProp,
- minDate: {
- type: Date,
- validator: isDate,
- default: getToday
- },
- maxDate: {
- type: Date,
- validator: isDate,
- default: () => {
- const now = getToday();
- return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
- }
- },
- firstDayOfWeek: {
- type: numericProp,
- default: 0,
- validator: (val) => val >= 0 && val <= 6
- }
- };
- var stdin_default = defineComponent({
- name,
- props: calendarProps,
- emits: ["select", "confirm", "unselect", "month-show", "over-range", "update:show", "click-subtitle"],
- setup(props, {
- emit,
- slots
- }) {
- const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
- if (compareDay(date, minDate) === -1) {
- return minDate;
- }
- if (compareDay(date, maxDate) === 1) {
- return maxDate;
- }
- return date;
- };
- const getInitialDate = (defaultDate = props.defaultDate) => {
- const {
- type,
- minDate,
- maxDate,
- allowSameDay
- } = props;
- if (defaultDate === null) {
- return defaultDate;
- }
- const now = getToday();
- if (type === "range") {
- if (!Array.isArray(defaultDate)) {
- defaultDate = [];
- }
- const start = limitDateRange(defaultDate[0] || now, minDate, allowSameDay ? maxDate : getPrevDay(maxDate));
- const end = limitDateRange(defaultDate[1] || now, allowSameDay ? minDate : getNextDay(minDate));
- return [start, end];
- }
- if (type === "multiple") {
- if (Array.isArray(defaultDate)) {
- return defaultDate.map((date) => limitDateRange(date));
- }
- return [limitDateRange(now)];
- }
- if (!defaultDate || Array.isArray(defaultDate)) {
- defaultDate = now;
- }
- return limitDateRange(defaultDate);
- };
- let bodyHeight;
- const bodyRef = ref();
- const subtitle = ref("");
- const currentDate = ref(getInitialDate());
- const [monthRefs, setMonthRefs] = useRefs();
- const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
- const months = computed(() => {
- const months2 = [];
- const cursor = new Date(props.minDate);
- cursor.setDate(1);
- do {
- months2.push(new Date(cursor));
- cursor.setMonth(cursor.getMonth() + 1);
- } while (compareMonth(cursor, props.maxDate) !== 1);
- return months2;
- });
- const buttonDisabled = computed(() => {
- if (currentDate.value) {
- if (props.type === "range") {
- return !currentDate.value[0] || !currentDate.value[1];
- }
- if (props.type === "multiple") {
- return !currentDate.value.length;
- }
- }
- return !currentDate.value;
- });
- const getSelectedDate = () => currentDate.value;
- const onScroll = () => {
- const top = getScrollTop(bodyRef.value);
- const bottom = top + bodyHeight;
- const heights = months.value.map((item, index) => monthRefs.value[index].getHeight());
- const heightSum = heights.reduce((a, b) => a + b, 0);
- if (bottom > heightSum && top > 0) {
- return;
- }
- let height = 0;
- let currentMonth;
- const visibleRange = [-1, -1];
- for (let i = 0; i < months.value.length; i++) {
- const month = monthRefs.value[i];
- const visible = height <= bottom && height + heights[i] >= top;
- if (visible) {
- visibleRange[1] = i;
- if (!currentMonth) {
- currentMonth = month;
- visibleRange[0] = i;
- }
- if (!monthRefs.value[i].showed) {
- monthRefs.value[i].showed = true;
- emit("month-show", {
- date: month.date,
- title: month.getTitle()
- });
- }
- }
- height += heights[i];
- }
- months.value.forEach((month, index) => {
- const visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
- monthRefs.value[index].setVisible(visible);
- });
- if (currentMonth) {
- subtitle.value = currentMonth.getTitle();
- }
- };
- const scrollToDate = (targetDate) => {
- raf(() => {
- months.value.some((month, index) => {
- if (compareMonth(month, targetDate) === 0) {
- if (bodyRef.value) {
- monthRefs.value[index].scrollToDate(bodyRef.value, targetDate);
- }
- return true;
- }
- return false;
- });
- onScroll();
- });
- };
- const scrollToCurrentDate = () => {
- if (props.poppable && !props.show) {
- return;
- }
- if (currentDate.value) {
- const targetDate = props.type === "single" ? currentDate.value : currentDate.value[0];
- if (isDate(targetDate)) {
- scrollToDate(targetDate);
- }
- } else {
- raf(onScroll);
- }
- };
- const init = () => {
- if (props.poppable && !props.show) {
- return;
- }
- raf(() => {
- bodyHeight = Math.floor(useRect(bodyRef).height);
- });
- scrollToCurrentDate();
- };
- const reset = (date = getInitialDate()) => {
- currentDate.value = date;
- scrollToCurrentDate();
- };
- const checkRange = (date) => {
- const {
- maxRange,
- rangePrompt,
- showRangePrompt
- } = props;
- if (maxRange && calcDateNum(date) > maxRange) {
- if (showRangePrompt) {
- Toast(rangePrompt || t("rangePrompt", maxRange));
- }
- emit("over-range");
- return false;
- }
- return true;
- };
- const onConfirm = () => {
- var _a;
- return emit("confirm", (_a = currentDate.value) != null ? _a : cloneDates(currentDate.value));
- };
- const select = (date, complete) => {
- const setCurrentDate = (date2) => {
- currentDate.value = date2;
- emit("select", cloneDates(date2));
- };
- if (complete && props.type === "range") {
- const valid = checkRange(date);
- if (!valid) {
- setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
- return;
- }
- }
- setCurrentDate(date);
- if (complete && !props.showConfirm) {
- onConfirm();
- }
- };
- const getDisabledDate = (disabledDays2, startDay, date) => {
- var _a;
- return (_a = disabledDays2.find((day) => compareDay(startDay, day.date) === -1 && compareDay(day.date, date) === -1)) == null ? void 0 : _a.date;
- };
- const disabledDays = computed(() => monthRefs.value.reduce((arr, ref2) => {
- var _a, _b;
- arr.push(...(_b = (_a = ref2.disabledDays) == null ? void 0 : _a.value) != null ? _b : []);
- return arr;
- }, []));
- const onClickDay = (item) => {
- if (props.readonly || !item.date) {
- return;
- }
- const {
- date
- } = item;
- const {
- type
- } = props;
- if (type === "range") {
- if (!currentDate.value) {
- select([date]);
- return;
- }
- const [startDay, endDay] = currentDate.value;
- if (startDay && !endDay) {
- const compareToStart = compareDay(date, startDay);
- if (compareToStart === 1) {
- const disabledDay = getDisabledDate(disabledDays.value, startDay, date);
- if (disabledDay) {
- const endDay2 = getPrevDay(disabledDay);
- if (compareDay(startDay, endDay2) === -1) {
- select([startDay, endDay2]);
- } else {
- select([date]);
- }
- } else {
- select([startDay, date], true);
- }
- } else if (compareToStart === -1) {
- select([date]);
- } else if (props.allowSameDay) {
- select([date, date], true);
- }
- } else {
- select([date]);
- }
- } else if (type === "multiple") {
- if (!currentDate.value) {
- select([date]);
- return;
- }
- const dates = currentDate.value;
- const selectedIndex = dates.findIndex((dateItem) => compareDay(dateItem, date) === 0);
- if (selectedIndex !== -1) {
- const [unselectedDate] = dates.splice(selectedIndex, 1);
- emit("unselect", cloneDate(unselectedDate));
- } else if (props.maxRange && dates.length >= props.maxRange) {
- Toast(props.rangePrompt || t("rangePrompt", props.maxRange));
- } else {
- select([...dates, date]);
- }
- } else {
- select(date, true);
- }
- };
- const updateShow = (value) => emit("update:show", value);
- const renderMonth = (date, index) => {
- const showMonthTitle = index !== 0 || !props.showSubtitle;
- return _createVNode(CalendarMonth, _mergeProps({
- "ref": setMonthRefs(index),
- "date": date,
- "currentDate": currentDate.value,
- "showMonthTitle": showMonthTitle,
- "firstDayOfWeek": dayOffset.value
- }, pick(props, ["type", "color", "minDate", "maxDate", "showMark", "formatter", "rowHeight", "lazyRender", "showSubtitle", "allowSameDay"]), {
- "onClick": onClickDay
- }), pick(slots, ["top-info", "bottom-info"]));
- };
- const renderFooterButton = () => {
- if (slots.footer) {
- return slots.footer();
- }
- if (props.showConfirm) {
- const slot = slots["confirm-text"];
- const disabled = buttonDisabled.value;
- const text = disabled ? props.confirmDisabledText : props.confirmText;
- return _createVNode(Button, {
- "round": true,
- "block": true,
- "type": "danger",
- "color": props.color,
- "class": bem("confirm"),
- "disabled": disabled,
- "nativeType": "button",
- "onClick": onConfirm
- }, {
- default: () => [slot ? slot({
- disabled
- }) : text || t("confirm")]
- });
- }
- };
- const renderFooter = () => _createVNode("div", {
- "class": [bem("footer"), {
- "van-safe-area-bottom": props.safeAreaInsetBottom
- }]
- }, [renderFooterButton()]);
- const renderCalendar = () => _createVNode("div", {
- "class": bem()
- }, [_createVNode(CalendarHeader, {
- "title": props.title,
- "subtitle": subtitle.value,
- "showTitle": props.showTitle,
- "showSubtitle": props.showSubtitle,
- "firstDayOfWeek": dayOffset.value,
- "onClick-subtitle": (event) => emit("click-subtitle", event)
- }, pick(slots, ["title", "subtitle"])), _createVNode("div", {
- "ref": bodyRef,
- "class": bem("body"),
- "onScroll": onScroll
- }, [months.value.map(renderMonth)]), renderFooter()]);
- watch(() => props.show, init);
- watch(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
- watch(() => props.defaultDate, (value = null) => {
- currentDate.value = value;
- scrollToCurrentDate();
- });
- useExpose({
- reset,
- scrollToDate,
- getSelectedDate
- });
- onMountedOrActivated(init);
- return () => {
- if (props.poppable) {
- return _createVNode(Popup, {
- "show": props.show,
- "class": bem("popup"),
- "round": props.round,
- "position": props.position,
- "closeable": props.showTitle || props.showSubtitle,
- "teleport": props.teleport,
- "closeOnPopstate": props.closeOnPopstate,
- "safeAreaInsetTop": props.safeAreaInsetTop,
- "closeOnClickOverlay": props.closeOnClickOverlay,
- "onUpdate:show": updateShow
- }, {
- default: renderCalendar
- });
- }
- return renderCalendar();
- };
- }
- });
- export {
- stdin_default as default
- };
|