@opensig/opendesign
Version:
179 lines (178 loc) • 7.38 kB
JavaScript
import { defineComponent, mergeModels, useModel, inject, computed, createElementBlock, openBlock, createElementVNode, normalizeClass, createVNode, createBlock, createCommentVNode, unref, withCtx, createTextVNode, toDisplayString } from "vue";
import dayjs from "dayjs";
import { IconCalendarPrevYear, IconCalendarPrevMonth, IconCalendarNextMonth, IconCalendarNextYear } from "../../_utils/icons.mjs";
import { useI18n } from "../../locale/index.mjs";
import { OButton } from "../../button/index.mjs";
import { datePickerInjectKey } from "../provide.mjs";
import { YEAR_VIEW_STEP } from "../utils.mjs";
const _hoisted_1 = { class: "o-date-panel-header" };
const _hoisted_2 = { class: "o-date-panel-header-label" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "DatePanelHeader",
props: /* @__PURE__ */ mergeModels({
min: {},
max: {},
hideLeftNav: { type: Boolean },
hideRightNav: { type: Boolean }
}, {
"currentView": { required: true },
"currentViewModifiers": {},
"year": { required: true },
"yearModifiers": {},
"month": { required: true },
"monthModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["prev-year", "next-year", "prev-month", "next-month", "click-month", "click-year"], ["update:currentView", "update:year", "update:month"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const currentView = useModel(__props, "currentView");
const year = useModel(__props, "year");
const month = useModel(__props, "month");
const { t } = useI18n();
const datePickerCtx = inject(datePickerInjectKey);
const current = computed(() => dayjs().year(year.value).month(month.value));
const decadeStart = computed(() => Math.floor(year.value / 10) * 10);
const yearLabel = computed(() => currentView.value === "year" ? `${decadeStart.value}-${decadeStart.value + 10}` : `${year.value}${t("datePicker.year")}`);
const yearNavStep = computed(() => currentView.value === "year" ? YEAR_VIEW_STEP : 1);
const hidePrevYear = computed(() => props.min && current.value.isSame(props.min, "year"));
const hideNextYear = computed(() => props.max && current.value.isSame(props.max, "year"));
const hidePrevMonth = computed(() => props.min && current.value.isSame(props.min, "month"));
const hideNextMonth = computed(() => props.max && current.value.isSame(props.max, "month"));
const handlePrevYearClick = () => {
if (!hidePrevYear.value) {
year.value -= yearNavStep.value;
emits("prev-year");
}
};
const handleNextYearClick = () => {
if (!hideNextYear.value) {
year.value += yearNavStep.value;
emits("next-year");
}
};
const handlePrevMonthClick = () => {
if (!hidePrevMonth.value) {
if (month.value === 0) {
year.value -= 1;
month.value = 11;
} else {
month.value -= 1;
}
emits("prev-month");
}
};
const handleNextMonthClick = () => {
if (!hideNextMonth.value) {
if (month.value === 11) {
year.value += 1;
month.value = 0;
} else {
month.value += 1;
}
emits("next-month");
}
};
const handleClickYear = () => {
currentView.value = "year";
emits("click-year");
};
const handleClickMonth = () => {
currentView.value = "month";
emits("click-month");
};
return (_ctx, _cache) => {
var _a, _b, _c, _d, _e, _f;
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode(
"div",
{
class: normalizeClass(["o-date-panel-header-direction", { hidden: __props.hideLeftNav }])
},
[
createVNode(unref(OButton), {
round: (_a = unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hidePrevYear.value }]),
icon: unref(IconCalendarPrevYear),
onClick: handlePrevYearClick
}, null, 8, ["round", "class", "icon"]),
currentView.value.startsWith("date") ? (openBlock(), createBlock(unref(OButton), {
key: 0,
round: (_b = unref(datePickerCtx).round) == null ? void 0 : _b.value,
variant: "solid",
class: normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hidePrevMonth.value }]),
icon: unref(IconCalendarPrevMonth),
onClick: handlePrevMonthClick
}, null, 8, ["round", "class", "icon"])) : createCommentVNode("v-if", true)
],
2
/* CLASS */
),
createElementVNode("div", _hoisted_2, [
createVNode(unref(OButton), {
round: (_c = unref(datePickerCtx).round) == null ? void 0 : _c.value,
variant: "solid",
class: "o-date-panel-btn o-date-panel-header-btn o-date-panel-header-label-btn",
onClick: handleClickYear
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(yearLabel.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["round"]),
currentView.value.startsWith("date") ? (openBlock(), createBlock(unref(OButton), {
key: 0,
round: (_d = unref(datePickerCtx).round) == null ? void 0 : _d.value,
variant: "solid",
class: "o-date-panel-btn o-date-panel-header-btn o-date-panel-header-label-btn",
onClick: handleClickMonth
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(unref(t)(`datePicker.months.${month.value}`)),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["round"])) : createCommentVNode("v-if", true)
]),
createElementVNode(
"div",
{
class: normalizeClass(["o-date-panel-header-direction", { hidden: __props.hideRightNav }])
},
[
currentView.value.startsWith("date") ? (openBlock(), createBlock(unref(OButton), {
key: 0,
round: (_e = unref(datePickerCtx).round) == null ? void 0 : _e.value,
variant: "solid",
class: normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hideNextMonth.value }]),
icon: unref(IconCalendarNextMonth),
onClick: handleNextMonthClick
}, null, 8, ["round", "class", "icon"])) : createCommentVNode("v-if", true),
createVNode(unref(OButton), {
round: (_f = unref(datePickerCtx).round) == null ? void 0 : _f.value,
variant: "solid",
class: normalizeClass(["o-date-panel-btn", "o-date-panel-header-btn", { hidden: hideNextYear.value }]),
icon: unref(IconCalendarNextYear),
onClick: handleNextYearClick
}, null, 8, ["round", "class", "icon"])
],
2
/* CLASS */
)
]);
};
}
});
export {
_sfc_main as default
};