@progress/kendo-vue-dateinputs
Version:
250 lines (249 loc) • 7.26 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 p, inject as m, createVNode as i } from "vue";
import { cloneDate as l } from "@progress/kendo-date-math";
import { provideIntlService as w } from "@progress/kendo-vue-intl";
import { View as k } from "./View.mjs";
import { shiftWeekNames as v } from "../../utils.mjs";
import { CalendarViewEnum as s } from "../models/CalendarViewEnum.mjs";
import { classNames as r } from "@progress/kendo-vue-common";
const $ = 1, f = 5, F = /* @__PURE__ */ p({
name: "KendoViewList",
inheritAttrs: !1,
inject: {
kendoIntlService: {
default: null
}
},
props: {
allowReverse: Boolean,
hasFocusedDate: Boolean,
activeView: {
type: Number,
required: !0
},
bottomOffset: {
type: Number
},
cell: [String, Function, Object],
cellUID: {
type: String,
required: !0
},
dates: Array,
focusedDate: {
type: Date,
required: !0
},
isActive: {
type: Boolean,
default: void 0
},
max: {
type: Date,
required: !0
},
min: {
type: Date,
required: !0
},
selectionRange: Object,
showWeekNumbers: {
type: Boolean,
default: !1
},
take: {
type: Number,
default: f
},
value: {
type: [Date, Array, Object]
},
views: {
type: Number,
default: $
},
viewHeight: Number,
viewOffset: Number,
bus: Object,
dom: Object,
weekCell: [String, Function, Object],
service: Object,
tabIndex: Number,
shouldScroll: Boolean,
onChange: Function,
onWeekcellclick: Function,
onWeeknameclick: Function,
onCellenter: Function,
onViewmousedown: Function,
onListfocus: Function,
onListblur: Function,
onListkeydown: Function,
onListmousedown: Function
},
data: function() {
return {
lastViewsCount: 0,
valueHasUpdated: !1,
shouldScrollValue: !1
};
},
computed: {
weekNames() {
this._intl = w(this);
const e = v(this._intl.dateFormatNames({
nameType: "short",
type: "days"
}), this._intl.firstDay());
return this.weekNumber ? [""].concat(e) : e;
},
weekNumber() {
return !!(this.$props.showWeekNumbers && this.$props.activeView === s.month);
}
},
created() {
this.lastView = this.$props.activeView, this.lastFocus = this.$props.focusedDate, this.shouldScrollValue = this.$props.shouldScroll;
},
updated() {
this.shouldScrollValue = !1, this.lastView = this.$props.activeView, this.$data.lastViewsCount = this.$props.views, this.indexToScroll = void 0;
},
methods: {
handleFocus(e) {
this.$emit("listfocus", e);
},
handleBlur(e) {
this.$emit("listblur", e);
},
handleKeyDown(e) {
this.$emit("listkeydown", e);
},
handleVirtualizationMount(e) {
},
calculateHeights() {
if (!this.$props.dom)
return;
const e = this.$props.activeView === s.month ? this.$props.dom.scrollableContentHeight : this.$props.dom.scrollableYearContentHeight;
this._bottomOffset = e - this.$props.dom.viewHeight(this.$props.activeView), this._viewOffset = -1 * this.$props.dom.headerHeight, this._viewHeight = this.$props.dom.viewHeight(this.$props.activeView) || 1;
},
getTake(e, t) {
return Math.min(t - e, this.$props.take);
},
handleScrollAction() {
},
handleTodayClick(e) {
this.shouldScrollValue = !0, this.handleDateChange(e, !0);
},
handleMouseDown(e) {
const t = {
event: e.event,
value: l(e.value),
target: this
};
this.$emit("listmousedown", t);
},
handleDateChange(e, t = !1) {
const o = {
event: e.event,
value: l(e.value),
target: this,
isTodayClick: t
};
this.$emit("change", o);
},
handleWeekCellClick(e) {
this.$emit("weekcellclick", e);
},
handleWeekNameClick(e, t) {
const o = {
value: t,
event: e
};
this.$emit("weeknameclick", o);
},
handleCellEnter(e) {
this.$emit("cellenter", e);
},
rotateSelectionRange(e) {
if (e.start === null || e.end === null)
return e;
const t = e.end < e.start;
return {
start: t ? e.end : e.start,
end: t ? e.start : e.end
};
}
},
setup() {
return {
kendoIntlService: m("kendoIntlService", {})
};
},
mounted() {
this._calendarView = this.$refs.calendarView;
},
render() {
const e = this.$props.allowReverse ? this.rotateSelectionRange(this.$props.selectionRange) : this.$props.selectionRange, t = r("k-calendar-view", "k-hstack k-align-items-start k-justify-content-center", {
"k-calendar-monthview": this.$props.activeView === s.month,
"k-calendar-yearview": this.$props.activeView === s.year,
"k-calendar-decadeview": this.$props.activeView === s.decade,
"k-calendar-centuryview": this.$props.activeView === s.century
}), o = r("k-calendar-table"), c = function(n) {
return i("thead", {
class: "k-calendar-thead"
}, [i("tr", {
class: "k-calendar-tr"
}, [n.map((a, u) => i("th", {
class: "k-calendar-th",
key: u,
onClick: (d) => this.handleWeekNameClick(d, a)
}, [a]), this)])]);
}, h = function() {
const n = this.$props.cellUID;
return this.$props.dates.map(function(a) {
return i("table", {
role: "grid",
"aria-label": this.$props.service.title(this.$props.focusedDate),
"aria-live": "polite",
"aria-activedescendant": n + this.$props.focusedDate.getTime(),
tabindex: this.$props.tabIndex,
class: o,
onKeydown: this.handleKeyDown
}, [this.$props.activeView === s.month && c.call(this, this.weekNames), i(k, {
key: a.getTime(),
activeView: this.$props.activeView,
viewDate: a,
min: this.$props.min,
max: this.$props.max,
cellUID: n,
isActive: this.$props.isActive,
focusedDate: this.$props.focusedDate,
cell: this.$props.cell,
selectionRange: e,
selectedDate: this.$props.value,
showWeekNumbers: this.weekNumber,
onChange: this.handleDateChange,
onWeekcellclick: this.handleWeekCellClick,
onCellenter: this.handleCellEnter,
onViewmousedown: this.handleMouseDown,
bus: this.$props.bus,
service: this.$props.service,
weekCell: this.$props.weekCell
}, null)]);
}, this);
};
return i("div", {
style: this.$attrs.style,
class: t,
onFocusin: this.handleFocus,
onFocusout: this.handleBlur
}, [h.call(this)]);
}
});
export {
F as ViewList
};