@progress/kendo-vue-inputs
Version:
290 lines (289 loc) • 8.46 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 h, ref as f, h as c, createVNode as m, isVNode as y } from "vue";
import { validatePackage as g, guid as v, kendoThemeMaps as n } from "@progress/kendo-vue-common";
import { packageMetadata as $ } from "../package-metadata.mjs";
import { FloatingLabel as b } from "@progress/kendo-vue-labels";
function V(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !y(t);
}
const M = /* @__PURE__ */ h({
model: {
event: "changemodel"
},
emits: {
input: null,
change: null,
changemodel: null,
"update:modelValue": null,
focus: null,
blur: null,
keyup: null,
keydown: null,
keypress: null
},
props: {
modelValue: {
type: [String, Number],
default: void 0
},
disabled: {
type: Boolean,
default: void 0
},
defaultValue: {
type: [String, Number],
default: ""
},
value: {
type: [String, Number]
},
label: {
type: String
},
placeholder: {
type: String
},
required: {
type: Boolean,
default: !1
},
size: {
type: String,
default: "medium",
validator: function(t) {
return [null, "small", "medium", "large"].includes(t);
}
},
rounded: {
type: String,
default: "medium",
validator: function(t) {
return [null, "small", "medium", "large", "full"].includes(t);
}
},
fillMode: {
type: String,
default: "solid",
validator: function(t) {
return [null, "solid", "flat", "outline"].includes(t);
}
},
dir: {
type: String
},
id: String,
valid: {
type: Boolean,
default: void 0
},
validate: {
type: Boolean
},
validationMessage: {
type: String
},
validityStyles: {
type: Boolean,
default: !0
},
inputClass: String,
tabIndex: Number,
ariaLabel: String,
ariaLabelledBy: String,
ariaDescribedBy: String
},
data: function() {
return {
hasMounted: !1,
autofill: !1,
currentValue: "",
valueDuringOnChange: "",
focused: !1
};
},
created() {
g($), this._input = void 0, this._inputId = v(), this.$data.valueDuringOnChange = void 0, this.$data.currentValue = this.$props.defaultValue;
},
mounted() {
this._input = this.inputRef, this.$data.hasMounted = !0, this.setValidity();
},
updated() {
this.setValidity(), this.updateValidClass();
},
setup() {
return {
inputRef: f(null)
};
},
render() {
const t = !this.$props.validityStyles || this.validity().valid, {
label: i,
id: e,
required: s,
tabIndex: d,
ariaLabel: u,
ariaLabelledBy: r,
ariaDescribedBy: o
} = this.$props, l = e || this._inputId, a = c("input", {
...this.$attrs,
placeholder: this.$props.placeholder,
id: l,
tabindex: d,
required: s,
ariaLabel: u,
ariaLabelledby: r,
ariaDescribedby: o,
ariaDisabled: this.$props.disabled,
disabled: this.$props.disabled,
value: this.computedValue,
class: this.inputInnerClass,
ref: (p) => {
this.inputRef = p;
},
onKeydown: this.handleKeydown,
onKeyup: this.handleKeyup,
onKeypress: this.handleKeypress,
onChange: this.handleChange,
onFocus: this.emitFocus,
onBlur: this.emitBlur,
onInput: this.handleInput,
onAnimationstart: this.handleAutoFill,
onAnimationend: this.handleAutoFillEnd
});
return i ? m(b, {
label: i,
editorId: l,
editorValue: this.computedValue,
editorValid: t,
editorDisabled: this.$props.disabled,
editorPlaceholder: this.$data.focused ? this.$props.placeholder : "",
dir: this.$props.dir
}, V(a) ? a : {
default: () => [a]
}) : a;
},
methods: {
updateValidClass() {
this._input.classList.toggle("k-invalid", !this.validity().valid);
},
emitFocus(t) {
this.$emit("focus", t), this.$data.focused = !0;
},
emitBlur(t) {
this.$emit("blur", t), this.$data.focused = !1;
},
handleKeydown(t) {
this.$emit("keydown", t);
},
handleKeyup(t) {
this.$emit("keyup", t);
},
handleKeypress(t) {
this.$emit("keypress", t);
},
clearClick(t) {
this.emitUpdate(t, "change", "");
},
focus() {
this._input && this._input.focus();
},
validity() {
const t = {
badInput: this._input ? this._input.validity.badInput : !1,
patternMismatch: this._input ? this._input.validity.patternMismatch : !1,
rangeOverflow: this._input ? this._input.validity.rangeOverflow : !1,
rangeUnderflow: this._input ? this._input.validity.rangeUnderflow : !1,
stepMismatch: this._input ? this._input.validity.stepMismatch : !1,
tooLong: this._input ? this._input.validity.tooLong : !1,
tooShort: this._input ? this._input.validity.tooShort : !1,
typeMismatch: this._input ? this._input.validity.typeMismatch : !1,
valueMissing: this._input ? this._input.validity.valueMissing : !1
};
return {
...t,
customError: this.$props.validationMessage !== void 0,
valid: this.$props.valid !== void 0 ? this.$props.valid : this._input ? !this.isInvalid(t) : !0
};
},
isInvalid(t) {
let i = !1;
for (let e in t)
t.hasOwnProperty(e) && (i = i || t[e]);
return i;
},
setValidity() {
this._input && this._input.setCustomValidity && this._input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || "");
},
handleInput(t) {
this.emitUpdate(t, "input", t.target.value);
},
handleChange(t) {
this.emitUpdate(t, "change", t.target.value);
},
emitUpdate(t, i, e) {
this.disabled || (this.$data.currentValue = e, this.$data.valueDuringOnChange = e, this.$nextTick(() => {
this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit(i, {
event: t,
value: e,
component: this,
target: t.target,
validity: this.validity()
}), this.$data.valueDuringOnChange = void 0;
}));
},
handleAutoFill(t) {
if (t.animationName === "autoFillStart") {
let i = t.target.parentNode;
i && i.classList.contains("k-empty") && (this.$data.autofill = !0, i.classList.remove("k-empty"));
}
},
handleAutoFillEnd(t) {
t.animationName === "autoFillEnd" && t.target.parentNode && (this.$data.autofill = !1);
},
name: function() {
return this.$props.name;
}
},
computed: {
spanClassNames() {
const t = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
return {
"k-floating-label-container": !0,
"k-focus": this.$data.focused,
"k-empty": !(this.computedValue === 0 || this.computedValue || this.$props.placeholder || this.$data.autofill),
"k-autofill": this.$data.autofill,
"k-invalid": !t && t !== void 0,
"k-rtl": this.$props.dir === "rtl"
};
},
inputInnerClass() {
const {
size: t,
fillMode: i,
rounded: e
} = this.$props, s = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
return {
"k-input": !0,
[`k-input-${n.sizeMap[t] || t}`]: t,
[`k-input-${i}`]: i,
[`k-rounded-${n.roundedMap[e] || e}`]: e,
"k-invalid": !s,
"k-required": this.required,
"k-disabled": this.$props.disabled,
[this.inputClass]: this.inputClass
};
},
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;
}
}
});
export {
M as Input
};