@progress/kendo-vue-form 6.0.0-develop.6 → 6.0.0
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/Field.js +1 -1
- package/Field.mjs +14 -32
- package/dist/cdn/js/kendo-vue-form.js +1 -1
- package/index.d.mts +3 -49
- package/index.d.ts +3 -49
- package/package-metadata.mjs +1 -1
- package/package.json +3 -3
package/Field.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 a=require("vue"),o=require("@progress/kendo-vue-common"),l=a.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String,changeOnInput:{type:Boolean,default:!0}},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},inject:{kendoForm:{default:null}},methods:{handleOnChange(e){const t=e&&(e.value!==void 0?e.value:e.target?e.target.value:e.target);this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("change",e)},handleOnInput(e){const t=e&&(e.value!==void 0?e.value:e.target?e.target.value:e.target);this.changeOnInput&&this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("input",e)},onNativeComponentChange(e){this.kendoForm.onChange(this.$props.name,{value:e.target.value})},handleOnBlur(){this.kendoForm.onBlur(this.$props.name)},handleOnFocus(){this.kendoForm.onFocus(this.$props.name)}},render(){const e=o.getDefaultSlots(this),{name:t,component:n,id:r}=this.$props;if(!this.kendoForm)return null;const i=this.kendoForm.values[t];if(typeof n=="string"&&(n==="input"||n==="textarea"))return a.h(n,{...this.$attrs,onChange:this.onNativeComponentChange,onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:t,value:i||""});if(n){const s=o.templateRendering.call(this,n,o.getListeners.call(this));return o.getTemplate.call(this,{h:a.h,template:s,additionalProps:{value:i,validationMessage:this.kendoForm.errors[t],touched:this.kendoForm.touchedByField[t],modified:this.kendoForm.modifiedByField[t],visited:this.kendoForm.visitedByField[t],valid:!(this.kendoForm.errors[t]&&this.kendoForm.touchedByField[t]),name:t,id:r,...this.$attrs},additionalListeners:{change:this.handleOnChange,input:this.handleOnInput,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}});exports.Field=l;
|
package/Field.mjs
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
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 { getDefaultSlots as
|
|
10
|
-
const
|
|
8
|
+
import { defineComponent as s, h as i } from "vue";
|
|
9
|
+
import { getDefaultSlots as l, templateRendering as d, getListeners as h, getTemplate as u } from "@progress/kendo-vue-common";
|
|
10
|
+
const F = /* @__PURE__ */ s({
|
|
11
11
|
name: "KendoField",
|
|
12
12
|
props: {
|
|
13
13
|
component: [String, Number, Boolean, Object],
|
|
@@ -16,22 +16,7 @@ const c = /* @__PURE__ */ l({
|
|
|
16
16
|
changeOnInput: {
|
|
17
17
|
type: Boolean,
|
|
18
18
|
default: !0
|
|
19
|
-
}
|
|
20
|
-
id: String,
|
|
21
|
-
resource: Object,
|
|
22
|
-
multiple: Boolean,
|
|
23
|
-
dataItems: Array,
|
|
24
|
-
textField: String,
|
|
25
|
-
valueField: String,
|
|
26
|
-
colorField: String,
|
|
27
|
-
rows: Number,
|
|
28
|
-
field: String,
|
|
29
|
-
start: Date,
|
|
30
|
-
value: [String, Number, Boolean, Object],
|
|
31
|
-
width: String,
|
|
32
|
-
editorId: String,
|
|
33
|
-
isAllDay: Boolean,
|
|
34
|
-
timezone: String
|
|
19
|
+
}
|
|
35
20
|
},
|
|
36
21
|
created() {
|
|
37
22
|
return this.kendoForm ? this.kendoForm.registerField(this.$props.name, this.$props.validator) : void 0;
|
|
@@ -67,30 +52,28 @@ const c = /* @__PURE__ */ l({
|
|
|
67
52
|
}
|
|
68
53
|
},
|
|
69
54
|
render() {
|
|
70
|
-
const e =
|
|
55
|
+
const e = l(this), {
|
|
71
56
|
name: t,
|
|
72
57
|
component: n,
|
|
73
|
-
id: a
|
|
74
|
-
start: i
|
|
58
|
+
id: a
|
|
75
59
|
} = this.$props;
|
|
76
60
|
if (!this.kendoForm)
|
|
77
61
|
return null;
|
|
78
62
|
const o = this.kendoForm.values[t];
|
|
79
|
-
if (typeof n == "string" && n === "input")
|
|
80
|
-
return
|
|
63
|
+
if (typeof n == "string" && (n === "input" || n === "textarea"))
|
|
64
|
+
return i(n, {
|
|
81
65
|
...this.$attrs,
|
|
82
66
|
onChange: this.onNativeComponentChange,
|
|
83
67
|
onBlur: this.handleOnBlur,
|
|
84
68
|
onFocus: this.handleOnFocus,
|
|
85
69
|
name: t,
|
|
86
|
-
value: o || ""
|
|
87
|
-
start: i
|
|
70
|
+
value: o || ""
|
|
88
71
|
});
|
|
89
72
|
if (n) {
|
|
90
|
-
const
|
|
91
|
-
return
|
|
92
|
-
h:
|
|
93
|
-
template:
|
|
73
|
+
const r = d.call(this, n, h.call(this));
|
|
74
|
+
return u.call(this, {
|
|
75
|
+
h: i,
|
|
76
|
+
template: r,
|
|
94
77
|
additionalProps: {
|
|
95
78
|
value: o,
|
|
96
79
|
// meta
|
|
@@ -107,7 +90,6 @@ const c = /* @__PURE__ */ l({
|
|
|
107
90
|
valid: !(this.kendoForm.errors[t] && this.kendoForm.touchedByField[t]),
|
|
108
91
|
name: t,
|
|
109
92
|
id: a,
|
|
110
|
-
start: i,
|
|
111
93
|
...this.$attrs
|
|
112
94
|
},
|
|
113
95
|
additionalListeners: {
|
|
@@ -122,5 +104,5 @@ const c = /* @__PURE__ */ l({
|
|
|
122
104
|
}
|
|
123
105
|
});
|
|
124
106
|
export {
|
|
125
|
-
|
|
107
|
+
F as Field
|
|
126
108
|
};
|
|
@@ -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
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueForm={},e.Vue,e.KendoVueCommon)}(this,(function(e,t,i){"use strict";const o=t.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String,changeOnInput:{type:Boolean,default:!0},id:String,resource:Object,multiple:Boolean,dataItems:Array,textField:String,valueField:String,colorField:String,rows:Number,field:String,start:Date,value:[String,Number,Boolean,Object],width:String,editorId:String,isAllDay:Boolean,timezone:String},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},inject:{kendoForm:{default:null}},methods:{handleOnChange(e){const t=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("change",e)},handleOnInput(e){const t=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);this.changeOnInput&&this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("input",e)},onNativeComponentChange(e){this.kendoForm.onChange(this.$props.name,{value:e.target.value})},handleOnBlur(){this.kendoForm.onBlur(this.$props.name)},handleOnFocus(){this.kendoForm.onFocus(this.$props.name)}},render(){const e=i.getDefaultSlots(this),{name:o,component:s,id:r,start:n}=this.$props;if(!this.kendoForm)return null;const d=this.kendoForm.values[o];if("string"==typeof s&&"input"===s)return t.h(s,{...this.$attrs,onChange:this.onNativeComponentChange,onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:o,value:d||"",start:n});if(s){const a=i.templateRendering.call(this,s,i.getListeners.call(this));return i.getTemplate.call(this,{h:t.h,template:a,additionalProps:{value:d,validationMessage:this.kendoForm.errors[o],touched:this.kendoForm.touchedByField[o],modified:this.kendoForm.modifiedByField[o],visited:this.kendoForm.visitedByField[o],valid:!(this.kendoForm.errors[o]&&this.kendoForm.touchedByField[o]),name:o,id:r,start:n,...this.$attrs},additionalListeners:{change:this.handleOnChange,input:this.handleOnInput,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}}),s={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCodes:["KENDOUIVUE","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"},r=t.defineComponent({name:"KendoForm",inheritAttrs:!1,props:{renderForm:[Object,Function],initialValues:Object,validator:Function,ignoreModified:Boolean},emits:{submitclick:null,submit:null},created(){this._accumulatorTimeout=void 0,i.validatePackage(s),this.form.values=i.clone(this.$props.initialValues)},mounted(){this.form.errors=this.getErrors(),this.form.allowSubmit=this.allowSubmit(),this.form.valid=this.isValid()},unmounted(){this.onDestroy()},data(){return{validatorsByField:{},fields:[],unmounted:!1,form:{id:this.id,errors:{},values:{},modifiedByField:{},touchedByField:{},visitedByField:{},valid:!1,modified:!1,touched:!1,visited:!1,submitted:!1,valueGetter:this.valueGetter,allowSubmit:!1,validate:this.validate,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm,registerField:this.onFieldRegister,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}}},provide(){return{kendoForm:this.$data.form}},watch:{"form.values"(){this.form.errors=this.getErrors(),this.form.allowSubmit=this.allowSubmit(),this.form.valid=this.isValid()},"form.touchedByField"(e){this.form.touched=this.isFormTouched(e,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.modifiedByField"(e){this.form.modified=this.isFormModified(e,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.visitedByField"(e){this.form.visited=this.isFormVisited(e,this.fields)}},methods:{isValid(){return this.isFormValid(this.form.errors)},formErrors(){if(this.$props.validator)return this.$props.validator(this.form.values,this.valueGetter)},getErrors(){const e={},t=this.validatorsByField;return Object.keys(this.fields).forEach((i=>{if(e[i]="",t[i]){const o=[];t[i].forEach((e=>{Array.isArray(e)?o.push(...e):o.push(e)})),o.find((t=>{if(t){const o=t(this.valueGetter(i),this.valueGetter,{name:i});if(o)return e[i]=o,!0}return!1}))}})),this.formErrors()&&i.cloneObject(this.formErrors(),e),e},accumulatedForceUpdate(){this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),i.canUseDOM&&(this._accumulatorTimeout=window.setTimeout((()=>{this._accumulatorTimeout=void 0}),0))},resetForm(){this.form.values=i.clone(this.$props.initialValues),this.id=i.guid(),this.form.touchedByField={},this.form.visitedByField={},this.form.modifiedByField={},this.form.submitted=!1},onReset(){this.resetForm()},addField(e){this.fields[e]=!0},validate(e){const t={},i=e||this.fields;Object.keys(i).forEach((e=>{t[e]=!0})),this.form.touchedByField={...t}},onSubmit(e){const t={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),Object.keys(i).forEach((e=>{t[e]=!0})),this.form.visitedByField={...t},this.form.touchedByField={...t};const o=this.form.values,s=this.isValid(),r=this.isFormModified(this.form.modifiedByField,i);this.$emit("submitclick",{values:o,isValid:s,isModified:r,event:e}),s&&(this.$props.ignoreModified||r)&&(this.form.submitted=!0,this.$emit("submit",o,e))},onChange(e,t){const{value:i}=t;this.addField(e),this.form.modifiedByField[e]||(this.form.modifiedByField={...this.form.modifiedByField,[e]:!0}),this.valueSetter(e,i)},onFocus(e){this.form.visitedByField[e]||(this.form.visitedByField={...this.form.visitedByField,[e]:!0})},onBlur(e){this.form.touchedByField[e]||(this.onFocus(e),this.form.touchedByField={...this.form.touchedByField,[e]:!0})},onFieldRegister(e,t){this.addField(e);const i=this.validatorsByField[e]||[],o=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[o];t[o]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&this.accumulatedForceUpdate()}},isFormValid:e=>!Object.keys(e).some((t=>!!e[t])),isFormModified:(e,t)=>Object.keys(t).some((t=>e[t])),isFormHasNotTouched:(e,t)=>Object.keys(t).some((t=>!e[t])),isFormTouched:(e,t)=>Object.keys(t).some((t=>e[t])),isFormVisited:(e,t)=>Object.keys(t).some((t=>e[t])),formHasNotTouched(){return this.isFormHasNotTouched(this.form.touchedByField,this.fields)},allowSubmit(){return this.formHasNotTouched()&&!this.isValid()||this.isValid()&&(this.$props.ignoreModified||this.isFormModified(this.form.modifiedByField,this.fields))},valueGetter(e){return this.form.values[e]},valueSetter(e,t){this.form.values={...this.form.values,[e]:t}},onArrayAction(e){this.addField(e),this.form.modifiedByField[e]||(this.form.modifiedByField={...this.form.modifiedByField,[e]:!0}),this.onBlur(e,!0)},onInsert(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i)},onUnshift(e,t){this.onInsert(e,{value:t.value,index:0})},onPush(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i)},onPop(e){this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),i},onRemove(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i.splice(t.index,1);return this.valueSetter(e,i),o},onReplace(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i)},onMove(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,o),this.valueSetter(e,i)},onDestroy(){this.unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}},render(){return i.getDefaultSlots(this)}}),n=t.defineComponent({name:"KendoFieldArray",props:{value:[String,Number,Boolean,Object,Array],component:[String,Number,Boolean,Object],validationMessage:String,touched:Boolean,modified:Boolean,validator:[Function,Array],visited:Boolean,valid:Boolean,name:String,id:String},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},methods:{onUnshift(e){this.kendoForm.onUnshift(this.$props.name,e)},onPush(e){this.kendoForm.onPush(this.$props.name,e)},onInsert(e){this.kendoForm.onInsert(this.$props.name,e)},onPop(){this.kendoForm.onPop(this.$props.name)},onRemove(e){this.kendoForm.onRemove(this.$props.name,e)},onReplace(e){this.kendoForm.onReplace(this.$props.name,e)},onMove(e){this.kendoForm.onMove(this.$props.name,e)}},inject:{kendoForm:{default:null}},render(){const{name:e,component:o,id:s}=this.$props;if(!this.kendoForm)return null;const r=this.kendoForm.values[e];if(o){const n=o?i.templateRendering.call(this,o,i.getListeners.call(this)):null;return i.getTemplate.call(this,{h:t.h,template:n,additionalProps:{value:r,validationMessage:this.kendoForm.errors[e],touched:this.kendoForm.touchedByField[e],modified:this.kendoForm.modifiedByField[e],visited:this.kendoForm.visitedByField[e],valid:!(this.kendoForm.errors[e]&&this.kendoForm.touchedByField[e]),name:e,id:s,...this.$attrs},additionalListeners:{unshift:this.onUnshift,push:this.onPush,insert:this.onInsert,pop:this.onPop,remove:this.onRemove,replace:this.onReplace,move:this.onMove}})}}}),d=t.defineComponent({name:"KendoFieldWrapper",props:{dir:String,horizontal:Boolean},created(){i.validatePackage(s)},computed:{fieldClassName(){return{"k-form-field":!0,"k-rtl":"rtl"===this.$props.dir}}},render(){const e=i.getDefaultSlots(this);return t.createVNode("div",{class:this.fieldClassName},[e])}}),a=t.defineComponent({name:"KendoFormElement",props:{horizontal:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}}},created(){i.validatePackage(s)},inject:{kendoForm:{default:null}},computed:{formElementClassName(){const{size:e}=this.$props;return{"k-form":!0,[`k-form-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-form-horizontal":!0===this.$props.horizontal}}},methods:{handleSubmit(e){this.kendoForm&&this.kendoForm.onSubmit(e)}},render(){const e=i.getDefaultSlots(this);return t.createVNode("form",{class:this.formElementClassName,onSubmit:this.handleSubmit},[e])}});e.Field=o,e.FieldArray=n,e.FieldWrapper=d,e.Form=r,e.FormElement=a}));
|
|
8
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueForm={},e.Vue,e.KendoVueCommon)}(this,(function(e,t,i){"use strict";const o=t.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String,changeOnInput:{type:Boolean,default:!0}},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},inject:{kendoForm:{default:null}},methods:{handleOnChange(e){const t=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("change",e)},handleOnInput(e){const t=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);this.changeOnInput&&this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("input",e)},onNativeComponentChange(e){this.kendoForm.onChange(this.$props.name,{value:e.target.value})},handleOnBlur(){this.kendoForm.onBlur(this.$props.name)},handleOnFocus(){this.kendoForm.onFocus(this.$props.name)}},render(){const e=i.getDefaultSlots(this),{name:o,component:s,id:r}=this.$props;if(!this.kendoForm)return null;const n=this.kendoForm.values[o];if("string"==typeof s&&("input"===s||"textarea"===s))return t.h(s,{...this.$attrs,onChange:this.onNativeComponentChange,onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:o,value:n||""});if(s){const d=i.templateRendering.call(this,s,i.getListeners.call(this));return i.getTemplate.call(this,{h:t.h,template:d,additionalProps:{value:n,validationMessage:this.kendoForm.errors[o],touched:this.kendoForm.touchedByField[o],modified:this.kendoForm.modifiedByField[o],visited:this.kendoForm.visitedByField[o],valid:!(this.kendoForm.errors[o]&&this.kendoForm.touchedByField[o]),name:o,id:r,...this.$attrs},additionalListeners:{change:this.handleOnChange,input:this.handleOnInput,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}}),s={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCodes:["KENDOUIVUE","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"},r=t.defineComponent({name:"KendoForm",inheritAttrs:!1,props:{renderForm:[Object,Function],initialValues:Object,validator:Function,ignoreModified:Boolean},emits:{submitclick:null,submit:null},created(){this._accumulatorTimeout=void 0,i.validatePackage(s),this.form.values=i.clone(this.$props.initialValues)},mounted(){this.form.errors=this.getErrors(),this.form.allowSubmit=this.allowSubmit(),this.form.valid=this.isValid()},unmounted(){this.onDestroy()},data(){return{validatorsByField:{},fields:[],unmounted:!1,form:{id:this.id,errors:{},values:{},modifiedByField:{},touchedByField:{},visitedByField:{},valid:!1,modified:!1,touched:!1,visited:!1,submitted:!1,valueGetter:this.valueGetter,allowSubmit:!1,validate:this.validate,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm,registerField:this.onFieldRegister,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}}},provide(){return{kendoForm:this.$data.form}},watch:{"form.values"(){this.form.errors=this.getErrors(),this.form.allowSubmit=this.allowSubmit(),this.form.valid=this.isValid()},"form.touchedByField"(e){this.form.touched=this.isFormTouched(e,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.modifiedByField"(e){this.form.modified=this.isFormModified(e,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.visitedByField"(e){this.form.visited=this.isFormVisited(e,this.fields)}},methods:{isValid(){return this.isFormValid(this.form.errors)},formErrors(){if(this.$props.validator)return this.$props.validator(this.form.values,this.valueGetter)},getErrors(){const e={},t=this.validatorsByField;return Object.keys(this.fields).forEach((i=>{if(e[i]="",t[i]){const o=[];t[i].forEach((e=>{Array.isArray(e)?o.push(...e):o.push(e)})),o.find((t=>{if(t){const o=t(this.valueGetter(i),this.valueGetter,{name:i});if(o)return e[i]=o,!0}return!1}))}})),this.formErrors()&&i.cloneObject(this.formErrors(),e),e},accumulatedForceUpdate(){this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),i.canUseDOM&&(this._accumulatorTimeout=window.setTimeout((()=>{this._accumulatorTimeout=void 0}),0))},resetForm(){this.form.values=i.clone(this.$props.initialValues),this.id=i.guid(),this.form.touchedByField={},this.form.visitedByField={},this.form.modifiedByField={},this.form.submitted=!1},onReset(){this.resetForm()},addField(e){this.fields[e]=!0},validate(e){const t={},i=e||this.fields;Object.keys(i).forEach((e=>{t[e]=!0})),this.form.touchedByField={...t}},onSubmit(e){const t={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),Object.keys(i).forEach((e=>{t[e]=!0})),this.form.visitedByField={...t},this.form.touchedByField={...t};const o=this.form.values,s=this.isValid(),r=this.isFormModified(this.form.modifiedByField,i);this.$emit("submitclick",{values:o,isValid:s,isModified:r,event:e}),s&&(this.$props.ignoreModified||r)&&(this.form.submitted=!0,this.$emit("submit",o,e))},onChange(e,t){const{value:i}=t;this.addField(e),this.form.modifiedByField[e]||(this.form.modifiedByField={...this.form.modifiedByField,[e]:!0}),this.valueSetter(e,i)},onFocus(e){this.form.visitedByField[e]||(this.form.visitedByField={...this.form.visitedByField,[e]:!0})},onBlur(e){this.form.touchedByField[e]||(this.onFocus(e),this.form.touchedByField={...this.form.touchedByField,[e]:!0})},onFieldRegister(e,t){this.addField(e);const i=this.validatorsByField[e]||[],o=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[o];t[o]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&this.accumulatedForceUpdate()}},isFormValid:e=>!Object.keys(e).some((t=>!!e[t])),isFormModified:(e,t)=>Object.keys(t).some((t=>e[t])),isFormHasNotTouched:(e,t)=>Object.keys(t).some((t=>!e[t])),isFormTouched:(e,t)=>Object.keys(t).some((t=>e[t])),isFormVisited:(e,t)=>Object.keys(t).some((t=>e[t])),formHasNotTouched(){return this.isFormHasNotTouched(this.form.touchedByField,this.fields)},allowSubmit(){return this.formHasNotTouched()&&!this.isValid()||this.isValid()&&(this.$props.ignoreModified||this.isFormModified(this.form.modifiedByField,this.fields))},valueGetter(e){return this.form.values[e]},valueSetter(e,t){this.form.values={...this.form.values,[e]:t}},onArrayAction(e){this.addField(e),this.form.modifiedByField[e]||(this.form.modifiedByField={...this.form.modifiedByField,[e]:!0}),this.onBlur(e,!0)},onInsert(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i)},onUnshift(e,t){this.onInsert(e,{value:t.value,index:0})},onPush(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i)},onPop(e){this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),i},onRemove(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i.splice(t.index,1);return this.valueSetter(e,i),o},onReplace(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i)},onMove(e,t){this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,o),this.valueSetter(e,i)},onDestroy(){this.unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}},render(){return i.getDefaultSlots(this)}}),n=t.defineComponent({name:"KendoFieldArray",props:{value:[String,Number,Boolean,Object,Array],component:[String,Number,Boolean,Object],validationMessage:String,touched:Boolean,modified:Boolean,validator:[Function,Array],visited:Boolean,valid:Boolean,name:String,id:String},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},methods:{onUnshift(e){this.kendoForm.onUnshift(this.$props.name,e)},onPush(e){this.kendoForm.onPush(this.$props.name,e)},onInsert(e){this.kendoForm.onInsert(this.$props.name,e)},onPop(){this.kendoForm.onPop(this.$props.name)},onRemove(e){this.kendoForm.onRemove(this.$props.name,e)},onReplace(e){this.kendoForm.onReplace(this.$props.name,e)},onMove(e){this.kendoForm.onMove(this.$props.name,e)}},inject:{kendoForm:{default:null}},render(){const{name:e,component:o,id:s}=this.$props;if(!this.kendoForm)return null;const r=this.kendoForm.values[e];if(o){const n=o?i.templateRendering.call(this,o,i.getListeners.call(this)):null;return i.getTemplate.call(this,{h:t.h,template:n,additionalProps:{value:r,validationMessage:this.kendoForm.errors[e],touched:this.kendoForm.touchedByField[e],modified:this.kendoForm.modifiedByField[e],visited:this.kendoForm.visitedByField[e],valid:!(this.kendoForm.errors[e]&&this.kendoForm.touchedByField[e]),name:e,id:s,...this.$attrs},additionalListeners:{unshift:this.onUnshift,push:this.onPush,insert:this.onInsert,pop:this.onPop,remove:this.onRemove,replace:this.onReplace,move:this.onMove}})}}}),d=t.defineComponent({name:"KendoFieldWrapper",props:{dir:String,horizontal:Boolean},created(){i.validatePackage(s)},computed:{fieldClassName(){return{"k-form-field":!0,"k-rtl":"rtl"===this.$props.dir}}},render(){const e=i.getDefaultSlots(this);return t.createVNode("div",{class:this.fieldClassName},[e])}}),a=t.defineComponent({name:"KendoFormElement",props:{horizontal:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}}},created(){i.validatePackage(s)},inject:{kendoForm:{default:null}},computed:{formElementClassName(){const{size:e}=this.$props;return{"k-form":!0,[`k-form-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-form-horizontal":!0===this.$props.horizontal}}},methods:{handleSubmit(e){this.kendoForm&&this.kendoForm.onSubmit(e)}},render(){const e=i.getDefaultSlots(this);return t.createVNode("form",{class:this.formElementClassName,onSubmit:this.handleSubmit},[e])}});e.Field=o,e.FieldArray=n,e.FieldWrapper=d,e.Form=r,e.FormElement=a}));
|
package/index.d.mts
CHANGED
|
@@ -12,60 +12,14 @@ import { ExtractPropTypes } from 'vue';
|
|
|
12
12
|
import { PropType } from 'vue';
|
|
13
13
|
import { PublicProps } from 'vue';
|
|
14
14
|
|
|
15
|
-
export declare const Field: DefineComponent<
|
|
16
|
-
component: PropType<any>;
|
|
17
|
-
validator: PropType<FieldValidatorType | FieldValidatorType[]>;
|
|
18
|
-
name: PropType<string>;
|
|
19
|
-
changeOnInput: {
|
|
20
|
-
type: PropType<boolean>;
|
|
21
|
-
default: boolean;
|
|
22
|
-
};
|
|
23
|
-
id: PropType<string>;
|
|
24
|
-
resource: PropType<any>;
|
|
25
|
-
multiple: PropType<boolean>;
|
|
26
|
-
dataItems: PropType<any[]>;
|
|
27
|
-
textField: PropType<string>;
|
|
28
|
-
valueField: PropType<string>;
|
|
29
|
-
colorField: PropType<string>;
|
|
30
|
-
rows: PropType<number>;
|
|
31
|
-
field: PropType<any>;
|
|
32
|
-
start: PropType<any>;
|
|
33
|
-
value: PropType<any>;
|
|
34
|
-
width: PropType<string>;
|
|
35
|
-
editorId: PropType<string>;
|
|
36
|
-
isAllDay: PropType<boolean>;
|
|
37
|
-
timezone: PropType<string>;
|
|
38
|
-
}>, {}, {}, {}, {
|
|
15
|
+
export declare const Field: DefineComponent< {}, {}, {}, {}, {
|
|
39
16
|
handleOnChange(event: any): void;
|
|
40
17
|
handleOnInput(event: any): void;
|
|
41
18
|
onNativeComponentChange(event: any): void;
|
|
42
19
|
handleOnBlur(): void;
|
|
43
20
|
handleOnFocus(): void;
|
|
44
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<
|
|
45
|
-
|
|
46
|
-
validator: PropType<FieldValidatorType | FieldValidatorType[]>;
|
|
47
|
-
name: PropType<string>;
|
|
48
|
-
changeOnInput: {
|
|
49
|
-
type: PropType<boolean>;
|
|
50
|
-
default: boolean;
|
|
51
|
-
};
|
|
52
|
-
id: PropType<string>;
|
|
53
|
-
resource: PropType<any>;
|
|
54
|
-
multiple: PropType<boolean>;
|
|
55
|
-
dataItems: PropType<any[]>;
|
|
56
|
-
textField: PropType<string>;
|
|
57
|
-
valueField: PropType<string>;
|
|
58
|
-
colorField: PropType<string>;
|
|
59
|
-
rows: PropType<number>;
|
|
60
|
-
field: PropType<any>;
|
|
61
|
-
start: PropType<any>;
|
|
62
|
-
value: PropType<any>;
|
|
63
|
-
width: PropType<string>;
|
|
64
|
-
editorId: PropType<string>;
|
|
65
|
-
isAllDay: PropType<boolean>;
|
|
66
|
-
timezone: PropType<string>;
|
|
67
|
-
}>> & Readonly<{}>, {
|
|
68
|
-
changeOnInput: boolean;
|
|
21
|
+
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {
|
|
22
|
+
[x: string]: any;
|
|
69
23
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
70
24
|
|
|
71
25
|
/**
|
package/index.d.ts
CHANGED
|
@@ -12,60 +12,14 @@ import { ExtractPropTypes } from 'vue';
|
|
|
12
12
|
import { PropType } from 'vue';
|
|
13
13
|
import { PublicProps } from 'vue';
|
|
14
14
|
|
|
15
|
-
export declare const Field: DefineComponent<
|
|
16
|
-
component: PropType<any>;
|
|
17
|
-
validator: PropType<FieldValidatorType | FieldValidatorType[]>;
|
|
18
|
-
name: PropType<string>;
|
|
19
|
-
changeOnInput: {
|
|
20
|
-
type: PropType<boolean>;
|
|
21
|
-
default: boolean;
|
|
22
|
-
};
|
|
23
|
-
id: PropType<string>;
|
|
24
|
-
resource: PropType<any>;
|
|
25
|
-
multiple: PropType<boolean>;
|
|
26
|
-
dataItems: PropType<any[]>;
|
|
27
|
-
textField: PropType<string>;
|
|
28
|
-
valueField: PropType<string>;
|
|
29
|
-
colorField: PropType<string>;
|
|
30
|
-
rows: PropType<number>;
|
|
31
|
-
field: PropType<any>;
|
|
32
|
-
start: PropType<any>;
|
|
33
|
-
value: PropType<any>;
|
|
34
|
-
width: PropType<string>;
|
|
35
|
-
editorId: PropType<string>;
|
|
36
|
-
isAllDay: PropType<boolean>;
|
|
37
|
-
timezone: PropType<string>;
|
|
38
|
-
}>, {}, {}, {}, {
|
|
15
|
+
export declare const Field: DefineComponent< {}, {}, {}, {}, {
|
|
39
16
|
handleOnChange(event: any): void;
|
|
40
17
|
handleOnInput(event: any): void;
|
|
41
18
|
onNativeComponentChange(event: any): void;
|
|
42
19
|
handleOnBlur(): void;
|
|
43
20
|
handleOnFocus(): void;
|
|
44
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<
|
|
45
|
-
|
|
46
|
-
validator: PropType<FieldValidatorType | FieldValidatorType[]>;
|
|
47
|
-
name: PropType<string>;
|
|
48
|
-
changeOnInput: {
|
|
49
|
-
type: PropType<boolean>;
|
|
50
|
-
default: boolean;
|
|
51
|
-
};
|
|
52
|
-
id: PropType<string>;
|
|
53
|
-
resource: PropType<any>;
|
|
54
|
-
multiple: PropType<boolean>;
|
|
55
|
-
dataItems: PropType<any[]>;
|
|
56
|
-
textField: PropType<string>;
|
|
57
|
-
valueField: PropType<string>;
|
|
58
|
-
colorField: PropType<string>;
|
|
59
|
-
rows: PropType<number>;
|
|
60
|
-
field: PropType<any>;
|
|
61
|
-
start: PropType<any>;
|
|
62
|
-
value: PropType<any>;
|
|
63
|
-
width: PropType<string>;
|
|
64
|
-
editorId: PropType<string>;
|
|
65
|
-
isAllDay: PropType<boolean>;
|
|
66
|
-
timezone: PropType<string>;
|
|
67
|
-
}>> & Readonly<{}>, {
|
|
68
|
-
changeOnInput: boolean;
|
|
21
|
+
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {
|
|
22
|
+
[x: string]: any;
|
|
69
23
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
70
24
|
|
|
71
25
|
/**
|
package/package-metadata.mjs
CHANGED
|
@@ -9,7 +9,7 @@ const e = {
|
|
|
9
9
|
name: "@progress/kendo-vue-form",
|
|
10
10
|
productName: "Kendo UI for Vue",
|
|
11
11
|
productCodes: ["KENDOUIVUE", "KENDOUICOMPLETE"],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1731487857,
|
|
13
13
|
version: "",
|
|
14
14
|
licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/"
|
|
15
15
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-form",
|
|
3
|
-
"version": "6.0.0
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "TODO",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"sideEffects": false,
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"@progress/kendo-licensing": "^1.3.4",
|
|
19
|
-
"@progress/kendo-vue-common": "6.0.0
|
|
19
|
+
"@progress/kendo-vue-common": "6.0.0",
|
|
20
20
|
"vue": "^3.0.2"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {},
|
|
@@ -39,6 +39,6 @@
|
|
|
39
39
|
},
|
|
40
40
|
"repository": {
|
|
41
41
|
"type": "git",
|
|
42
|
-
"url": "git+https://github.com/telerik/kendo-
|
|
42
|
+
"url": "git+https://github.com/telerik/kendo-vue.git"
|
|
43
43
|
}
|
|
44
44
|
}
|