@progress/kendo-vue-inputs 8.4.0-develop.2 → 8.4.0-develop.3
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/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +40 -36
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +31 -27
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +9 -9
- package/textbox/TextBox.js +1 -1
- package/textbox/TextBox.mjs +24 -20
|
@@ -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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),v=require("./masking.service.js"),p=require("./utils.js"),n=require("@progress/kendo-vue-common"),$=require("../package-metadata.js"),c=require("@progress/kendo-svg-icons"),k=s.defineComponent({model:{event:"changemodel"},emits:{change:e=>!0,focus:e=>!0,blur:e=>!0,"update:modelValue":e=>!0,"update:modelRawValue":e=>!0,changemodel:e=>!0},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,validator:function(e){return["small","medium","large"].includes(e)}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["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 p.defaultRules}},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:n.templateDefinition,inputSuffix:n.templateDefinition,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(){n.validatePackage($.packageMetadata),this.hasMounted=!1,this.valueDuringOnChange=void 0,this.inputId=`k-${n.guid()}`,this.service=new v.MaskingService,this.isPasted=!1},setup(){return{inputRef:s.ref(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 a=this.prevSelection,r=this.$props.selection;(!a&&r||a&&r&&(a.start!==r.start||a.end!==r.end))&&(t=r.start,i=r.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.maskingChanged(e,this.$props)&&this.updateService(),this.setValidity()},computed:{computedRules(){return Object.assign({},p.defaultRules,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,a=!this.$props.validityStyles||this.validity().valid;return{"k-maskedtextbox":!0,"k-input":!0,[`k-input-${n.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${t}`]:t,[`k-rounded-${n.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!a,"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,a=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:a,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,a=this.currentSelection[0]||0,r=this.currentSelection[1]||0;if(!this.$props.mask){this.isPasted=!1,this.currentSelection=[null,null],this.triggerOnChange(i,e);return}const u=this.computedValue();let l;if(this.isPasted){this.isPasted=!1;const o=u.length-r,d=i.length-o;l=this.service.maskInRange(i.slice(a,d),u,a,r)}else l=this.service.maskInput(i,u,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",{event:e,target:this}))},blurHandler(e){this.currentFocused&&(this.currentFocused=!1,this.$emit("blur",{event:e,target:this}))},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:a,showClearButton:r,inputAttributes:u}=this.$props,l=!this.$props.validityStyles||this.validity().valid,o=this.computedValue();this.inputValue;const d=n.templateRendering.call(this,this.$props.inputPrefix,n.getListeners.call(this)),f=n.templateRendering.call(this,this.$props.inputSuffix,n.getListeners.call(this)),m=n.getTemplate.call(this,{h:s.h,template:d,additionalProps:{value:o,valid:l}}),g=n.getTemplate.call(this,{h:s.h,template:f,additionalProps:{value:o,valid:l}}),h=s.createVNode("span",{dir:this.$props.dir,class:this.wrapperSpanClass,style:this.$props.label?void 0:{width:this.$props.width}},[t&&s.createVNode(n.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-prefix k-input-prefix-horizontal"},[m]),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),s.createVNode("input",s.mergeProps({type:this.$props.type,autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:!1,class:this.inputInnerClass,value:o,id:e,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled||void 0,name:this.$props.name,tabindex:n.getTabIndex(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:n.setRef(this,"input")},u,{onInput:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragstart:p.returnFalse,onDrop:p.returnFalse}),null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-suffix k-input-suffix-horizontal"},[g]),i&&l&&s.createVNode(n.Icon,{name:"check",icon:c.checkIcon,class:"k-input-validation-icon"},null),i&&!l&&s.createVNode(n.Icon,{name:"exclamation-circle",icon:c.exclamationCircleIcon,class:"k-input-validation-icon"},null),a&&s.createVNode(n.Icon,{name:"loading",class:"k-input-loading-icon"},null),r&&o&&s.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[s.createVNode(n.Icon,{name:"x",icon:c.xIcon},null)])]);return this.$props.label?s.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[h,this.$props.label?e?s.createVNode("label",{for:e,class:"k-floating-label"},[this.$props.label]):s.createVNode("span",{class:"k-label"},[this.$props.label]):null]):h}});exports.MaskedTextBox=k;
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as b, h as c, createVNode as
|
|
9
|
-
import { MaskingService as
|
|
8
|
+
import { defineComponent as b, h as c, createVNode as s, mergeProps as C, ref as x } from "vue";
|
|
9
|
+
import { MaskingService as w } from "./masking.service.mjs";
|
|
10
10
|
import { returnFalse as h, defaultRules as f, maskingChanged as P } from "./utils.mjs";
|
|
11
|
-
import { templateDefinition as m, templateRendering as g, getListeners as v, getTemplate as $, Icon as u, setRef as I, getTabIndex as B, kendoThemeMaps as
|
|
11
|
+
import { templateDefinition as m, templateRendering as g, getListeners as v, getTemplate as $, Icon as u, setRef as I, getTabIndex as B, kendoThemeMaps as k, validatePackage as M, guid as O } from "@progress/kendo-vue-common";
|
|
12
12
|
import { packageMetadata as L } from "../package-metadata.mjs";
|
|
13
13
|
import { checkIcon as R, exclamationCircleIcon as F, xIcon as D } from "@progress/kendo-svg-icons";
|
|
14
|
-
const
|
|
14
|
+
const j = /* @__PURE__ */ b({
|
|
15
15
|
model: {
|
|
16
16
|
event: "changemodel"
|
|
17
17
|
},
|
|
@@ -118,11 +118,11 @@ const z = /* @__PURE__ */ b({
|
|
|
118
118
|
};
|
|
119
119
|
},
|
|
120
120
|
created() {
|
|
121
|
-
M(L), this.hasMounted = !1, this.valueDuringOnChange = void 0, this.inputId = `k-${O()}`, this.service = new
|
|
121
|
+
M(L), this.hasMounted = !1, this.valueDuringOnChange = void 0, this.inputId = `k-${O()}`, this.service = new w(), this.isPasted = !1;
|
|
122
122
|
},
|
|
123
123
|
setup() {
|
|
124
124
|
return {
|
|
125
|
-
inputRef:
|
|
125
|
+
inputRef: x(null)
|
|
126
126
|
};
|
|
127
127
|
},
|
|
128
128
|
mounted() {
|
|
@@ -154,8 +154,8 @@ const z = /* @__PURE__ */ b({
|
|
|
154
154
|
updated() {
|
|
155
155
|
if (this.element && this.currentFocused) {
|
|
156
156
|
let [t, i] = this.currentSelection;
|
|
157
|
-
const
|
|
158
|
-
(!
|
|
157
|
+
const n = this.prevSelection, a = this.$props.selection;
|
|
158
|
+
(!n && a || n && a && (n.start !== a.start || n.end !== a.end)) && (t = a.start, i = a.end), t !== null && i !== null && this.element.setSelectionRange(t, i);
|
|
159
159
|
}
|
|
160
160
|
const e = {
|
|
161
161
|
includeLiterals: this.prevIncludeLiterals,
|
|
@@ -187,14 +187,14 @@ const z = /* @__PURE__ */ b({
|
|
|
187
187
|
size: e,
|
|
188
188
|
fillMode: t,
|
|
189
189
|
rounded: i
|
|
190
|
-
} = this.$props,
|
|
190
|
+
} = this.$props, n = !this.$props.validityStyles || this.validity().valid;
|
|
191
191
|
return {
|
|
192
192
|
"k-maskedtextbox": !0,
|
|
193
193
|
"k-input": !0,
|
|
194
|
-
[`k-input-${
|
|
194
|
+
[`k-input-${k.sizeMap[e] || e}`]: e,
|
|
195
195
|
[`k-input-${t}`]: t,
|
|
196
|
-
[`k-rounded-${
|
|
197
|
-
"k-invalid": !
|
|
196
|
+
[`k-rounded-${k.roundedMap[i] || i}`]: i,
|
|
197
|
+
"k-invalid": !n,
|
|
198
198
|
"k-required": this.required,
|
|
199
199
|
"k-disabled": this.$props.disabled,
|
|
200
200
|
"k-loading": this.showLoadingIcon,
|
|
@@ -220,10 +220,10 @@ const z = /* @__PURE__ */ b({
|
|
|
220
220
|
return this.service.rawValue(this.computedValue());
|
|
221
221
|
},
|
|
222
222
|
validity() {
|
|
223
|
-
const e = this.computedValue(), t = this.service.validationValue(e), i = this.$props.validationMessage !== void 0,
|
|
223
|
+
const e = this.computedValue(), t = this.service.validationValue(e), i = this.$props.validationMessage !== void 0, n = this.$props.valid !== void 0 ? this.$props.valid : (!this.$props.required || !!t) && (!this.$props.maskValidation || !this.$props.prompt || e.indexOf(this.$props.prompt) === -1);
|
|
224
224
|
return {
|
|
225
225
|
customError: i,
|
|
226
|
-
valid:
|
|
226
|
+
valid: n,
|
|
227
227
|
valueMissing: !t
|
|
228
228
|
};
|
|
229
229
|
},
|
|
@@ -238,7 +238,7 @@ const z = /* @__PURE__ */ b({
|
|
|
238
238
|
this.triggerOnChange("", e);
|
|
239
239
|
},
|
|
240
240
|
onChangeHandler(e) {
|
|
241
|
-
const t = e.currentTarget, i = this.inputValue = t.value,
|
|
241
|
+
const t = e.currentTarget, i = this.inputValue = t.value, n = this.currentSelection[0] || 0, a = this.currentSelection[1] || 0;
|
|
242
242
|
if (!this.$props.mask) {
|
|
243
243
|
this.isPasted = !1, this.currentSelection = [null, null], this.triggerOnChange(i, e);
|
|
244
244
|
return;
|
|
@@ -248,7 +248,7 @@ const z = /* @__PURE__ */ b({
|
|
|
248
248
|
if (this.isPasted) {
|
|
249
249
|
this.isPasted = !1;
|
|
250
250
|
const r = o.length - a, p = i.length - r;
|
|
251
|
-
l = this.service.maskInRange(i.slice(
|
|
251
|
+
l = this.service.maskInRange(i.slice(n, p), o, n, a);
|
|
252
252
|
} else
|
|
253
253
|
l = this.service.maskInput(i, o, t.selectionStart || 0);
|
|
254
254
|
this.currentSelection = [l.selection, l.selection], this.triggerOnChange(l.value, e), this.inputValue = void 0;
|
|
@@ -298,12 +298,12 @@ const z = /* @__PURE__ */ b({
|
|
|
298
298
|
const e = this.$props.id || this.inputId, {
|
|
299
299
|
iconName: t,
|
|
300
300
|
showValidationIcon: i,
|
|
301
|
-
showLoadingIcon:
|
|
301
|
+
showLoadingIcon: n,
|
|
302
302
|
showClearButton: a,
|
|
303
303
|
inputAttributes: o
|
|
304
304
|
} = this.$props, l = !this.$props.validityStyles || this.validity().valid, r = this.computedValue();
|
|
305
305
|
this.inputValue;
|
|
306
|
-
const p = g.call(this, this.$props.inputPrefix, v.call(this)),
|
|
306
|
+
const p = g.call(this, this.$props.inputPrefix, v.call(this)), S = g.call(this, this.$props.inputSuffix, v.call(this)), V = $.call(this, {
|
|
307
307
|
h: c,
|
|
308
308
|
template: p,
|
|
309
309
|
additionalProps: {
|
|
@@ -312,23 +312,25 @@ const z = /* @__PURE__ */ b({
|
|
|
312
312
|
}
|
|
313
313
|
}), y = $.call(this, {
|
|
314
314
|
h: c,
|
|
315
|
-
template:
|
|
315
|
+
template: S,
|
|
316
316
|
additionalProps: {
|
|
317
317
|
value: r,
|
|
318
318
|
valid: l
|
|
319
319
|
}
|
|
320
|
-
}), d =
|
|
320
|
+
}), d = s("span", {
|
|
321
321
|
dir: this.$props.dir,
|
|
322
322
|
class: this.wrapperSpanClass,
|
|
323
323
|
style: this.$props.label ? void 0 : {
|
|
324
324
|
width: this.$props.width
|
|
325
325
|
}
|
|
326
|
-
}, [t &&
|
|
326
|
+
}, [t && s(u, {
|
|
327
327
|
name: t,
|
|
328
328
|
class: "k-input-icon"
|
|
329
|
-
}, null), this.$props.inputPrefix &&
|
|
330
|
-
class: "k-input-prefix"
|
|
331
|
-
}, [V]),
|
|
329
|
+
}, null), this.$props.inputPrefix && s("span", {
|
|
330
|
+
class: "k-input-prefix k-input-prefix-horizontal"
|
|
331
|
+
}, [V]), this.$props.inputPrefix && s("span", {
|
|
332
|
+
class: "k-input-separator k-input-separator-vertical"
|
|
333
|
+
}, null), s("input", C({
|
|
332
334
|
type: this.$props.type,
|
|
333
335
|
autocomplete: "off",
|
|
334
336
|
autocorrect: "off",
|
|
@@ -339,7 +341,7 @@ const z = /* @__PURE__ */ b({
|
|
|
339
341
|
id: e,
|
|
340
342
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
341
343
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
342
|
-
"aria-disabled": this.$props.disabled,
|
|
344
|
+
"aria-disabled": this.$props.disabled || void 0,
|
|
343
345
|
name: this.$props.name,
|
|
344
346
|
tabindex: B(this.$props.tabIndex, this.$props.disabled, !0),
|
|
345
347
|
accesskey: this.$props.accessKey,
|
|
@@ -357,37 +359,39 @@ const z = /* @__PURE__ */ b({
|
|
|
357
359
|
onBlur: this.blurHandler,
|
|
358
360
|
onDragstart: h,
|
|
359
361
|
onDrop: h
|
|
360
|
-
}), null), this.$props.inputSuffix &&
|
|
361
|
-
class: "k-input-
|
|
362
|
-
},
|
|
362
|
+
}), null), this.$props.inputSuffix && s("span", {
|
|
363
|
+
class: "k-input-separator k-input-separator-vertical"
|
|
364
|
+
}, null), this.$props.inputSuffix && s("span", {
|
|
365
|
+
class: "k-input-suffix k-input-suffix-horizontal"
|
|
366
|
+
}, [y]), i && l && s(u, {
|
|
363
367
|
name: "check",
|
|
364
368
|
icon: R,
|
|
365
369
|
class: "k-input-validation-icon"
|
|
366
|
-
}, null), i && !l &&
|
|
370
|
+
}, null), i && !l && s(u, {
|
|
367
371
|
name: "exclamation-circle",
|
|
368
372
|
icon: F,
|
|
369
373
|
class: "k-input-validation-icon"
|
|
370
|
-
}, null),
|
|
374
|
+
}, null), n && s(u, {
|
|
371
375
|
name: "loading",
|
|
372
376
|
class: "k-input-loading-icon"
|
|
373
|
-
}, null), a && r &&
|
|
377
|
+
}, null), a && r && s("span", {
|
|
374
378
|
onClick: this.clearClick,
|
|
375
379
|
class: "k-clear-value"
|
|
376
|
-
}, [
|
|
380
|
+
}, [s(u, {
|
|
377
381
|
name: "x",
|
|
378
382
|
icon: D
|
|
379
383
|
}, null)])]);
|
|
380
|
-
return this.$props.label ?
|
|
384
|
+
return this.$props.label ? s("span", {
|
|
381
385
|
class: this.spanClassNames,
|
|
382
386
|
dir: this.$props.dir
|
|
383
|
-
}, [d, this.$props.label ? e ?
|
|
387
|
+
}, [d, this.$props.label ? e ? s("label", {
|
|
384
388
|
for: e,
|
|
385
389
|
class: "k-floating-label"
|
|
386
|
-
}, [this.$props.label]) :
|
|
390
|
+
}, [this.$props.label]) : s("span", {
|
|
387
391
|
class: "k-label"
|
|
388
392
|
}, [this.$props.label]) : null]) : d;
|
|
389
393
|
}
|
|
390
394
|
});
|
|
391
395
|
export {
|
|
392
|
-
|
|
396
|
+
j as MaskedTextBox
|
|
393
397
|
};
|
|
@@ -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 s=require("vue"),a=require("@progress/kendo-vue-common"),$=require("@progress/kendo-vue-intl"),g=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),i=require("./utils/main.js"),S=require("../package-metadata.js"),h=require("@progress/kendo-svg-icons"),k="Please enter a valid value!",y=s.defineComponent({model:{event:"changemodel"},emits:{change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0},props:{modelValue:Number,value:Number,defaultValue:Number,step:{type:Number,default:1},format:[String,Object],tabIndex:Number,accessKey:String,title:String,placeholder:String,min:Number,max:Number,spinners:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},dir:String,name:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},size:{type:String,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["solid","flat","outline"].includes(t)}},required:{type:Boolean,default:!1},id:String,ariaLabel:String,iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,inputType:{type:String,default:"tel"},wrapperClass:String,inputAttributes:Object},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,isInvalid:!1,isEmpty:!1,currentValue:0,valueDuringOnChange:0,currentLooseValue:"",selectionStart:0,selectionEnd:0,decimalSelect:!1,focused:!1,forceUpdate:!1}},created(){a.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=a.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=$.provideIntlService(this),this._symbols=this._intl.numberSymbols(),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=null},mounted(){this._input=a.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(a.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this.$data.forceUpdate&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd,this.$data.forceUpdate=!1),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return i.formatValue(this.$data.focused?this.$data.currentLooseValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),this.$props.format,this._intl)},spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,e=this.computedValue;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(e===0||e||this.$props.placeholder),"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl",[this.inputClass]:this.inputClass}},wrapperClassNames(){const{size:t,fillMode:e,rounded:n,required:l,disabled:d}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${a.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${a.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!u,"k-required":l,"k-disabled":d,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{validity(){const t=this.$props.validationMessage!==void 0,e=!this.$data.valueIsOutOfRange&&(!this.$props.required||this.computedValue!==null),n=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:n,valueMissing:this.computedValue===null}},clearClick(t){this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=null,this.$emit("changemodel",null),this.$emit("update:modelValue",null),this.$emit("change",{event:t,value:null,component:this,target:{name:this.$props.name,value:null},validity:this.validity()})},focus(){this._input&&this._input.focus()},emitFocus(t){this.$data.currentLooseValue=this._prevLooseValue,this.$data.focused=!0,this.$emit("focus",{event:t})},emitBlur(t){this.$data.eventValue=null,this.$data.prevLooseValue="",this.$data.currentLooseValue="",this.$data.focused=!1,this.$data.selectionStart=void 0,this.$data.selectionEnd=void 0,this.$data.decimalSelect=!1,this.$data.valueIsCorrected=!1,this.$data.valueIsOutOfRange=!1,this.$emit("blur",{event:t})},handleFocus(t){this.$data.focused=!0},handleBlur(t){this.$data.focused=!1},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||k)},getCurrentState(){return{eventValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),prevLooseValue:this._prevLooseValue,currentLooseValue:this._input.value,selectionStart:this._input.selectionStart,selectionEnd:this._input.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:this._isPaste,focused:this.$data.focused}},parseNumber(t){return this._intl.parseNumber(t,this.$props.format)},elementChange(t){const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,i.sanitizeNumber(e,this.$props.format,this._intl))},triggerChange(t,e){if(this.$props.disabled)return;this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue;const n=i.formatValue(i.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max);if(l!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=l,this.$data.valueDuringOnChange=l,this.$data.currentValue=l),e.valueIsCorrected){const u=this._elementWrapper;u&&u.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const d=this.$props.value!==e.eventValue;this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=this.$data.valueDuringOnChange,this.$data.prevLooseValue=e.prevLooseValue,this.$data.currentLooseValue=void 0,this.$data.currentLooseValue=e.currentLooseValue,this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd,this.$data.decimalSelect=e.decimalSelect,this.$data.valueIsCorrected=e.valueIsCorrected,this.$data.valueIsOutOfRange=e.valueIsOutOfRange,this.$data.focused=e.focused,this.$data.isPaste=e.isPaste,this.$data.forceUpdate=!this.$data.forceUpdate,d&&(this.$emit("changemodel",this.$data.valueDuringOnChange),this.$emit("update:modelValue",this.$data.valueDuringOnChange),this.$emit("change",{event:t,value:this.$data.valueDuringOnChange,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},onPasteHandler(t){this._isPaste=!0},increase(t){const e=this.getCurrentState();i.increaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},decrease(t){const e=this.getCurrentState();i.decreaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},wheel(t){!a.canUseDOM||document.activeElement!==this._input||!this._input||(t.deltaY<0&&(t.preventDefault(),this.increase(t)),t.deltaY>0&&(t.preventDefault(),this.decrease(t)))},keyDown(t){let e=this.getCurrentState(),n,l,d,u;const c=this.parseNumber(String(e.currentLooseValue));if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const o=this._intl.numberSymbols(),p=o&&t.key===o.minusSign,m=o&&t.key===o.decimal;this.$data.isPaste=!p&&!m;return}switch(t.keyCode){case 38:i.increaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:i.decreaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=i.formatValue(i.rangeValue(c,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=i.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:d=this._input,u=this._intl.numberSymbols(),d&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=i.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)},spinnersWrapperMouseDown(t){a.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=s.ref(null),e=s.ref(null),n=s.inject("kendoLocalizationService",{}),l=s.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l,inputAttributes:d}=this.$props,u=this.$props.id||this._inputId,c=a.getDefaultSlots(this),o=$.provideLocalizationService(this),p=this.validity().valid;this.$props.value!==void 0&&this.$props.value!==this.$data.currentValue?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0&&this.$props.modelValue!==this.$data.currentValue&&(this.$data.currentValue=this.$props.modelValue),this._prevLooseValue=this.$data.currentLooseValue?this.looseValue:this.looseValue;const m=a.templateRendering.call(this,this.$props.inputPrefix,a.getListeners.call(this)),V=a.templateRendering.call(this,this.$props.inputSuffix,a.getListeners.call(this)),v=a.getTemplate.call(this,{h:s.h,template:m,additionalProps:{value:this.computedValue,valid:p}}),b=a.getTemplate.call(this,{h:s.h,template:V,additionalProps:{value:this.computedValue,valid:p}}),f=s.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&s.createVNode(a.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-prefix"},[v]),s.createVNode("input",s.mergeProps({tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,disabled:this.$props.disabled,title:this.$props.title,"aria-label":this.$props.ariaLabel,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-disabled":this.$props.disabled?"true":void 0,placeholder:this.$props.placeholder,type:this.$props.inputType,spellcheck:!1,autocomplete:"off",autocorrect:"off",class:this.inputInnerClass,id:u,role:"spinbutton",value:this.looseValue,name:this.$props.name,onWheel:this.wheel,onKeydown:this.keyDown,onInput:this.elementChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onPaste:this.onPasteHandler,ref:a.setRef(this,"input")},d),null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-suffix"},[b]),e&&p&&s.createVNode(a.Icon,{name:"check",icon:h.checkIcon,class:"k-input-validation-icon"},null),e&&!p&&s.createVNode(a.Icon,{name:"exclamation-circle",icon:h.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&s.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&s.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[s.createVNode(a.Icon,{name:"x",icon:h.xIcon},null)]),c,this.$props.spinners&&s.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[s.createVNode(g.Button,{type:"button",tabIndex:-1,icon:"caret-alt-up",svgIcon:h.caretAltUpIcon,class:"k-spinner-increase",rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),s.createVNode(g.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"caret-alt-down",svgIcon:h.caretAltDownIcon,rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?s.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[f,this.$props.label?u?s.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):s.createVNode("span",{class:"k-label"},[this.$props.label]):null]):f}});exports.NumericTextBox=y;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),i=require("@progress/kendo-vue-common"),$=require("@progress/kendo-vue-intl"),V=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),a=require("./utils/main.js"),S=require("../package-metadata.js"),h=require("@progress/kendo-svg-icons"),k="Please enter a valid value!",y=s.defineComponent({model:{event:"changemodel"},emits:{change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0},props:{modelValue:Number,value:Number,defaultValue:Number,step:{type:Number,default:1},format:[String,Object],tabIndex:Number,accessKey:String,title:String,placeholder:String,min:Number,max:Number,spinners:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},dir:String,name:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},size:{type:String,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["solid","flat","outline"].includes(t)}},required:{type:Boolean,default:!1},id:String,ariaLabel:String,iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,inputType:{type:String,default:"tel"},wrapperClass:String,inputAttributes:Object},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,isInvalid:!1,isEmpty:!1,currentValue:0,valueDuringOnChange:0,currentLooseValue:"",selectionStart:0,selectionEnd:0,decimalSelect:!1,focused:!1,forceUpdate:!1}},created(){i.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=i.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=$.provideIntlService(this),this._symbols=this._intl.numberSymbols(),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=null},mounted(){this._input=i.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(i.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this.$data.forceUpdate&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd,this.$data.forceUpdate=!1),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return a.formatValue(this.$data.focused?this.$data.currentLooseValue:a.getStateOrPropsValue(this.$props.value,this.$data.currentValue),this.$props.format,this._intl)},spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,e=this.computedValue;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(e===0||e||this.$props.placeholder),"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl",[this.inputClass]:this.inputClass}},wrapperClassNames(){const{size:t,fillMode:e,rounded:n,required:l,disabled:p}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${i.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${i.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!u,"k-required":l,"k-disabled":p,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{validity(){const t=this.$props.validationMessage!==void 0,e=!this.$data.valueIsOutOfRange&&(!this.$props.required||this.computedValue!==null),n=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:n,valueMissing:this.computedValue===null}},clearClick(t){this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=null,this.$emit("changemodel",null),this.$emit("update:modelValue",null),this.$emit("change",{event:t,value:null,component:this,target:{name:this.$props.name,value:null},validity:this.validity()})},focus(){this._input&&this._input.focus()},emitFocus(t){this.$data.currentLooseValue=this._prevLooseValue,this.$data.focused=!0,this.$emit("focus",{event:t})},emitBlur(t){this.$data.eventValue=null,this.$data.prevLooseValue="",this.$data.currentLooseValue="",this.$data.focused=!1,this.$data.selectionStart=void 0,this.$data.selectionEnd=void 0,this.$data.decimalSelect=!1,this.$data.valueIsCorrected=!1,this.$data.valueIsOutOfRange=!1,this.$emit("blur",{event:t})},handleFocus(t){this.$data.focused=!0},handleBlur(t){this.$data.focused=!1},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||k)},getCurrentState(){return{eventValue:a.getStateOrPropsValue(this.$props.value,this.$data.currentValue),prevLooseValue:this._prevLooseValue,currentLooseValue:this._input.value,selectionStart:this._input.selectionStart,selectionEnd:this._input.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:this._isPaste,focused:this.$data.focused}},parseNumber(t){return this._intl.parseNumber(t,this.$props.format)},elementChange(t){const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,a.sanitizeNumber(e,this.$props.format,this._intl))},triggerChange(t,e){if(this.$props.disabled)return;this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue;const n=a.formatValue(a.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max);if(l!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=l,this.$data.valueDuringOnChange=l,this.$data.currentValue=l),e.valueIsCorrected){const u=this._elementWrapper;u&&u.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const p=this.$props.value!==e.eventValue;this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=this.$data.valueDuringOnChange,this.$data.prevLooseValue=e.prevLooseValue,this.$data.currentLooseValue=void 0,this.$data.currentLooseValue=e.currentLooseValue,this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd,this.$data.decimalSelect=e.decimalSelect,this.$data.valueIsCorrected=e.valueIsCorrected,this.$data.valueIsOutOfRange=e.valueIsOutOfRange,this.$data.focused=e.focused,this.$data.isPaste=e.isPaste,this.$data.forceUpdate=!this.$data.forceUpdate,p&&(this.$emit("changemodel",this.$data.valueDuringOnChange),this.$emit("update:modelValue",this.$data.valueDuringOnChange),this.$emit("change",{event:t,value:this.$data.valueDuringOnChange,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},onPasteHandler(t){this._isPaste=!0},increase(t){const e=this.getCurrentState();a.increaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},decrease(t){const e=this.getCurrentState();a.decreaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},wheel(t){!i.canUseDOM||document.activeElement!==this._input||!this._input||(t.deltaY<0&&(t.preventDefault(),this.increase(t)),t.deltaY>0&&(t.preventDefault(),this.decrease(t)))},keyDown(t){let e=this.getCurrentState(),n,l,p,u;const c=this.parseNumber(String(e.currentLooseValue));if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const o=this._intl.numberSymbols(),d=o&&t.key===o.minusSign,m=o&&t.key===o.decimal;this.$data.isPaste=!d&&!m;return}switch(t.keyCode){case 38:a.increaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:a.decreaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=a.formatValue(a.rangeValue(c,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=a.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:p=this._input,u=this._intl.numberSymbols(),p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=a.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)},spinnersWrapperMouseDown(t){i.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=s.ref(null),e=s.ref(null),n=s.inject("kendoLocalizationService",{}),l=s.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l,inputAttributes:p}=this.$props,u=this.$props.id||this._inputId,c=i.getDefaultSlots(this),o=$.provideLocalizationService(this),d=this.validity().valid;this.$props.value!==void 0&&this.$props.value!==this.$data.currentValue?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0&&this.$props.modelValue!==this.$data.currentValue&&(this.$data.currentValue=this.$props.modelValue),this._prevLooseValue=this.$data.currentLooseValue?this.looseValue:this.looseValue;const m=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),g=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),v=i.getTemplate.call(this,{h:s.h,template:m,additionalProps:{value:this.computedValue,valid:d}}),b=i.getTemplate.call(this,{h:s.h,template:g,additionalProps:{value:this.computedValue,valid:d}}),f=s.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&s.createVNode(i.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-prefix k-input-prefix-horizontal"},[v]),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),s.createVNode("input",s.mergeProps({tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,disabled:this.$props.disabled,title:this.$props.title,"aria-label":this.$props.ariaLabel,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-disabled":this.$props.disabled?"true":void 0,placeholder:this.$props.placeholder,type:this.$props.inputType,spellcheck:!1,autocomplete:"off",autocorrect:"off",class:this.inputInnerClass,id:u,role:"spinbutton",value:this.looseValue,name:this.$props.name,onWheel:this.wheel,onKeydown:this.keyDown,onInput:this.elementChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onPaste:this.onPasteHandler,ref:i.setRef(this,"input")},p),null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-suffix k-input-suffix-horizontal"},[b]),e&&d&&s.createVNode(i.Icon,{name:"check",icon:h.checkIcon,class:"k-input-validation-icon"},null),e&&!d&&s.createVNode(i.Icon,{name:"exclamation-circle",icon:h.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&s.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&s.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[s.createVNode(i.Icon,{name:"x",icon:h.xIcon},null)]),c,this.$props.spinners&&s.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[s.createVNode(V.Button,{type:"button",tabIndex:-1,icon:"chevron-up",svgIcon:h.chevronUpIcon,class:"k-spinner-increase",rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),s.createVNode(V.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"chevron-down",svgIcon:h.chevronDownIcon,rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?s.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[f,this.$props.label?u?s.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):s.createVNode("span",{class:"k-label"},[this.$props.label]):null]):f}});exports.NumericTextBox=y;
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { defineComponent as B, h as V, createVNode as i, mergeProps as M, ref as b, inject as S } from "vue";
|
|
9
|
-
import { getDefaultSlots as w, templateRendering as
|
|
10
|
-
import { provideLocalizationService as
|
|
11
|
-
import { Button as
|
|
9
|
+
import { getDefaultSlots as w, templateRendering as k, getListeners as _, getTemplate as y, Icon as p, setRef as R, canUseDOM as v, kendoThemeMaps as C, getRef as z, validatePackage as F, guid as T } from "@progress/kendo-vue-common";
|
|
10
|
+
import { provideLocalizationService as U, provideIntlService as W } from "@progress/kendo-vue-intl";
|
|
11
|
+
import { Button as x } from "@progress/kendo-vue-buttons";
|
|
12
12
|
import { numericIncreaseValue as d, messages as h, numericDecreaseValue as c } from "../messages/main.mjs";
|
|
13
|
-
import { sanitizeNumber as
|
|
14
|
-
import { packageMetadata as
|
|
15
|
-
import { checkIcon as j, exclamationCircleIcon as q, xIcon as K,
|
|
13
|
+
import { sanitizeNumber as I, formatValue as m, rangeValue as f, decreaseValue as L, increaseValue as O, getStateOrPropsValue as D } from "./utils/main.mjs";
|
|
14
|
+
import { packageMetadata as A } from "../package-metadata.mjs";
|
|
15
|
+
import { checkIcon as j, exclamationCircleIcon as q, xIcon as K, chevronUpIcon as H, chevronDownIcon as Y } from "@progress/kendo-svg-icons";
|
|
16
16
|
const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
17
17
|
model: {
|
|
18
18
|
event: "changemodel"
|
|
@@ -121,13 +121,13 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
121
121
|
};
|
|
122
122
|
},
|
|
123
123
|
created() {
|
|
124
|
-
|
|
124
|
+
F(A), this._textBeforeInput = "", this._inputId = T(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = W(this), this._symbols = this._intl.numberSymbols(), this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$props.defaultValue !== void 0 ? this.$data.currentValue = this.$props.defaultValue : this.$data.currentValue = null;
|
|
125
125
|
},
|
|
126
126
|
mounted() {
|
|
127
|
-
this._input =
|
|
127
|
+
this._input = z(this, "input"), this._elementWrapper = this.elementWrapperRef, this.$data.hasMounted = !0, this._input && (this._textBeforeInput = this._input.value), this.setValidity();
|
|
128
128
|
},
|
|
129
129
|
updated() {
|
|
130
|
-
!(
|
|
130
|
+
!(v && document.activeElement !== this._input || !this._input) && this.$data.currentLooseValue !== null && this.$data.forceUpdate && this._input.type !== "number" && (this._input.selectionStart = this.$data.selectionStart, this._input.selectionEnd = this.$data.selectionEnd, this.$data.forceUpdate = !1), this._input && (this._textBeforeInput = this._input.value), this.setValidity();
|
|
131
131
|
},
|
|
132
132
|
computed: {
|
|
133
133
|
computedValue() {
|
|
@@ -237,7 +237,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
237
237
|
},
|
|
238
238
|
elementChange(t) {
|
|
239
239
|
const e = this.getCurrentState();
|
|
240
|
-
this._isPaste = !1, this.triggerChange(t,
|
|
240
|
+
this._isPaste = !1, this.triggerChange(t, I(e, this.$props.format, this._intl));
|
|
241
241
|
},
|
|
242
242
|
triggerChange(t, e) {
|
|
243
243
|
if (this.$props.disabled)
|
|
@@ -274,7 +274,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
274
274
|
L(this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, e);
|
|
275
275
|
},
|
|
276
276
|
wheel(t) {
|
|
277
|
-
!
|
|
277
|
+
!v || document.activeElement !== this._input || !this._input || (t.deltaY < 0 && (t.preventDefault(), this.increase(t)), t.deltaY > 0 && (t.preventDefault(), this.decrease(t)));
|
|
278
278
|
},
|
|
279
279
|
keyDown(t) {
|
|
280
280
|
let e = this.getCurrentState(), s, a, r, n;
|
|
@@ -295,7 +295,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
295
295
|
s = m(f(o, this.$props.min, this.$props.max), this.$props.format, this._intl), a = f(this.parseNumber(s), this.$props.min, this.$props.max), e.eventValue = a, e.currentLooseValue = m(a, this.$props.format, this._intl), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
|
|
296
296
|
break;
|
|
297
297
|
case 110:
|
|
298
|
-
r = this._input, n = this._intl.numberSymbols(), r && (e.currentLooseValue = e.currentLooseValue.slice(0, e.selectionStart) + n.decimal + e.currentLooseValue.slice(e.selectionEnd), e.selectionStart = e.selectionEnd = e.selectionStart + 1, e =
|
|
298
|
+
r = this._input, n = this._intl.numberSymbols(), r && (e.currentLooseValue = e.currentLooseValue.slice(0, e.selectionStart) + n.decimal + e.currentLooseValue.slice(e.selectionEnd), e.selectionStart = e.selectionEnd = e.selectionStart + 1, e = I(e, this.$props.format, this._intl));
|
|
299
299
|
break;
|
|
300
300
|
default:
|
|
301
301
|
return;
|
|
@@ -303,7 +303,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
303
303
|
t.preventDefault(), this.triggerChange(t, e);
|
|
304
304
|
},
|
|
305
305
|
spinnersWrapperMouseDown(t) {
|
|
306
|
-
|
|
306
|
+
v && this._input && (t.preventDefault(), document.activeElement !== this._input && this._input.focus());
|
|
307
307
|
}
|
|
308
308
|
},
|
|
309
309
|
setup() {
|
|
@@ -322,23 +322,23 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
322
322
|
showLoadingIcon: s,
|
|
323
323
|
showClearButton: a,
|
|
324
324
|
inputAttributes: r
|
|
325
|
-
} = this.$props, n = this.$props.id || this._inputId, o = w(this), l =
|
|
325
|
+
} = this.$props, n = this.$props.id || this._inputId, o = w(this), l = U(this), u = this.validity().valid;
|
|
326
326
|
this.$props.value !== void 0 && this.$props.value !== this.$data.currentValue ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 && this.$props.modelValue !== this.$data.currentValue && (this.$data.currentValue = this.$props.modelValue), this._prevLooseValue = this.$data.currentLooseValue ? this.looseValue : this.looseValue;
|
|
327
|
-
const $ =
|
|
327
|
+
const $ = k.call(this, this.$props.inputPrefix, _.call(this)), N = k.call(this, this.$props.inputSuffix, _.call(this)), P = y.call(this, {
|
|
328
328
|
h: V,
|
|
329
329
|
template: $,
|
|
330
330
|
additionalProps: {
|
|
331
331
|
value: this.computedValue,
|
|
332
332
|
valid: u
|
|
333
333
|
}
|
|
334
|
-
}),
|
|
334
|
+
}), E = y.call(this, {
|
|
335
335
|
h: V,
|
|
336
336
|
template: N,
|
|
337
337
|
additionalProps: {
|
|
338
338
|
value: this.computedValue,
|
|
339
339
|
valid: u
|
|
340
340
|
}
|
|
341
|
-
}),
|
|
341
|
+
}), g = i("span", {
|
|
342
342
|
dir: this.$props.dir,
|
|
343
343
|
class: this.wrapperClassNames,
|
|
344
344
|
style: this.$attrs.style
|
|
@@ -346,8 +346,10 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
346
346
|
name: t,
|
|
347
347
|
class: "k-input-icon"
|
|
348
348
|
}, null), this.$props.inputPrefix && i("span", {
|
|
349
|
-
class: "k-input-prefix"
|
|
350
|
-
}, [
|
|
349
|
+
class: "k-input-prefix k-input-prefix-horizontal"
|
|
350
|
+
}, [P]), this.$props.inputPrefix && i("span", {
|
|
351
|
+
class: "k-input-separator k-input-separator-vertical"
|
|
352
|
+
}, null), i("input", M({
|
|
351
353
|
tabindex: this.$props.tabIndex,
|
|
352
354
|
accesskey: this.$props.accessKey,
|
|
353
355
|
disabled: this.$props.disabled,
|
|
@@ -374,8 +376,10 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
374
376
|
onPaste: this.onPasteHandler,
|
|
375
377
|
ref: R(this, "input")
|
|
376
378
|
}, r), null), this.$props.inputSuffix && i("span", {
|
|
377
|
-
class: "k-input-
|
|
378
|
-
},
|
|
379
|
+
class: "k-input-separator k-input-separator-vertical"
|
|
380
|
+
}, null), this.$props.inputSuffix && i("span", {
|
|
381
|
+
class: "k-input-suffix k-input-suffix-horizontal"
|
|
382
|
+
}, [E]), e && u && i(p, {
|
|
379
383
|
name: "check",
|
|
380
384
|
icon: j,
|
|
381
385
|
class: "k-input-validation-icon"
|
|
@@ -395,10 +399,10 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
395
399
|
}, null)]), o, this.$props.spinners && i("span", {
|
|
396
400
|
class: "k-input-spinner k-spin-button",
|
|
397
401
|
onMousedown: this.spinnersWrapperMouseDown
|
|
398
|
-
}, [i(
|
|
402
|
+
}, [i(x, {
|
|
399
403
|
type: "button",
|
|
400
404
|
tabIndex: -1,
|
|
401
|
-
icon: "
|
|
405
|
+
icon: "chevron-up",
|
|
402
406
|
svgIcon: H,
|
|
403
407
|
class: "k-spinner-increase",
|
|
404
408
|
rounded: null,
|
|
@@ -406,11 +410,11 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
406
410
|
"aria-label": l.toLanguageString(d, h[d]),
|
|
407
411
|
title: l.toLanguageString(d, h[d]),
|
|
408
412
|
onClick: this.increase
|
|
409
|
-
}, null), i(
|
|
413
|
+
}, null), i(x, {
|
|
410
414
|
type: "button",
|
|
411
415
|
tabIndex: -1,
|
|
412
416
|
class: "k-spinner-decrease",
|
|
413
|
-
icon: "
|
|
417
|
+
icon: "chevron-down",
|
|
414
418
|
svgIcon: Y,
|
|
415
419
|
rounded: null,
|
|
416
420
|
disabled: this.$props.disabled,
|
|
@@ -423,12 +427,12 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
|
|
|
423
427
|
onFocusin: this.handleFocus,
|
|
424
428
|
onFocusout: this.handleBlur,
|
|
425
429
|
dir: this.$props.dir
|
|
426
|
-
}, [
|
|
430
|
+
}, [g, this.$props.label ? n ? i("label", {
|
|
427
431
|
for: n,
|
|
428
432
|
class: "k-floating-label"
|
|
429
433
|
}, [this.$props.label]) : i("span", {
|
|
430
434
|
class: "k-label"
|
|
431
|
-
}, [this.$props.label]) : null]) :
|
|
435
|
+
}, [this.$props.label]) : null]) : g;
|
|
432
436
|
}
|
|
433
437
|
});
|
|
434
438
|
export {
|
package/package-metadata.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 e={name:"@progress/kendo-vue-inputs",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-inputs",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1779097432,version:"8.4.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "Kendo UI for Vue",
|
|
11
11
|
productCode: "KENDOUIVUE",
|
|
12
12
|
productCodes: ["KENDOUIVUE"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "8.4.0-develop.
|
|
13
|
+
publishDate: 1779097432,
|
|
14
|
+
version: "8.4.0-develop.3",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-inputs",
|
|
3
|
-
"version": "8.4.0-develop.
|
|
3
|
+
"version": "8.4.0-develop.3",
|
|
4
4
|
"description": "TODO",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@progress/kendo-drawing": "^1.21.1",
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-vue-animation": "8.4.0-develop.
|
|
30
|
-
"@progress/kendo-vue-buttons": "8.4.0-develop.
|
|
31
|
-
"@progress/kendo-vue-common": "8.4.0-develop.
|
|
32
|
-
"@progress/kendo-vue-dialogs": "8.4.0-develop.
|
|
33
|
-
"@progress/kendo-vue-intl": "8.4.0-develop.
|
|
34
|
-
"@progress/kendo-vue-labels": "8.4.0-develop.
|
|
35
|
-
"@progress/kendo-vue-popup": "8.4.0-develop.
|
|
29
|
+
"@progress/kendo-vue-animation": "8.4.0-develop.3",
|
|
30
|
+
"@progress/kendo-vue-buttons": "8.4.0-develop.3",
|
|
31
|
+
"@progress/kendo-vue-common": "8.4.0-develop.3",
|
|
32
|
+
"@progress/kendo-vue-dialogs": "8.4.0-develop.3",
|
|
33
|
+
"@progress/kendo-vue-intl": "8.4.0-develop.3",
|
|
34
|
+
"@progress/kendo-vue-labels": "8.4.0-develop.3",
|
|
35
|
+
"@progress/kendo-vue-popup": "8.4.0-develop.3",
|
|
36
36
|
"@progress/kendo-svg-icons": "^4.4.0",
|
|
37
37
|
"vue": "^3.0.2"
|
|
38
38
|
},
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"package": {
|
|
56
56
|
"productName": "Kendo UI for Vue",
|
|
57
57
|
"productCode": "KENDOUIVUE",
|
|
58
|
-
"publishDate":
|
|
58
|
+
"publishDate": 1779097432,
|
|
59
59
|
"licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
|
|
60
60
|
}
|
|
61
61
|
},
|
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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("@progress/kendo-vue-common"),k=require("../package-metadata.js"),V=require("@progress/kendo-vue-labels"),o=require("@progress/kendo-svg-icons");function x(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const S=e.defineComponent({model:{event:"changemodel"},inheritAttrs:!1,emits:{input:t=>!0,change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0,keyup:t=>!0,keydown:t=>!0,keypress:t=>!0},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,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["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],prefix:[String,Function],inputSuffix:[String,Function],suffix:[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(k.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:e.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:i,id:n,required:l,iconName:u,showValidationIcon:p,showLoadingIcon:h,showClearButton:c,inputAttributes:f}=this.$props,d=n||this._inputId,m=e.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:d,required:l,disabled:this.$props.disabled,value:this.computedValue,class:this.inputInnerClass,ref:r=>{this.inputRef=r},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.prefix||this.$props.inputPrefix,a.getListeners.call(this)),v=a.templateRendering.call(this,this.$props.suffix||this.$props.inputSuffix,a.getListeners.call(this)),$=a.getTemplate.call(this,{h:e.h,template:g,additionalProps:{value:this.computedValue,valid:t}}),y=a.getTemplate.call(this,{h:e.h,template:v,additionalProps:{value:this.computedValue,valid:t}}),s=e.createVNode("span",{class:this.inputWrapperClass(),ref:r=>{this.wrapperRef=r}},[u&&e.createVNode(a.Icon,{name:u,class:"k-input-icon"},null),(this.$props.prefix||this.$props.inputPrefix)&&e.createVNode("span",{class:"k-input-prefix k-input-prefix-horizontal"},[$]),(this.$props.prefix||this.$props.inputPrefix)&&e.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),m,(this.$props.suffix||this.$props.inputSuffix)&&e.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),(this.$props.suffix||this.$props.inputSuffix)&&e.createVNode("span",{class:"k-input-suffix k-input-suffix-horizontal"},[y]),p&&t&&e.createVNode(a.Icon,{name:"check",icon:o.checkIcon,class:"k-input-validation-icon"},null),p&&!t&&e.createVNode(a.Icon,{name:"exclamation-circle",icon:o.exclamationCircleIcon,class:"k-input-validation-icon"},null),h&&e.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),c&&this.computedValue&&e.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[e.createVNode(a.Icon,{name:"x",icon:o.xIcon},null)])]);return i?e.createVNode(V.FloatingLabel,{label:i,editorId:d,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},x(s)?s:{default:()=>[s]}):s},methods:{updateValidClass(){this.wrapper.classList.toggle("k-invalid",!this.validity().valid)},emitFocus(t){this.$emit("focus",{event:t}),this.$data.focused=!0},emitBlur(t){this.$emit("blur",{event: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 n in t)t.hasOwnProperty(n)&&(i=i||t[n]);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,n){this.disabled||(this.$data.currentValue=n,this.$data.valueDuringOnChange=n,this.$nextTick(()=>{this.$emit("changemodel",n),this.$emit("update:modelValue",n),this.$emit(i,{event:t,value:n,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: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-${i}`]:i,[`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;
|