@progress/kendo-vue-inputs 7.0.2 → 7.1.0-develop.1
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/checkbox/Checkbox.js +1 -1
- package/checkbox/Checkbox.mjs +2 -0
- package/dist/cdn/js/kendo-vue-inputs.js +1 -1
- package/index.d.mts +35 -17
- package/index.d.ts +35 -17
- package/numerictextbox/utils/main.js +1 -1
- package/numerictextbox/utils/main.mjs +39 -39
- 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 +26 -24
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"),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
|
|
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 x=i.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,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],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(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:r,showValidationIcon:d,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.prefix||this.$props.inputPrefix,a.getListeners.call(this)),v=a.templateRendering.call(this,this.$props.suffix||this.$props.inputSuffix,a.getListeners.call(this)),y=a.getTemplate.call(this,{h:i.h,template:g,additionalProps:{value:this.computedValue,valid:t}}),$=a.getTemplate.call(this,{h:i.h,template:v,additionalProps:{value:this.computedValue,valid:t}}),s=i.createVNode("span",{class:this.inputWrapperClass(),ref:u=>{this.wrapperRef=u}},[r&&i.createVNode(a.Icon,{name:r,class:"k-input-icon"},null),(this.$props.prefix||this.$props.inputPrefix)&&i.createVNode("span",{class:"k-input-prefix"},[y]),m,(this.$props.suffix||this.$props.inputSuffix)&&i.createVNode("span",{class:"k-input-suffix"},[$]),d&&t&&i.createVNode(a.Icon,{name:"check",icon:o.checkIcon,class:"k-input-validation-icon"},null),d&&!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",{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 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=x;
|
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 { kendoThemeMaps as h, templateRendering as c, getListeners as f, getTemplate as m, Icon as
|
|
8
|
+
import { defineComponent as V, h as r, createVNode as a, ref as C, isVNode as _ } from "vue";
|
|
9
|
+
import { kendoThemeMaps as h, templateRendering as c, getListeners as f, getTemplate as m, Icon as s, validatePackage as w, guid as I } from "@progress/kendo-vue-common";
|
|
10
10
|
import { packageMetadata as M } from "../package-metadata.mjs";
|
|
11
11
|
import { FloatingLabel as B } from "@progress/kendo-vue-labels";
|
|
12
|
-
import { checkIcon as
|
|
12
|
+
import { checkIcon as F, exclamationCircleIcon as N, xIcon as O } from "@progress/kendo-svg-icons";
|
|
13
13
|
function L(t) {
|
|
14
14
|
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !_(t);
|
|
15
15
|
}
|
|
16
|
-
const R = /* @__PURE__ */
|
|
16
|
+
const R = /* @__PURE__ */ V({
|
|
17
17
|
model: {
|
|
18
18
|
event: "changemodel"
|
|
19
19
|
},
|
|
@@ -96,7 +96,9 @@ const R = /* @__PURE__ */ x({
|
|
|
96
96
|
},
|
|
97
97
|
iconName: String,
|
|
98
98
|
inputPrefix: [String, Function],
|
|
99
|
+
prefix: [String, Function],
|
|
99
100
|
inputSuffix: [String, Function],
|
|
101
|
+
suffix: [String, Function],
|
|
100
102
|
showValidationIcon: Boolean,
|
|
101
103
|
showLoadingIcon: Boolean,
|
|
102
104
|
showClearButton: Boolean,
|
|
@@ -136,12 +138,12 @@ const R = /* @__PURE__ */ x({
|
|
|
136
138
|
label: i,
|
|
137
139
|
id: e,
|
|
138
140
|
required: l,
|
|
139
|
-
iconName:
|
|
141
|
+
iconName: o,
|
|
140
142
|
showValidationIcon: d,
|
|
141
143
|
showLoadingIcon: g,
|
|
142
144
|
showClearButton: v,
|
|
143
145
|
inputAttributes: y
|
|
144
|
-
} = this.$props, p = e || this._inputId, $ =
|
|
146
|
+
} = this.$props, p = e || this._inputId, $ = r("input", {
|
|
145
147
|
...this.$attrs,
|
|
146
148
|
...y,
|
|
147
149
|
"aria-label": this.$props.ariaLabel,
|
|
@@ -166,47 +168,47 @@ const R = /* @__PURE__ */ x({
|
|
|
166
168
|
onInput: this.handleInput,
|
|
167
169
|
onAnimationstart: this.handleAutoFill,
|
|
168
170
|
onAnimationend: this.handleAutoFillEnd
|
|
169
|
-
}), k = c.call(this, this.$props.inputPrefix, f.call(this)),
|
|
170
|
-
h:
|
|
171
|
+
}), k = c.call(this, this.$props.prefix || this.$props.inputPrefix, f.call(this)), x = c.call(this, this.$props.suffix || this.$props.inputSuffix, f.call(this)), b = m.call(this, {
|
|
172
|
+
h: r,
|
|
171
173
|
template: k,
|
|
172
174
|
additionalProps: {
|
|
173
175
|
value: this.computedValue,
|
|
174
176
|
valid: t
|
|
175
177
|
}
|
|
176
178
|
}), S = m.call(this, {
|
|
177
|
-
h:
|
|
178
|
-
template:
|
|
179
|
+
h: r,
|
|
180
|
+
template: x,
|
|
179
181
|
additionalProps: {
|
|
180
182
|
value: this.computedValue,
|
|
181
183
|
valid: t
|
|
182
184
|
}
|
|
183
|
-
}),
|
|
185
|
+
}), n = a("span", {
|
|
184
186
|
class: this.inputWrapperClass(),
|
|
185
187
|
ref: (u) => {
|
|
186
188
|
this.wrapperRef = u;
|
|
187
189
|
}
|
|
188
|
-
}, [
|
|
189
|
-
name:
|
|
190
|
+
}, [o && a(s, {
|
|
191
|
+
name: o,
|
|
190
192
|
class: "k-input-icon"
|
|
191
|
-
}, null), this.$props.inputPrefix && a("span", {
|
|
193
|
+
}, null), (this.$props.prefix || this.$props.inputPrefix) && a("span", {
|
|
192
194
|
class: "k-input-prefix"
|
|
193
|
-
}, [
|
|
195
|
+
}, [b]), $, (this.$props.suffix || this.$props.inputSuffix) && a("span", {
|
|
194
196
|
class: "k-input-suffix"
|
|
195
|
-
}, [S]), d && t && a(
|
|
197
|
+
}, [S]), d && t && a(s, {
|
|
196
198
|
name: "check",
|
|
197
|
-
icon:
|
|
199
|
+
icon: F,
|
|
198
200
|
class: "k-input-validation-icon"
|
|
199
|
-
}, null), d && !t && a(
|
|
201
|
+
}, null), d && !t && a(s, {
|
|
200
202
|
name: "exclamation-circle",
|
|
201
|
-
icon:
|
|
203
|
+
icon: N,
|
|
202
204
|
class: "k-input-validation-icon"
|
|
203
|
-
}, null), g && a(
|
|
205
|
+
}, null), g && a(s, {
|
|
204
206
|
name: "loading",
|
|
205
207
|
class: "k-input-loading-icon"
|
|
206
208
|
}, null), v && this.computedValue && a("span", {
|
|
207
209
|
onClick: this.clearClick,
|
|
208
210
|
class: "k-clear-value"
|
|
209
|
-
}, [a(
|
|
211
|
+
}, [a(s, {
|
|
210
212
|
name: "x",
|
|
211
213
|
icon: O
|
|
212
214
|
}, null)])]);
|
|
@@ -218,9 +220,9 @@ const R = /* @__PURE__ */ x({
|
|
|
218
220
|
editorDisabled: this.$props.disabled,
|
|
219
221
|
editorPlaceholder: this.$data.focused ? this.$props.placeholder : "",
|
|
220
222
|
dir: this.$props.dir
|
|
221
|
-
}, L(
|
|
222
|
-
default: () => [
|
|
223
|
-
}) :
|
|
223
|
+
}, L(n) ? n : {
|
|
224
|
+
default: () => [n]
|
|
225
|
+
}) : n;
|
|
224
226
|
},
|
|
225
227
|
methods: {
|
|
226
228
|
updateValidClass() {
|