123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import { computed, defineComponent, createVNode as _createVNode } from "vue";
- import { createNamespace, HAPTICS_FEEDBACK, makeStringProp } from "../utils/index.mjs";
- import { t, bem, compareMonth, getPrevMonth, getPrevYear, getNextMonth, getNextYear } from "./utils.mjs";
- import { Icon } from "../icon/index.mjs";
- const [name] = createNamespace("calendar-header");
- var stdin_default = defineComponent({
- name,
- props: {
- date: Date,
- minDate: Date,
- maxDate: Date,
- title: String,
- subtitle: String,
- showTitle: Boolean,
- showSubtitle: Boolean,
- firstDayOfWeek: Number,
- switchMode: makeStringProp("none")
- },
- emits: ["clickSubtitle", "panelChange"],
- setup(props, {
- slots,
- emit
- }) {
- const prevMonthDisabled = computed(() => props.date && props.minDate && compareMonth(getPrevMonth(props.date), props.minDate) < 0);
- const prevYearDisabled = computed(() => props.date && props.minDate && compareMonth(getPrevYear(props.date), props.minDate) < 0);
- const nextMonthDisabled = computed(() => props.date && props.maxDate && compareMonth(getNextMonth(props.date), props.maxDate) > 0);
- const nextYearDisabled = computed(() => props.date && props.maxDate && compareMonth(getNextYear(props.date), props.maxDate) > 0);
- const renderTitle = () => {
- if (props.showTitle) {
- const text = props.title || t("title");
- const title = slots.title ? slots.title() : text;
- return _createVNode("div", {
- "class": bem("header-title")
- }, [title]);
- }
- };
- const onClickSubtitle = (event) => emit("clickSubtitle", event);
- const onPanelChange = (date) => emit("panelChange", date);
- const renderAction = (isNext) => {
- const showYearAction = props.switchMode === "year-month";
- const monthSlot = slots[isNext ? "next-month" : "prev-month"];
- const yearSlot = slots[isNext ? "next-year" : "prev-year"];
- const monthDisabled = isNext ? nextMonthDisabled.value : prevMonthDisabled.value;
- const yearDisabled = isNext ? nextYearDisabled.value : prevYearDisabled.value;
- const monthIconName = isNext ? "arrow" : "arrow-left";
- const yearIconName = isNext ? "arrow-double-right" : "arrow-double-left";
- const onMonthChange = () => onPanelChange((isNext ? getNextMonth : getPrevMonth)(props.date));
- const onYearChange = () => onPanelChange((isNext ? getNextYear : getPrevYear)(props.date));
- const MonthAction = _createVNode("view", {
- "class": bem("header-action", {
- disabled: monthDisabled
- }),
- "onClick": monthDisabled ? void 0 : onMonthChange
- }, [monthSlot ? monthSlot({
- disabled: monthDisabled
- }) : _createVNode(Icon, {
- "class": {
- [HAPTICS_FEEDBACK]: !monthDisabled
- },
- "name": monthIconName
- }, null)]);
- const YearAction = showYearAction && _createVNode("view", {
- "class": bem("header-action", {
- disabled: yearDisabled
- }),
- "onClick": yearDisabled ? void 0 : onYearChange
- }, [yearSlot ? yearSlot({
- disabled: yearDisabled
- }) : _createVNode(Icon, {
- "class": {
- [HAPTICS_FEEDBACK]: !yearDisabled
- },
- "name": yearIconName
- }, null)]);
- return isNext ? [MonthAction, YearAction] : [YearAction, MonthAction];
- };
- const renderSubtitle = () => {
- if (props.showSubtitle) {
- const title = slots.subtitle ? slots.subtitle({
- date: props.date,
- text: props.subtitle
- }) : props.subtitle;
- const canSwitch = props.switchMode !== "none";
- return _createVNode("div", {
- "class": bem("header-subtitle", {
- "with-switch": canSwitch
- }),
- "onClick": onClickSubtitle
- }, [canSwitch ? [renderAction(), _createVNode("div", {
- "class": bem("header-subtitle-text")
- }, [title]), renderAction(true)] : title]);
- }
- };
- const renderWeekDays = () => {
- const {
- firstDayOfWeek
- } = props;
- const weekdays = t("weekdays");
- const renderWeekDays2 = [...weekdays.slice(firstDayOfWeek, 7), ...weekdays.slice(0, firstDayOfWeek)];
- return _createVNode("div", {
- "class": bem("weekdays")
- }, [renderWeekDays2.map((text) => _createVNode("span", {
- "class": bem("weekday")
- }, [text]))]);
- };
- return () => _createVNode("div", {
- "class": bem("header")
- }, [renderTitle(), renderSubtitle(), renderWeekDays()]);
- }
- });
- export {
- stdin_default as default
- };
|