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