@progress/kendo-vue-dateinputs
Version:
222 lines (221 loc) • 6.53 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as N, inject as R, createVNode as i, h as c, isVNode as V } from "vue";
import { provideLocalizationService as z } from "@progress/kendo-vue-intl";
import { getDate as p } from "@progress/kendo-date-math";
import { Button as n } from "@progress/kendo-vue-buttons";
import { CalendarHeaderTitle as S } from "./CalendarHeaderTitle.mjs";
import { today as h, messages as r, prevView as d, nextView as u } from "../../messages/main.mjs";
import { Action as a } from "../models/NavigationAction.mjs";
import { MAX_DATE as L, isInRange as j, getToday as m, dateInRange as v } from "../../utils.mjs";
import { MIN_DATE as M } from "../../defaults.mjs";
import { isRtl as _, Keys as P, classNames as f, getTemplate as g } from "@progress/kendo-vue-common";
import { chevronRightIcon as $, chevronLeftIcon as k } from "@progress/kendo-svg-icons";
function y(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !V(t);
}
const J = /* @__PURE__ */ N({
name: "KendoCalendarHeader",
inheritAttrs: !1,
inject: {
kendoLocalizationService: {
default: null
}
},
emits: ["titleclick", "todayclick", "nextclick", "prevclick"],
props: {
activeView: {
type: Number,
required: !0
},
currentDate: {
type: Date,
required: !0
},
focusedDate: {
type: Date,
required: !0
},
headerTitle: {
type: [String, Object, Function],
default: function() {
}
},
max: {
type: Date,
default: function() {
return L;
}
},
min: {
type: Date,
default: function() {
return M;
}
},
bus: Object,
service: Object,
rangeLength: {
type: Number,
default: 1
},
tabIndex: {
type: Number,
default: 0
},
onTodayClick: Function,
onNextClick: Function,
onPrevClick: Function,
onTitleClick: Function
},
data() {
return {
currentRtl: !1
};
},
mounted() {
this.currentRtl = _(this.$el);
},
computed: {
navigate() {
return this.$props.bus.canMoveUp(this.$props.activeView);
},
todayIsInRange() {
return j(m(), p(this.$props.min), p(this.$props.max));
}
},
methods: {
getTitle() {
if (!this.$props.currentDate)
return "";
const t = this.$props.rangeLength - 1, e = this.$props.service.title(this.$props.currentDate), s = this.$props.service.addToDate(this.$props.currentDate, t);
return t < 1 || !this.$props.service.isInRange(s, this.$props.min, this.$props.max) ? e : `${e} - ${this.$props.service.title(s)}`;
},
handleTitleClick(t) {
this.navigate && (this.$props.bus.moveUp(this.$props.activeView, t), this.$emit("titleclick", t));
},
canNavigate(t) {
if (!this.$props.service)
return !1;
const e = this.$props.service.move(this.$props.focusedDate, t);
return this.$props.min <= e && e <= this.$props.max || this.$props.service.isInSameView(e, this.$props.min) || this.$props.service.isInSameView(e, this.$props.max);
},
move(t) {
return this.clampDate(this.$props.service.move(this.$props.focusedDate, t));
},
clampDate(t) {
return v(t, this.$props.min, this.$props.max);
},
handleNextClick(t) {
const e = {
event: t,
value: this.move(a.NextView),
target: this
};
this.$emit("nextclick", e);
},
handlePrevClick(t) {
const e = {
event: t,
value: this.move(a.PrevView),
target: this
};
this.$emit("prevclick", e);
},
handleTodayClick(t) {
if (!this.todayIsInRange)
return;
this.$props.bus.moveToBottom(this.$props.activeView);
const e = {
event: t,
value: v(m(), this.$props.min, this.$props.max),
target: this
};
this.$emit("todayclick", e);
},
todayKeyDown(t) {
const {
keyCode: e
} = t;
e === P.enter && this.handleTodayClick(t);
}
},
setup() {
return {
kendoLocalizationService: R("kendoLocalizationService", {})
};
},
render() {
this._localization = z(this);
const t = this._localization.toLanguageString(h, r[h]), e = this.getTitle(), s = this._localization.toLanguageString(d, r[d]), o = this._localization.toLanguageString(u, r[u]), b = !this.canNavigate(a.PrevView), C = !this.canNavigate(a.NextView), x = f("k-calendar-title", {
"k-disabled": !this.navigate
}), D = f("k-calendar-nav-today", {
"k-disabled": !this.todayIsInRange
});
let l;
const T = i(S, {
value: e,
view: this.$props.activeView,
class: x,
onClick: this.handleTitleClick
}, y(e) ? e : {
default: () => [e]
});
l = g.call(this, {
h: c,
template: this.$props.headerTitle,
defaultRendering: T
});
const w = i(n, {
fillMode: "flat",
themeColor: "base",
class: D,
tabIndex: this.$props.tabIndex,
onKeydown: this.todayKeyDown,
onClick: this.handleTodayClick
}, y(t) ? t : {
default: () => [t]
}), I = g.call(this, {
h: c,
defaultRendering: w
});
return i("div", {
class: "k-calendar-header k-hstack",
style: this.$attrs.style
}, [l, i("span", {
class: "k-spacer"
}, null), i("span", {
class: "k-calendar-nav k-hstack"
}, [i(n, {
type: "button",
icon: this.currentRtl ? "chevron-right" : "chevron-left",
svgIcon: this.currentRtl ? $ : k,
size: this.$props.size,
fillMode: "flat",
class: "k-calendar-nav-pre",
disabled: b,
"aria-label": s,
title: s,
onClick: this.handlePrevClick
}, null), I, i(n, {
type: "button",
icon: this.currentRtl ? "chevron-left" : "chevron-right",
svgIcon: this.currentRtl ? k : $,
size: this.$props.size,
fillMode: "flat",
class: "k-calendar-nav-next",
disabled: C,
"aria-label": o,
title: o,
onClick: this.handleNextClick
}, null)])]);
}
});
export {
J as Header
};