@progress/kendo-vue-dateinputs
Version:
455 lines (454 loc) • 13.9 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 oe, ref as _, inject as le, createVNode as n, h as s, isVNode as ue } from "vue";
import { calendarIcon as k } from "@progress/kendo-svg-icons";
import { Popup as se } from "@progress/kendo-vue-popup";
import { cloneDate as d, getDate as de } from "@progress/kendo-date-math";
import { validatePackage as re, guid as V, getRef as w, canUseDOM as he, Keys as i, getDefaultSlots as pe, classNames as C, templateRendering as r, getListeners as h, getTemplate as p, Icon as ce, setRef as v, kendoThemeMaps as T } from "@progress/kendo-vue-common";
import { packageMetadata as fe } from "../package-metadata.mjs";
import { DateInput as me } from "../dateinput/DateInput.mjs";
import { Calendar as ge } from "../calendar/components/Calendar.mjs";
import { MAX_DATE as $e, MIN_DATE as Se, isInDateRange as we, setTime as ve } from "../utils.mjs";
import { toggleCalendar as c, messages as F } from "../messages/main.mjs";
import { provideLocalizationService as B } from "@progress/kendo-vue-intl";
import { ToggleButton as De } from "./ToggleButton.mjs";
import { FloatingLabel as be } from "@progress/kendo-vue-labels";
function O(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ue(e);
}
const je = /* @__PURE__ */ oe({
name: "DatePicker",
inject: {
kendoLocalizationService: {
default: null
}
},
model: {
event: "changemodel"
},
emits: {
change: null,
changemodel: null,
"update:modelValue": null,
iconclick: null,
focus: null,
blur: null,
keydown: null,
open: null,
close: null
},
props: {
defaultShow: {
type: Boolean,
default: !1
},
modelValue: {
type: Date,
default: void 0
},
defaultValue: {
type: Date,
default: void 0
},
disabled: {
type: Boolean,
default: !1
},
dateInput: {
type: [String, Object, Function],
default: function() {
}
},
calendar: {
type: [String, Object, Function],
default: function() {
}
},
toggleButton: {
type: [String, Object, Function],
default: function() {
}
},
label: String,
placeholder: String,
popup: {
type: [String, Object, Function],
default: function() {
}
},
rounded: {
type: String,
default: "medium",
validator: function(e) {
return ["small", "medium", "large", "full"].includes(e);
}
},
fillMode: {
type: String,
default: "solid",
validator: function(e) {
return ["solid", "flat", "outline"].includes(e);
}
},
size: {
type: String,
default: "medium",
validator: function(e) {
return ["small", "medium", "large"].includes(e);
}
},
focusedDate: Date,
format: {
type: [Object, String],
default: function() {
return "d";
}
},
formatPlaceholder: [Object, String],
id: String,
max: {
type: Date,
default: function() {
return d($e);
}
},
min: {
type: Date,
default: function() {
return d(Se);
}
},
name: String,
popupSettings: {
type: Object,
default: function() {
return {};
}
},
show: {
type: Boolean,
default: void 0
},
tabIndex: {
type: Number,
default: 0
},
title: {
type: String,
default: function() {
return "";
}
},
value: Date,
weekNumber: Boolean,
width: [Number, String],
validityStyles: {
type: Boolean,
default: !0
},
validationMessage: String,
required: Boolean,
validate: Boolean,
valid: {
type: Boolean,
default: void 0
},
ariaLabel: String,
inputAttributes: Object
},
data: function() {
return {
isFocused: !1,
currentValue: void 0,
currentShow: void 0,
valueDuringOnChange: void 0,
showDuringOnChange: void 0,
shouldFocusDateInput: !1
};
},
created() {
re(fe), this._popupId = V(), this._anchor = V(), this._dateInput = null, this._calendar = null, this.$data.currentValue = this.$props.defaultValue, this.$data.currentShow = this.$props.defaultShow;
},
mounted() {
this._dateInput = w(this, "dateInput"), (this.$refs.calendar || this.calendarRef) && (this._calendar = w(this, "calendar")), this.computedShow && this.$forceUpdate();
},
updated() {
(this.$refs.calendar || this.calendarRef) && (this._calendar = w(this, "calendar")), this.computedShow ? this._calendar && this._calendar.$el && !this._oldShow && this._calendar.focus({
preventScroll: !0
}) : this._dateInput && this._dateInput.$el && this.$data.shouldFocusDateInput && this._dateInput.focus({
preventScroll: !0
}), this.$data.shouldFocusDateInput = !1;
},
watch: {
show: function(e, t) {
this._oldShow = t;
},
currentShow: function(e, t) {
this._oldShow = t;
}
},
computed: {
computedValue() {
const e = 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;
return e !== null ? d(e) : null;
},
computedShow() {
return this.$data.showDuringOnChange !== void 0 ? this.$data.showDuringOnChange : this.$props.show !== void 0 ? this.$props.show : this.$data.currentShow;
}
},
methods: {
focus() {
this._dateInput && this._dateInput.focus();
},
handleFocus(e) {
this._oldShow = this.computedShow, this.$data.isFocused = !0, this.$emit("focus", e);
},
handleBlur(e) {
this.$data.isFocused = !1, this.createBlurTimeout(), this.$emit("blur", e);
},
calendarBlur() {
this.$emit("blur", event), clearTimeout(this._blurTimeout), this.createBlurTimeout();
},
calendarFocus() {
this.$emit("focus", event), clearTimeout(this._blurTimeout);
},
createBlurTimeout() {
this._blurTimeout = setTimeout(() => {
this._dateInput && he && document.activeElement !== this._dateInput._element && this.setShow(!1);
}, 200);
},
validity() {
const e = this.computedValue, t = we(e, this.$props.min, this.$props.max), a = this.$props.validationMessage !== void 0, o = (!this.$props.required || e !== null) && t, f = this.$props.valid !== void 0 ? this.$props.valid : o;
return {
customError: a,
rangeOverflow: e && this.$props.max.getTime() < e.getTime() || !1,
rangeUnderflow: e && e.getTime() < this.$props.min.getTime() || !1,
valid: f,
valueMissing: e === null
};
},
nextValue(e, t) {
return e.value !== void 0 ? e.value : t.value;
},
nextShow(e, t) {
return e.show !== void 0 ? e.show : t.show;
},
setShow(e) {
this.computedShow !== e && (this.$data.currentShow = e, this.$emit(e ? "open" : "close", {
component: this
}));
},
mergeTime(e) {
return this.computedValue && e ? ve(e, this.computedValue) : e;
},
handleInputValueChange(e) {
this.handleValueChange(e.value, e);
},
handleCalendarValueChange(e) {
const t = this.mergeTime(e.value);
this.handleValueChange(t, e);
},
getDateInputText() {
return this.computedValue ? !0 : this._dateInput ? this._dateInput._element.value : "";
},
handleValueChange(e, t) {
this.$data.currentValue = d(e || void 0), this.$data.valueDuringOnChange = e, this.$data.showDuringOnChange = !1, this.$data.shouldFocusDateInput = !0, this.$emit("changemodel", this.computedValue), this.$emit("update:modelValue", this.computedValue), this.$emit("change", {
event: t.event,
value: this.computedValue,
show: this.computedShow,
component: this,
target: {
name: this.$props.name,
value: this.computedValue,
valueAsDate: this.computedValue
},
validity: this.validity()
}), this.$data.valueDuringOnChange = void 0, this.$data.showDuringOnChange = void 0, this.setShow(!1);
},
handleIconClick(e) {
e.stopPropagation(), e.preventDefault(), !this.$props.disabled && (this.$data.shouldFocusDateInput = !0, this.$emit("iconclick", e), this.setShow(!this.computedShow));
},
handleIconMouseDown(e) {
e.stopPropagation(), e.preventDefault();
},
handleKeyDown(e) {
const {
altKey: t,
keyCode: a
} = e;
if (a === i.tab && this._dateInput && e.target !== this._dateInput._element) {
e.preventDefault(), this.$data.shouldFocusDateInput = !0, this.setShow(!1);
return;
}
if (a === i.esc) {
this.$data.shouldFocusDateInput = !0, this.setShow(!1);
return;
}
t && (a === i.up || a === i.down) && (e.preventDefault(), e.stopPropagation(), this.$data.shouldFocusDateInput = a === i.up, this.setShow(a === i.down)), this.$emit("keydown", e);
}
},
setup() {
const e = _(null), t = _(null), a = le("kendoLocalizationService", {});
return {
listRef: e,
kendoAnchorRef: t,
kendoLocalizationService: a
};
},
render() {
pe(this);
const {
disabled: e,
tabIndex: t,
title: a,
id: o,
format: f,
formatPlaceholder: R,
min: D,
max: b,
weekNumber: M,
focusedDate: x,
width: j,
name: L,
validationMessage: z,
required: A,
validityStyles: N,
size: m,
fillMode: I,
rounded: g,
ariaLabel: P,
inputAttributes: K
} = this.$props, {
popupClass: q,
animate: E,
appendTo: U
} = this.$props.popupSettings, $ = this.computedShow, S = this.computedValue, H = S && de(S), y = !this.$props.validityStyles || this.validity().valid, X = C("k-calendar-container k-group k-reset", q), G = this.$props.toggleButton ? r.call(this, this.$props.toggleButton, h.call(this)) : void 0, J = n(De, {
type: "button",
tabIndex: -1,
icon: "calendar",
svgIcon: k,
onMousedown: this.handleIconMouseDown,
onClick: this.handleIconClick,
title: B(this).toLanguageString(c, F[c]),
"aria-label": B(this).toLanguageString(c, F[c]),
rounded: null,
class: "k-input-button"
}, null), Q = p.call(this, {
h: s,
template: G,
defaultRendering: J,
defaultSlots: n(ce, {
name: "calendar",
icon: k
}, null),
additionalListeners: {
click: this.handleIconClick
}
}), W = this.$props.dateInput ? r.call(this, this.$props.dateInput, h.call(this)) : void 0, Y = n(me, {
ref: v(this, "dateInput"),
placeholder: this.$props.placeholder,
disabled: e,
format: f,
formatPlaceholder: R,
id: o,
max: b,
min: D,
name: L,
size: null,
rounded: null,
fillMode: null,
onChange: this.handleInputValueChange,
required: A,
tabIndex: $ ? -1 : t,
title: a,
valid: this.validity().valid,
validationMessage: z,
validityStyles: N,
value: S,
ariaHasPopup: "grid",
ariaExpanded: $,
ariaRole: "combobox",
ariaControls: this._popupId,
ariaLabel: P,
inputAttributes: K
}, null), Z = p.call(this, {
h: s,
template: W,
defaultRendering: Y
}), ee = this.$props.calendar ? r.call(this, this.$props.calendar, h.call(this)) : void 0, te = n(ge, {
ref: v(this, "calendar"),
onKeydown: this.handleKeyDown,
onFocus: this.calendarFocus,
onBlur: this.calendarBlur,
disabled: e,
value: H,
min: D,
max: b,
weekNumber: M,
focusedDate: x,
onChange: this.handleCalendarValueChange
}, null), l = p.call(this, {
h: s,
template: ee,
defaultRendering: te
}), ae = this.$props.popup ? r.call(this, this.$props.popup, h.call(this)) : void 0, ne = n(se, {
show: $,
anchor: this._anchor,
class: X,
id: this._popupId,
anchorAlign: {
horizontal: "left",
vertical: "bottom"
},
popupAlign: {
horizontal: "left",
vertical: "top"
},
animate: E,
appendTo: U
}, O(l) ? l : {
default: () => [l]
}), ie = p.call(this, {
h: s,
template: ae,
defaultRendering: ne,
defaultSlots: l
}), u = n("span", {
ref: v(this, "kendoAnchor"),
role: "group",
class: C("k-input", "k-datepicker", {
[`k-input-${T.sizeMap[m] || m}`]: m,
[`k-input-${I}`]: I,
[`k-rounded-${T.roundedMap[g] || g}`]: g,
"k-invalid": !y,
"k-required": this.required,
"k-disabled": this.$props.disabled,
"k-focus": this.$data.isFocused
}),
onKeydown: this.handleKeyDown,
onFocusin: this.handleFocus,
onFocusout: this.handleBlur
}, [Z, Q, ie]);
return this.$props.label ? n(be, {
label: this.$props.label,
editorId: o,
editorValid: y,
editorValue: this.getDateInputText(),
editorPlaceholder: this.$props.placeholder,
editorDisabled: this.$props.disabled,
style: {
width: j
}
}, O(u) ? u : {
default: () => [u]
}) : u;
}
});
export {
je as DatePicker
};