@progress/kendo-vue-inputs
Version:
351 lines (350 loc) • 10.4 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 x, ref as C, h as o, createVNode as a, isVNode as _ } from "vue";
import { validatePackage as w, guid as I, templateRendering as h, getListeners as c, getTemplate as f, Icon as n, kendoThemeMaps as m } from "@progress/kendo-vue-common";
import { packageMetadata as M } from "../package-metadata.mjs";
import { FloatingLabel as B } from "@progress/kendo-vue-labels";
import { checkIcon as N, exclamationCircleIcon as F, xIcon as O } from "@progress/kendo-svg-icons";
function L(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !_(t);
}
const R = /* @__PURE__ */ x({
model: {
event: "changemodel"
},
inheritAttrs: !1,
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
},
iconName: String,
inputPrefix: [String, Function],
inputSuffix: [String, Function],
showValidationIcon: Boolean,
showLoadingIcon: Boolean,
showClearButton: Boolean,
inputClass: String,
wrapperClass: String,
tabIndex: Number,
role: String,
title: String,
ariaLabel: String,
inputAttributes: Object
},
data: function() {
return {
hasMounted: !1,
autofill: !1,
currentValue: "",
valueDuringOnChange: "",
focused: !1
};
},
created() {
w(M), this._input = void 0, this._inputId = I(), this.$data.valueDuringOnChange = void 0, this.$data.currentValue = this.$props.defaultValue;
},
mounted() {
this._input = this.inputRef, this.wrapper = this.wrapperRef, this.$data.hasMounted = !0, this.setValidity();
},
updated() {
this.setValidity(), this.updateValidClass();
},
setup() {
return {
inputRef: C(null)
};
},
render() {
const t = !this.$props.validityStyles || this.validity().valid, {
label: i,
id: e,
required: l,
iconName: d,
showValidationIcon: r,
showLoadingIcon: g,
showClearButton: y,
inputAttributes: v
} = this.$props, p = e || this._inputId, $ = o("input", {
...this.$attrs,
...v,
"aria-label": this.$props.ariaLabel,
role: this.$props.role,
title: this.$props.title,
tabindex: this.$props.tabIndex,
placeholder: this.$props.placeholder,
id: p,
required: l,
disabled: this.$props.disabled,
value: this.computedValue,
class: this.inputInnerClass,
ref: (u) => {
this.inputRef = u;
},
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
}), k = h.call(this, this.$props.inputPrefix, c.call(this)), b = h.call(this, this.$props.inputSuffix, c.call(this)), V = f.call(this, {
h: o,
template: k,
additionalProps: {
value: this.computedValue,
valid: t
}
}), S = f.call(this, {
h: o,
template: b,
additionalProps: {
value: this.computedValue,
valid: t
}
}), s = a("span", {
class: this.inputWrapperClass(),
ref: (u) => {
this.wrapperRef = u;
}
}, [d && a(n, {
name: d,
class: "k-input-icon"
}, null), this.$props.inputPrefix && a("span", {
class: "k-input-prefix"
}, [V]), $, this.$props.inputSuffix && a("span", {
class: "k-input-suffix"
}, [S]), r && t && a(n, {
name: "check",
icon: N,
class: "k-input-validation-icon"
}, null), r && !t && a(n, {
name: "exclamation-circle",
icon: F,
class: "k-input-validation-icon"
}, null), g && a(n, {
name: "loading",
class: "k-input-loading-icon"
}, null), y && this.computedValue && a("span", {
onClick: this.clearClick,
class: "k-clear-value"
}, [a(n, {
name: "x",
icon: O
}, null)])]);
return i ? a(B, {
label: i,
editorId: p,
editorValue: this.computedValue,
editorValid: t,
editorDisabled: this.$props.disabled,
editorPlaceholder: this.$data.focused ? this.$props.placeholder : "",
dir: this.$props.dir
}, L(s) ? s : {
default: () => [s]
}) : s;
},
methods: {
updateValidClass() {
this.wrapper.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 = {
badTextBox: this._input ? this._input.validity.badTextBox : !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 (const 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") {
const 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;
},
inputWrapperClass() {
const {
size: t,
fillMode: i,
rounded: e
} = this.$props, l = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
return {
"k-textbox": !0,
"k-input": !0,
[`k-input-${m.sizeMap[t] || t}`]: t,
[`k-input-${i}`]: i,
[`k-rounded-${m.roundedMap[e] || e}`]: e,
"k-invalid": !l,
"k-required": this.required,
"k-disabled": this.$props.disabled,
[this.wrapperClass]: this.wrapperClass
};
}
},
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() {
return {
"k-input-inner": !0,
[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 {
R as TextBox
};