@progress/kendo-vue-inputs 6.1.0-develop.1 → 6.1.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-vue-inputs.js +1 -1
- package/index.d.mts +110 -80
- package/index.d.ts +110 -80
- package/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +43 -40
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +69 -67
- package/package-metadata.mjs +1 -1
- package/package.json +8 -8
- package/textarea/TextArea.js +1 -1
- package/textarea/TextArea.mjs +31 -28
- package/textbox/TextBox.js +1 -1
- package/textbox/TextBox.mjs +24 -21
package/textbox/TextBox.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),a=require("@progress/kendo-vue-common")
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),a=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),k=require("@progress/kendo-vue-labels"),o=require("@progress/kendo-svg-icons");function b(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!i.isVNode(t)}const S=i.defineComponent({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(){a.validatePackage(V.packageMetadata),this._input=void 0,this._inputId=a.guid(),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:i.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:e,id:n,required:l,iconName:d,showValidationIcon:r,showLoadingIcon:h,showClearButton:c,inputAttributes:f}=this.$props,p=n||this._inputId,m=i.h("input",{...this.$attrs,...f,"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}),g=a.templateRendering.call(this,this.$props.inputPrefix,a.getListeners.call(this)),y=a.templateRendering.call(this,this.$props.inputSuffix,a.getListeners.call(this)),v=a.getTemplate.call(this,{h:i.h,template:g,additionalProps:{value:this.computedValue,valid:t}}),$=a.getTemplate.call(this,{h:i.h,template:y,additionalProps:{value:this.computedValue,valid:t}}),s=i.createVNode("span",{class:this.inputWrapperClass(),ref:u=>{this.wrapperRef=u}},[d&&i.createVNode(a.Icon,{name:d,class:"k-input-icon"},null),this.$props.inputPrefix&&i.createVNode("span",{class:"k-input-prefix"},[v]),m,this.$props.inputSuffix&&i.createVNode("span",{class:"k-input-suffix"},[$]),r&&t&&i.createVNode(a.Icon,{name:"check",icon:o.checkIcon,class:"k-input-validation-icon"},null),r&&!t&&i.createVNode(a.Icon,{name:"exclamation-circle",icon:o.exclamationCircleIcon,class:"k-input-validation-icon"},null),h&&i.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),c&&this.computedValue&&i.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[i.createVNode(a.Icon,{name:"x",icon:o.xIcon},null)])]);return e?i.createVNode(k.FloatingLabel,{label:e,editorId:p,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},b(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 e=!1;for(const n in t)t.hasOwnProperty(n)&&(e=e||t[n]);return e},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,e,n){this.disabled||(this.$data.currentValue=n,this.$data.valueDuringOnChange=n,this.$nextTick(()=>{this.$emit("changemodel",n),this.$emit("update:modelValue",n),this.$emit(e,{event:t,value:n,component:this,target:t.target,validity:this.validity()}),this.$data.valueDuringOnChange=void 0}))},handleAutoFill(t){if(t.animationName==="autoFillStart"){const e=t.target.parentNode;e&&e.classList.contains("k-empty")&&(this.$data.autofill=!0,e.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:e,rounded:n}=this.$props,l=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-textbox":!0,"k-input":!0,[`k-input-${a.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${a.kendoThemeMaps.roundedMap[n]||n}`]:n,"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}}});exports.TextBox=S;
|
package/textbox/TextBox.mjs
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as
|
|
9
|
-
import { validatePackage as
|
|
10
|
-
import { packageMetadata as
|
|
11
|
-
import { FloatingLabel as
|
|
12
|
-
import { checkIcon as
|
|
8
|
+
import { defineComponent as x, ref as C, h as o, createVNode as a, isVNode as _ } from "vue";
|
|
9
|
+
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";
|
|
10
|
+
import { packageMetadata as M } from "../package-metadata.mjs";
|
|
11
|
+
import { FloatingLabel as B } from "@progress/kendo-vue-labels";
|
|
12
|
+
import { checkIcon as N, exclamationCircleIcon as F, xIcon as O } from "@progress/kendo-svg-icons";
|
|
13
13
|
function L(t) {
|
|
14
|
-
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !
|
|
14
|
+
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !_(t);
|
|
15
15
|
}
|
|
16
|
-
const
|
|
16
|
+
const R = /* @__PURE__ */ x({
|
|
17
17
|
model: {
|
|
18
18
|
event: "changemodel"
|
|
19
19
|
},
|
|
@@ -105,7 +105,8 @@ const D = /* @__PURE__ */ b({
|
|
|
105
105
|
tabIndex: Number,
|
|
106
106
|
role: String,
|
|
107
107
|
title: String,
|
|
108
|
-
ariaLabel: String
|
|
108
|
+
ariaLabel: String,
|
|
109
|
+
inputAttributes: Object
|
|
109
110
|
},
|
|
110
111
|
data: function() {
|
|
111
112
|
return {
|
|
@@ -117,7 +118,7 @@ const D = /* @__PURE__ */ b({
|
|
|
117
118
|
};
|
|
118
119
|
},
|
|
119
120
|
created() {
|
|
120
|
-
|
|
121
|
+
w(M), this._input = void 0, this._inputId = I(), this.$data.valueDuringOnChange = void 0, this.$data.currentValue = this.$props.defaultValue;
|
|
121
122
|
},
|
|
122
123
|
mounted() {
|
|
123
124
|
this._input = this.inputRef, this.wrapper = this.wrapperRef, this.$data.hasMounted = !0, this.setValidity();
|
|
@@ -127,7 +128,7 @@ const D = /* @__PURE__ */ b({
|
|
|
127
128
|
},
|
|
128
129
|
setup() {
|
|
129
130
|
return {
|
|
130
|
-
inputRef:
|
|
131
|
+
inputRef: C(null)
|
|
131
132
|
};
|
|
132
133
|
},
|
|
133
134
|
render() {
|
|
@@ -138,9 +139,11 @@ const D = /* @__PURE__ */ b({
|
|
|
138
139
|
iconName: d,
|
|
139
140
|
showValidationIcon: r,
|
|
140
141
|
showLoadingIcon: g,
|
|
141
|
-
showClearButton: y
|
|
142
|
-
|
|
142
|
+
showClearButton: y,
|
|
143
|
+
inputAttributes: v
|
|
144
|
+
} = this.$props, p = e || this._inputId, $ = o("input", {
|
|
143
145
|
...this.$attrs,
|
|
146
|
+
...v,
|
|
144
147
|
"aria-label": this.$props.ariaLabel,
|
|
145
148
|
role: this.$props.role,
|
|
146
149
|
title: this.$props.title,
|
|
@@ -163,16 +166,16 @@ const D = /* @__PURE__ */ b({
|
|
|
163
166
|
onInput: this.handleInput,
|
|
164
167
|
onAnimationstart: this.handleAutoFill,
|
|
165
168
|
onAnimationend: this.handleAutoFillEnd
|
|
166
|
-
}),
|
|
169
|
+
}), k = h.call(this, this.$props.inputPrefix, c.call(this)), b = h.call(this, this.$props.inputSuffix, c.call(this)), V = f.call(this, {
|
|
167
170
|
h: o,
|
|
168
|
-
template:
|
|
171
|
+
template: k,
|
|
169
172
|
additionalProps: {
|
|
170
173
|
value: this.computedValue,
|
|
171
174
|
valid: t
|
|
172
175
|
}
|
|
173
176
|
}), S = f.call(this, {
|
|
174
177
|
h: o,
|
|
175
|
-
template:
|
|
178
|
+
template: b,
|
|
176
179
|
additionalProps: {
|
|
177
180
|
value: this.computedValue,
|
|
178
181
|
valid: t
|
|
@@ -187,15 +190,15 @@ const D = /* @__PURE__ */ b({
|
|
|
187
190
|
class: "k-input-icon"
|
|
188
191
|
}, null), this.$props.inputPrefix && a("span", {
|
|
189
192
|
class: "k-input-prefix"
|
|
190
|
-
}, [V]),
|
|
193
|
+
}, [V]), $, this.$props.inputSuffix && a("span", {
|
|
191
194
|
class: "k-input-suffix"
|
|
192
195
|
}, [S]), r && t && a(n, {
|
|
193
196
|
name: "check",
|
|
194
|
-
icon:
|
|
197
|
+
icon: N,
|
|
195
198
|
class: "k-input-validation-icon"
|
|
196
199
|
}, null), r && !t && a(n, {
|
|
197
200
|
name: "exclamation-circle",
|
|
198
|
-
icon:
|
|
201
|
+
icon: F,
|
|
199
202
|
class: "k-input-validation-icon"
|
|
200
203
|
}, null), g && a(n, {
|
|
201
204
|
name: "loading",
|
|
@@ -205,9 +208,9 @@ const D = /* @__PURE__ */ b({
|
|
|
205
208
|
class: "k-clear-value"
|
|
206
209
|
}, [a(n, {
|
|
207
210
|
name: "x",
|
|
208
|
-
icon:
|
|
211
|
+
icon: O
|
|
209
212
|
}, null)])]);
|
|
210
|
-
return i ? a(
|
|
213
|
+
return i ? a(B, {
|
|
211
214
|
label: i,
|
|
212
215
|
editorId: p,
|
|
213
216
|
editorValue: this.computedValue,
|
|
@@ -343,5 +346,5 @@ const D = /* @__PURE__ */ b({
|
|
|
343
346
|
}
|
|
344
347
|
});
|
|
345
348
|
export {
|
|
346
|
-
|
|
349
|
+
R as TextBox
|
|
347
350
|
};
|