@progress/kendo-vue-form 8.2.0-develop.1 → 8.3.0-develop.1

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"),l=r.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String},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&&(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)},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}=this.$props;if(!this.kendoForm)return null;const i=this.kendoForm.values[t];if(typeof n=="string"&&(n==="input"||n==="textarea"))return r.h(n,{onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:t,value:i||""});if(n){const a=o.templateRendering.call(this,n,o.getListeners.call(this));return o.getTemplate.call(this,{h:r.h,template:a,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,...this.$attrs},additionalListeners:{change:this.handleOnChange,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}});exports.Field=l;
+"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,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 n=e&&(e.value!==void 0?e.value:e.target?e.target.value:e.target);this.kendoForm.onChange(this.$props.name,{value:n}),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=o.getDefaultSlots(this),{name:n,component:t,id:a,colSpan:s}=this.$props;if(!this.kendoForm)return null;const i=this.kendoForm.values[n];if(typeof t=="string"&&(t==="input"||t==="textarea"))return r.h(t,{onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:n,value:i||""});if(t){const l=o.templateRendering.call(this,t,o.getListeners.call(this));return o.getTemplate.call(this,{h:r.h,template:l,additionalProps:{value:i,validationMessage:this.kendoForm.errors[n],touched:this.kendoForm.touchedByField[n],modified:this.kendoForm.modifiedByField[n],visited:this.kendoForm.visitedByField[n],valid:!(this.kendoForm.errors[n]&&this.kendoForm.touchedByField[n]),name:n,id:a,...s!==void 0?{colSpan:s}:{},...this.$attrs},additionalListeners:{change:this.handleOnChange,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}});exports.Field=d;

package/Field.mjs

@@ -5,14 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as a, 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__ */ a({
+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 F = /* @__PURE__ */ l({
   name: "KendoField",
   props: {
     component: [String, Number, Boolean, Object],
     validator: [Function, Array],
-    name: String
+    name: String,
+    colSpan: [Number, Array]
   },
   created() {
     return this.kendoForm ? this.kendoForm.registerField(this.$props.name, this.$props.validator) : void 0;
@@ -43,25 +44,26 @@ const F = /* @__PURE__ */ a({
     }
   },
   render() {
-    const e = l(this), {
+    const e = d(this), {
       name: t,
       component: n,
-      id: r
+      id: a,
+      colSpan: i
     } = this.$props;
     if (!this.kendoForm)
       return null;
     const o = this.kendoForm.values[t];
     if (typeof n == "string" && (n === "input" || n === "textarea"))
-      return i(n, {
+      return r(n, {
         onBlur: this.handleOnBlur,
         onFocus: this.handleOnFocus,
         name: t,
         value: o || ""
       });
     if (n) {
-      const s = d.call(this, n, h.call(this));
-      return u.call(this, {
-        h: i,
+      const s = h.call(this, n, u.call(this));
+      return m.call(this, {
+        h: r,
         template: s,
         additionalProps: {
           value: o,
@@ -78,7 +80,10 @@ const F = /* @__PURE__ */ a({
           // displayed in another language (not localizable)
           valid: !(this.kendoForm.errors[t] && this.kendoForm.touchedByField[t]),
           name: t,
-          id: r,
+          id: a,
+          ...i !== void 0 ? {
+            colSpan: i
+          } : {},
           ...this.$attrs
         },
         additionalListeners: {

package/FieldWrapper.d.ts

@@ -6,6 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { PropType } from 'vue';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint';
 /**
  * Represents the props of the Kendo U for Vue FieldWrapper component.
  */
@@ -14,6 +15,10 @@ export interface FieldWrapperProps {
      * If set to `true` enable the horizontal layout of the form editors.
      */
     horizontal?: boolean;
+    /**
+     * Defines the colspan for the form field element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */
@@ -25,13 +30,20 @@ export interface FieldWrapperProps {
 declare const FieldWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     dir: PropType<any>;
     horizontal: PropType<boolean>;
-}>, {}, {}, {
+    colSpan: PropType<number | ResponsiveFormBreakPoint[]>;
+}>, {}, {
+    colSpanClass: string;
+}, {
     fieldClassName(): {
         'k-form-field': boolean;
         'k-rtl': boolean;
     };
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {
+    _updateColSpanClass(): void;
+    _setupColSpanObserver(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     dir: PropType<any>;
     horizontal: PropType<boolean>;
+    colSpan: PropType<number | ResponsiveFormBreakPoint[]>;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { FieldWrapper };

package/FieldWrapper.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=require("vue"),a=require("./package-metadata.js"),t=require("@progress/kendo-vue-common"),o=e.defineComponent({name:"KendoFieldWrapper",props:{dir:String,horizontal:Boolean},created(){t.validatePackage(a.packageMetadata)},computed:{fieldClassName(){return{"k-form-field":!0,"k-rtl":this.$props.dir==="rtl"}}},render(){const r=t.getDefaultSlots(this);return e.createVNode("div",{class:this.fieldClassName},[r])}});exports.FieldWrapper=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),l=require("./package-metadata.js"),i=require("@progress/kendo-vue-common"),r=require("./utils.js"),o=t.defineComponent({name:"KendoFieldWrapper",props:{dir:String,horizontal:Boolean,colSpan:[Number,Array]},data(){return{colSpanClass:""}},created(){i.validatePackage(l.packageMetadata),this._resizeObserver=null,this._formElement=null},mounted(){var e;this.$props.colSpan!==void 0&&(this._formElement=((e=this.$el)==null?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 s;e!==void 0?(this._formElement=((s=this.$el)==null?void 0:s.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":this.$props.dir==="rtl",...this.colSpanClass?{[this.colSpanClass]:!0}:{}}}},methods:{_updateColSpanClass(){const e=typeof window!="undefined"?window.innerWidth:0,s=this._formElement?r.getElementInnerWidth(this._formElement):e,n=r.calculateColSpan(this.$props.colSpan,s);this.colSpanClass=r.generateColSpanClass(n)},_setupColSpanObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._updateColSpanClass(),this._formElement&&typeof window!="undefined"&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._updateColSpanClass()),this._resizeObserver.observe(this._formElement))}},render(){const e=i.getDefaultSlots(this);return t.createVNode("div",{class:this.fieldClassName},[e])}});exports.FieldWrapper=o;

package/FieldWrapper.mjs

@@ -5,33 +5,65 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as r, createVNode as t } from "vue";
-import { packageMetadata as a } from "./package-metadata.mjs";
-import { getDefaultSlots as o, validatePackage as i } from "@progress/kendo-vue-common";
-const s = /* @__PURE__ */ r({
+import { defineComponent as t, createVNode as i } from "vue";
+import { packageMetadata as n } from "./package-metadata.mjs";
+import { getDefaultSlots as l, validatePackage as o } from "@progress/kendo-vue-common";
+import { getElementInnerWidth as a, calculateColSpan as h, generateColSpanClass as p } from "./utils.mjs";
+const u = /* @__PURE__ */ t({
   name: "KendoFieldWrapper",
   props: {
     dir: String,
-    horizontal: Boolean
+    horizontal: Boolean,
+    colSpan: [Number, Array]
+  },
+  data() {
+    return {
+      colSpanClass: ""
+    };
   },
   created() {
-    i(a);
+    o(n), this._resizeObserver = null, this._formElement = null;
+  },
+  mounted() {
+    var e;
+    this.$props.colSpan !== void 0 && (this._formElement = ((e = this.$el) == null ? 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 s;
+      e !== void 0 ? (this._formElement = ((s = this.$el) == null ? void 0 : s.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": this.$props.dir === "rtl"
+        "k-rtl": this.$props.dir === "rtl",
+        ...this.colSpanClass ? {
+          [this.colSpanClass]: !0
+        } : {}
       };
     }
   },
+  methods: {
+    _updateColSpanClass() {
+      const e = typeof window != "undefined" ? window.innerWidth : 0, s = this._formElement ? a(this._formElement) : e, r = h(this.$props.colSpan, s);
+      this.colSpanClass = p(r);
+    },
+    _setupColSpanObserver() {
+      this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null), this._updateColSpanClass(), this._formElement && typeof window != "undefined" && "ResizeObserver" in window && (this._resizeObserver = new ResizeObserver(() => this._updateColSpanClass()), this._resizeObserver.observe(this._formElement));
+    }
+  },
   render() {
-    const e = o(this);
-    return t("div", {
+    const e = l(this);
+    return i("div", {
       class: this.fieldClassName
     }, [e]);
   }
 });
 export {
-  s as FieldWrapper
+  u as FieldWrapper
 };

package/Form.d.ts

@@ -6,18 +6,23 @@
  *-------------------------------------------------------------------------------------------
  */
 import { FieldValidatorType } from './interfaces/FieldValidator';
+import { FormRenderProps } from './interfaces/FormRenderProps';
 import { KeyValue } from './interfaces/KeyValue';
 import { PropType } from 'vue';
 /**
  * @hidden
  */
 declare const Form: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    renderForm: PropType<(props: import('./index').FormRenderProps) => any>;
+    renderForm: PropType<(props: FormRenderProps) => any>;
     initialValues: PropType<{
         [name: string]: any;
     }>;
     validator: PropType<import('./index').FormValidatorType>;
     ignoreModified: PropType<boolean>;
+    errors: PropType<{
+        [name: string]: string;
+    }>;
+    onChange: PropType<(fieldName: string, value: any, valueGetter: (name: string) => any) => void>;
 }>, {}, {
     validatorsByField: {};
     fields: any[];
@@ -79,7 +84,7 @@ declare const Form: import('vue').DefineComponent<import('vue').ExtractPropTypes
      * > Use `onChange` only if you cannot achieve the desired behavior
      *  through the Field component by FormRenderProps.
      */
-    onChange(name: string, options: {
+    handleFieldChange(name: string, options: {
         value: any;
     }): void;
     onFocus(name: string): void;
@@ -122,12 +127,16 @@ declare const Form: import('vue').DefineComponent<import('vue').ExtractPropTypes
     submitclick: any;
     submit: any;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    renderForm: PropType<(props: import('./index').FormRenderProps) => any>;
+    renderForm: PropType<(props: FormRenderProps) => any>;
     initialValues: PropType<{
         [name: string]: any;
     }>;
     validator: PropType<import('./index').FormValidatorType>;
     ignoreModified: PropType<boolean>;
+    errors: PropType<{
+        [name: string]: string;
+    }>;
+    onChange: PropType<(fieldName: string, value: any, valueGetter: (name: string) => any) => void>;
 }>> & Readonly<{
     onSubmit?: (...args: any[] | unknown[]) => any;
     onSubmitclick?: (...args: any[] | unknown[]) => any;

package/Form.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 d=require("@progress/kendo-vue-common"),u=require("./package-metadata.js"),h=require("vue"),a=0,n=h.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,d.validatePackage(u.packageMetadata),this.form.values=d.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"(i){this.form.touched=this.isFormTouched(i,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.modifiedByField"(i){this.form.modified=this.isFormModified(i,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.visitedByField"(i){this.form.visited=this.isFormVisited(i,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 i={},t=this.validatorsByField;return Object.keys(this.fields).forEach(s=>{if(i[s]="",t[s]){const r=[];t[s].forEach(o=>{Array.isArray(o)?r.push(...o):r.push(o)}),r.find(o=>{if(o){const l=o(this.valueGetter(s),this.valueGetter,{name:s});if(l)return i[s]=l,!0}return!1})}}),this.formErrors()&&d.cloneObject(this.formErrors(),i),i},accumulatedForceUpdate(){this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),d.canUseDOM&&(this._accumulatorTimeout=window.setTimeout(()=>{this._accumulatorTimeout=void 0},a))},resetForm(){this.form.values=d.clone(this.$props.initialValues),this.id=d.guid(),this.form.touchedByField={},this.form.visitedByField={},this.form.modifiedByField={},this.form.submitted=!1},onReset(){this.resetForm()},addField(i){this.fields[i]=!0},validate(i){const t={},e=i||this.fields;Object.keys(e).forEach(s=>{t[s]=!0}),this.form.touchedByField={...t}},onSubmit(i){const t={},e=this.fields;i&&(typeof i.preventDefault=="function"&&i.preventDefault(),typeof i.stopPropagation=="function"&&i.stopPropagation()),Object.keys(e).forEach(l=>{t[l]=!0}),this.form.visitedByField={...t},this.form.touchedByField={...t};const s=this.form.values,r=this.isValid(),o=this.isFormModified(this.form.modifiedByField,e);this.$emit("submitclick",{values:s,isValid:r,isModified:o,event:i}),r&&(this.$props.ignoreModified||o)&&(this.form.submitted=!0,this.$emit("submit",s,i))},onChange(i,t){const{value:e}=t;this.addField(i),this.form.modifiedByField[i]||(this.form.modifiedByField={...this.form.modifiedByField,[i]:!0}),this.valueSetter(i,e)},onFocus(i){this.form.visitedByField[i]||(this.form.visitedByField={...this.form.visitedByField,[i]:!0})},onBlur(i){this.form.touchedByField[i]||(this.onFocus(i),this.form.touchedByField={...this.form.touchedByField,[i]:!0})},onFieldRegister(i,t){this.addField(i);const e=this.validatorsByField[i]||[],s=e.length;return this.validatorsByField={...this.validatorsByField,[i]:[...e,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const r=[...this.validatorsByField[i]||[]],o=!!r[s];r[s]=void 0,this.validatorsByField={...this.validatorsByField,[i]:r},o&&this.accumulatedForceUpdate()}},isFormValid(i){return!Object.keys(i).some(t=>!!i[t])},isFormModified(i,t){return Object.keys(t).some(e=>i[e])},isFormHasNotTouched(i,t){return Object.keys(t).some(e=>!i[e])},isFormTouched(i,t){return Object.keys(t).some(e=>i[e])},isFormVisited(i,t){return Object.keys(t).some(e=>i[e])},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(i){return this.form.values[i]},valueSetter(i,t){this.form.values={...this.form.values,[i]:t}},onArrayAction(i){this.addField(i),this.form.modifiedByField[i]||(this.form.modifiedByField={...this.form.modifiedByField,[i]:!0}),this.onBlur(i,!0)},onInsert(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]];e.splice(t.index,0,t.value),this.valueSetter(i,e)},onUnshift(i,t){this.onInsert(i,{value:t.value,index:0})},onPush(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[],t.value];this.valueSetter(i,e)},onPop(i){this.onArrayAction(i);const t=[...this.valueGetter(i)||[]],e=t.pop();return this.valueSetter(i,t),e},onRemove(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]],s=e.splice(t.index,1);return this.valueSetter(i,e),s},onReplace(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]];e.splice(t.index,1,t.value),this.valueSetter(i,e)},onMove(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]],s=e[t.prevIndex];e.splice(t.prevIndex,1),e.splice(t.nextIndex,0,s),this.valueSetter(i,e)},onDestroy(){this.unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}},render(){return d.getDefaultSlots(this)}});exports.Form=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@progress/kendo-vue-common"),h=require("./package-metadata.js"),u=require("vue"),a=0,n=u.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,d.validatePackage(h.packageMetadata),this.form.values=d.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"(i){this.form.touched=this.isFormTouched(i,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.modifiedByField"(i){this.form.modified=this.isFormModified(i,this.fields),this.form.allowSubmit=this.allowSubmit()},"form.visitedByField"(i){this.form.visited=this.isFormVisited(i,this.fields)},errors(i){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 i={},t=this.validatorsByField;return Object.keys(this.fields).forEach(s=>{if(i[s]="",t[s]){const r=[];t[s].forEach(o=>{Array.isArray(o)?r.push(...o):r.push(o)}),r.find(o=>{if(o){const l=o(this.valueGetter(s),this.valueGetter,{name:s});if(l)return i[s]=l,!0}return!1})}}),this.formErrors()&&d.cloneObject(this.formErrors(),i),this.$props.errors&&d.cloneObject(this.$props.errors,i),i},accumulatedForceUpdate(){this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),d.canUseDOM&&(this._accumulatorTimeout=window.setTimeout(()=>{this._accumulatorTimeout=void 0},a))},resetForm(){this.form.values=d.clone(this.$props.initialValues),this.id=d.guid(),this.form.touchedByField={},this.form.visitedByField={},this.form.modifiedByField={},this.form.submitted=!1},onReset(){this.resetForm()},addField(i){this.fields[i]=!0},validate(i){const t={},e=i||this.fields;Object.keys(e).forEach(s=>{t[s]=!0}),this.form.touchedByField={...t}},onSubmit(i){const t={},e=this.fields;i&&(typeof i.preventDefault=="function"&&i.preventDefault(),typeof i.stopPropagation=="function"&&i.stopPropagation()),Object.keys(e).forEach(l=>{t[l]=!0}),this.form.visitedByField={...t},this.form.touchedByField={...t};const s=this.form.values,r=this.isValid(),o=this.isFormModified(this.form.modifiedByField,e);this.$emit("submitclick",{values:s,isValid:r,isModified:o,event:i}),r&&(this.$props.ignoreModified||o)&&(this.form.submitted=!0,this.$emit("submit",s,i))},handleFieldChange(i,t){const{value:e}=t;this.addField(i),this.form.modifiedByField[i]||(this.form.modifiedByField={...this.form.modifiedByField,[i]:!0}),this.valueSetter(i,e),this.$props.onChange&&this.$props.onChange(i,e,this.valueGetter)},onFocus(i){this.form.visitedByField[i]||(this.form.visitedByField={...this.form.visitedByField,[i]:!0})},onBlur(i){this.form.touchedByField[i]||(this.onFocus(i),this.form.touchedByField={...this.form.touchedByField,[i]:!0})},onFieldRegister(i,t){this.addField(i);const e=this.validatorsByField[i]||[],s=e.length;return this.validatorsByField={...this.validatorsByField,[i]:[...e,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const r=[...this.validatorsByField[i]||[]],o=!!r[s];r[s]=void 0,this.validatorsByField={...this.validatorsByField,[i]:r},o&&this.accumulatedForceUpdate()}},isFormValid(i){return!Object.keys(i).some(t=>!!i[t])},isFormModified(i,t){return Object.keys(t).some(e=>i[e])},isFormHasNotTouched(i,t){return Object.keys(t).some(e=>!i[e])},isFormTouched(i,t){return Object.keys(t).some(e=>i[e])},isFormVisited(i,t){return Object.keys(t).some(e=>i[e])},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(i){return this.form.values[i]},valueSetter(i,t){this.form.values={...this.form.values,[i]:t}},onArrayAction(i){this.addField(i),this.form.modifiedByField[i]||(this.form.modifiedByField={...this.form.modifiedByField,[i]:!0}),this.onBlur(i,!0)},onInsert(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]];e.splice(t.index,0,t.value),this.valueSetter(i,e)},onUnshift(i,t){this.onInsert(i,{value:t.value,index:0})},onPush(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[],t.value];this.valueSetter(i,e)},onPop(i){this.onArrayAction(i);const t=[...this.valueGetter(i)||[]],e=t.pop();return this.valueSetter(i,t),e},onRemove(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]],s=e.splice(t.index,1);return this.valueSetter(i,e),s},onReplace(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]];e.splice(t.index,1,t.value),this.valueSetter(i,e)},onMove(i,t){this.onArrayAction(i);const e=[...this.valueGetter(i)||[]],s=e[t.prevIndex];e.splice(t.prevIndex,1),e.splice(t.nextIndex,0,s),this.valueSetter(i,e)},onDestroy(){this.unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}},render(){const i={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(i):d.getDefaultSlots(this)}});exports.Form=n;

package/Form.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { getDefaultSlots as h, clone as l, guid as u, canUseDOM as a, cloneObject as n, validatePackage as f } from "@progress/kendo-vue-common";
+import { getDefaultSlots as u, clone as l, guid as a, canUseDOM as n, cloneObject as h, validatePackage as f } from "@progress/kendo-vue-common";
 import { packageMetadata as m } from "./package-metadata.mjs";
 import { defineComponent as c } from "vue";
 const F = 0, B = /* @__PURE__ */ c({
@@ -15,7 +15,9 @@ const F = 0, B = /* @__PURE__ */ c({
     renderForm: [Object, Function],
     initialValues: Object,
     validator: Function,
-    ignoreModified: Boolean
+    ignoreModified: Boolean,
+    errors: Object,
+    onChange: Function
   },
   emits: {
     submitclick: null,
@@ -50,7 +52,7 @@ const F = 0, B = /* @__PURE__ */ c({
         valueGetter: this.valueGetter,
         allowSubmit: !1,
         validate: this.validate,
-        onChange: this.onChange,
+        onChange: this.handleFieldChange,
         onSubmit: this.onSubmit,
         onFormReset: this.resetForm,
         registerField: this.onFieldRegister,
@@ -83,6 +85,9 @@ const F = 0, B = /* @__PURE__ */ c({
     },
     "form.visitedByField"(i) {
       this.form.visited = this.isFormVisited(i, this.fields);
+    },
+    errors(i) {
+      this.form.errors = this.getErrors(), this.form.allowSubmit = this.allowSubmit(), this.form.valid = this.isValid();
     }
   },
   methods: {
@@ -111,13 +116,13 @@ const F = 0, B = /* @__PURE__ */ c({
             return !1;
           });
         }
-      }), this.formErrors() && n(this.formErrors(), i), i;
+      }), this.formErrors() && h(this.formErrors(), i), this.$props.errors && h(this.$props.errors, i), i;
     },
     /**
      * @hidden
      */
     accumulatedForceUpdate() {
-      this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), a && (this._accumulatorTimeout = window.setTimeout(() => {
+      this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), n && (this._accumulatorTimeout = window.setTimeout(() => {
         this._accumulatorTimeout = void 0;
       }, F));
     },
@@ -125,7 +130,7 @@ const F = 0, B = /* @__PURE__ */ c({
      * @hidden
      */
     resetForm() {
-      this.form.values = l(this.$props.initialValues), this.id = u(), this.form.touchedByField = {}, this.form.visitedByField = {}, this.form.modifiedByField = {}, this.form.submitted = !1;
+      this.form.values = l(this.$props.initialValues), this.id = a(), this.form.touchedByField = {}, this.form.visitedByField = {}, this.form.modifiedByField = {}, this.form.submitted = !1;
     },
     /**
      * Method for resetting the form state outside the form component.
@@ -170,14 +175,14 @@ const F = 0, B = /* @__PURE__ */ c({
      * > Use `onChange` only if you cannot achieve the desired behavior
      *  through the Field component by FormRenderProps.
      */
-    onChange(i, t) {
+    handleFieldChange(i, t) {
       const {
         value: e
       } = t;
       this.addField(i), this.form.modifiedByField[i] || (this.form.modifiedByField = {
         ...this.form.modifiedByField,
         [i]: !0
-      }), this.valueSetter(i, e);
+      }), this.valueSetter(i, e), this.$props.onChange && this.$props.onChange(i, e, this.valueGetter);
     },
     onFocus(i) {
       this.form.visitedByField[i] || (this.form.visitedByField = {
@@ -286,7 +291,20 @@ const F = 0, B = /* @__PURE__ */ c({
     }
   },
   render() {
-    return h(this);
+    const i = {
+      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(i) : u(this);
   }
 });
 export {

package/FormElement.d.ts

@@ -6,6 +6,8 @@
  *-------------------------------------------------------------------------------------------
  */
 import { PropType } from 'vue';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint';
+import { Gutters } from './interfaces/Gutters';
 /**
  * Represents the props of the Kendo U for Vue FormElement component.
  */
@@ -26,6 +28,16 @@ export interface FormElementProps {
      * If set to `true` enable the horizontal layout of the form editors.
      */
     horizontal?: boolean;
+    /**
+     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the form layout. You can specify gutters for rows and columns.
+     * Accepts a number (treated as px), a CSS string, a `Gutters` object with `cols`/`rows` keys,
+     * or an array of responsive breakpoints.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */
@@ -38,9 +50,15 @@ declare const FormElement: import('vue').DefineComponent<import('vue').ExtractPr
     horizontal: PropType<boolean>;
     size: {
         type: PropType<"small" | "medium" | "large">;
-        validator: (value: string) => boolean;
+        default: string;
+        validator: (value: any) => any;
     };
-}>, {}, {}, {
+    cols: PropType<number | ResponsiveFormBreakPoint[]>;
+    gutters: PropType<string | number | ResponsiveFormBreakPoint[] | Gutters>;
+}>, {}, {
+    columnClass: string;
+    gapStyle: string;
+}, {
     formElementClassName(): {
         [x: string]: any;
         'k-form': boolean;
@@ -48,11 +66,18 @@ declare const FormElement: import('vue').DefineComponent<import('vue').ExtractPr
     };
 }, {
     handleSubmit(e: any): void;
+    _updateColumnClass(): void;
+    _setupColsObserver(): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     horizontal: PropType<boolean>;
     size: {
         type: PropType<"small" | "medium" | "large">;
-        validator: (value: string) => boolean;
+        default: string;
+        validator: (value: any) => any;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    cols: PropType<number | ResponsiveFormBreakPoint[]>;
+    gutters: PropType<string | number | ResponsiveFormBreakPoint[] | Gutters>;
+}>> & Readonly<{}>, {
+    size: "small" | "medium" | "large";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { FormElement };

package/FormElement.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 o=require("vue"),r=require("./package-metadata.js"),t=require("@progress/kendo-vue-common"),n=o.defineComponent({name:"KendoFormElement",props:{horizontal:Boolean,size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}}},created(){t.validatePackage(r.packageMetadata)},inject:{kendoForm:{default:null}},computed:{formElementClassName(){const{size:e}=this.$props;return{"k-form":!0,[`k-form-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-form-horizontal":this.$props.horizontal===!0}}},methods:{handleSubmit(e){this.kendoForm&&this.kendoForm.onSubmit(e)}},render(){const e=t.getDefaultSlots(this);return o.createVNode("form",{class:this.formElementClassName,onSubmit:this.handleSubmit},[e])}});exports.FormElement=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),u=require("./package-metadata.js"),s=require("@progress/kendo-vue-common"),t=require("./utils.js"),h=o.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(){return{columnClass:"",gapStyle:""}},created(){s.validatePackage(u.packageMetadata),this._resizeObserver=null},inject:{kendoForm:{default:null}},mounted(){var e;this._handlePasteEvent=r=>{var n;const i=(n=r.detail)==null?void 0:n.fieldValues;i&&this.kendoForm&&Object.entries(i).forEach(([l,a])=>{this.kendoForm.onChange(l,{value:a})})},(e=this.$el)==null||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()),(e=this.$el)==null||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":this.$props.horizontal===!0}}},methods:{handleSubmit(e){this.kendoForm&&this.kendoForm.onSubmit(e)},_updateColumnClass(){const e=typeof window!="undefined"?window.innerWidth:0,r=this.$el?t.getElementInnerWidth(this.$el):e,i=t.calculateColumns(this.$props.cols,r);this.columnClass=t.generateColumnClass(i);const n=t.calculateGutters(this.$props.gutters,r);this.gapStyle=t.generateGuttersStyling(n,{rows:"0px",cols:"32px"})},_setupColsObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._updateColumnClass(),this.$el&&typeof window!="undefined"&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._updateColumnClass()),this._resizeObserver.observe(this.$el))}},render(){const e=s.getDefaultSlots(this);return o.createVNode("form",{class:this.formElementClassName,onSubmit:this.handleSubmit},[this.$props.cols?o.createVNode("div",{class:`k-form-layout k-d-grid ${this.columnClass}`,style:{gap:this.gapStyle||"0px 32px"}},[e]):e])}});exports.FormElement=h;

package/FormElement.mjs

@@ -5,28 +5,59 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as t, createVNode as o } from "vue";
-import { packageMetadata as r } from "./package-metadata.mjs";
-import { getDefaultSlots as m, kendoThemeMaps as n, validatePackage as a } from "@progress/kendo-vue-common";
-const d = /* @__PURE__ */ t({
+import { defineComponent as a, createVNode as i } from "vue";
+import { packageMetadata as h } from "./package-metadata.mjs";
+import { getDefaultSlots as m, kendoThemeMaps as u, KENDO_PASTE_EVENT_NAME as o, validatePackage as d } from "@progress/kendo-vue-common";
+import { getElementInnerWidth as c, calculateColumns as p, generateColumnClass as f, calculateGutters as b, generateGuttersStyling as v } from "./utils.mjs";
+const g = /* @__PURE__ */ a({
   name: "KendoFormElement",
   props: {
     horizontal: Boolean,
     size: {
       type: String,
+      default: "medium",
       validator: function(e) {
-        return ["small", "medium", "large"].includes(e);
+        return [null, "small", "medium", "large"].includes(e);
       }
-    }
+    },
+    cols: [Number, Array],
+    gutters: [String, Number, Object, Array]
+  },
+  data() {
+    return {
+      columnClass: "",
+      gapStyle: ""
+    };
   },
   created() {
-    a(r);
+    d(h), this._resizeObserver = null;
   },
   inject: {
     kendoForm: {
       default: null
     }
   },
+  mounted() {
+    var e;
+    this._handlePasteEvent = (s) => {
+      var r;
+      const t = (r = s.detail) == null ? void 0 : r.fieldValues;
+      t && this.kendoForm && Object.entries(t).forEach(([n, l]) => {
+        this.kendoForm.onChange(n, {
+          value: l
+        });
+      });
+    }, (e = this.$el) == null || e.addEventListener(o, this._handlePasteEvent), this.$props.cols && this._setupColsObserver();
+  },
+  beforeUnmount() {
+    var e;
+    this._resizeObserver && this.$el && (this._resizeObserver.unobserve(this.$el), this._resizeObserver.disconnect()), (e = this.$el) == null || e.removeEventListener(o, 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 {
@@ -34,7 +65,7 @@ const d = /* @__PURE__ */ t({
       } = this.$props;
       return {
         "k-form": !0,
-        [`k-form-${n.sizeMap[e] || e}`]: e,
+        [`k-form-${u.sizeMap[e] || e}`]: e,
         "k-form-horizontal": this.$props.horizontal === !0
       };
     }
@@ -42,16 +73,33 @@ const d = /* @__PURE__ */ t({
   methods: {
     handleSubmit(e) {
       this.kendoForm && this.kendoForm.onSubmit(e);
+    },
+    _updateColumnClass() {
+      const e = typeof window != "undefined" ? window.innerWidth : 0, s = this.$el ? c(this.$el) : e, t = p(this.$props.cols, s);
+      this.columnClass = f(t);
+      const r = b(this.$props.gutters, s);
+      this.gapStyle = v(r, {
+        rows: "0px",
+        cols: "32px"
+      });
+    },
+    _setupColsObserver() {
+      this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null), this._updateColumnClass(), this.$el && typeof window != "undefined" && "ResizeObserver" in window && (this._resizeObserver = new ResizeObserver(() => this._updateColumnClass()), this._resizeObserver.observe(this.$el));
     }
   },
   render() {
     const e = m(this);
-    return o("form", {
+    return i("form", {
       class: this.formElementClassName,
       onSubmit: this.handleSubmit
-    }, [e]);
+    }, [this.$props.cols ? i("div", {
+      class: `k-form-layout k-d-grid ${this.columnClass}`,
+      style: {
+        gap: this.gapStyle || "0px 32px"
+      }
+    }, [e]) : e]);
   }
 });
 export {
-  d as FormElement
+  g as FormElement
 };

package/FormFieldSet.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint';
+import { Gutters } from './interfaces/Gutters';
+/**
+ * Represents the props of the Kendo UI for Vue FormFieldSet component.
+ */
+export interface FormFieldSetProps {
+    /**
+     * Defines the number of columns of the fieldset.
+     * Can be a number or an array of responsive breakpoints.
+     *
+     * @example
+     * ```vue
+     * <FormFieldSet :cols="2" legend="Address" />
+     * ```
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the colspan for the fieldset related to the parent `FormElement` columns.
+     * Can be a number or an array of responsive breakpoints.
+     *
+     * @example
+     * ```vue
+     * <FormFieldSet :col-span="2" legend="Address" />
+     * ```
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the fieldset layout.
+     * Accepts a number (px), a CSS string, a `Gutters` object with `cols`/`rows` keys,
+     * or an array of responsive breakpoints.
+     * Defaults to `{ rows: '0px', cols: '16px' }`.
+     *
+     * @example
+     * ```vue
+     * <FormFieldSet :gutters="{ rows: '8px', cols: '24px' }" legend="Address" />
+     * ```
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the legend text for the fieldset.
+     *
+     * @example
+     * ```vue
+     * <FormFieldSet legend="Personal Information" />
+     * ```
+     */
+    legend?: string;
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+}
+/**
+ * @hidden
+ */
+declare const FormFieldSet: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    cols: PropType<number | ResponsiveFormBreakPoint[]>;
+    colSpan: PropType<number | ResponsiveFormBreakPoint[]>;
+    gutters: PropType<string | number | ResponsiveFormBreakPoint[] | Gutters>;
+    legend: PropType<string>;
+}>, {}, {
+    columnClass: string;
+    colSpanClass: string;
+    gapStyle: string;
+}, {
+    fieldsetClass(): string;
+    divClass(): string;
+}, {
+    _update(): void;
+    _setupObserver(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    cols: PropType<number | ResponsiveFormBreakPoint[]>;
+    colSpan: PropType<number | ResponsiveFormBreakPoint[]>;
+    gutters: PropType<string | number | ResponsiveFormBreakPoint[] | Gutters>;
+    legend: PropType<string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { FormFieldSet };

package/FormFieldSet.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),d=require("./package-metadata.js"),o=require("@progress/kendo-vue-common"),s=require("./utils.js"),l={rows:"0px",cols:"16px"},c=i.defineComponent({name:"KendoFormFieldSet",props:{cols:[Number,Array],colSpan:[Number,Array],gutters:[String,Number,Object,Array],legend:String},data(){return{columnClass:"",colSpanClass:"",gapStyle:""}},created(){o.validatePackage(d.packageMetadata),this._resizeObserver=null,this._formElement=null},mounted(){var e;this._formElement=((e=this.$el)==null?void 0:e.closest("form"))||null,(this.$props.cols!==void 0||this.$props.colSpan!==void 0)&&this._setupObserver()},beforeUnmount(){this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect())},watch:{cols(e){e!==void 0?this._setupObserver():(this._resizeObserver&&this._formElement&&(this._resizeObserver.unobserve(this._formElement),this._resizeObserver.disconnect(),this._resizeObserver=null),this.columnClass="",this.gapStyle="")},colSpan(e){e!==void 0?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=typeof window!="undefined"?window.innerWidth:0,t=this._formElement?s.getElementInnerWidth(this._formElement):e;if(this.$props.cols!==void 0){const r=s.calculateColumns(this.$props.cols,t);this.columnClass=s.generateColumnClass(r)}if(this.$props.colSpan!==void 0){const r=s.calculateColSpan(this.$props.colSpan,t);this.colSpanClass=s.generateColSpanClass(r)}const a=this.$props.cols!==void 0?l:void 0,n=this.$props.gutters!==void 0?this.$props.gutters:a;if(n!==void 0){const r=s.calculateGutters(n,t);this.gapStyle=s.generateGuttersStyling(r,l)}else this.gapStyle=""},_setupObserver(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._update(),this._formElement&&typeof window!="undefined"&&"ResizeObserver"in window&&(this._resizeObserver=new ResizeObserver(()=>this._update()),this._resizeObserver.observe(this._formElement))}},render(){const e=o.getDefaultSlots(this),{legend:t}=this.$props;return i.createVNode("fieldset",{class:this.fieldsetClass},[t&&i.createVNode("legend",{class:"k-form-legend"},[t]),this.$props.cols?i.createVNode("div",{class:this.divClass,style:{gap:this.gapStyle||"0px 16px"}},[e]):e])}});exports.FormFieldSet=c;

package/FormFieldSet.mjs

@@ -0,0 +1,99 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as l, createVNode as r } from "vue";
+import { packageMetadata as a } from "./package-metadata.mjs";
+import { getDefaultSlots as d, validatePackage as p } from "@progress/kendo-vue-common";
+import { getElementInnerWidth as c, calculateColumns as h, generateColumnClass as u, calculateColSpan as f, generateColSpanClass as m, calculateGutters as _, generateGuttersStyling as b } from "./utils.mjs";
+const n = {
+  rows: "0px",
+  cols: "16px"
+}, C = /* @__PURE__ */ l({
+  name: "KendoFormFieldSet",
+  props: {
+    cols: [Number, Array],
+    colSpan: [Number, Array],
+    gutters: [String, Number, Object, Array],
+    legend: String
+  },
+  data() {
+    return {
+      columnClass: "",
+      colSpanClass: "",
+      gapStyle: ""
+    };
+  },
+  created() {
+    p(a), this._resizeObserver = null, this._formElement = null;
+  },
+  mounted() {
+    var e;
+    this._formElement = ((e = this.$el) == null ? void 0 : e.closest("form")) || null, (this.$props.cols !== void 0 || this.$props.colSpan !== void 0) && this._setupObserver();
+  },
+  beforeUnmount() {
+    this._resizeObserver && this._formElement && (this._resizeObserver.unobserve(this._formElement), this._resizeObserver.disconnect());
+  },
+  watch: {
+    cols(e) {
+      e !== void 0 ? this._setupObserver() : (this._resizeObserver && this._formElement && (this._resizeObserver.unobserve(this._formElement), this._resizeObserver.disconnect(), this._resizeObserver = null), this.columnClass = "", this.gapStyle = "");
+    },
+    colSpan(e) {
+      e !== void 0 ? 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 = typeof window != "undefined" ? window.innerWidth : 0, s = this._formElement ? c(this._formElement) : e;
+      if (this.$props.cols !== void 0) {
+        const t = h(this.$props.cols, s);
+        this.columnClass = u(t);
+      }
+      if (this.$props.colSpan !== void 0) {
+        const t = f(this.$props.colSpan, s);
+        this.colSpanClass = m(t);
+      }
+      const o = this.$props.cols !== void 0 ? n : void 0, i = this.$props.gutters !== void 0 ? this.$props.gutters : o;
+      if (i !== void 0) {
+        const t = _(i, s);
+        this.gapStyle = b(t, n);
+      } else
+        this.gapStyle = "";
+    },
+    _setupObserver() {
+      this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null), this._update(), this._formElement && typeof window != "undefined" && "ResizeObserver" in window && (this._resizeObserver = new ResizeObserver(() => this._update()), this._resizeObserver.observe(this._formElement));
+    }
+  },
+  render() {
+    const e = d(this), {
+      legend: s
+    } = this.$props;
+    return r("fieldset", {
+      class: this.fieldsetClass
+    }, [s && r("legend", {
+      class: "k-form-legend"
+    }, [s]), this.$props.cols ? r("div", {
+      class: this.divClass,
+      style: {
+        gap: this.gapStyle || "0px 16px"
+      }
+    }, [e]) : e]);
+  }
+});
+export {
+  C as FormFieldSet
+};

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,i){"use strict";const o=t.defineComponent({name:"KendoField",props:{component:[String,Number,Boolean,Object],validator:[Function,Array],name:String},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=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,{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,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}}),s={name:"@progress/kendo-vue-form",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:0,version:"8.2.0-develop.1",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,validator:function(e){return["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,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.1",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/index.d.mts

@@ -21,4 +21,7 @@ import { KeyValue } from './interfaces/KeyValue.js';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper.js';
 import { FormElement, FormElementProps } from './FormElement.js';
 import { FormSubmitClickEvent } from './interfaces/FormSubmitClickEvent.js';
-export { FieldArray, type FieldArrayProps, type FieldArrayRenderProps, Field, type FieldProps, type FieldRenderProps, Form, type FormProps, type FormRenderProps, type FieldInjectedProps, type FormValidatorType, type FieldValidatorType, type KeyValue, FieldWrapper, type FieldWrapperProps, FormElement, type FormElementProps, type FormSubmitClickEvent };
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import { Gutters } from './interfaces/Gutters.js';
+import { FormFieldSet, FormFieldSetProps } from './FormFieldSet.js';
+export { FieldArray, type FieldArrayProps, type FieldArrayRenderProps, Field, type FieldProps, type FieldRenderProps, Form, type FormProps, type FormRenderProps, type FieldInjectedProps, type FormValidatorType, type FieldValidatorType, type KeyValue, FieldWrapper, type FieldWrapperProps, FormElement, type FormElementProps, type FormSubmitClickEvent, type ResponsiveFormBreakPoint, type Gutters, FormFieldSet, type FormFieldSetProps };

package/index.d.ts

@@ -21,4 +21,7 @@ import { KeyValue } from './interfaces/KeyValue';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 import { FormElement, FormElementProps } from './FormElement';
 import { FormSubmitClickEvent } from './interfaces/FormSubmitClickEvent';
-export { FieldArray, type FieldArrayProps, type FieldArrayRenderProps, Field, type FieldProps, type FieldRenderProps, Form, type FormProps, type FormRenderProps, type FieldInjectedProps, type FormValidatorType, type FieldValidatorType, type KeyValue, FieldWrapper, type FieldWrapperProps, FormElement, type FormElementProps, type FormSubmitClickEvent };
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint';
+import { Gutters } from './interfaces/Gutters';
+import { FormFieldSet, FormFieldSetProps } from './FormFieldSet';
+export { FieldArray, type FieldArrayProps, type FieldArrayRenderProps, Field, type FieldProps, type FieldRenderProps, Form, type FormProps, type FormRenderProps, type FieldInjectedProps, type FormValidatorType, type FieldValidatorType, type KeyValue, FieldWrapper, type FieldWrapperProps, FormElement, type FormElementProps, type FormSubmitClickEvent, type ResponsiveFormBreakPoint, type Gutters, FormFieldSet, type FormFieldSetProps };

package/index.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=require("./Field.js"),r=require("./Form.js"),i=require("./FieldArray.js"),l=require("./FieldWrapper.js"),o=require("./FormElement.js");exports.Field=e.Field;exports.Form=r.Form;exports.FieldArray=i.FieldArray;exports.FieldWrapper=l.FieldWrapper;exports.FormElement=o.FormElement;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Field.js"),r=require("./Form.js"),i=require("./FieldArray.js"),F=require("./FieldWrapper.js"),o=require("./FormElement.js"),l=require("./FormFieldSet.js");exports.Field=e.Field;exports.Form=r.Form;exports.FieldArray=i.FieldArray;exports.FieldWrapper=F.FieldWrapper;exports.FormElement=o.FormElement;exports.FormFieldSet=l.FormFieldSet;

package/index.mjs

@@ -7,13 +7,15 @@
  */
 import { Field as e } from "./Field.mjs";
 import { Form as p } from "./Form.mjs";
-import { FieldArray as f } from "./FieldArray.mjs";
-import { FieldWrapper as F } from "./FieldWrapper.mjs";
+import { FieldArray as F } from "./FieldArray.mjs";
+import { FieldWrapper as x } from "./FieldWrapper.mjs";
 import { FormElement as d } from "./FormElement.mjs";
+import { FormFieldSet as a } from "./FormFieldSet.mjs";
 export {
   e as Field,
-  f as FieldArray,
-  F as FieldWrapper,
+  F as FieldArray,
+  x as FieldWrapper,
   p as Form,
-  d as FormElement
+  d as FormElement,
+  a as FormFieldSet
 };

package/interfaces/FieldProps.d.ts

@@ -6,6 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { FieldValidatorType } from './FieldValidator';
+import { ResponsiveFormBreakPoint } from './ResponsiveFormBreakPoint';
 /**
  * Represents the props of the Field component that is used inside the Kendo U for Vue Form component.
  */
@@ -40,6 +41,17 @@ export interface FieldProps {
      * That why this event should be used only for executing custom logic.
      */
     onChange?: (event: any) => void;
+    /**
+     * Sets how many columns the field spans in the form layout.
+     * Requires the parent `FormElement` to have the `cols` prop set.
+     * Accepts a number or an array of responsive breakpoints.
+     *
+     * @example
+     * ```vue
+     * <Field name="fullName" :component="Input" :col-span="2" />
+     * ```
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */

package/interfaces/FormProps.d.ts

@@ -21,6 +21,20 @@ export interface FormProps {
     initialValues?: {
         [name: string]: any;
     };
+    /**
+     * Validation errors that override field and form validators.
+     *
+     * Provides validation errors directly as an object, unlike the `validator` prop which expects a callback.
+     * When both `validator` and `errors` exist for a field, the `errors` prop takes precedence.
+     *
+     * @example
+     * ```vue
+     * <Form :errors="serverErrors" @submit="handleSubmit" :render-form="renderForm" />
+     * ```
+     */
+    errors?: {
+        [name: string]: string;
+    };
     /**
      * The validation function for the Form level.
      * Should return key-value pair where the key is the field path and the value is the error message.
@@ -30,6 +44,18 @@ export interface FormProps {
      * Currently, `validator` supports only synchronous functions.
      */
     validator?: FormValidatorType;
+    /**
+     * Fires each time any field value changes.
+     *
+     * The third parameter `valueGetter` allows accessing other field values,
+     * useful for cross-field validation or clearing related errors.
+     *
+     * @example
+     * ```vue
+     * <Form :on-change="handleChange" :render-form="renderForm" />
+     * ```
+     */
+    onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
     /**
      * The submission handler for the Form.
      * Called when at least one field has been modified, the user pressed

package/interfaces/Gutters.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ResponsiveFormBreakPoint } from './ResponsiveFormBreakPoint';
+/**
+ * Represents the [gutters](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) configuration for a form layout.
+ * It allows defining the spacing between the columns and rows of the form.
+ * Each property can be a number or an array of responsive breakpoints.
+ */
+export interface Gutters {
+    /**
+     * Defines the gutters for the columns in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols?: string | number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the rows in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    rows?: string | number | ResponsiveFormBreakPoint[];
+}

package/interfaces/ResponsiveFormBreakPoint.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Defines responsive breakpoints for form layouts.
+ * Each breakpoint sets minimum and maximum widths and values for columns or spacing at different screen sizes.
+ */
+export interface ResponsiveFormBreakPoint {
+    /**
+     * Sets the minimum screen width in pixels for this breakpoint.
+     */
+    minWidth?: number;
+    /**
+     * Sets the maximum screen width in pixels for this breakpoint.
+     */
+    maxWidth?: number;
+    /**
+     * Sets the number of columns or spacing for form controls at this screen size.
+     */
+    value: number | string;
+}

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: 1776348799,version:"8.2.0-develop.1",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: 1776857191,version:"8.3.0-develop.1",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: 1776348799,
-  version: "8.2.0-develop.1",
+  publishDate: 1776857191,
+  version: "8.3.0-develop.1",
   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.2.0-develop.1",
+  "version": "8.3.0-develop.1",
   "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.2.0-develop.1",
+    "@progress/kendo-vue-common": "8.3.0-develop.1",
     "vue": "^3.0.2"
   },
   "dependencies": {},
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1776348799,
+      "publishDate": 1776857191,
       "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/"
     }
   },

package/utils.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint';
+import { Gutters } from './interfaces/Gutters';
+/**
+ * Returns the inner width of a DOM element, excluding padding and borders.
+ * Named `getElementInnerWidth` to avoid confusion with `window.innerWidth`.
+ * @hidden
+ */
+export declare function getElementInnerWidth(element: HTMLElement): number;
+/**
+ * Returns the value for the current container width based on responsive breakpoints.
+ *
+ * Breakpoints MUST be provided in ascending order (by minWidth / maxWidth). The function
+ * relies on positional lookup — the previous entry's `maxWidth` fills a missing `minWidth`,
+ * and the next entry's `minWidth` fills a missing `maxWidth`. Misordered breakpoints will
+ * silently produce incorrect lookups; order is not validated here for performance.
+ * @hidden
+ */
+export declare function processBreakpoints(breakpoints: ResponsiveFormBreakPoint[], containerWidth: number): number | string;
+/**
+ * @hidden
+ */
+export declare function calculateColumns(cols: number | ResponsiveFormBreakPoint[] | undefined, containerWidth: number): number | null;
+/**
+ * @hidden
+ */
+export declare function generateColumnClass(columnsNumber: number | null): string;
+/**
+ * @hidden
+ */
+export declare function calculateColSpan(colSpan: number | ResponsiveFormBreakPoint[], containerWidth: number): number | null;
+/**
+ * @hidden
+ */
+export declare function generateColSpanClass(colSpan: number | null): string;
+/**
+ * @hidden
+ */
+export declare function processCssValue(value: number | string | null | undefined): string | null;
+/**
+ * @hidden
+ */
+export declare function calculateGutters(gutters: number | string | ResponsiveFormBreakPoint[] | Gutters | undefined, containerWidth: number): {
+    cols: number | string | null;
+    rows: number | string | null;
+} | null;
+/**
+ * @hidden
+ */
+export declare function generateGuttersStyling(gutters: {
+    cols?: number | string | null;
+    rows?: number | string | null;
+} | null, defaultGutters: {
+    cols?: number | string | null;
+    rows?: number | string | null;
+}): string;

package/utils.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=" ";function p(n){let e=n.clientWidth;const r=getComputedStyle(n);return e-=(parseFloat(r.paddingLeft)||0)+(parseFloat(r.borderLeftWidth)||0),e-=(parseFloat(r.paddingRight)||0)+(parseFloat(r.borderRightWidth)||0),e}function i(n,e){var r,l;if(!(n!=null&&n.length)||e==null)return"";for(const[t,o]of n.entries()){const s=t>0&&n[t-1].maxWidth!==void 0?n[t-1].maxWidth:void 0,u=t<n.length-1&&n[t+1].minWidth!==void 0?n[t+1].minWidth:void 0,a=(r=o.minWidth)!=null?r:s!==void 0?s+1:0,d=(l=o.maxWidth)!=null?l:u!==void 0?u-1:1/0;if(e>=a&&e<=d)return o.value}return""}function y(n,e){if(!n)return null;if(Array.isArray(n)&&n.length>0){const r=i(n,e)||null;return typeof r=="string"?parseInt(r,10):r}else if(typeof n=="number")return n;return null}function m(n){return n&&n>0?`k-grid-cols-${n}`:""}function C(n,e){if(!n)return null;if(typeof n=="number")return n;if(Array.isArray(n)&&n.length>0){const r=i(n,e)||null;return typeof r=="string"?parseInt(r,10):r}return null}function h(n){return n?`k-col-span-${n}`:""}function c(n){if(n==null)return null;if(typeof n=="number")return`${n}px`;const e=n.trim(),r=parseInt(e,10);return!isNaN(r)&&Number.isFinite(r)?r.toString()===e?`${r}px`:n:null}function w(n,e){if(!n)return null;if(typeof n=="number")return{cols:n,rows:n};if(typeof n=="string"){if(!n.includes(f))return{cols:n,rows:n};const r=n.split(f);return{cols:r[1],rows:r[0]}}else if(Array.isArray(n)){const r=i(n,e)||null;return r!==null?{cols:r,rows:r}:null}else if(typeof n=="object"){const r=n,l={rows:null,cols:null};return r.cols!==void 0&&r.cols!==null&&(typeof r.cols=="number"||typeof r.cols=="string"?l.cols=r.cols:Array.isArray(r.cols)&&(l.cols=i(r.cols,e)||null)),r.rows!==void 0&&(typeof r.rows=="number"||typeof r.rows=="string"?l.rows=r.rows:Array.isArray(r.rows)&&(l.rows=i(r.rows,e)||null)),l}return null}function x(n,e){var t,o,s,u;const r=c((o=(t=n==null?void 0:n.rows)!=null?t:e.rows)!=null?o:"0px"),l=c((u=(s=n==null?void 0:n.cols)!=null?s:e.cols)!=null?u:"32px");return`${r!=null?r:"0px"} ${l!=null?l:"32px"}`}exports.calculateColSpan=C;exports.calculateColumns=y;exports.calculateGutters=w;exports.generateColSpanClass=h;exports.generateColumnClass=m;exports.generateGuttersStyling=x;exports.getElementInnerWidth=p;exports.processBreakpoints=i;exports.processCssValue=c;

package/utils.mjs

@@ -0,0 +1,93 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+function p(n) {
+  let i = n.clientWidth;
+  const r = getComputedStyle(n);
+  return i -= (parseFloat(r.paddingLeft) || 0) + (parseFloat(r.borderLeftWidth) || 0), i -= (parseFloat(r.paddingRight) || 0) + (parseFloat(r.borderRightWidth) || 0), i;
+}
+function f(n, i) {
+  var r, o;
+  if (!(n != null && n.length) || i == null)
+    return "";
+  for (const [e, l] of n.entries()) {
+    const t = e > 0 && n[e - 1].maxWidth !== void 0 ? n[e - 1].maxWidth : void 0, s = e < n.length - 1 && n[e + 1].minWidth !== void 0 ? n[e + 1].minWidth : void 0, c = (r = l.minWidth) != null ? r : t !== void 0 ? t + 1 : 0, d = (o = l.maxWidth) != null ? o : s !== void 0 ? s - 1 : 1 / 0;
+    if (i >= c && i <= d)
+      return l.value;
+  }
+  return "";
+}
+function y(n, i) {
+  if (!n)
+    return null;
+  if (Array.isArray(n) && n.length > 0) {
+    const r = f(n, i) || null;
+    return typeof r == "string" ? parseInt(r, 10) : r;
+  } else if (typeof n == "number")
+    return n;
+  return null;
+}
+function a(n) {
+  return n && n > 0 ? `k-grid-cols-${n}` : "";
+}
+function A(n, i) {
+  if (!n)
+    return null;
+  if (typeof n == "number")
+    return n;
+  if (Array.isArray(n) && n.length > 0) {
+    const r = f(n, i) || null;
+    return typeof r == "string" ? parseInt(r, 10) : r;
+  }
+  return null;
+}
+function C(n) {
+  return n ? `k-col-span-${n}` : "";
+}
+function u(n) {
+  if (n == null)
+    return null;
+  if (typeof n == "number")
+    return `${n}px`;
+  const i = n.trim(), r = parseInt(i, 10);
+  return !isNaN(r) && Number.isFinite(r) ? r.toString() === i ? `${r}px` : n : null;
+}
+function m(n, i) {
+  if (!n)
+    return null;
+  if (typeof n == "number")
+    return { cols: n, rows: n };
+  if (typeof n == "string") {
+    if (!n.includes(" "))
+      return { cols: n, rows: n };
+    const r = n.split(" ");
+    return { cols: r[1], rows: r[0] };
+  } else if (Array.isArray(n)) {
+    const r = f(n, i) || null;
+    return r !== null ? { cols: r, rows: r } : null;
+  } else if (typeof n == "object") {
+    const r = n, o = { rows: null, cols: null };
+    return r.cols !== void 0 && r.cols !== null && (typeof r.cols == "number" || typeof r.cols == "string" ? o.cols = r.cols : Array.isArray(r.cols) && (o.cols = f(r.cols, i) || null)), r.rows !== void 0 && (typeof r.rows == "number" || typeof r.rows == "string" ? o.rows = r.rows : Array.isArray(r.rows) && (o.rows = f(r.rows, i) || null)), o;
+  }
+  return null;
+}
+function h(n, i) {
+  var e, l, t, s;
+  const r = u((l = (e = n == null ? void 0 : n.rows) != null ? e : i.rows) != null ? l : "0px"), o = u((s = (t = n == null ? void 0 : n.cols) != null ? t : i.cols) != null ? s : "32px");
+  return `${r != null ? r : "0px"} ${o != null ? o : "32px"}`;
+}
+export {
+  A as calculateColSpan,
+  y as calculateColumns,
+  m as calculateGutters,
+  C as generateColSpanClass,
+  a as generateColumnClass,
+  h as generateGuttersStyling,
+  p as getElementInnerWidth,
+  f as processBreakpoints,
+  u as processCssValue
+};