@progress/kendo-vue-inputs
Version:
344 lines (343 loc) • 9.56 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 M, h as d, createVNode as t } from "vue";
import { validatePackage as P, guid as T, kendoThemeMaps as f, isRtl as q, getTabIndex as D, templateRendering as g, getListeners as x, getTemplate as k, Icon as s } from "@progress/kendo-vue-common";
import { packageMetadata as H } from "../package-metadata.mjs";
import { exclamationCircleIcon as L, xIcon as W } from "@progress/kendo-svg-icons";
import { TextAreaResizeEnum as h } from "./interfaces/TextAreaResize.mjs";
const K = /* @__PURE__ */ M({
name: "KendoTextArea",
model: {
event: "changemodel"
},
emits: {
input: null,
change: null,
changemodel: null,
"update:modelValue": null,
focus: null,
blur: null
},
props: {
title: String,
ariaDescribedBy: String,
ariaLabelledBy: String,
autoSize: Boolean,
modelValue: {
type: [String, Array, Number],
default: void 0
},
defaultValue: [String, Number],
dir: String,
disabled: Boolean,
readOnly: Boolean,
rows: Number,
id: String,
name: String,
validationMessage: String,
size: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large"].includes(e);
}
},
rounded: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large", "full"].includes(e);
}
},
fillMode: {
type: String,
default: "solid",
validator: function(e) {
return [null, "solid", "flat", "outline"].includes(e);
}
},
required: Boolean,
placeholder: String,
tabIndex: Number,
valid: {
type: Boolean,
default: void 0
},
value: [String, Array, Number],
validityStyles: {
type: Boolean,
default: !0
},
iconName: String,
inputPrefix: [String, Function],
inputSuffix: [String, Function],
showValidationIcon: Boolean,
showLoadingIcon: Boolean,
showClearButton: Boolean,
inputClass: String,
wrapperClass: String,
flow: {
type: String,
default: "horizontal",
validator: function(e) {
return ["horizontal", "vertical"].includes(e);
}
},
resizable: {
type: String,
default: "vertical",
validator: function(e) {
return ["both", "horizontal", "vertical", "none"].includes(e);
}
},
inputAttributes: Object
},
created() {
P(H), this.calculatedId = T();
},
computed: {
resizableClass() {
const {
resizable: e,
autoSize: a
} = this.$props;
return a || e === h.none ? "k-resize-none" : e === h.vertical ? "k-resize-y" : e === h.horizontal ? "k-resize-x" : "k-resize";
},
rootClassName() {
const {
size: e,
fillMode: a,
rounded: l,
required: i,
showLoadingIcon: n
} = this.$props, r = this.validityStyles === !0 ? !this.isValid : !1;
return {
"k-input": !0,
"k-textarea": !0,
[`k-input-${f.sizeMap[e] || e}`]: e,
[`k-input-${a}`]: a,
[`k-rounded-${f.roundedMap[l] || l}`]: l,
"k-disabled": this.$props.disabled,
"k-invalid": r,
"k-required": i,
"k-loading": n,
[this.resizableClass]: !0,
"!k-flex-col": this.flow === "vertical",
"!k-flex-row": this.flow === "horizontal",
[this.wrapperClass]: this.wrapperClass
};
},
inputInnerClass() {
return {
"k-input-inner": !0,
"!k-resize-none": !0,
"!k-overflow-auto": !0,
"k-flex": !0,
[this.inputClass]: this.inputClass
};
},
prefixRenderClass() {
return {
"k-input-prefix": !0,
"!k-flex-col": this.flow === "horizontal",
"!k-flex-row": this.flow === "vertical",
"!k-align-items-start": this.flow === "horizontal"
};
},
suffixRenderClass() {
return {
"k-input-suffix": !0,
"!k-flex-col": this.flow === "horizontal",
"!k-flex-row": this.flow === "vertical",
"!k-align-items-start": this.flow === "horizontal"
};
},
suffixIconWrapClass() {
return {
"k-flex-wrap": !0,
"!k-align-items-start": !0
};
},
computedValue() {
return this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue;
},
isValid() {
return this.valid !== void 0 ? this.valid : this.required ? !!this.computedValue : !0;
}
},
data() {
return {
currentValue: this.$props.defaultValue,
textAreaHeight: "auto",
currentDir: "ltr"
};
},
watch: {
size() {
this.textAreaHeight = "auto";
},
computedValue() {
this.textAreaHeight = "auto";
}
},
mounted() {
this.element = this.elementRef, this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : q(this.$el) ? "rtl" : "ltr", this.setValidity();
},
updated() {
this.element = this.elementRef, this.setValidity();
},
render() {
const {
ariaDescribedBy: e,
ariaLabelledBy: a,
autoSize: l,
disabled: i,
readOnly: n,
required: r,
rows: b,
id: v,
name: C,
placeholder: V,
tabIndex: y,
iconName: o,
showValidationIcon: u,
showLoadingIcon: p,
showClearButton: c,
title: w,
inputAttributes: S
} = this.$props, $ = {
...S,
id: v || this.calculatedId,
name: C,
disabled: i,
rows: b,
title: w,
placeholder: V,
readOnly: n,
required: r,
tabIndex: D(y, i),
"aria-labelledby": a,
"aria-describedby": e,
"aria-multiline": !0,
"aria-disabled": i || void 0,
...this.$attrs
}, z = g.call(this, this.$props.inputPrefix, x.call(this)), I = g.call(this, this.$props.inputSuffix, x.call(this)), B = k.call(this, {
h: d,
template: z,
additionalProps: {
value: this.computedValue,
valid: this.isValid
}
}), A = k.call(this, {
h: d,
template: I,
additionalProps: {
value: this.computedValue,
valid: this.isValid
}
}), N = d("textarea", {
...$,
class: this.inputInnerClass,
ref: (R) => {
this.elementRef = R;
},
style: l ? {
overflow: "hidden",
height: this.textAreaHeight
} : {},
value: this.computedValue,
onChange: this.handleChange,
onInput: this.handleInput,
onFocus: this.handleFocus,
onBlur: this.handleBlur
}), m = [o && t("span", {
class: "k-flex-wrap"
}, [t(s, {
name: o,
class: "k-input-icon"
}, null)]), N, u && this.isValid && t("span", {
class: this.suffixIconWrapClass
}, [t(s, {
name: "check",
class: "k-input-validation-icon"
}, null)]), u && !this.isValid && t("span", {
class: this.suffixIconWrapClass
}, [t(s, {
name: "exclamation-circle",
icon: L,
class: "k-input-validation-icon"
}, null)]), p && t("span", {
class: this.suffixIconWrapClass
}, [t(s, {
name: "loading",
class: "k-input-loading-icon"
}, null)]), c && this.computedValue && t("span", {
class: this.suffixIconWrapClass
}, [t("span", {
onClick: this.clearClick,
class: "k-clear-value"
}, [t(s, {
name: "x",
icon: W
}, null)])])];
return t("span", {
class: this.rootClassName,
dir: this.currentDir === "rtl" ? this.currentDir : "",
style: this.$attrs.style
}, [this.$props.inputPrefix && t("span", {
class: this.prefixRenderClass
}, [B]), o || u || p || c ? t("span", {
class: "k-hstack k-flex"
}, [m]) : m, this.$props.inputSuffix && t("span", {
class: this.suffixRenderClass
}, [A])]);
},
methods: {
setValidity() {
this.element && this.element.setCustomValidity && this.element.setCustomValidity(this.isValid ? "" : this.validationMessage || ""), this.element && (this.textAreaHeight = `${this.element.scrollHeight}px`);
},
clearClick(e) {
this.emitUpdate(e, "change", "");
},
focus() {
this.element && this.element.focus();
},
emitUpdate(e, a, l) {
const i = l;
this.$props.disabled || (this.currentValue = i), this.$props.disabled || (this.$emit("changemodel", i), this.$emit("update:modelValue", i), this.$emit(a, {
event: e,
component: this,
name: this.element.name,
value: i
}));
},
handleChange(e) {
this.emitUpdate(e, "change", e.target.value);
},
handleInput(e) {
this.emitUpdate(e, "input", e.target.value);
},
handleFocus(e) {
this.$props.disabled || this.$emit("focus", {
event: e,
component: this,
name: this.element.name
});
},
handleBlur(e) {
this.$props.disabled || this.$emit("blur", {
event: e,
component: this,
name: this.element.name
});
}
}
});
export {
K as TextArea
};