vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/FormModule.js

@@ -1,706 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Module2 = _interopRequireDefault(require("./Module"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
-
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var toObject = require('form-to-object');
-
-var selectEl = require('select-el');
-/**
- * @classdesc A class for creating an ajax form. <br>
- * Available targets:
- *  <ul>
- *      <li>success - If success. Argument - {@linkcode Vevet.AJAXEvent.CacheItem}</li>
- *      <li>failure - If failure. Argument - {@linkcode Vevet.AJAXEvent.ErrorCallback}</li>
- *  </ul>
- * <br><br> <b>import {FormModule} from 'vevet';</b>
- * 
- * @vevetModuleCallback { Vevet.FormModule : success : Vevet.AJAXEvent.CacheItem}
- * @vevetModuleCallback { Vevet.FormModule : failure : Vevet.FormModule.ErrorCallback}
- * 
- * @class
- * @memberof Vevet
- * @augments Vevet.Module
- */
-
-
-var FormModule = /*#__PURE__*/function (_Module) {
-  _inherits(FormModule, _Module);
-
-  var _super = _createSuper(FormModule);
-
-  /**
-   * @memberof Vevet.FormModule
-   * @typedef {object} Properties
-   * @augments Vevet.Module.Properties
-   * 
-   * @property {object} [selectors] - *** An object with css selectors.
-   * @property {string|HTMLFormElement} [selectors.form=.vevet-form] - The form element.
-   * @property {string} [selectors.error=.vevet-form__error] - The elements, in which errors will be displayed. For each element it is possible to create a div. It must contain the attribute "for" which is equal to the name of the input.
-   * @property {string} [selectors.errors=.vevet-form__errors] - The element, in which all errors will be displayed.
-   * 
-   * @property {boolean} [addErrorClass=true] - True if you need to set error classes to elements.
-   * @property {boolean} [addFilledClass=true] - True if you need to set the class "vevet-form__input_filled" when inputs are not empty.
-   * @property {Array<string>} [filledExceptions=['', 'none']] - Values that will be thought to be "empty".
-   * @property {boolean} [addFocusClass=true] - Add the class "vevet-form__input_focus" to inputs when they are focused.
-   * @property {boolean} [clearAfterSuccess=true] - True if you need to reset values after the submit request is successful.
-   * @property {boolean} [disabledSubmit=false] - True if you need to disable the submit button until all inputs are filled.
-   *
-   */
-
-  /**
-   * @alias Vevet.FormModule
-   * 
-   * @param {Vevet.FormModule.Properties} [data]
-   */
-  function FormModule(data) {
-    _classCallCheck(this, FormModule);
-
-    return _super.call(this, data);
-  }
-
-  _createClass(FormModule, [{
-    key: "prefix",
-    get: function get() {
-      return "".concat(this._v.prefix, "form");
-    }
-    /**
-     * @readonly
-     * @type {Vevet.FormModule.Properties}
-     */
-
-  }, {
-    key: "defaultProp",
-    get: function get() {
-      var prefix = this._prefix;
-      return (0, _merge.default)(_get(_getPrototypeOf(FormModule.prototype), "defaultProp", this), {
-        selectors: {
-          form: ".".concat(prefix),
-          error: ".".concat(prefix, "__error"),
-          errors: ".".concat(prefix, "__errors")
-        },
-        addErrorClass: true,
-        addFilledClass: true,
-        filledExceptions: ['', 'none'],
-        addFocusClass: true,
-        clearAfterSuccess: true,
-        disabledSubmit: false
-      });
-    }
-    /**
-     * @member Vevet.FormModule#prop
-     * @memberof Vevet.FormModule
-     * @readonly
-     * @type {Vevet.FormModule.Properties}
-     */
-
-    /**
-     * @member Vevet.FormModule#_prop
-     * @memberof Vevet.FormModule
-     * @protected
-     * @type {Vevet.FormModule.Properties}
-     */
-
-    /**
-     * @function Vevet.FormModule#changeProp
-     * @memberof Vevet.FormModule
-     * @param {Vevet.FormModule.Properties} [prop]
-     */
-
-    /**
-     * @description If an ajax request is in process.
-     * @default false
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "loading",
-    get: function get() {
-      return this._loading;
-    } // Extra Constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      _get(_getPrototypeOf(FormModule.prototype), "_extra", this).call(this);
-      /**
-       * @description If loading at the moment.
-       * @protected
-       * @member {boolean}
-       */
-
-
-      this._loading = false;
-      this._inputClass = "".concat(this._prefix, "__input");
-      this._filledClass = "".concat(this._inputClass, "_filled"); // get elements
-
-      this._getElements();
-    }
-    /**
-     * @description Get elements
-     * @protected
-     */
-
-  }, {
-    key: "_getElements",
-    value: function _getElements() {
-      var _this = this;
-
-      /**
-       * @description The form element.
-       * @protected
-       * @member {HTMLFormElement}
-       */
-      this._outer = selectEl.one(this._prop.selectors.form);
-      var outer = this._outer;
-      /**
-       * @description Form inputs.
-       * @protected
-       * @member {NodeList}
-       */
-
-      this._el = outer.querySelectorAll('input:not([type="submit"]):not([type="button"]), select, textarea, keygen'); // set filled class
-
-      this._el.forEach(function (el) {
-        _this._classFilled(el);
-      });
-      /**
-       * @description Error elements.
-       * @protected
-       * @member {NodeList}
-       */
-
-
-      this._errors = outer.querySelectorAll(this._prop.selectors.error);
-      /**
-       * @description Errors outer.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-      this._errorsOuter = outer.querySelector(this._prop.selectors.errors);
-      /**
-       * @description Submit button.
-       * @protected
-       * @member {HTMLButtonElement|HTMLInputElement}
-       */
-
-      this._submit = outer.querySelector("input[type='submit'], button[type='submit']"); // if submit is now disabled
-
-      this._submitDisabled();
-    } // Events
-
-  }, {
-    key: "_setEvents",
-    value: function _setEvents() {
-      var _this2 = this;
-
-      // events on elements
-      this._el.forEach(function (el) {
-        _this2.listener(el, 'focus', _this2._inputFocus.bind(_this2, el));
-
-        _this2.listener(el, 'blur', _this2._inputBlur.bind(_this2, el));
-
-        _this2.listener(el, 'keyup', _this2._inputKeyup.bind(_this2, el));
-      }); // submit event
-
-
-      this.listener(this._outer, 'submit', this.submit.bind(this));
-    }
-    /**
-     * @description Set classes if an input is not empty.
-     * @param {HTMLElement} el 
-     * @protected
-     */
-
-  }, {
-    key: "_classFilled",
-    value: function _classFilled(el) {
-      var parent = el.parentElement,
-          filledClass = this._filledClass;
-
-      if (parent.classList.contains(this._inputClass)) {
-        if (this._filled(el)) {
-          parent.classList.add(filledClass);
-        } else {
-          parent.classList.remove(filledClass);
-        }
-      }
-    }
-    /**
-     * @description Check if an input is not empty.
-     * @param {HTMLElement} el 
-     * @protected
-     */
-
-  }, {
-    key: "_filled",
-    value: function _filled(el) {
-      var value = el.value,
-          prop = this._prop;
-
-      if (prop.filledExceptions.includes(value)) {
-        return false;
-      } else {
-        if (prop.addFilledClass) {
-          return true;
-        }
-      }
-
-      return false;
-    }
-    /**
-     * @description Check if all inputs are not empty.
-     * @protected
-     */
-
-  }, {
-    key: "_filledAll",
-    value: function _filledAll() {
-      var _this3 = this;
-
-      var count = 0;
-
-      this._el.forEach(function (el) {
-        if (_this3._filled(el)) {
-          count++;
-        }
-      });
-
-      if (count == this._el.length) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-    /**
-     * @description Disable submit if inputs are empty.
-     * @protected
-     */
-
-  }, {
-    key: "_submitDisabled",
-    value: function _submitDisabled() {
-      var attr = "disabled";
-
-      if (this._prop.disabledSubmit) {
-        if (this._submit) {
-          if (!this._filledAll()) {
-            this._submit.setAttribute(attr, attr);
-          } else {
-            this._submit.removeAttribute(attr);
-          }
-        }
-      }
-    }
-    /**
-     * @description Element focus.
-     * @param {HTMLElement} el 
-     * @protected
-     */
-
-  }, {
-    key: "_inputFocus",
-    value: function _inputFocus(el) {
-      var parent = el.parentElement;
-
-      if (!this._prop.addFocusClass) {
-        return;
-      }
-
-      if (parent.classList.contains(this._inputClass)) {
-        parent.classList.add("".concat(this._inputClass, "_focus"));
-      }
-    }
-    /**
-     * @description Element blur.
-     * @param {HTMLElement} el 
-     * @protected
-     */
-
-  }, {
-    key: "_inputBlur",
-    value: function _inputBlur(el) {
-      var parent = el.parentElement;
-
-      if (parent.classList.contains(this._inputClass)) {
-        parent.classList.remove("".concat(this._inputClass, "_focus"));
-      }
-
-      this._classFilled(el);
-    }
-    /**
-     * @description Element keyup.
-     * @protected
-     */
-
-  }, {
-    key: "_inputKeyup",
-    value: function _inputKeyup() {
-      // check if submit is still disabled
-      this._submitDisabled();
-    }
-    /**
-     * @description Submit form.
-     * @param {object} [e=false] - Event data.
-     * @returns {boolean} Return true if success.
-     */
-
-  }, {
-    key: "submit",
-    value: function submit() {
-      var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-      // prevent default action
-      if (e) {
-        e.preventDefault();
-      } // check if possible
-
-
-      if (this._loading) {
-        return false;
-      } // object
-
-
-      var obj = {},
-          outer = this._outer; // get action
-
-      obj.action = outer.action; // get method
-
-      obj.method = outer.method; // get data
-
-      obj.data = toObject(outer); // disable submit
-
-      if (this._submit) {
-        this._submit.disabled = true;
-      } // change vars
-
-
-      this._loading = true; // ajax request
-
-      this._submitRequest(obj); // return
-
-
-      return true;
-    }
-    /**
-     * @description Ajax Request.
-     * @param {object} obj 
-     * @protected
-     */
-
-  }, {
-    key: "_submitRequest",
-    value: function _submitRequest(obj) {
-      var _this4 = this;
-
-      this._v.ajax.load({
-        url: obj.action,
-        method: obj.method,
-        data: obj.data,
-        success: function success(data) {
-          _this4._submitResponse(data);
-        },
-        abort: function abort() {
-          _this4._submitRequest(obj);
-        },
-        error: function error() {
-          _this4._submitError();
-        }
-      });
-    }
-    /**
-     * @description Request error.
-     * @protected
-     */
-
-  }, {
-    key: "_submitError",
-    value: function _submitError() {
-      throw new Error('Form Error');
-    }
-    /**
-     * @description Request response.
-     * @param {object} data
-     * @protected
-     */
-
-  }, {
-    key: "_submitResponse",
-    value: function _submitResponse(data) {
-      this._validResponse(data); // enable submit
-
-
-      if (this._submit) {
-        this._submit.disabled = false;
-      } // change vars
-
-
-      this._loading = false;
-    } // Validators
-
-    /**
-     * @description Check if the form is valid.
-     * @param {object} data 
-     * @protected
-     */
-
-  }, {
-    key: "_validResponse",
-    value: function _validResponse(data) {
-      // get response
-      var response = data.xhr.response,
-          json;
-
-      try {
-        json = JSON.parse(response);
-      } catch (e) {
-        json = response;
-      } // define what action
-
-
-      if (json.success) {
-        this._validSuccess(data);
-      } else {
-        this._validErrors(data, json);
-      }
-    }
-    /**
-     * @description Success validation.
-     * @param {object} data 
-     * @protected
-     */
-
-  }, {
-    key: "_validSuccess",
-    value: function _validSuccess(data) {
-      // hide errors
-      this._errorClasses();
-
-      this._errorEl(); // clear inputs
-
-
-      if (this._prop.clearAfterSuccess) {
-        this.clear();
-      } // callback
-
-
-      this.lbt("success", data);
-    }
-    /**
-     * @memberof Vevet.FormModule
-     * @typedef {object} ErrorCallback
-     * @property {Vevet.AJAXEvent.CacheItem} data - Response data.
-     * @property {Array<Vevet.FormModule.Error>} errors - Array of errors.
-     */
-
-    /**
-     * @description Validate errors.
-     * @param {object} data 
-     * @param {object} json 
-     * @protected
-     */
-
-  }, {
-    key: "_validErrors",
-    value: function _validErrors(data, json) {
-      var _this5 = this;
-
-      var errors = [],
-          allErrors = []; // errors
-
-      if (json.errors) {
-        // classes & error elements
-        Object.keys(json.errors).forEach(function (key) {
-          var value = json.errors[key]; // search overlappings in inputs
-
-          _this5._el.forEach(function (el) {
-            if (el.name == key) {
-              errors.push({
-                key: key,
-                value: value
-              });
-            }
-          });
-
-          allErrors.push({
-            key: key,
-            value: value
-          });
-        }); // show errors
-
-        this._errorClasses(errors, allErrors);
-
-        this._errorEl(errors, allErrors);
-      } // callback
-
-
-      this.lbt("failure", {
-        data: data,
-        errors: errors
-      });
-    }
-    /**
-     * @memberof Vevet.FormModule
-     * @typedef {object} Error
-     * @property {string} key - Input name.
-     * @property {string} value - Error message.
-     */
-
-    /**
-     * @description Set errors in the form.
-     * @protected
-     * @param {Array<Vevet.FormModule.Error>} [array] - Array of errors for existing inputs.
-     * @param {Array<Vevet.FormModule.Error>} [allErrors] - Array of all errors.
-     */
-    // eslint-disable-next-line no-unused-vars
-
-  }, {
-    key: "_errorClasses",
-    value: function _errorClasses() {
-      var _this6 = this;
-
-      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      var allErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
-      if (!this._prop.addErrorClass) {
-        return;
-      }
-
-      this._el.forEach(function (el) {
-        var error = false,
-            name = el.name,
-            parent = el.parentElement;
-        array.forEach(function (item) {
-          if (name == item.key) {
-            error = true;
-          }
-        }); // add classes
-
-        var inputClass = _this6._inputClass;
-
-        if (error) {
-          el.classList.add("error");
-
-          if (parent.classList.contains(inputClass)) {
-            parent.classList.add("".concat(inputClass, "_error"));
-          }
-        } else {
-          el.classList.remove("error");
-
-          if (parent.classList.contains(inputClass)) {
-            parent.classList.remove("".concat(inputClass, "_error"));
-          }
-        }
-      });
-    }
-    /**
-     * @description Show errors.
-     * @param {Array<object>} array 
-     * @param {Array<object>} allErrors 
-     * @protected
-     */
-
-  }, {
-    key: "_errorEl",
-    value: function _errorEl() {
-      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      var allErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
-      // elements
-      this._errors.forEach(function (el) {
-        var error = false,
-            name = el.getAttribute("for");
-        array.forEach(function (item) {
-          if (name == item.key) {
-            error = true;
-            el.innerHTML = item.value;
-          }
-        }); // add classes
-
-        if (error) {
-          el.classList.add("show");
-        } else {
-          el.classList.remove("show");
-          el.innerHTML = '';
-        }
-      }); // outer 
-
-
-      if (this._errorsOuter) {
-        if (allErrors.length > 0) {
-          var html = '';
-          allErrors.forEach(function (item) {
-            html += "<li>".concat(item.value, "</li>");
-          });
-          this._errorsOuter.innerHTML = "\n                    <ul>\n                        ".concat(html, "\n                    </ul>\n                ");
-
-          this._errorsOuter.classList.add("show");
-        } else {
-          this._errorsOuter.classList.remove("show");
-        }
-      }
-    }
-    /**
-     * @description Clear all inputs except for hidden.
-     */
-
-  }, {
-    key: "clear",
-    value: function clear() {
-      var _this7 = this;
-
-      this._el.forEach(function (el) {
-        if (el.type != 'hidden') {
-          el.value = ''; // reset classes
-
-          var parent = el.parentElement;
-
-          if (parent.classList.contains(_this7._inputClass)) {
-            parent.classList.remove("".concat(_this7._inputClass, "_filled"));
-            parent.classList.remove("".concat(_this7._inputClass, "_focus"));
-          }
-        }
-      });
-    }
-  }]);
-
-  return FormModule;
-}(_Module2.default);
-
-exports.default = FormModule;