@progress/kendo-vue-inputs
Version:
390 lines (389 loc) • 12.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 b, ref as C, h as c, createVNode as n, mergeProps as w } from "vue";
import { MaskingService as x } from "./masking.service.mjs";
import { defaultRules as h, maskingChanged as P, returnFalse as f } from "./utils.mjs";
import { templateDefinition as m, validatePackage as I, guid as B, kendoThemeMaps as g, templateRendering as v, getListeners as $, getTemplate as S, Icon as u, getTabIndex as M, setRef as O } from "@progress/kendo-vue-common";
import { packageMetadata as L } from "../package-metadata.mjs";
import { checkIcon as R, exclamationCircleIcon as F, xIcon as D } from "@progress/kendo-svg-icons";
const z = /* @__PURE__ */ b({
model: {
event: "changemodel"
},
emits: ["change", "focus", "blur", "update:modelValue", "update:modelRawValue", "changemodel"],
props: {
type: {
type: String,
default: "text"
},
modelValue: String,
modelRawValue: String,
value: String,
defaultValue: String,
placeholder: String,
title: String,
dir: String,
id: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
tabIndex: Number,
accessKey: String,
disabled: Boolean,
readonly: Boolean,
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);
}
},
prompt: {
type: String,
default: "_"
},
promptPlaceholder: {
type: String,
default: " "
},
includeLiterals: {
type: Boolean,
default: !1
},
maskValidation: {
type: Boolean,
default: !0
},
mask: String,
rules: {
type: Object,
default: function() {
return h;
}
},
selection: Object,
name: String,
label: String,
validationMessage: String,
required: {
type: Boolean,
default: !1
},
valid: {
type: Boolean,
default: void 0
},
validityStyles: {
type: Boolean,
default: !0
},
iconName: String,
inputPrefix: m,
inputSuffix: m,
showValidationIcon: Boolean,
showLoadingIcon: Boolean,
showClearButton: Boolean,
inputClass: String,
wrapperClass: String,
inputAttributes: Object
},
data() {
return {
currentValue: void 0,
currentFocused: !1,
inputValue: void 0,
currentSelection: [null, null]
};
},
created() {
I(L), this.hasMounted = !1, this.valueDuringOnChange = void 0, this.inputId = `k-${B()}`, this.service = new x(), this.isPasted = !1;
},
setup() {
return {
inputRef: C(null)
};
},
mounted() {
this.hasMounted = !0, this.element = this.input = this.inputRef, this.updateService(), this.setValidity();
},
watch: {
currentFocused: function(e, t) {
this.prevCurrentFocused = t;
},
selection: function(e, t) {
this.prevSelection = t;
},
includeLiterals: function(e, t) {
this.prevIncludeLiterals = t;
},
mask: function(e, t) {
this.prevMask = t;
},
prompt: function(e, t) {
this.prevPrompt = t;
},
promptPlaceholder: function(e, t) {
this.prevPromptPlaceholder = t;
},
rules: function(e, t) {
this.prevRules = t;
}
},
updated() {
if (this.element && this.currentFocused) {
let [t, i] = this.currentSelection;
const s = this.prevSelection, a = this.$props.selection;
(!s && a || s && a && (s.start !== a.start || s.end !== a.end)) && (t = a.start, i = a.end), t !== null && i !== null && this.element.setSelectionRange(t, i);
}
const e = {
includeLiterals: this.prevIncludeLiterals,
mask: this.prevMask,
prompt: this.prevPrompt,
promptPlaceholder: this.prevPromptPlaceholder,
rules: this.prevRules
};
P(e, this.$props) && this.updateService(), this.setValidity();
},
computed: {
computedRules() {
return Object.assign({}, h, this.$props.rules);
},
spanClassNames() {
const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
return {
"k-floating-label-container": !0,
"k-focus": this.currentFocused,
"k-empty": !this.computedValue(),
"k-invalid": !e && e !== void 0,
"k-rtl": this.$props.dir === "rtl",
"k-loading": this.showLoadingIcon,
[this.wrapperClass]: this.wrapperClass
};
},
wrapperSpanClass() {
const {
size: e,
fillMode: t,
rounded: i
} = this.$props, s = !this.$props.validityStyles || this.validity().valid;
return {
"k-maskedtextbox": !0,
"k-input": !0,
[`k-input-${g.sizeMap[e] || e}`]: e,
[`k-input-${t}`]: t,
[`k-rounded-${g.roundedMap[i] || i}`]: i,
"k-invalid": !s,
"k-required": this.required,
"k-disabled": this.$props.disabled,
"k-loading": this.showLoadingIcon,
[this.wrapperClass]: this.wrapperClass
};
},
inputInnerClass() {
return {
"k-input-inner": !0,
[this.inputClass]: this.inputClass
};
}
},
methods: {
focus() {
this.input && this.input.focus();
},
computedValue() {
let e;
return this.valueDuringOnChange !== void 0 ? e = this.valueDuringOnChange : this.$props.value !== void 0 ? e = this.$props.value : this.$props.modelValue !== void 0 ? e = this.$props.modelValue : this.currentValue !== void 0 ? e = this.currentValue : this.$props.defaultValue !== void 0 && (e = this.$props.defaultValue), e || "";
},
rawValue() {
return this.service.rawValue(this.computedValue());
},
validity() {
const e = this.computedValue(), t = this.service.validationValue(e), i = this.$props.validationMessage !== void 0, s = this.$props.valid !== void 0 ? this.$props.valid : (!this.$props.required || !!t) && (!this.$props.maskValidation || !this.$props.prompt || e.indexOf(this.$props.prompt) === -1);
return {
customError: i,
valid: s,
valueMissing: !t
};
},
pasteHandler(e) {
const {
selectionStart: t,
selectionEnd: i
} = e.target;
i !== t && (this.isPasted = !0, this.currentSelection = [t || 0, i || 0]);
},
clearClick(e) {
this.triggerOnChange("", e);
},
onChangeHandler(e) {
const t = e.currentTarget, i = this.inputValue = t.value, s = this.currentSelection[0] || 0, a = this.currentSelection[1] || 0;
if (!this.$props.mask) {
this.isPasted = !1, this.currentSelection = [null, null], this.triggerOnChange(i, e);
return;
}
const o = this.computedValue();
let l;
if (this.isPasted) {
this.isPasted = !1;
const r = o.length - a, p = i.length - r;
l = this.service.maskInRange(i.slice(s, p), o, s, a);
} else
l = this.service.maskInput(i, o, t.selectionStart || 0);
this.currentSelection = [l.selection, l.selection], this.triggerOnChange(l.value, e), this.inputValue = void 0;
},
focusHandler(e) {
this.currentFocused || (this.currentFocused = !0, this.$emit("focus", {
target: this,
event: e
}));
},
blurHandler(e) {
this.currentFocused && (this.currentFocused = !1, this.$emit("blur", {
target: this,
event: e
}));
},
triggerOnChange(e, t) {
this.currentValue = e, this.valueDuringOnChange = e, this.$emit("change", {
event: t,
selectionStart: this.currentSelection[0],
selectionEnd: this.currentSelection[1],
value: this.computedValue(),
component: this,
target: {
name: this.$props.name,
value: this.computedValue(),
rawValue: this.rawValue()
},
validity: this.validity()
}), this.$emit("update:modelValue", this.computedValue()), this.$emit("update:modelRawValue", this.rawValue()), this.$emit("changemodel", this.computedValue()), this.valueDuringOnChange = void 0;
},
updateService(e) {
const t = Object.assign({
includeLiterals: this.$props.includeLiterals,
mask: this.$props.mask,
prompt: this.$props.prompt,
promptPlaceholder: this.$props.promptPlaceholder,
rules: this.$props.rules
}, e);
this.service.update(t);
},
setValidity() {
this.element && this.element.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || "");
}
},
render() {
const e = this.$props.id || this.inputId, {
iconName: t,
showValidationIcon: i,
showLoadingIcon: s,
showClearButton: a,
inputAttributes: o
} = this.$props, l = !this.$props.validityStyles || this.validity().valid, r = this.computedValue();
this.inputValue;
const p = v.call(this, this.$props.inputPrefix, $.call(this)), k = v.call(this, this.$props.inputSuffix, $.call(this)), V = S.call(this, {
h: c,
template: p,
additionalProps: {
value: r,
valid: l
}
}), y = S.call(this, {
h: c,
template: k,
additionalProps: {
value: r,
valid: l
}
}), d = n("span", {
dir: this.$props.dir,
class: this.wrapperSpanClass,
style: this.$props.label ? void 0 : {
width: this.$props.width
}
}, [t && n(u, {
name: t,
class: "k-input-icon"
}, null), this.$props.inputPrefix && n("span", {
class: "k-input-prefix"
}, [V]), n("input", w({
type: this.$props.type,
autocomplete: "off",
autocorrect: "off",
autocapitalize: "off",
spellcheck: !1,
class: this.inputInnerClass,
value: r,
id: e,
"aria-labelledby": this.$props.ariaLabelledBy,
"aria-describedby": this.$props.ariaDescribedBy,
"aria-disabled": this.$props.disabled,
name: this.$props.name,
tabindex: M(this.$props.tabIndex, this.$props.disabled, !0),
accesskey: this.$props.accessKey,
title: this.$props.title,
disabled: this.$props.disabled || void 0,
readonly: this.$props.readonly || void 0,
placeholder: this.$props.placeholder,
"aria-placeholder": this.$props.placeholder,
required: this.$props.required,
ref: O(this, "input")
}, o, {
onInput: this.onChangeHandler,
onPaste: this.pasteHandler,
onFocus: this.focusHandler,
onBlur: this.blurHandler,
onDragstart: f,
onDrop: f
}), null), this.$props.inputSuffix && n("span", {
class: "k-input-suffix"
}, [y]), i && l && n(u, {
name: "check",
icon: R,
class: "k-input-validation-icon"
}, null), i && !l && n(u, {
name: "exclamation-circle",
icon: F,
class: "k-input-validation-icon"
}, null), s && n(u, {
name: "loading",
class: "k-input-loading-icon"
}, null), a && r && n("span", {
onClick: this.clearClick,
class: "k-clear-value"
}, [n(u, {
name: "x",
icon: D
}, null)])]);
return this.$props.label ? n("span", {
class: this.spanClassNames,
dir: this.$props.dir
}, [d, this.$props.label ? e ? n("label", {
for: e,
class: "k-floating-label"
}, [this.$props.label]) : n("span", {
class: "k-label"
}, [this.$props.label]) : null]) : d;
}
});
export {
z as MaskedTextBox
};