@progress/kendo-vue-dateinputs
Version:
391 lines (390 loc) • 14.2 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 S, createVNode as p } from "vue";
import { guid as w, validatePackage as I, Keys as T, templateRendering as f, getListeners as m, classNames as E } from "@progress/kendo-vue-common";
import { getDate as g, cloneDate as a, isEqualDate as o } from "@progress/kendo-date-math";
import { provideIntlService as L } from "@progress/kendo-vue-intl";
import { packageMetadata as O } from "../../package-metadata.mjs";
import { ViewList as B } from "./ViewList.mjs";
import { MAX_DATE as j, MIN_DATE as W } from "../../defaults.mjs";
import { CalendarViewEnum as r } from "../models/CalendarViewEnum.mjs";
import { dateInRange as v, getToday as K, viewInRange as _ } from "../../utils.mjs";
import { BusViewService as P } from "../services/BusViewService.mjs";
import { DOMService as q } from "../services/DOMService.mjs";
import { NavigationService as U } from "../services/NavigationService.mjs";
import { Header as z } from "./Header.mjs";
import { calculateValue as H, extractDateFromValue as h, extractMultipleFromValue as $, extractRangeFromValue as V, extractFocusedDate as k, extractActiveRange as X } from "../utils/main.mjs";
const ue = /* @__PURE__ */ N({
name: "KendoCalendar",
inject: {
kendoIntlService: {
default: null
}
},
model: {
event: "changemodel"
},
props: {
activeRangeEnd: {
type: String,
default: void 0
},
allowReverse: {
type: Boolean,
default: !1
},
cell: [String, Function, Object],
className: String,
defaultActiveView: {
type: String,
default: "month"
},
modelValue: {
type: [Date, Array, Object],
default: void 0
},
defaultValue: {
type: [Date, Array, Object],
default: null
},
disabled: {
type: Boolean,
default: !1
},
focusedDate: Date,
id: {
type: String,
default: function() {
return w();
}
},
headerTitle: [String, Function, Object],
max: {
type: Date,
default: function() {
return j;
}
},
min: {
type: Date,
default: function() {
return W;
}
},
mode: String,
navigation: {
type: Boolean,
default: !0
},
tabIndex: Number,
value: [Date, Array, Object],
views: {
type: Number,
default: 1
},
weekNumber: Boolean,
weekCell: [String, Function, Object],
topView: {
type: String,
default: "century"
},
bottomView: {
type: String,
default: "month"
},
onFocus: Function,
onBlur: Function,
onChange: Function,
onKeydown: Function
},
data: function() {
return {
valueDuringOnChange: void 0,
currentFocusedDate: null,
currentActiveView: null,
currentValue: null,
cellUID: w(),
isActive: !1,
oldValue: null,
didNavigationChange: !1,
currentActiveRangeEnd: void 0
};
},
created: function() {
I(O);
const e = H(this.currentMin, this.currentMax, this.$props.defaultValue, this.$props.value || this.$props.modelValue), t = h(this.currentMin, this.currentMax, e), i = $(this.currentMin, this.currentMax, e), s = V(e), n = k(t, i, s);
this._hasMounted = !1, this.$data.currentFocusedDate = v(this.$props.focusedDate || n || K(), this.currentMin, this.currentMax), this.$data.currentValue = e, this.$data.currentActiveView = _(r[this.$props.defaultActiveView], r[this.$props.bottomView], r[this.$props.topView]), this.$data.currentActiveRangeEnd = X(s, t), this._dates = [], this._calculateFocusFromValue = !1, this._lastView = this.$props.activeView || this.$data.currentActiveView, this._lastViewsCount = this.$props.views, this._dom = new q(), this._bus = new P(this.handleViewChange), this._navigation = new U(this._bus), this._oldValue = e;
},
watch: {
value: function(e) {
this.$data.currentFocusedDate = e;
},
focusedDate: function(e) {
this.$data.currentFocusedDate = e;
}
},
setup() {
return {
kendoIntlService: S("kendoIntlService", {})
};
},
mounted() {
this.calendarViewList = this.calendarViewListRef, this._calculateFocusFromValue = !0;
},
updated() {
const e = h(this.currentMin, this.currentMax, this.computedValue());
this._calculateFocusFromValue = !!(this._selectedDate && e && this._selectedDate.getTime() && e.getTime()), this._lastView = this.$props.activeView || this.$data.currentActiveView, this._lastViewsCount = this.$props.views, this._oldValue = this.computedValue(), this.calendarViewList || (this.calendarViewList = this.calendarViewListRef);
},
computed: {
activeRange() {
return this.$props.activeRangeEnd !== void 0 ? this.$props.activeRangeEnd : this.$data.currentActiveRangeEnd;
},
currentMin() {
return g(this.$props.min);
},
currentMax() {
return g(this.$props.max);
}
},
methods: {
element() {
return this.$el;
},
computedValue() {
return this.$data.valueDuringOnChange !== void 0 ? this.$data.valueDuringOnChange : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$data.currentValue;
},
focus() {
this.calendarViewList && this.calendarViewList.$el.firstElementChild.focus();
},
handleBlur() {
this.$data.isActive = !1;
},
handleFocus() {
this.$data.isActive = !0;
},
emitBlur(e) {
this.$emit("blur", e);
},
emitFocus(e) {
this.$emit("focus", e);
},
handleTodayClick(e) {
if (this.$props.disabled)
return;
this.$data.didNavigationChange = !0;
const t = a(e.value);
this.$data.currentFocusedDate = t, this.$data.currentValue = t, this.triggerChange(t, e);
},
handleViewChange({
view: e
}) {
this.$data.currentActiveView = e;
},
handlePrevClick(e) {
const t = a(e.value);
this.focus(), !this.$props.disabled && (this.$data.currentFocusedDate = t);
},
handleTitleClick() {
this.focus();
},
handleNextClick(e) {
const t = a(e.value);
this.focus(), !this.$props.disabled && (this.$data.currentFocusedDate = t);
},
handleCellEnter(e) {
this.$props.mode === "range" && (this.$data.currentFocusedDate = e);
},
generateRange(e, t) {
let {
end: i,
start: s
} = t;
const n = t.start !== null && e.getTime() <= t.start.getTime();
return !this.$props.allowReverse && n ? {
start: e,
end: this._selectedRange.start
} : this.activeRange !== "end" ? {
start: e,
end: i
} : {
start: s || this._selectedDate,
end: e
};
},
clampRange(e) {
return {
start: e,
end: null
};
},
handleWeekCellClick(e) {
this.$emit("weekcellclick", e);
},
handleWeekNameClick(e) {
this.$emit("weeknameclick", e);
},
handleDateChange(e) {
const t = a(e.value), i = this._bus.canMoveDown(this.$data.currentActiveView);
if (this.$props.disabled)
return;
if (i)
if (e.isTodayClick)
this._bus.moveToBottom(this.$data.currentActiveView);
else {
this._bus.moveDown(this.$data.currentActiveView, e.event), this.$data.currentFocusedDate = t;
return;
}
let s, n;
switch (this.$props.mode) {
case "single":
s = a(e.value);
break;
case "multiple":
if (Array.isArray(this._selectedMultiple)) {
let c = this._selectedMultiple.slice(), u = -1;
c.forEach((d, l) => {
o(d, e.value) && (u = l);
}), u !== -1 ? c.splice(u, 1) : c.push(a(e.value)), s = c.slice();
} else
this._selectedDate ? s = [a(this._selectedDate), a(e.value)] : s = [a(e.value)];
break;
case "range":
n = this._selectedRange.start !== null && this._selectedRange.end !== null && this.activeRange === "start", s = n ? this.clampRange(e.value) : this.generateRange(e.value, this._selectedRange), this.$data.currentActiveRangeEnd = this.activeRange !== "end" ? "end" : "start";
break;
default:
s = a(e.value);
break;
}
this.$data.currentValue = s, this.triggerChange(s, e);
},
triggerChange(e, t) {
this.$data.valueDuringOnChange = e;
const i = {
event: t.event,
value: e,
component: this,
target: {
name: this.$props.name,
value: e,
valueAsDate: e
}
};
this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("change", i), this.$data.valueDuringOnChange = void 0;
},
handleMouseDown(e) {
const t = a(e.value);
this.$props.disabled || this.$data.currentActiveView !== 0 || (this.$data.currentFocusedDate = t);
},
tableKeyDown(e) {
const {
keyCode: t
} = e;
if (this.$emit("keydown", e), t === T.enter) {
const i = {
event: e,
value: this._focusedDate,
component: this,
target: {
name: this.$props.name,
value: this._focusedDate,
valueAsDate: this._focusedDate
}
};
this.handleDateChange(i);
} else {
const i = v(this._navigation.move(this._focusedDate, this._navigation.action(e), this.$data.currentActiveView, this._service, e), this.currentMin, this.currentMax);
if (o(this._focusedDate, i))
return;
this._calculateFocusFromValue = !1, this.$data.currentFocusedDate = i;
}
e.preventDefault();
},
isValueEqual(e, t) {
return e instanceof Date && t instanceof Date ? o(e, t) : e instanceof Object && t instanceof Object ? !!(e && t && o(e.start, t.start) && o(e.end, t.end)) : e instanceof Array && t instanceof Array ? !!(e && t && e.length === t.length) : !1;
},
rangeWithFocused(e, t) {
return {
start: e.start,
end: e.end === null && e.start !== null && this.$data.isActive ? t.end : e.end
};
}
},
render() {
const e = this.$props.views, t = this.computedValue(), i = this.$data.currentFocusedDate, s = t !== null && this._oldValue !== null ? !this.isValueEqual(t, this._oldValue) : t !== this._oldValue;
this._selectedDate = h(this.currentMin, this.currentMax, t), this._selectedMultiple = $(this.currentMin, this.currentMax, t);
const n = f.call(this, this.$props.cell, m.call(this)), c = f.call(this, this.$props.weekCell, m.call(this)), u = f.call(this, this.$props.headerTitle, m.call(this)), d = _(this.$data.currentActiveView, r[this.$props.bottomView], r[this.$props.topView]);
this._selectedDate = h(this.currentMin, this.currentMax, t), this._selectedMultiple = $(this.currentMin, this.currentMax, t), this._selectedRange = V(t);
const l = k(this._selectedDate, this._selectedMultiple, this._selectedRange), D = v(s && l !== null ? l : i, this.currentMin, this.currentMax);
D instanceof Date ? this._focusedDate = g(D) : l && (this._focusedDate = l);
const b = this.rangeWithFocused(this._selectedRange, i);
this._intl = L(this), this._bus.configure(r[this.$props.bottomView], r[this.$props.topView]), this._service = this._bus.service(d, this._intl);
const C = E("k-calendar", "k-calendar-md", {
"k-calendar-range": e > 1,
"k-disabled": this.$props.disabled,
"k-week-number": this.$props.weekNumber
}, this.$props.className), M = this._lastView !== this.$data.currentActiveView, F = this._dates && this._service.isInArray(this._focusedDate, this._dates), A = this._lastViewsCount !== this.$props.views;
(!F || M || A) && (this._dates = this._service.datesList(this._focusedDate, e));
const R = a(this._dates && this._dates[0] ? this._dates[0] : void 0), y = [this.$props.navigation && p(z, {
tabIndex: this.$props.disabled ? void 0 : this.$props.tabIndex || 0,
activeView: this.$data.currentActiveView,
currentDate: R,
focusedDate: this._focusedDate,
min: this.currentMin,
max: this.currentMax,
rangeLength: this.$props.views,
onTodayclick: this.handleTodayClick,
onNextclick: this.handleNextClick,
onPrevclick: this.handlePrevClick,
onTitleclick: this.handleTitleClick,
bus: this._bus,
service: this._service,
headerTitle: u
}, null), p(B, {
allowReverse: this.$props.allowReverse,
isActive: this.$data.isActive,
tabIndex: this.$props.tabIndex || 0,
ref: (x) => {
this.calendarViewListRef = x;
},
activeView: this.$data.currentActiveView,
focusedDate: this._focusedDate,
min: this.currentMin,
max: this.currentMax,
bus: this._bus,
dates: this._dates,
shouldScroll: this.$data.didNavigationChange,
service: this._service,
cell: n,
weekCell: c,
dom: this._dom,
views: this.$props.views,
selectionRange: b,
showWeekNumbers: this.$props.weekNumber,
onChange: this.handleDateChange,
onWeekcellclick: this.handleWeekCellClick,
onWeeknameclick: this.handleWeekNameClick,
onListmousedown: this.handleMouseDown,
onCellenter: this.handleCellEnter,
onListkeydown: this.tableKeyDown,
onListfocus: this.handleFocus,
onListblur: this.handleBlur,
value: this._selectedMultiple || this._selectedDate,
cellUID: this.$data.cellUID
}, null)];
return p("div", {
"aria-disabled": this.$props.disabled === !0 ? !0 : void 0,
class: C,
id: this.$props.id,
onFocusout: this.emitBlur,
onFocusin: this.emitFocus
}, [y]);
}
});
export {
ue as Calendar
};