@progress/kendo-vue-form 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/Field.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 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,changeOnInput:{type:Boolean,default:!0},id:String,resource:Object,multiple:Boolean,dataItems:Array,textField:String,valueField:String,colorField:String,rows:Number,field:String,start:String,value:[String,Number,Boolean,Object],width:String,editorId:String,isAllDay:Boolean,timezone:String},created(){return this.kendoForm?this.kendoForm.registerField(this.$props.name,this.$props.validator):void 0},inject:{kendoForm:{default:null}},methods:{handleOnChange(e){const t=e&&(e.value!==void 0?e.value:e.target?e.target.value:e.target);this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("change",e)},handleOnInput(e){const t=e&&(e.value!==void 0?e.value:e.target?e.target.value:e.target);this.changeOnInput&&this.kendoForm.onChange(this.$props.name,{value:t}),this.$emit("input",e)},onNativeComponentChange(e){this.kendoForm.onChange(this.$props.name,{value:e.target.value})},handleOnBlur(){this.kendoForm.onBlur(this.$props.name)},handleOnFocus(){this.kendoForm.onFocus(this.$props.name)}},render(){const e=o.getDefaultSlots(this),{name:t,component:n,id:a}=this.$props;if(!this.kendoForm)return null;const i=this.kendoForm.values[t];if(typeof n=="string"&&n==="input")return r.h(n,{attrs:this.$attrs,...this.$attrs,onChange:this.onNativeComponentChange,onBlur:this.handleOnBlur,onFocus:this.handleOnFocus,name:t,value:i||""});if(n){const s=o.templateRendering.call(this,n,o.getListeners.call(this));return o.getTemplate.call(this,{h:r.h,template:s,additionalProps:{value:i,validationMessage:this.kendoForm.errors[t],touched:this.kendoForm.touchedByField[t],modified:this.kendoForm.modifiedByField[t],visited:this.kendoForm.visitedByField[t],valid:!(this.kendoForm.errors[t]&&this.kendoForm.touchedByField[t]),name:t,id:a,...this.$attrs},additionalListeners:{change:this.handleOnChange,input:this.handleOnInput,blur:this.handleOnBlur,focus:this.handleOnFocus},defaultSlots:e})}}});exports.Field=l;

package/Field.mjs

@@ -0,0 +1,124 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as s, h as i } from "vue";
+import { getDefaultSlots as l, templateRendering as d, getListeners as h, getTemplate as u } from "@progress/kendo-vue-common";
+const g = /* @__PURE__ */ s({
+  name: "KendoField",
+  props: {
+    component: [String, Number, Boolean, Object],
+    validator: [Function, Array],
+    name: String,
+    changeOnInput: {
+      type: Boolean,
+      default: !0
+    },
+    id: String,
+    resource: Object,
+    multiple: Boolean,
+    dataItems: Array,
+    textField: String,
+    valueField: String,
+    colorField: String,
+    rows: Number,
+    field: String,
+    start: String,
+    value: [String, Number, Boolean, Object],
+    width: String,
+    editorId: String,
+    isAllDay: Boolean,
+    timezone: String
+  },
+  created() {
+    return this.kendoForm ? this.kendoForm.registerField(this.$props.name, this.$props.validator) : void 0;
+  },
+  inject: {
+    kendoForm: {
+      default: null
+    }
+  },
+  methods: {
+    handleOnChange(e) {
+      const t = e && (e.value !== void 0 ? e.value : e.target ? e.target.value : e.target);
+      this.kendoForm.onChange(this.$props.name, {
+        value: t
+      }), this.$emit("change", e);
+    },
+    handleOnInput(e) {
+      const t = e && (e.value !== void 0 ? e.value : e.target ? e.target.value : e.target);
+      this.changeOnInput && this.kendoForm.onChange(this.$props.name, {
+        value: t
+      }), this.$emit("input", e);
+    },
+    onNativeComponentChange(e) {
+      this.kendoForm.onChange(this.$props.name, {
+        value: e.target.value
+      });
+    },
+    handleOnBlur() {
+      this.kendoForm.onBlur(this.$props.name);
+    },
+    handleOnFocus() {
+      this.kendoForm.onFocus(this.$props.name);
+    }
+  },
+  render() {
+    const e = l(this), {
+      name: t,
+      component: n,
+      id: r
+    } = this.$props;
+    if (!this.kendoForm)
+      return null;
+    const o = this.kendoForm.values[t];
+    if (typeof n == "string" && n === "input")
+      return i(n, {
+        attrs: this.$attrs,
+        ...this.$attrs,
+        onChange: this.onNativeComponentChange,
+        onBlur: this.handleOnBlur,
+        onFocus: this.handleOnFocus,
+        name: t,
+        value: o || ""
+      });
+    if (n) {
+      const a = d.call(this, n, h.call(this));
+      return u.call(this, {
+        h: i,
+        template: a,
+        additionalProps: {
+          value: o,
+          // meta
+          validationMessage: this.kendoForm.errors[t],
+          touched: this.kendoForm.touchedByField[t],
+          modified: this.kendoForm.modifiedByField[t],
+          visited: this.kendoForm.visitedByField[t],
+          // Our `valid` implementation requires double submit to show html5 validation errors,
+          // however it's NOT recommended to show html5 validation errors at all as:
+          // - There is no standard way to change validation look and feel with CSS.
+          // - Look different in each browser / OS
+          // - You can have a page in one language but an error message
+          // displayed in another language (not localizable)
+          valid: !(this.kendoForm.errors[t] && this.kendoForm.touchedByField[t]),
+          name: t,
+          id: r,
+          ...this.$attrs
+        },
+        additionalListeners: {
+          change: this.handleOnChange,
+          input: this.handleOnInput,
+          blur: this.handleOnBlur,
+          focus: this.handleOnFocus
+        },
+        defaultSlots: e
+      });
+    }
+  }
+});
+export {
+  g as Field
+};

package/FieldArray.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 t=require("vue"),n=require("@progress/kendo-vue-common"),d=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:i}=this.$props;if(!this.kendoForm)return null;const r=this.kendoForm.values[e];if(o){const s=o?n.templateRendering.call(this,o,n.getListeners.call(this)):null;return n.getTemplate.call(this,{h:t.h,template:s,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:i,...this.$attrs},additionalListeners:{unshift:this.onUnshift,push:this.onPush,insert:this.onInsert,pop:this.onPop,remove:this.onRemove,replace:this.onReplace,move:this.onMove}})}}});exports.FieldArray=d;

package/FieldArray.mjs

@@ -0,0 +1,102 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as r, h as s } from "vue";
+import { templateRendering as d, getListeners as a, getTemplate as h } from "@progress/kendo-vue-common";
+const p = /* @__PURE__ */ r({
+  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: n
+    } = this.$props;
+    if (!this.kendoForm)
+      return null;
+    const t = this.kendoForm.values[e];
+    if (o) {
+      const i = o ? d.call(this, o, a.call(this)) : null;
+      return h.call(this, {
+        h: s,
+        template: i,
+        additionalProps: {
+          value: t,
+          // meta
+          validationMessage: this.kendoForm.errors[e],
+          touched: this.kendoForm.touchedByField[e],
+          modified: this.kendoForm.modifiedByField[e],
+          visited: this.kendoForm.visitedByField[e],
+          // Our `valid` implementation requires double submit to show html5 validation errors,
+          // however it's NOT recommended to show html5 validation errors at all as:
+          // - There is no standard way to change validation look and feel with CSS.
+          // - Look different in each browser / OS
+          // - You can have a page in one language but an error message
+          // displayed in another language (not localizable)
+          valid: !(this.kendoForm.errors[e] && this.kendoForm.touchedByField[e]),
+          name: e,
+          id: n,
+          ...this.$attrs
+        },
+        additionalListeners: {
+          unshift: this.onUnshift,
+          push: this.onPush,
+          insert: this.onInsert,
+          pop: this.onPop,
+          remove: this.onRemove,
+          replace: this.onReplace,
+          move: this.onMove
+        }
+      });
+    }
+  }
+});
+export {
+  p as FieldArray
+};

package/FieldWrapper.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 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;

package/FieldWrapper.mjs

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 { validatePackage as o, getDefaultSlots as i } from "@progress/kendo-vue-common";
+const s = /* @__PURE__ */ r({
+  name: "KendoFieldWrapper",
+  props: {
+    dir: String,
+    horizontal: Boolean
+  },
+  created() {
+    o(a);
+  },
+  computed: {
+    fieldClassName() {
+      return {
+        "k-form-field": !0,
+        "k-rtl": this.$props.dir === "rtl"
+      };
+    }
+  },
+  render() {
+    const e = i(this);
+    return t("div", {
+      class: this.fieldClassName
+    }, [e]);
+  }
+});
+export {
+  s as FieldWrapper
+};

package/Form.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 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;

package/Form.mjs

@@ -0,0 +1,294 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { validatePackage as h, clone as l, cloneObject as u, canUseDOM as a, guid as n, getDefaultSlots 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({
+  name: "KendoForm",
+  inheritAttrs: !1,
+  props: {
+    renderForm: [Object, Function],
+    initialValues: Object,
+    validator: Function,
+    ignoreModified: Boolean
+  },
+  emits: {
+    submitclick: null,
+    submit: null
+  },
+  created() {
+    this._accumulatorTimeout = void 0, h(m), this.form.values = l(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 d = o(this.valueGetter(s), this.valueGetter, {
+                name: s
+              });
+              if (d)
+                return i[s] = d, !0;
+            }
+            return !1;
+          });
+        }
+      }), this.formErrors() && u(this.formErrors(), i), i;
+    },
+    /**
+     * @hidden
+     */
+    accumulatedForceUpdate() {
+      this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout), a && (this._accumulatorTimeout = window.setTimeout(() => {
+        this._accumulatorTimeout = void 0;
+      }, F));
+    },
+    /**
+     * @hidden
+     */
+    resetForm() {
+      this.form.values = l(this.$props.initialValues), this.id = n(), this.form.touchedByField = {}, this.form.visitedByField = {}, this.form.modifiedByField = {}, this.form.submitted = !1;
+    },
+    /**
+     * Method for resetting the form state outside the form component.
+     *
+     * > Use `onReset` only if you cannot achieve the desired behavior
+     *  through the Field component or by FormRenderProps.
+     */
+    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((d) => {
+        t[d] = !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));
+    },
+    /**
+     * Method for emitting changes to a specific field outside the form component.
+     *
+     * > Use `onChange` only if you cannot achieve the desired behavior
+     *  through the Field component by FormRenderProps.
+     */
+    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);
+    },
+    // 1. The form is not touched, but has errors - allow submit to force validation.
+    // 2. The form is valid and modified - if not modified, disable submit.
+    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 f(this);
+  }
+});
+export {
+  B as Form
+};

package/FormElement.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 o=require("vue"),n=require("./package-metadata.js"),t=require("@progress/kendo-vue-common"),r=o.defineComponent({name:"KendoFormElement",props:{horizontal:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}}},created(){t.validatePackage(n.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=r;

package/FormElement.mjs

@@ -0,0 +1,58 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 { validatePackage as m, kendoThemeMaps as n, getDefaultSlots as a } from "@progress/kendo-vue-common";
+const d = /* @__PURE__ */ t({
+  name: "KendoFormElement",
+  props: {
+    horizontal: Boolean,
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    }
+  },
+  created() {
+    m(r);
+  },
+  inject: {
+    kendoForm: {
+      default: null
+    }
+  },
+  computed: {
+    formElementClassName() {
+      const {
+        size: e
+      } = this.$props;
+      return {
+        "k-form": !0,
+        [`k-form-${n.sizeMap[e] || e}`]: e,
+        "k-form-horizontal": this.$props.horizontal === !0
+      };
+    }
+  },
+  methods: {
+    handleSubmit(e) {
+      this.kendoForm && this.kendoForm.onSubmit(e);
+    }
+  },
+  render() {
+    const e = a(this);
+    return o("form", {
+      class: this.formElementClassName,
+      onSubmit: this.handleSubmit
+    }, [e]);
+  }
+});
+export {
+  d as FormElement
+};