@progress/kendo-vue-form 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/Form.js

@@ -0,0 +1,467 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+
+import { clone, cloneObject, guid, validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from './package-metadata.js'; // @ts-ignore
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var FORCEUPDATE_ACCUMULATOR_TIMEOUT = 0;
+/**
+ * @hidden
+ */
+
+var FormVue2 = {
+  name: 'KendoForm',
+  inheritAttrs: false,
+  props: {
+    renderForm: [Object, Function],
+    initialValues: Object,
+    validator: Function,
+    ignoreModified: Boolean
+  },
+  // @ts-ignore
+  emits: {
+    submitclick: null,
+    submit: null
+  },
+  created: function created() {
+    this._accumulatorTimeout = undefined;
+    validatePackage(packageMetadata);
+    this.form.values = clone(this.$props.initialValues);
+  },
+  mounted: function mounted() {
+    this.form.errors = this.getErrors();
+    this.form.allowSubmit = this.allowSubmit();
+    this.form.valid = this.isValid();
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.onDestroy();
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.onDestroy();
+  },
+  data: function data() {
+    return {
+      validatorsByField: {},
+      fields: [],
+      unmounted: false,
+      form: {
+        id: this.id,
+        errors: {},
+        values: {},
+        modifiedByField: {},
+        touchedByField: {},
+        visitedByField: {},
+        valid: false,
+        modified: false,
+        touched: false,
+        visited: false,
+        submitted: false,
+        valueGetter: this.valueGetter,
+        allowSubmit: false,
+        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: function provide() {
+    return {
+      kendoForm: this.$data.form
+    };
+  },
+  watch: {
+    'form.values': function formValues() {
+      this.form.errors = this.getErrors();
+      this.form.allowSubmit = this.allowSubmit();
+      this.form.valid = this.isValid();
+    },
+    'form.touchedByField': function formTouchedByField(newValue) {
+      this.form.touched = this.isFormTouched(newValue, this.fields);
+      this.form.allowSubmit = this.allowSubmit();
+    },
+    'form.modifiedByField': function formModifiedByField(newValue) {
+      this.form.modified = this.isFormModified(newValue, this.fields);
+      this.form.allowSubmit = this.allowSubmit();
+    },
+    'form.visitedByField': function formVisitedByField(newValue) {
+      this.form.visited = this.isFormVisited(newValue, this.fields);
+    }
+  },
+  methods: {
+    isValid: function isValid() {
+      return this.isFormValid(this.form.errors);
+    },
+    formErrors: function formErrors() {
+      if (this.$props.validator) {
+        return this.$props.validator(this.form.values, this.valueGetter);
+      }
+    },
+    getErrors: function getErrors() {
+      var _this = this;
+
+      var errors = {};
+      var validatorsByField = this.validatorsByField;
+      Object.keys(this.fields).forEach(function (fieldName) {
+        errors[fieldName] = '';
+
+        if (validatorsByField[fieldName]) {
+          var validators_1 = [];
+          validatorsByField[fieldName].forEach(function (validator) {
+            if (Array.isArray(validator)) {
+              validators_1.push.apply(validators_1, validator);
+            } else {
+              validators_1.push(validator);
+            }
+          }); // find first validation error
+
+          validators_1.find(function (validator) {
+            if (validator) {
+              var result = validator(_this.valueGetter(fieldName), _this.valueGetter, {
+                name: fieldName
+              });
+
+              if (result) {
+                errors[fieldName] = result;
+                return true;
+              }
+            }
+
+            return false;
+          });
+        }
+      });
+      var formErrors = this.formErrors();
+
+      if (formErrors) {
+        cloneObject(this.formErrors(), errors);
+      }
+
+      return errors;
+    },
+
+    /**
+     * @hidden
+     */
+    accumulatedForceUpdate: function accumulatedForceUpdate() {
+      var _this = this; // IMPORTANT:
+      // Should only be used for updates not coming from editors as it
+      // will cause cursor jump as vue will reset the editor to old value
+
+
+      if (this._accumulatorTimeout) {
+        clearTimeout(this._accumulatorTimeout);
+      }
+
+      this._accumulatorTimeout = window.setTimeout(function () {
+        _this._accumulatorTimeout = undefined;
+      }, FORCEUPDATE_ACCUMULATOR_TIMEOUT);
+    },
+
+    /**
+     * @hidden
+     */
+    resetForm: function resetForm() {
+      this.form.values = clone(this.$props.initialValues);
+      this.id = guid();
+      this.form.touchedByField = {};
+      this.form.visitedByField = {};
+      this.form.modifiedByField = {}; // this.validatorsByField = {};
+      // this.fields = [];
+
+      this.form.submitted = false;
+    },
+
+    /**
+     * 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: function onReset() {
+      this.resetForm();
+    },
+    addField: function addField(field) {
+      this.fields[field] = true;
+    },
+    onSubmit: function onSubmit(event) {
+      var touchedVisited = {};
+      var fields = this.fields;
+
+      if (event) {
+        if (typeof event.preventDefault === 'function') {
+          event.preventDefault();
+        }
+
+        if (typeof event.stopPropagation === 'function') {
+          event.stopPropagation();
+        }
+      }
+
+      Object.keys(fields).forEach(function (fieldName) {
+        touchedVisited[fieldName] = true;
+      }); // show validations
+
+      this.form.visitedByField = __assign({}, touchedVisited);
+      this.form.touchedByField = __assign({}, touchedVisited);
+      var values = this.form.values;
+      var isValid = this.isValid();
+      var isModified = this.isFormModified(this.form.modifiedByField, fields);
+      this.$emit('submitclick', {
+        values: values,
+        isValid: isValid,
+        isModified: isModified,
+        event: event
+      });
+
+      if (isValid && (this.$props.ignoreModified || isModified)) {
+        this.form.submitted = true;
+        this.$emit('submit', values, event);
+      }
+    },
+
+    /**
+     * 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: function onChange(name, options) {
+      var _a;
+
+      var value = options.value;
+      this.addField(name);
+
+      if (!this.form.modifiedByField[name]) {
+        this.form.modifiedByField = __assign(__assign({}, this.form.modifiedByField), (_a = {}, _a[name] = true, _a));
+      }
+
+      this.valueSetter(name, value);
+    },
+    onFocus: function onFocus(name) {
+      var _a;
+
+      if (this.form.visitedByField[name]) {
+        return;
+      }
+
+      this.form.visitedByField = __assign(__assign({}, this.form.visitedByField), (_a = {}, _a[name] = true, _a));
+    },
+    onBlur: function onBlur(name) {
+      var _a;
+
+      if (this.form.touchedByField[name]) {
+        return;
+      }
+
+      this.onFocus(name);
+      this.form.touchedByField = __assign(__assign({}, this.form.touchedByField), (_a = {}, _a[name] = true, _a));
+    },
+    onFieldRegister: function onFieldRegister(name, validator) {
+      var _a;
+
+      var _this = this;
+
+      this.addField(name); // The sole reason for using class props over state - nextIndex, needed for destroying validators
+
+      var oldValidators = this.validatorsByField[name] || [];
+      var nextIndex = oldValidators.length;
+      this.validatorsByField = __assign(__assign({}, this.validatorsByField), (_a = {}, _a[name] = __spreadArray(__spreadArray([], oldValidators, true), [validator], false), _a));
+      this.accumulatedForceUpdate();
+      return function () {
+        var _a; // onFieldUnregister:
+
+
+        if (_this._unmounted) {
+          return;
+        }
+
+        var newValidators = __spreadArray([], _this.validatorsByField[name] || [], true);
+
+        var validatorIsUnregistered = Boolean(newValidators[nextIndex]);
+        newValidators[nextIndex] = undefined;
+        _this.validatorsByField = __assign(__assign({}, _this.validatorsByField), (_a = {}, _a[name] = newValidators, _a));
+
+        if (validatorIsUnregistered) {
+          _this.accumulatedForceUpdate();
+        }
+      };
+    },
+    isFormValid: function isFormValid(errors) {
+      return !Object.keys(errors).some(function (fieldName) {
+        return Boolean(errors[fieldName]);
+      });
+    },
+    isFormModified: function isFormModified(modified, fields) {
+      return Object.keys(fields).some(function (fieldName) {
+        return modified[fieldName];
+      });
+    },
+    isFormHasNotTouched: function isFormHasNotTouched(touched, fields) {
+      return Object.keys(fields).some(function (fieldName) {
+        return !touched[fieldName];
+      });
+    },
+    isFormTouched: function isFormTouched(touched, fields) {
+      return Object.keys(fields).some(function (fieldName) {
+        return touched[fieldName];
+      });
+    },
+    isFormVisited: function isFormVisited(visited, fields) {
+      return Object.keys(fields).some(function (fieldName) {
+        return visited[fieldName];
+      });
+    },
+    formHasNotTouched: function 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: function allowSubmit() {
+      return this.formHasNotTouched() && !this.isValid() || this.isValid() && (this.$props.ignoreModified || this.isFormModified(this.form.modifiedByField, this.fields));
+    },
+    valueGetter: function valueGetter(fieldName) {
+      return this.form.values[fieldName];
+    },
+    valueSetter: function valueSetter(fieldName, value) {
+      var _a;
+
+      this.form.values = __assign(__assign({}, this.form.values), (_a = {}, _a[fieldName] = value, _a));
+    },
+    onArrayAction: function onArrayAction(name) {
+      var _a;
+
+      this.addField(name);
+
+      if (!this.form.modifiedByField[name]) {
+        this.form.modifiedByField = __assign(__assign({}, this.form.modifiedByField), (_a = {}, _a[name] = true, _a));
+      }
+
+      this.onBlur(name, true);
+    },
+    onInsert: function onInsert(name, options) {
+      this.onArrayAction(name);
+
+      var newArray = __spreadArray([], this.valueGetter(name) || [], true);
+
+      newArray.splice(options.index, 0, options.value);
+      this.valueSetter(name, newArray);
+    },
+    onUnshift: function onUnshift(name, options) {
+      this.onInsert(name, {
+        value: options.value,
+        index: 0
+      });
+    },
+    onPush: function onPush(name, options) {
+      this.onArrayAction(name);
+
+      var newArray = __spreadArray(__spreadArray([], this.valueGetter(name) || [], true), [options.value], false);
+
+      this.valueSetter(name, newArray);
+    },
+    onPop: function onPop(name) {
+      this.onArrayAction(name);
+
+      var newArray = __spreadArray([], this.valueGetter(name) || [], true);
+
+      var value = newArray.pop();
+      this.valueSetter(name, newArray);
+      return value;
+    },
+    onRemove: function onRemove(name, options) {
+      this.onArrayAction(name);
+
+      var newArray = __spreadArray([], this.valueGetter(name) || [], true);
+
+      var value = newArray.splice(options.index, 1);
+      this.valueSetter(name, newArray);
+      return value;
+    },
+    onReplace: function onReplace(name, options) {
+      this.onArrayAction(name);
+
+      var newArray = __spreadArray([], this.valueGetter(name) || [], true);
+
+      newArray.splice(options.index, 1, options.value);
+      this.valueSetter(name, newArray);
+    },
+    onMove: function onMove(name, options) {
+      this.onArrayAction(name);
+
+      var newArray = __spreadArray([], this.valueGetter(name) || [], true);
+
+      var value = newArray[options.prevIndex];
+      newArray.splice(options.prevIndex, 1);
+      newArray.splice(options.nextIndex, 0, value);
+      this.valueSetter(name, newArray);
+    },
+    onDestroy: function onDestroy() {
+      this.unmounted = true;
+
+      if (this._accumulatorTimeout) {
+        clearTimeout(this._accumulatorTimeout);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    return defaultSlots;
+  }
+};
+/**
+ * @hidden
+ */
+
+var Form = FormVue2;
+export { Form, FormVue2 };

package/dist/esm/FormContext.d.ts

@@ -0,0 +1,45 @@
+import { FieldValidatorType } from './interfaces/FieldValidator';
+/** @hidden */
+export declare type FormContextType = {
+    onSubmit: (event: any) => void;
+    onChange: (name: string, options: {
+        value: any;
+    }) => void;
+    onFocus: (name: string) => void;
+    onBlur: (name: string) => void;
+    onUnshift: (name: string, options: {}) => void;
+    onPush: (name: string, options: {
+        value: any;
+    }) => void;
+    onInsert: (name: string, options: {
+        index: number;
+        value: any;
+    }) => void;
+    onPop: (name: string) => any;
+    onRemove: (name: string, options: {
+        index: number;
+    }) => any;
+    onReplace: (name: string, options: {
+        index: number;
+        value: any;
+    }) => void;
+    onMove: (name: string, options: {
+        prevIndex: number;
+        nextIndex: number;
+    }) => void;
+    registerField: (name: string, validator: FieldValidatorType | FieldValidatorType[] | undefined) => void;
+    valueGetter: (name: string) => any;
+    errors: {
+        [name: string]: string;
+    };
+    touched: {
+        [name: string]: boolean;
+    };
+    visited: {
+        [name: string]: boolean;
+    };
+    modified: {
+        [name: string]: boolean;
+    };
+    id: string;
+};

package/dist/esm/FormContext.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/FormElement.d.ts

@@ -0,0 +1,63 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from './additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FormContextType } from './FormContext';
+/**
+ * Represents the props of the Kendo U for Vue FormElement component.
+ */
+export interface FormElementProps {
+    /**
+     * If set to `true` enable the horizontal layout of the form editors.
+     */
+    horizontal?: boolean;
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+}
+/**
+ * Represent the `ref` of the FormElement component.
+ */
+export interface FormElementHandle {
+    props: FormElementProps;
+    element: HTMLFormElement | null;
+}
+/**
+ * @hidden
+ */
+interface FormElementState {
+}
+/**
+ * @hidden
+ */
+interface FormElementData {
+}
+/**
+ * @hidden
+ */
+export interface FormElementMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface FormElementComputed {
+    [key: string]: any;
+    formElementClassName: object;
+}
+/**
+ * @hidden
+ */
+export interface FormElementAll extends FormElementMethods, FormElementState, FormElementData, FormElementComputed, FormContextType, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare const FormElementVue2: ComponentOptions<Vue2type, DefaultData<FormElementData>, DefaultMethods<FormElementAll>, FormElementComputed, RecordPropsDefinition<FormElementProps>>;
+/**
+ * @hidden
+ */
+declare let FormElement: DefineComponent<FormElementProps, any, FormElementData, FormElementComputed, FormElementMethods, {}, {}, {}, string, FormElementProps, FormElementProps, {}>;
+export { FormElement, FormElementVue2 };

package/dist/esm/FormElement.js

@@ -0,0 +1,64 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { packageMetadata } from './package-metadata.js';
+import { getDefaultSlots, validatePackage } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var FormElementVue2 = {
+  name: 'KendoFormElement',
+  props: {
+    horizontal: Boolean
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  inject: {
+    kendoForm: {
+      default: null
+    }
+  },
+  computed: {
+    formElementClassName: function formElementClassName() {
+      return {
+        'k-form': true,
+        'k-form-horizontal': this.$props.horizontal === true
+      };
+    }
+  },
+  methods: {
+    handleSubmit: function handleSubmit(e) {
+      if (this.kendoForm) {
+        this.kendoForm.onSubmit(e);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    return h("form", {
+      "class": this.formElementClassName,
+      onSubmit: this.handleSubmit,
+      on: this.v3 ? undefined : {
+        "submit": this.handleSubmit
+      }
+    }, [defaultSlots]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var FormElement = FormElementVue2;
+export { FormElement, FormElementVue2 };

package/dist/esm/additionalTypes.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+// @ts-ignore
+import * as Vue from 'vue';
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+type Vue2type = Vue.default;
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+/**
+ * @hidden
+ */
+// @ts-ignore
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/esm/interfaces/FieldArrayProps.d.ts

@@ -0,0 +1,24 @@
+import { FieldValidatorType } from './FieldValidator';
+/**
+ * Represents the props of the FieldArray component that is used inside the Kendo U for Vue Form component.
+ */
+export interface FieldArrayProps {
+    /**
+     * The name of the field in the Form state.
+     */
+    name: string;
+    /**
+     * Can be set to a Vue component.
+     * [`FieldArrayRenderProps`]({% slug api_form_fieldarrayprops %}).
+     */
+    component: any;
+    /**
+     * The validation functions for the FieldArray level.
+     * Currently, `validator` supports only synchronous functions.
+     */
+    validator?: FieldValidatorType | FieldValidatorType[];
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+}

package/dist/esm/interfaces/FieldArrayProps.js

@@ -0,0 +1 @@
+export {};