vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/SelectModule.js

@@ -1,860 +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"));
-
-var _domChildOf = _interopRequireDefault(require("./domChildOf"));
-
-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 dom = require('dom-create-element');
-
-var selectEl = require('select-el');
-/**
- * @classdesc A class for cretating a custom select element. <br>
- * Available targets:
- *  <ul>
- *      <li>open</li>
- *      <li>opened</li>
- *      <li>close</li>
- *      <li>closed</li>
- *      <li>change</li>
- *  </ul>
- * Each callback receives {@linkcode Vevet.SelectModule.Callback} as an argument.
- * <br><br> <b>import {SelectModule} from 'vevet';</b>
- * 
- * @vevetModuleCallback { Vevet.SelectModule : open : Vevet.SelectModule.Callback}
- * @vevetModuleCallback { Vevet.SelectModule : opened : Vevet.SelectModule.Callback}
- * @vevetModuleCallback { Vevet.SelectModule : close : Vevet.SelectModule.Callback}
- * @vevetModuleCallback { Vevet.SelectModule : closed : Vevet.SelectModule.Callback}
- * @vevetModuleCallback { Vevet.SelectModule : change : Vevet.SelectModule.Callback}
- * 
- * @class
- * @memberof Vevet
- * @augments Vevet.Module
- */
-
-
-var SelectModule = /*#__PURE__*/function (_Module) {
-  _inherits(SelectModule, _Module);
-
-  var _super = _createSuper(SelectModule);
-
-  /**
-   * @memberof Vevet.SelectModule
-   * @typedef {object} Properties
-   * @augments Vevet.Module.Properties
-   * 
-   * @property {string|HTMLSelectElement} [selector=vevet-select] - *** Selector of a "select" element.
-   * @property {boolean} [showSelected=true] - Set true if you want to display the selected option in the selector.
-   * @property {boolean} [changePlaceholder=true] - Defines if you need to change the text in the head of the selector.
-   * @property {number} [duration=250] - Duration of animation when showing and hiding.
-   * 
-   * @property {object} [search] - Search settings.
-   * @property {boolean} [search.on=false] - Enable search.
-   * @property {string} [search.placeholder=Type to search] - *** Placeholder of the search input.
-   * 
-   * @property {object} [close] - When to close the selectbox.
-   * @property {boolean} [close.change=true] - Close on change.
-   * @property {boolean} [close.out=true] - Close on click on any element except for the selector.
-   */
-
-  /**
-   * @alias Vevet.SelectModule
-   * 
-   * @param {Vevet.SelectModule.Properties} [data]
-   */
-  function SelectModule(data) {
-    _classCallCheck(this, SelectModule);
-
-    return _super.call(this, data);
-  }
-
-  _createClass(SelectModule, [{
-    key: "prefix",
-    get: function get() {
-      return "".concat(this._v.prefix, "select");
-    }
-    /**
-     * @readonly
-     * @type {Vevet.SelectModule.Properties}
-     */
-
-  }, {
-    key: "defaultProp",
-    get: function get() {
-      return (0, _merge.default)(_get(_getPrototypeOf(SelectModule.prototype), "defaultProp", this), {
-        selector: ".".concat(this._prefix),
-        showSelected: true,
-        changePlaceholder: true,
-        duration: 250,
-        search: {
-          on: false,
-          placeholder: 'Type to search'
-        },
-        close: {
-          change: true,
-          out: true
-        }
-      });
-    }
-    /**
-     * @member Vevet.SelectModule#prop
-     * @memberof Vevet.SelectModule
-     * @readonly
-     * @type {Vevet.SelectModule.Properties}
-     */
-
-    /**
-     * @member Vevet.SelectModule#_prop
-     * @memberof Vevet.SelectModule
-     * @protected
-     * @type {Vevet.SelectModule.Properties}
-     */
-
-    /**
-     * @function Vevet.SelectModule#changeProp
-     * @memberof Vevet.SelectModule
-     * @param {Vevet.SelectModule.Properties} [prop]
-     */
-
-    /**
-     * @description Select element.
-     * @readonly
-     * @type {HTMLSelectElement}
-     */
-
-  }, {
-    key: "select",
-    get: function get() {
-      return this._select;
-    }
-    /**
-     * @description Options.
-     * @readonly
-     * @type {Array<HTMLOptionElement>}
-     */
-
-  }, {
-    key: "options",
-    get: function get() {
-      return this._options;
-    }
-    /**
-     * @description If the element is opened.
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "opened",
-    get: function get() {
-      return this._opened;
-    }
-    /**
-     * @description If the select element is multiple.
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "multiple",
-    get: function get() {
-      return this._multiple;
-    }
-    /**
-     * @description If the animation is in process.
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "animating",
-    get: function get() {
-      return this._animating;
-    }
-    /**
-     * @description The order number/numbers (for multiple) of options or false if none are selected.
-     * @readonly
-     * @type {number|Array<number>|false}
-     */
-
-  }, {
-    key: "active",
-    get: function get() {
-      if (this._actives.length > 1) {
-        return this._actives;
-      } else {
-        if (this._actives.length > 0) {
-          return this._actives[0];
-        } else {
-          return false;
-        }
-      }
-    }
-    /**
-     * @description Returns the value/values (for multiple) of the select or false if none are selected.
-     * @readonly
-     * @type {string|Array<string>|false}
-     */
-
-  }, {
-    key: "value",
-    get: function get() {
-      var values = this._getValues();
-
-      if (values.length > 1) {
-        return values;
-      } else {
-        if (values.length > 0) {
-          return values[0];
-        } else {
-          return false;
-        }
-      }
-    }
-    /**
-     * @memberof Vevet.SelectModule
-     * @typedef {object} Callback
-     * @property {number|Array<number>|false} active - The order number/numbers (for multiple) of options or false if none are selected.
-     * @property {string|Array<string>|false} value - Returns the value/values (for multiple) of the select or false if none are selected.
-     * @property {Array<HTMLOptionElement>} [options] -  Options.
-     * @property {HTMLSelectElement} select - Select element.
-     * @property {HTMLElement} outer - Outer element.
-     */
-
-    /**
-     * @description Get callback data.
-     * @returns {Vevet.SelectModule.Callback} Returns callback data.
-     */
-
-  }, {
-    key: "_callbackData",
-    value: function _callbackData() {
-      var obj = {
-        active: this.active,
-        value: this.value,
-        options: this._options,
-        select: this._select,
-        outer: this._outer
-      };
-      return obj;
-    } // Extra constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      _get(_getPrototypeOf(SelectModule.prototype), "_extra", this).call(this);
-      /**
-       * @description If multiple.
-       * @protected
-       * @member {boolean}
-       */
-
-
-      this._multiple = false;
-      /**
-       * @description If opened.
-       * @protected
-       * @member {boolean}
-       */
-
-      this._opened = false;
-      /**
-       * @description If animating.
-       * @protected
-       * @member {boolean}
-       */
-
-      this._animating = false;
-      /**
-       * @description Active options numbers.
-       * @protected
-       * @member {Array<number>}
-       */
-
-      this._actives = [];
-      /**
-       * @description List elements.
-       * @protected
-       * @member {HTMLLIElement}
-       */
-
-      this._li = []; // get & create elements
-
-      this._elementsGet();
-
-      this._elementsCreate(); // set classes
-
-
-      this._setClasses();
-    } // When properties are changed
-
-  }, {
-    key: "_changeProp",
-    value: function _changeProp(prop) {
-      _get(_getPrototypeOf(SelectModule.prototype), "_changeProp", this).call(this, prop);
-
-      this._setClasses();
-    }
-    /**
-     * @description Set classes.
-     * @protected
-     */
-
-  }, {
-    key: "_setClasses",
-    value: function _setClasses() {
-      var prop = this._prop,
-          prefix = this._prefix,
-          classNameSearch = "".concat(prefix, "__search_hide"),
-          classNameValues = "".concat(prefix, "__values_hide-active"); // search
-
-      if (!prop.search.on) {
-        this._search.classList.add(classNameSearch);
-      } else {
-        this._search.classList.remove(classNameSearch);
-      } // selected
-
-
-      if (!prop.showSelected) {
-        this._values.classList.add(classNameValues);
-      } else {
-        this._values.classList.remove(classNameValues);
-      }
-    }
-    /**
-     * @description Get elements.
-     * @protected
-     */
-
-  }, {
-    key: "_elementsGet",
-    value: function _elementsGet() {
-      /**
-       * @description Select element.
-       * @protected
-       * @member {HTMLSelectElement}
-       */
-      this._select = selectEl.one(this._prop.selector);
-      this._select.style.display = 'none'; // multiple
-
-      if (this._select.multiple) {
-        this._multiple = true;
-      }
-      /**
-       * @description Options.
-       * @protected
-       * @member {Array<HTMLOptionElement>}
-       */
-
-
-      this._options = this._select.querySelectorAll("option");
-      /**
-       * @description Parent element of the select element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-      this._parent = this._select.parentElement;
-    }
-    /**
-     * @description Create elements.
-     * @protected
-     */
-
-  }, {
-    key: "_elementsCreate",
-    value: function _elementsCreate() {
-      // get prefix
-      var prefix = this._prefix,
-          domSelector = 'div';
-      /**
-       * @description Outer element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-      this._outer = dom({
-        selector: domSelector,
-        styles: "".concat(prefix)
-      });
-
-      this._parent.insertBefore(this._outer, this._select);
-      /**
-       * @description Placeholder outer element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-
-      this._placeholder = dom({
-        selector: domSelector,
-        styles: "".concat(prefix, "__placeholder")
-      });
-
-      this._outer.appendChild(this._placeholder);
-      /**
-       * @description Container element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-
-      this._container = dom({
-        selector: domSelector,
-        styles: "".concat(prefix, "__container")
-      });
-
-      this._outer.appendChild(this._container);
-      /**
-       * @description Content element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-
-      this._content = dom({
-        selector: domSelector,
-        styles: "".concat(prefix, "__content")
-      });
-
-      this._container.appendChild(this._content);
-      /**
-       * @description Search outer element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-
-      this._search = dom({
-        selector: domSelector,
-        styles: "".concat(prefix, "__search")
-      });
-
-      this._content.appendChild(this._search);
-      /**
-       * @description Search input element.
-       * @protected
-       * @member {HTMLInputElement}
-       */
-
-
-      this._input = dom({
-        selector: 'input',
-        attr: {
-          type: "text",
-          placeholder: this._prop.search.placeholder
-        },
-        styles: "".concat(prefix, "__input")
-      });
-
-      this._search.appendChild(this._input);
-      /**
-       * @description UL element.
-       * @protected
-       * @member {HTMLUListElement}
-       */
-
-
-      this._values = dom({
-        selector: 'ul',
-        styles: "".concat(prefix, "__values")
-      });
-
-      this._content.appendChild(this._values); // li
-
-
-      for (var i = 0; i < this._options.length; i++) {
-        // get option
-        var option = this._options[i],
-            text = option.innerHTML; // create li
-
-        var li = dom({
-          selector: 'li',
-          styles: "".concat(prefix, "__value")
-        });
-        li.innerHTML = text; // if selected
-
-        if (option.selected) {
-          li.classList.add("".concat(prefix, "__value_active"));
-
-          this._actives.push(i);
-        } // push to stack
-
-
-        this._li.push(li);
-
-        this._values.appendChild(li);
-      } // change actives
-
-
-      if (this._actives.length === 0 & this._options.length > 0) {
-        this._options[0].selected = true;
-        this._actives = [0];
-      }
-
-      this._change(false);
-    } // Set events
-
-  }, {
-    key: "_setEvents",
-    value: function _setEvents() {
-      var _this = this;
-
-      // toggle on placeholder
-      this._placeholder.addEventListener("click", function () {
-        _this.toggle();
-      }); // change on li click
-
-
-      var _loop = function _loop(i) {
-        _this._li[i].addEventListener("click", function () {
-          _this._changeValue(i);
-        });
-      };
-
-      for (var i = 0; i < this._li.length; i++) {
-        _loop(i);
-      } // hide
-
-
-      this.listener(window, 'click', this._windowClick.bind(this)); // change select
-
-      this.listener(this._select, 'change', this._changeSelect.bind(this)); // search
-
-      this._input.addEventListener("keyup", function () {
-        _this._searchKeyup();
-      });
-    }
-    /**
-     * @description Outer click on window.
-     * @param {object} e
-     * @protected
-     */
-
-  }, {
-    key: "_windowClick",
-    value: function _windowClick(e) {
-      if (!(0, _domChildOf.default)(e.target, this._outer) & this._opened & this._prop.close.out) {
-        this.close();
-      }
-    }
-    /**
-     * @description Key-up in search.
-     * @protected
-     */
-
-  }, {
-    key: "_searchKeyup",
-    value: function _searchKeyup() {
-      // check if search is enabled
-      if (!this._prop.search.on) {
-        return;
-      }
-
-      var className = "".concat(this._prefix, "__value_hide"); // get search value
-
-      var value = this._input.value; // do searching
-
-      if (value.length === 0) {
-        this._li.forEach(function (el) {
-          el.classList.remove(className);
-        });
-      } else {
-        this._li.forEach(function (el) {
-          // get inner text & compare
-          var text = el.innerText.toLowerCase();
-
-          if (text.includes(value.toLowerCase())) {
-            el.classList.remove(className);
-          } else {
-            el.classList.add(className);
-          }
-        });
-      }
-    }
-    /**
-     * @description Reset searching.
-     * @protected
-     */
-
-  }, {
-    key: "_searchReset",
-    value: function _searchReset() {
-      this._input.value = '';
-
-      this._searchKeyup();
-    }
-    /**
-     * @description Get values.
-     * @protected
-     */
-
-  }, {
-    key: "_getValues",
-    value: function _getValues() {
-      var values = [];
-
-      for (var i = 0; i < this._options.length; i++) {
-        if (this._actives.includes(i)) {
-          values.push(this._options[i].value);
-        }
-      }
-
-      return values;
-    }
-    /**
-     * @description Get texts.
-     * @protected
-     */
-
-  }, {
-    key: "_getTexts",
-    value: function _getTexts() {
-      var texts = [];
-
-      for (var i = 0; i < this._options.length; i++) {
-        if (this._actives.includes(i)) {
-          texts.push(this._options[i].innerText);
-        }
-      }
-
-      return texts;
-    }
-    /**
-     * @description Change values.
-     * @protected
-     * @param {boolean} [event=true] - Defines if you need to launch callbacks.
-     */
-
-  }, {
-    key: "_change",
-    value: function _change() {
-      var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var prefix = this._prefix,
-          className = "".concat(prefix, "__value_active"); // change placeholder
-
-      if (this._prop.changePlaceholder) {
-        this._placeholder.innerHTML = "<span>".concat(this._getTexts().join(", "), "</span> <div class=\"").concat(prefix, "__arrow\"></div>");
-      } // change value classes
-
-
-      for (var i = 0; i < this._li.length; i++) {
-        var li = this._li[i];
-
-        if (this._actives.includes(i)) {
-          li.classList.add(className);
-        } else {
-          li.classList.remove(className);
-        }
-      }
-
-      if (event) {
-        this.lbt("change", this._callbackData());
-      }
-    }
-    /**
-     * @description Change on value click.
-     * @protected
-     * @param {number} num - The order number of a value li.
-     */
-
-  }, {
-    key: "_changeValue",
-    value: function _changeValue(num) {
-      // get option
-      var option = this._options[num]; // set or reset
-
-      if (this._multiple) {
-        if (option.selected) {
-          option.selected = false;
-        } else {
-          option.selected = true;
-        }
-      } else {
-        option.selected = true;
-      } // change select
-
-
-      this._select.dispatchEvent(new Event('change')); // close
-
-
-      if (this._prop.close.change) {
-        this.close();
-      }
-    }
-    /**
-     * @description Change on select change.
-     * @protected
-     */
-
-  }, {
-    key: "_changeSelect",
-    value: function _changeSelect() {
-      // get current value
-      var actives = [],
-          i = 0;
-
-      this._options.forEach(function (el) {
-        if (el.selected) {
-          actives.push(i);
-        }
-
-        i++;
-      }); // change vars
-
-
-      this._actives = actives; // change
-
-      this._change();
-    }
-    /**
-     * @description Show/Hide the selectbox.
-     * @returns {boolean} Returns true if success.
-     */
-
-  }, {
-    key: "toggle",
-    value: function toggle() {
-      if (this._animating) {
-        return false;
-      }
-
-      if (this._opened) {
-        this.close();
-      } else {
-        this.open();
-      }
-
-      return true;
-    }
-    /**
-     * @description Open the select box.
-     * @returns {boolean} Returns true if success.
-     */
-
-  }, {
-    key: "open",
-    value: function open() {
-      var _this2 = this;
-
-      if (this._opened || this._animating) {
-        return false;
-      }
-
-      var prefix = this._prefix; // reset search
-
-      this._searchReset(); // change vars
-
-
-      this._opened = true;
-      this._animating = true; // show select
-
-      this._outer.classList.add("".concat(prefix, "_opened"));
-
-      this._container.classList.add("".concat(prefix, "__container_opened"));
-
-      setTimeout(function () {
-        _this2._outer.classList.add("".concat(prefix, "_animate"));
-
-        _this2._container.classList.add("".concat(prefix, "__container_animate"));
-
-        _this2.lbt("open", _this2._callbackData());
-
-        setTimeout(function () {
-          _this2._animating = false;
-
-          _this2.lbt("opened", _this2._callbackData());
-        }, _this2._prop.duration);
-      }, 15);
-      return true;
-    }
-    /**
-     * @description Close the select box.
-     * @returns {boolean} Returns true if success.
-     */
-
-  }, {
-    key: "close",
-    value: function close() {
-      var _this3 = this;
-
-      if (!this._opened || this._animating) {
-        return false;
-      } // change vars
-
-
-      this._opened = false;
-      this._animating = true;
-      var prefix = this._prefix; // hide select
-
-      this._outer.classList.remove("".concat(prefix, "_animate"));
-
-      this._container.classList.remove("".concat(prefix, "__container_animate"));
-
-      this.lbt("close", this._callbackData());
-      setTimeout(function () {
-        _this3._outer.classList.remove("".concat(prefix, "_opened"));
-
-        _this3._container.classList.remove("".concat(prefix, "__container_opened"));
-
-        _this3._animating = false;
-
-        _this3.lbt("closed", _this3._callbackData());
-      }, this._prop.duration);
-      return true;
-    }
-    /**
-     * @description Destroy the select.
-     */
-
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      _get(_getPrototypeOf(SelectModule.prototype), "destroy", this).call(this); // remove element
-
-
-      this._outer.remove(); // display select
-
-
-      this._select.style.display = '';
-    }
-  }]);
-
-  return SelectModule;
-}(_Module2.default);
-
-exports.default = SelectModule;