@progress/kendo-vue-form 8.3.0-develop.3 → 8.3.0-develop.5

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

@@ -12,4 +12,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,s){"use strict";const i=t.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String,colSpan:[Number,Array]},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},inject:{kendoForm:{default:null}},emits:["change"],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)},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=s.getDefaultSlots(this),{name:i,component:o,id:r,colSpan:n}=this.$props;if(!this.kendoForm)return null;const l=this.kendoForm.values[i];if("string"==typeof o&&("input"===o||"textarea"===o))return t.h(o,{onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:i,value:l||""});if(o){const d=s.templateRendering.call(this,o,s.getListeners.call(this));return s.getTemplate.call(this,{h:t.h,template:d,additionalProps:{value:l,validationMessage:this.kendoForm.errors[i],touched:this.kendoForm.touchedByField[i],modified:this.kendoForm.modifiedByField[i],visited:this.kendoForm.visitedByField[i],valid:!(this.kendoForm.errors[i]&&this.kendoForm.touchedByField[i]),name:i,id:r,...void 0!==n?{colSpan:n}:{},...this.$attrs},additionalListeners:{change:this.handleOnChange,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}}),o={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"8.3.0-develop.3",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,errors:Object,onChange:Function},emits:{submitclick:null,submit:null},created(){this._accumulatorTimeout=void 0,s.validatePackage(o),this.form.values=s.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.handleFieldChange,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)},errors(e){this.form.errors=this.getErrors(),this.form.allowSubmit=this.allowSubmit(),this.form.valid=this.isValid()}},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(s=>{if(e[s]="",t[s]){const i=[];t[s].forEach(e=>{Array.isArray(e)?i.push(...e):i.push(e)}),i.find(t=>{if(t){const i=t(this.valueGetter(s),this.valueGetter,{name:s});if(i)return e[s]=i,!0}return!1})}}),this.formErrors()&&s.cloneObject(this.formErrors(),e),this.$props.errors&&s.cloneObject(this.$props.errors,e),e},accumulatedForceUpdate(){this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),s.canUseDOM&&(this._accumulatorTimeout=window.setTimeout(()=>{this._accumulatorTimeout=void 0},0))},resetForm(){this.form.values=s.clone(this.$props.initialValues),this.id=s.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={},s=e||this.fields;Object.keys(s).forEach(e=>{t[e]=!0}),this.form.touchedByField={...t}},onSubmit(e){const t={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),Object.keys(s).forEach(e=>{t[e]=!0}),this.form.visitedByField={...t},this.form.touchedByField={...t};const i=this.form.values,o=this.isValid(),r=this.isFormModified(this.form.modifiedByField,s);this.$emit("submitclick",{values:i,isValid:o,isModified:r,event:e}),o&&(this.$props.ignoreModified||r)&&(this.form.submitted=!0,this.$emit("submit",i,e))},handleFieldChange(e,t){const{value:s}=t;this.addField(e),this.form.modifiedByField[e]||(this.form.modifiedByField={...this.form.modifiedByField,[e]:!0}),this.valueSetter(e,s),this.$props.onChange&&this.$props.onChange(e,s,this.valueGetter)},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 s=this.validatorsByField[e]||[],i=s.length;return this.validatorsByField={...this.validatorsByField,[e]:[...s,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],s=!!t[i];t[i]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&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 s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s)},onUnshift(e,t){this.onInsert(e,{value:t.value,index:0})},onPush(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s)},onPop(e){this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),s},onRemove(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),i},onReplace(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s)},onMove(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s)},onDestroy(){this.unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}},render(){const e={onSubmit:this.onSubmit,onChange:this.handleFieldChange,onFormreset:this.resetForm,errors:this.form.errors,valid:this.form.valid,touched:this.form.touched,visited:this.form.visited,modified:this.form.modified,submitted:this.form.submitted,allowSubmit:this.form.allowSubmit,valueGetter:this.valueGetter};return this.$props.renderForm?this.$props.renderForm(e):s.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:i,id:o}=this.$props;if(!this.kendoForm)return null;const r=this.kendoForm.values[e];if(i){const n=i?s.templateRendering.call(this,i,s.getListeners.call(this)):null;return s.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:o,...this.$attrs},additionalListeners:{unshift:this.onUnshift,push:this.onPush,insert:this.onInsert,pop:this.onPop,remove:this.onRemove,replace:this.onReplace,move:this.onMove}})}}});function l(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function d(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,d=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,a=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=d&&t<=a)return r.value}return""}function a(e,t){if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=d(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null}function h(e){return e&&e>0?`k-grid-cols-${e}`:""}function u(e,t){if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=d(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null}function m(e){return e?`k-col-span-${e}`:""}function c(e){if(null==e)return null;if("number"==typeof e)return`${e}px`;const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}function p(e,t){if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=d(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols&&("number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=d(s.cols,t)||null)),void 0!==s.rows&&("number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=d(s.rows,t)||null)),i}return null}function f(e,t){var s,i,o,r;const n=c(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px"),l=c(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px");return`${null!=n?n:"0px"} ${null!=l?l:"32px"}`}const v=t.defineComponent({name:"KendoFieldWrapper",props:{dir:String,horizontal:Boolean,colSpan:[Number,Array]},data:()=>({colSpanClass:""}),created(){s.validatePackage(o),this._resizeObserver=null,this._formElement=null},mounted(){var e;void 0!==this.$props.colSpan&&(this._formElement=(null==(e=this.$el)?void 0:e.closest("form"))||null,this._setupColSpanObserver())},beforeUnmount(){this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null)},watch:{colSpan(e){var t;void 0!==e?(this._formElement=(null==(t=this.$el)?void 0:t.closest("form"))||null,this._setupColSpanObserver()):(this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null),this.colSpanClass="")}},computed:{fieldClassName(){return{"k-form-field":!0,"k-rtl":"rtl"===this.$props.dir,...this.colSpanClass?{[this.colSpanClass]:!0}:{}}}},methods:{_updateColSpanClass(){const e="undefined"!=typeof window?window.innerWidth:0,t=this._formElement?l(this._formElement):e,s=u(this.$props.colSpan,t);this.colSpanClass=m(s)},_setupColSpanObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._updateColSpanClass(),this._formElement&&"undefined"!=typeof window&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._updateColSpanClass()),this._resizeObserver.observe(this._formElement))}},render(){const e=s.getDefaultSlots(this);return t.createVNode("div",{class:this.fieldClassName},[e])}}),F=t.defineComponent({name:"KendoFormElement",props:{horizontal:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},cols:[Number,Array],gutters:[String,Number,Object,Array]},data:()=>({columnClass:"",gapStyle:""}),created(){s.validatePackage(o),this._resizeObserver=null},inject:{kendoForm:{default:null}},mounted(){var e;this._handlePasteEvent=e=>{var t;const s=null==(t=e.detail)?void 0:t.fieldValues;s&&this.kendoForm&&Object.entries(s).forEach(([e,t])=>{this.kendoForm.onChange(e,{value:t})})},null==(e=this.$el)||e.addEventListener(s.KENDO_PASTE_EVENT_NAME,this._handlePasteEvent),this.$props.cols&&this._setupColsObserver()},beforeUnmount(){var e;this._resizeObserver&&this.$el&&(this._resizeObserver.unobserve(this.$el),this._resizeObserver.disconnect()),null==(e=this.$el)||e.removeEventListener(s.KENDO_PASTE_EVENT_NAME,this._handlePasteEvent)},watch:{cols(e){e?this._setupColsObserver():(this._resizeObserver&&this.$el&&(this._resizeObserver.unobserve(this.$el),this._resizeObserver.disconnect(),this._resizeObserver=null),this.columnClass="")}},computed:{formElementClassName(){const{size:e}=this.$props;return{"k-form":!0,[`k-form-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-form-horizontal":!0===this.$props.horizontal}}},methods:{handleSubmit(e){this.kendoForm&&this.kendoForm.onSubmit(e)},_updateColumnClass(){const e="undefined"!=typeof window?window.innerWidth:0,t=this.$el?l(this.$el):e,s=a(this.$props.cols,t);this.columnClass=h(s);const i=p(this.$props.gutters,t);this.gapStyle=f(i,{rows:"0px",cols:"32px"})},_setupColsObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._updateColumnClass(),this.$el&&"undefined"!=typeof window&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._updateColumnClass()),this._resizeObserver.observe(this.$el))}},render(){const e=s.getDefaultSlots(this);return t.createVNode("form",{class:this.formElementClassName,onSubmit:this.handleSubmit},[this.$props.cols?t.createVNode("div",{class:`k-form-layout k-d-grid ${this.columnClass}`,style:{gap:this.gapStyle||"0px 32px"}},[e]):e])}}),b={rows:"0px",cols:"16px"},y=t.defineComponent({name:"KendoFormFieldSet",props:{cols:[Number,Array],colSpan:[Number,Array],gutters:[String,Number,Object,Array],legend:String},data:()=>({columnClass:"",colSpanClass:"",gapStyle:""}),created(){s.validatePackage(o),this._resizeObserver=null,this._formElement=null},mounted(){var e;this._formElement=(null==(e=this.$el)?void 0:e.closest("form"))||null,(void 0!==this.$props.cols||void 0!==this.$props.colSpan)&&this._setupObserver()},beforeUnmount(){this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect())},watch:{cols(e){void 0!==e?this._setupObserver():(this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null),this.columnClass="",this.gapStyle="")},colSpan(e){void 0!==e?this._setupObserver():this.colSpanClass=""},gutters(){this._update()}},computed:{fieldsetClass(){return["k-form-fieldset",this.colSpanClass].filter(Boolean).join(" ")},divClass(){return["k-form-layout","k-d-grid",this.columnClass].filter(Boolean).join(" ")}},methods:{_update(){const e="undefined"!=typeof window?window.innerWidth:0,t=this._formElement?l(this._formElement):e;if(void 0!==this.$props.cols){const e=a(this.$props.cols,t);this.columnClass=h(e)}if(void 0!==this.$props.colSpan){const e=u(this.$props.colSpan,t);this.colSpanClass=m(e)}const s=void 0!==this.$props.cols?b:void 0,i=void 0!==this.$props.gutters?this.$props.gutters:s;if(void 0!==i){const e=p(i,t);this.gapStyle=f(e,b)}else this.gapStyle=""},_setupObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._update(),this._formElement&&"undefined"!=typeof window&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._update()),this._resizeObserver.observe(this._formElement))}},render(){const e=s.getDefaultSlots(this),{legend:i}=this.$props;return t.createVNode("fieldset",{class:this.fieldsetClass},[i&&t.createVNode("legend",{class:"k-form-legend"},[i]),this.$props.cols?t.createVNode("div",{class:this.divClass,style:{gap:this.gapStyle||"0px 16px"}},[e]):e])}});e.Field=i,e.FieldArray=n,e.FieldWrapper=v,e.Form=r,e.FormElement=F,e.FormFieldSet=y});
+!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,s){"use strict";const i=t.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String,colSpan:[Number,Array]},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},inject:{kendoForm:{default:null}},emits:["change"],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)},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=s.getDefaultSlots(this),{name:i,component:o,id:r,colSpan:n}=this.$props;if(!this.kendoForm)return null;const l=this.kendoForm.values[i];if("string"==typeof o&&("input"===o||"textarea"===o))return t.h(o,{onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:i,value:l||""});if(o){const d=s.templateRendering.call(this,o,s.getListeners.call(this));return s.getTemplate.call(this,{h:t.h,template:d,additionalProps:{value:l,validationMessage:this.kendoForm.errors[i],touched:this.kendoForm.touchedByField[i],modified:this.kendoForm.modifiedByField[i],visited:this.kendoForm.visitedByField[i],valid:!(this.kendoForm.errors[i]&&this.kendoForm.touchedByField[i]),name:i,id:r,...void 0!==n?{colSpan:n}:{},...this.$attrs},additionalListeners:{change:this.handleOnChange,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}}),o={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"8.3.0-develop.5",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,errors:Object,onChange:Function},emits:{submitclick:null,submit:null},created(){this._accumulatorTimeout=void 0,s.validatePackage(o),this.form.values=s.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.handleFieldChange,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)},errors(e){this.form.errors=this.getErrors(),this.form.allowSubmit=this.allowSubmit(),this.form.valid=this.isValid()}},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(s=>{if(e[s]="",t[s]){const i=[];t[s].forEach(e=>{Array.isArray(e)?i.push(...e):i.push(e)}),i.find(t=>{if(t){const i=t(this.valueGetter(s),this.valueGetter,{name:s});if(i)return e[s]=i,!0}return!1})}}),this.formErrors()&&s.cloneObject(this.formErrors(),e),this.$props.errors&&s.cloneObject(this.$props.errors,e),e},accumulatedForceUpdate(){this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),s.canUseDOM&&(this._accumulatorTimeout=window.setTimeout(()=>{this._accumulatorTimeout=void 0},0))},resetForm(){this.form.values=s.clone(this.$props.initialValues),this.id=s.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={},s=e||this.fields;Object.keys(s).forEach(e=>{t[e]=!0}),this.form.touchedByField={...t}},onSubmit(e){const t={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),Object.keys(s).forEach(e=>{t[e]=!0}),this.form.visitedByField={...t},this.form.touchedByField={...t};const i=this.form.values,o=this.isValid(),r=this.isFormModified(this.form.modifiedByField,s);this.$emit("submitclick",{values:i,isValid:o,isModified:r,event:e}),o&&(this.$props.ignoreModified||r)&&(this.form.submitted=!0,this.$emit("submit",i,e))},handleFieldChange(e,t){const{value:s}=t;this.addField(e),this.form.modifiedByField[e]||(this.form.modifiedByField={...this.form.modifiedByField,[e]:!0}),this.valueSetter(e,s),this.$props.onChange&&this.$props.onChange(e,s,this.valueGetter)},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 s=this.validatorsByField[e]||[],i=s.length;return this.validatorsByField={...this.validatorsByField,[e]:[...s,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],s=!!t[i];t[i]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&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 s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s)},onUnshift(e,t){this.onInsert(e,{value:t.value,index:0})},onPush(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s)},onPop(e){this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),s},onRemove(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),i},onReplace(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s)},onMove(e,t){this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s)},onDestroy(){this.unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}},render(){const e={onSubmit:this.onSubmit,onChange:this.handleFieldChange,onFormreset:this.resetForm,errors:this.form.errors,valid:this.form.valid,touched:this.form.touched,visited:this.form.visited,modified:this.form.modified,submitted:this.form.submitted,allowSubmit:this.form.allowSubmit,valueGetter:this.valueGetter};return this.$props.renderForm?this.$props.renderForm(e):s.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:i,id:o}=this.$props;if(!this.kendoForm)return null;const r=this.kendoForm.values[e];if(i){const n=i?s.templateRendering.call(this,i,s.getListeners.call(this)):null;return s.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:o,...this.$attrs},additionalListeners:{unshift:this.onUnshift,push:this.onPush,insert:this.onInsert,pop:this.onPop,remove:this.onRemove,replace:this.onReplace,move:this.onMove}})}}});function l(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function d(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,d=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,a=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=d&&t<=a)return r.value}return""}function a(e,t){if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=d(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null}function h(e){return e&&e>0?`k-grid-cols-${e}`:""}function u(e,t){if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=d(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null}function m(e){return e?`k-col-span-${e}`:""}function c(e){if(null==e)return null;if("number"==typeof e)return`${e}px`;const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}function p(e,t){if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=d(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols&&("number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=d(s.cols,t)||null)),void 0!==s.rows&&("number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=d(s.rows,t)||null)),i}return null}function f(e,t){var s,i,o,r;const n=c(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px"),l=c(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px");return`${null!=n?n:"0px"} ${null!=l?l:"32px"}`}const v=t.defineComponent({name:"KendoFieldWrapper",props:{dir:String,horizontal:Boolean,colSpan:[Number,Array]},data:()=>({colSpanClass:""}),created(){s.validatePackage(o),this._resizeObserver=null,this._formElement=null},mounted(){var e;void 0!==this.$props.colSpan&&(this._formElement=(null==(e=this.$el)?void 0:e.closest("form"))||null,this._setupColSpanObserver())},beforeUnmount(){this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null)},watch:{colSpan(e){var t;void 0!==e?(this._formElement=(null==(t=this.$el)?void 0:t.closest("form"))||null,this._setupColSpanObserver()):(this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null),this.colSpanClass="")}},computed:{fieldClassName(){return{"k-form-field":!0,"k-rtl":"rtl"===this.$props.dir,...this.colSpanClass?{[this.colSpanClass]:!0}:{}}}},methods:{_updateColSpanClass(){const e="undefined"!=typeof window?window.innerWidth:0,t=this._formElement?l(this._formElement):e,s=u(this.$props.colSpan,t);this.colSpanClass=m(s)},_setupColSpanObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._updateColSpanClass(),this._formElement&&"undefined"!=typeof window&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._updateColSpanClass()),this._resizeObserver.observe(this._formElement))}},render(){const e=s.getDefaultSlots(this);return t.createVNode("div",{class:this.fieldClassName},[e])}}),F=t.defineComponent({name:"KendoFormElement",props:{horizontal:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},cols:[Number,Array],gutters:[String,Number,Object,Array]},data:()=>({columnClass:"",gapStyle:""}),created(){s.validatePackage(o),this._resizeObserver=null},inject:{kendoForm:{default:null}},mounted(){var e;this._handlePasteEvent=e=>{var t;const s=null==(t=e.detail)?void 0:t.fieldValues;s&&this.kendoForm&&Object.entries(s).forEach(([e,t])=>{this.kendoForm.onChange(e,{value:t})})},null==(e=this.$el)||e.addEventListener(s.KENDO_PASTE_EVENT_NAME,this._handlePasteEvent),this.$props.cols&&this._setupColsObserver()},beforeUnmount(){var e;this._resizeObserver&&this.$el&&(this._resizeObserver.unobserve(this.$el),this._resizeObserver.disconnect()),null==(e=this.$el)||e.removeEventListener(s.KENDO_PASTE_EVENT_NAME,this._handlePasteEvent)},watch:{cols(e){e?this._setupColsObserver():(this._resizeObserver&&this.$el&&(this._resizeObserver.unobserve(this.$el),this._resizeObserver.disconnect(),this._resizeObserver=null),this.columnClass="")}},computed:{formElementClassName(){const{size:e}=this.$props;return{"k-form":!0,[`k-form-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-form-horizontal":!0===this.$props.horizontal}}},methods:{handleSubmit(e){this.kendoForm&&this.kendoForm.onSubmit(e)},_updateColumnClass(){const e="undefined"!=typeof window?window.innerWidth:0,t=this.$el?l(this.$el):e,s=a(this.$props.cols,t);this.columnClass=h(s);const i=p(this.$props.gutters,t);this.gapStyle=f(i,{rows:"0px",cols:"32px"})},_setupColsObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._updateColumnClass(),this.$el&&"undefined"!=typeof window&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._updateColumnClass()),this._resizeObserver.observe(this.$el))}},render(){const e=s.getDefaultSlots(this);return t.createVNode("form",{class:this.formElementClassName,onSubmit:this.handleSubmit},[this.$props.cols?t.createVNode("div",{class:`k-form-layout k-d-grid ${this.columnClass}`,style:{gap:this.gapStyle||"0px 32px"}},[e]):e])}}),b={rows:"0px",cols:"16px"},y=t.defineComponent({name:"KendoFormFieldSet",props:{cols:[Number,Array],colSpan:[Number,Array],gutters:[String,Number,Object,Array],legend:String},data:()=>({columnClass:"",colSpanClass:"",gapStyle:""}),created(){s.validatePackage(o),this._resizeObserver=null,this._formElement=null},mounted(){var e;this._formElement=(null==(e=this.$el)?void 0:e.closest("form"))||null,(void 0!==this.$props.cols||void 0!==this.$props.colSpan)&&this._setupObserver()},beforeUnmount(){this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect())},watch:{cols(e){void 0!==e?this._setupObserver():(this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null),this.columnClass="",this.gapStyle="")},colSpan(e){void 0!==e?this._setupObserver():this.colSpanClass=""},gutters(){this._update()}},computed:{fieldsetClass(){return["k-form-fieldset",this.colSpanClass].filter(Boolean).join(" ")},divClass(){return["k-form-layout","k-d-grid",this.columnClass].filter(Boolean).join(" ")}},methods:{_update(){const e="undefined"!=typeof window?window.innerWidth:0,t=this._formElement?l(this._formElement):e;if(void 0!==this.$props.cols){const e=a(this.$props.cols,t);this.columnClass=h(e)}if(void 0!==this.$props.colSpan){const e=u(this.$props.colSpan,t);this.colSpanClass=m(e)}const s=void 0!==this.$props.cols?b:void 0,i=void 0!==this.$props.gutters?this.$props.gutters:s;if(void 0!==i){const e=p(i,t);this.gapStyle=f(e,b)}else this.gapStyle=""},_setupObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._update(),this._formElement&&"undefined"!=typeof window&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._update()),this._resizeObserver.observe(this._formElement))}},render(){const e=s.getDefaultSlots(this),{legend:i}=this.$props;return t.createVNode("fieldset",{class:this.fieldsetClass},[i&&t.createVNode("legend",{class:"k-form-legend"},[i]),this.$props.cols?t.createVNode("div",{class:this.divClass,style:{gap:this.gapStyle||"0px 16px"}},[e]):e])}});e.Field=i,e.FieldArray=n,e.FieldWrapper=v,e.Form=r,e.FormElement=F,e.FormFieldSet=y});

package/package-metadata.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 e={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1776959934,version:"8.3.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1778154035,version:"8.3.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "Kendo UI for Vue",
   productCode: "KENDOUIVUE",
   productCodes: ["KENDOUIVUE"],
-  publishDate: 1776959934,
-  version: "8.3.0-develop.3",
+  publishDate: 1778154035,
+  version: "8.3.0-develop.5",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-form",
-  "version": "8.3.0-develop.3",
+  "version": "8.3.0-develop.5",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,7 +25,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-vue-common": "8.3.0-develop.3",
+    "@progress/kendo-vue-common": "8.3.0-develop.5",
     "vue": "^3.0.2"
   },
   "dependencies": {},
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1776959934,
+      "publishDate": 1778154035,
       "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/"
     }
   },