@progress/kendo-vue-form 6.0.0-develop.6 → 6.0.0-develop.7

package/Field.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),o=require("@progress/kendo-vue-common"),d=r.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&&(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:s,start:a}=this.$props;if(!this.kendoForm)return null;const i=this.kendoForm.values[t];if(typeof n=="string"&&n==="input")return r.h(n,{...this.$attrs,onChange:this.onNativeComponentChange,onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:t,value:i||"",start:a});if(n){const l=o.templateRendering.call(this,n,o.getListeners.call(this));return o.getTemplate.call(this,{h:r.h,template:l,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:s,start:a,...this.$attrs},additionalListeners:{change:this.handleOnChange,input:this.handleOnInput,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}});exports.Field=d;
+"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

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as l, h as r } from "vue";
-import { getDefaultSlots as d, templateRendering as h, getListeners as u, getTemplate as m } from "@progress/kendo-vue-common";
-const c = /* @__PURE__ */ l({
+import { defineComponent as s, h as i } from "vue";
+import { getDefaultSlots as l, templateRendering as d, getListeners as h, getTemplate as u } from "@progress/kendo-vue-common";
+const F = /* @__PURE__ */ s({
   name: "KendoField",
   props: {
     component: [String, Number, Boolean, Object],
@@ -16,22 +16,7 @@ const c = /* @__PURE__ */ l({
     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;
@@ -67,30 +52,28 @@ const c = /* @__PURE__ */ l({
     }
   },
   render() {
-    const e = d(this), {
+    const e = l(this), {
       name: t,
       component: n,
-      id: a,
-      start: i
+      id: a
     } = this.$props;
     if (!this.kendoForm)
       return null;
     const o = this.kendoForm.values[t];
-    if (typeof n == "string" && n === "input")
-      return r(n, {
+    if (typeof n == "string" && (n === "input" || n === "textarea"))
+      return i(n, {
         ...this.$attrs,
         onChange: this.onNativeComponentChange,
         onBlur: this.handleOnBlur,
         onFocus: this.handleOnFocus,
         name: t,
-        value: o || "",
-        start: i
+        value: o || ""
       });
     if (n) {
-      const s = h.call(this, n, u.call(this));
-      return m.call(this, {
-        h: r,
-        template: s,
+      const r = d.call(this, n, h.call(this));
+      return u.call(this, {
+        h: i,
+        template: r,
         additionalProps: {
           value: o,
           // meta
@@ -107,7 +90,6 @@ const c = /* @__PURE__ */ l({
           valid: !(this.kendoForm.errors[t] && this.kendoForm.touchedByField[t]),
           name: t,
           id: a,
-          start: i,
           ...this.$attrs
         },
         additionalListeners: {
@@ -122,5 +104,5 @@ const c = /* @__PURE__ */ l({
   }
 });
 export {
-  c as Field
+  F as Field
 };

package/dist/cdn/js/kendo-vue-form.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!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}));
+!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

@@ -12,60 +12,14 @@ import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-export declare const Field: DefineComponent<ExtractPropTypes<    {
-component: PropType<any>;
-validator: PropType<FieldValidatorType | FieldValidatorType[]>;
-name: PropType<string>;
-changeOnInput: {
-type: PropType<boolean>;
-default: boolean;
-};
-id: PropType<string>;
-resource: PropType<any>;
-multiple: PropType<boolean>;
-dataItems: PropType<any[]>;
-textField: PropType<string>;
-valueField: PropType<string>;
-colorField: PropType<string>;
-rows: PropType<number>;
-field: PropType<any>;
-start: PropType<any>;
-value: PropType<any>;
-width: PropType<string>;
-editorId: PropType<string>;
-isAllDay: PropType<boolean>;
-timezone: PropType<string>;
-}>, {}, {}, {}, {
+export declare const Field: DefineComponent<    {}, {}, {}, {}, {
 handleOnChange(event: any): void;
 handleOnInput(event: any): void;
 onNativeComponentChange(event: any): void;
 handleOnBlur(): void;
 handleOnFocus(): void;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-component: PropType<any>;
-validator: PropType<FieldValidatorType | FieldValidatorType[]>;
-name: PropType<string>;
-changeOnInput: {
-type: PropType<boolean>;
-default: boolean;
-};
-id: PropType<string>;
-resource: PropType<any>;
-multiple: PropType<boolean>;
-dataItems: PropType<any[]>;
-textField: PropType<string>;
-valueField: PropType<string>;
-colorField: PropType<string>;
-rows: PropType<number>;
-field: PropType<any>;
-start: PropType<any>;
-value: PropType<any>;
-width: PropType<string>;
-editorId: PropType<string>;
-isAllDay: PropType<boolean>;
-timezone: PropType<string>;
-}>> & Readonly<{}>, {
-changeOnInput: boolean;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {
+[x: string]: any;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**

package/index.d.ts

@@ -12,60 +12,14 @@ import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-export declare const Field: DefineComponent<ExtractPropTypes<    {
-component: PropType<any>;
-validator: PropType<FieldValidatorType | FieldValidatorType[]>;
-name: PropType<string>;
-changeOnInput: {
-type: PropType<boolean>;
-default: boolean;
-};
-id: PropType<string>;
-resource: PropType<any>;
-multiple: PropType<boolean>;
-dataItems: PropType<any[]>;
-textField: PropType<string>;
-valueField: PropType<string>;
-colorField: PropType<string>;
-rows: PropType<number>;
-field: PropType<any>;
-start: PropType<any>;
-value: PropType<any>;
-width: PropType<string>;
-editorId: PropType<string>;
-isAllDay: PropType<boolean>;
-timezone: PropType<string>;
-}>, {}, {}, {}, {
+export declare const Field: DefineComponent<    {}, {}, {}, {}, {
 handleOnChange(event: any): void;
 handleOnInput(event: any): void;
 onNativeComponentChange(event: any): void;
 handleOnBlur(): void;
 handleOnFocus(): void;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-component: PropType<any>;
-validator: PropType<FieldValidatorType | FieldValidatorType[]>;
-name: PropType<string>;
-changeOnInput: {
-type: PropType<boolean>;
-default: boolean;
-};
-id: PropType<string>;
-resource: PropType<any>;
-multiple: PropType<boolean>;
-dataItems: PropType<any[]>;
-textField: PropType<string>;
-valueField: PropType<string>;
-colorField: PropType<string>;
-rows: PropType<number>;
-field: PropType<any>;
-start: PropType<any>;
-value: PropType<any>;
-width: PropType<string>;
-editorId: PropType<string>;
-isAllDay: PropType<boolean>;
-timezone: PropType<string>;
-}>> & Readonly<{}>, {
-changeOnInput: boolean;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {
+[x: string]: any;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**

package/package-metadata.mjs

@@ -9,7 +9,7 @@ const e = {
   name: "@progress/kendo-vue-form",
   productName: "Kendo UI for Vue",
   productCodes: ["KENDOUIVUE", "KENDOUICOMPLETE"],
-  publishDate: 1731443089,
+  publishDate: 1731484696,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-form",
-  "version": "6.0.0-develop.6",
+  "version": "6.0.0-develop.7",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -16,7 +16,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-vue-common": "6.0.0-develop.6",
+    "@progress/kendo-vue-common": "6.0.0-develop.7",
     "vue": "^3.0.2"
   },
   "dependencies": {},