@opensig/opendesign
Version:
112 lines (111 loc) • 4.27 kB
JavaScript
;
const vue = require("vue");
const dayjs = require("dayjs");
const index = require("../../button/index.js");
const utils = require("../utils.js");
const provide = require("../provide.js");
const _hoisted_1 = { class: "o-date-panel-years" };
const _hoisted_2 = ["onClick", "onMouseenter"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "DatePanelYear",
props: {
year: {},
selectedDate: {},
disabledYear: { type: Function },
minDate: {},
maxDate: {},
rangeStart: {},
rangeEnd: {},
anchorYear: {},
hoverYear: {},
hideOutOfDecade: { type: Boolean }
},
emits: ["select", "hover"],
setup(__props, { emit: __emit }) {
const NO_RANGE = { isRangeStart: false, isRangeEnd: false, isInRange: false };
function computeYearRangeState({ y, isInDecade, rangeStart, rangeEnd, anchorYear, hoverYear }) {
if (!isInDecade) return NO_RANGE;
return utils.computeRangeState({
cell: dayjs().year(y).startOf("year"),
unit: "year",
rangeStart: rangeStart || null,
rangeEnd: rangeEnd || null,
anchorDate: anchorYear || null,
hoverDate: hoverYear || null
});
}
const props = __props;
const emits = __emit;
const datePickerCtx = vue.inject(provide.datePickerInjectKey);
const today = vue.ref(null);
vue.onMounted(() => {
today.value = dayjs();
});
const decadeStart = vue.computed(() => Math.floor(props.year / 10) * 10);
const years = vue.computed(() => {
const todayVal = today.value;
return Array.from({ length: 12 }, (_, i) => {
const y = decadeStart.value - 1 + i;
const isSelected = props.selectedDate ? props.selectedDate.year() === y : false;
const isCurrent = todayVal ? todayVal.year() === y : false;
const isDisabled = utils.isYearDisabled(y, { disabledYear: props.disabledYear, minDate: props.minDate ?? null, maxDate: props.maxDate ?? null });
const isInDecade = i >= 1 && i <= 10;
const isHidden = props.hideOutOfDecade && !isInDecade;
const { isRangeStart, isRangeEnd, isInRange } = computeYearRangeState({
y,
isInDecade,
rangeStart: props.rangeStart,
rangeEnd: props.rangeEnd,
anchorYear: props.anchorYear,
hoverYear: props.hoverYear
});
return { year: y, isSelected, isCurrent, isDisabled, isInDecade, isRangeStart, isRangeEnd, isInRange, isHidden };
});
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(years.value, (y) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
key: y.year,
class: vue.normalizeClass(["o-date-panel-cell", {
"is-selected": y.isSelected,
"is-disabled": y.isDisabled,
"is-current": y.isCurrent,
"is-other-period": !y.isInDecade,
"is-range-start": y.isRangeStart,
"is-range-end": y.isRangeEnd,
"is-in-range": y.isInRange
}]),
onClick: ($event) => !y.isDisabled && !y.isHidden && emits("select", y.year),
onMouseenter: ($event) => !y.isDisabled && !y.isHidden && emits("hover", vue.unref(dayjs)().year(y.year))
}, [
vue.createVNode(vue.unref(index.OButton), {
round: (_a = vue.unref(datePickerCtx).round) == null ? void 0 : _a.value,
variant: "solid",
class: "o-date-panel-btn",
disabled: y.isDisabled || !y.isInDecade
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(y.year),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["round", "disabled"])
], 42, _hoisted_2);
}),
128
/* KEYED_FRAGMENT */
))
]);
};
}
});
module.exports = _sfc_main;