@meve/ui/es/select/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Icon from '../icon';
import FormItem from '../form-item';
import Popover from '../popover';
import Scroller from '../scroller';
import Tag from '../tag';
import { KeyboardActiveMixin } from '../utils/mixins/keyboardActive';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { createChildrenMixin, createParentMixin } from '../utils/mixins/relation';
import { isEmpty, removeItem, toggleItem } from '../utils/shared';
import { createLockMixin } from '../context/lock';







var selectId = 0;

var _createNamespace = createNamespace('select'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var selectSizeToTagSize = {
  normal: 'small',
  small: 'small',
  mini: 'mini'
};
var SelectPlugin = createComponent({
  mixins: [KeyboardActiveMixin, createLockMixin('locked'), createParentMixin('select', {
    childrenKey: 'options'
  }), createChildrenMixin('form', {
    parentKey: 'form',
    childrenKey: 'formComponents'
  })],
  props: props,
  data: function data() {
    return {
      id: "m-select-" + selectId++,
      isFocus: false,
      errorMessage: '',
      // KeyboardActiveMixin
      keyboardActiveIndex: 0,
      keyboardLastIndex: 0,
      keyboardDisabledIndexes: [],
      keyboardDisabled: false,
      locked: false
    };
  },
  watch: {
    options: function options() {
      var _this = this;

      this.keyboardDisabledIndexes = [];
      this.keyboardLastIndex = this.options.length ? this.options.length - 1 : 0;
      this.resetKeyboardActiveIndex();
      this.options.forEach(function (option) {
        option.disabled && _this.keyboardDisabledIndexes.push(option.index);
      });
      setTimeout(this.resizeScroller);
    }
  },
  computed: {
    inputLabel: function inputLabel() {
      if (this.multiple) {
        return '';
      }

      if (isEmpty(this.value)) {
        return '';
      }

      return this.findLabel(this.value);
    }
  },
  methods: {
    // expose
    reset: function reset() {
      this.$emit('input', this.multiple ? [] : undefined);
      this.resetValidation();
    },
    // expose
    validate: function validate() {
      this.$refs.formItem.validate();
    },
    // expose
    resetValidation: function resetValidation() {
      this.$refs.formItem.resetValidation();
    },
    // expose
    focus: function focus() {
      this.$emit('focus');
      this.open();
    },
    // expose
    blur: function blur() {
      this.$emit('blur');
      this.close();
    },
    // expose
    open: function open() {
      var _this$$refs$popover;

      var isAllDisabled = this.keyboardDisabledIndexes.length === this.options.length;

      if ((_this$$refs$popover = this.$refs.popover) != null && _this$$refs$popover.show || this.options.length === 0 || isAllDisabled) {
        return;
      }

      document.addEventListener('touchstart', this.blur);
      this.isFocus = true;
      this.$refs.popover.open();
      this.resetKeyboardActiveIndex();
      setTimeout(this.resizeScroller);
    },
    // expose
    close: function close() {
      var _this$$refs$popover2;

      if (!((_this$$refs$popover2 = this.$refs.popover) != null && _this$$refs$popover2.show)) {
        return;
      }

      this.isFocus = false;
      document.removeEventListener('touchstart', this.blur);
      this.$refs.popover.close();
    },
    resetKeyboardActiveIndex: function resetKeyboardActiveIndex() {
      this.keyboardActiveIndex = this.options.findIndex(function (option) {
        return !option.disabled;
      });
    },
    resizeScroller: function resizeScroller() {
      var _this$$refs$popover3;

      if (!((_this$$refs$popover3 = this.$refs.popover) != null && _this$$refs$popover3.show)) {
        return;
      }

      this.$refs.scroller.resize();
      this.$refs.scroller.scrollToTop();
    },
    nextTickValidateWithTrigger: function nextTickValidateWithTrigger(trigger) {
      var _this2 = this;

      this.$nextTick(function () {
        var _this2$$refs$formItem;

        (_this2$$refs$formItem = _this2.$refs.formItem) == null ? void 0 : _this2$$refs$formItem.validateWithTrigger(_this2.validateTrigger, trigger, _this2.rules, _this2.value);
      });
    },
    findOption: function findOption(index) {
      return this.options.find(function (option) {
        return option.index === index;
      });
    },
    lockOnce: function lockOnce() {
      var _this3 = this;

      this.locked = true;
      requestAnimationFrame(function () {
        _this3.locked = false;
      });
    },
    // implement for KeyboardActiveMixin
    handleKeydownArrow: function handleKeydownArrow() {
      var _this$options$find,
          _this4 = this;

      if (!this.$refs.popover.show) {
        return;
      }

      this.lockOnce();
      var optionElement = (_this$options$find = this.options.find(function (option) {
        return option.index === _this4.keyboardActiveIndex;
      })) == null ? void 0 : _this$options$find.$el;
      var optionTop = optionElement.offsetTop,
          optionHeight = optionElement.offsetHeight;
      var scrollTop = this.$refs.scroller.getScrollTop();
      var scrollerHeight = this.$refs.scroller.$el.offsetHeight;

      if (optionTop < scrollTop) {
        this.$refs.scroller.scrollTo(optionTop);
      }

      if (optionTop + optionHeight > scrollerHeight) {
        this.$refs.scroller.scrollTo(optionTop);
      }
    },
    // implement for KeyboardActiveMixin
    handleKeydownEnter: function handleKeydownEnter(keyboardActiveIndex) {
      if (!this.$refs.popover.show) {
        return;
      }

      this.onOptionSelect(this.findOption(keyboardActiveIndex));
    },
    // implement for KeyboardActiveMixin
    handleKeydownEscape: function handleKeydownEscape() {
      if (!this.$refs.popover.show) {
        return;
      }

      this.$emit('blur');
      this.close();
    },
    handleClick: function handleClick(event) {
      var _this$form, _this$form2;

      if ((_this$form = this.form) != null && _this$form.disabled || this.disabled) {
        return;
      }

      this.$emit('click', event);
      this.nextTickValidateWithTrigger('onClick');

      if ((_this$form2 = this.form) != null && _this$form2.readonly || this.readonly) {
        return;
      }

      this.$emit('focus');
      this.open();
    },
    handleErrorMessageChange: function handleErrorMessageChange(errorMessage) {
      this.errorMessage = errorMessage;
    },
    handleFocus: function handleFocus() {
      var _this$form3, _this$form4;

      if ((_this$form3 = this.form) != null && _this$form3.disabled || (_this$form4 = this.form) != null && _this$form4.readonly || this.disabled || this.readonly) {
        return;
      }

      this.$emit('focus');
      this.open();
    },
    handleClear: function handleClear(event) {
      var _this$form5, _this$form6;

      event.stopPropagation();

      if ((_this$form5 = this.form) != null && _this$form5.disabled || (_this$form6 = this.form) != null && _this$form6.readonly || this.disabled || this.readonly) {
        return;
      }

      this.$emit('input', this.multiple ? [] : undefined);
      this.$emit('clear', this.multiple ? [] : undefined);
      this.nextTickValidateWithTrigger('onClear');
    },
    handleClose: function handleClose(value) {
      var list = [].concat(this.value);
      removeItem(list, value);
      this.$emit('input', list);
      this.$emit('tag-close', list);
      this.nextTickValidateWithTrigger('onTagClose');
    },
    onOptionEnter: function onOptionEnter(option) {
      this.keyboardActiveIndex = option.index;
    },
    onOptionSelect: function onOptionSelect(option) {
      var _option$value;

      var value = (_option$value = option.value) != null ? _option$value : option.label;

      if (this.multiple) {
        var list = [].concat(this.value);
        toggleItem(list, value);
        this.$emit('input', list);
        this.$emit('select', list);
      } else {
        this.$emit('input', value);
        this.$emit('select', value);
        this.blur();
      }

      this.nextTickValidateWithTrigger('onSelect');
    },
    findLabel: function findLabel(value) {
      var _option;

      var option = this.options.find(function (option) {
        return option.value === value;
      });

      if (!option) {
        option = this.options.find(function (option) {
          return option.label === value;
        });
      }

      return (_option = option) == null ? void 0 : _option.label;
    },
    renderClearIcon: function renderClearIcon() {
      var _this5 = this;

      var h = this.$createElement;

      if (this.clearable) {
        return h(Icon, {
          "attrs": {
            "input-cover": true,
            "name": "close-circle"
          },
          "class": [namespace('__clear-icon'), isEmpty(this.value) ? null : namespace('--clear-icon-visible')],
          "on": _extends({}, {
            "click": function click($event) {
              for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                attrs[_key - 1] = arguments[_key];
              }

              _this5.handleClear.apply(_this5, [$event].concat(attrs));
            }
          })
        });
      }
    },
    renderPrependIcon: function renderPrependIcon() {
      if (this.hasSlots('prepend-icon')) {
        return this.slots('prepend-icon');
      }
    },
    renderAppendIcon: function renderAppendIcon() {
      if (this.hasSlots('append-icon')) {
        return this.slots('append-icon');
      }
    },
    renderInput: function renderInput() {
      var _this$form7,
          _this6 = this;

      var h = this.$createElement;
      return h("input", {
        "attrs": {
          "id": this.id,
          "autoComplete": "off",
          "type": this.type,
          "placeholder": this.placeholder,
          "disabled": ((_this$form7 = this.form) == null ? void 0 : _this$form7.disabled) || this.disabled,
          "readOnly": true
        },
        "class": namespace('__input'),
        "domProps": {
          "value": this.inputLabel
        },
        "on": _extends({}, {
          "focus": function focus($event) {
            for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
              attrs[_key2 - 1] = arguments[_key2];
            }

            _this6.handleFocus.apply(_this6, [$event].concat(attrs));
          }
        })
      });
    },
    renderArrowIcon: function renderArrowIcon() {
      var h = this.$createElement;
      return h(Icon, {
        "class": namespace('__arrow'),
        "attrs": {
          "select-cover": true,
          "name": "menu-down"
        }
      });
    },
    renderTags: function renderTags() {
      var _this7 = this,
          _this$form8;

      var h = this.$createElement;
      var tags = this.value.map(function (value) {
        var _this7$form, _this7$form2;

        return h(Tag, {
          "class": namespace('__tag'),
          "attrs": {
            "type": "primary",
            "size": selectSizeToTagSize[_this7.size],
            "closeable": true,
            "disabled": ((_this7$form = _this7.form) == null ? void 0 : _this7$form.disabled) || _this7.disabled,
            "readonly": ((_this7$form2 = _this7.form) == null ? void 0 : _this7$form2.readonly) || _this7.readonly,
            "select-cover": true
          },
          "on": _extends({}, {
            "close": function close($event) {
              for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
                attrs[_key3 - 1] = arguments[_key3];
              }

              (function () {
                return _this7.handleClose(value);
              }).apply(void 0, [$event].concat(attrs));
            }
          })
        }, [_this7.findLabel(value)]);
      });
      var placeholder = h("input", {
        "class": namespace('__placeholder'),
        "attrs": {
          "placeholder": this.placeholder,
          "disabled": ((_this$form8 = this.form) == null ? void 0 : _this$form8.disabled) || this.disabled,
          "readOnly": true
        }
      });
      return h("div", {
        "class": namespace('__tags'),
        "style": {
          paddingBottom: this.value.length ? undefined : 0
        }
      }, [this.value.length ? tags : placeholder]);
    },
    renderSelect: function renderSelect() {
      var _this$form9,
          _this$form10,
          _this8 = this;

      var h = this.$createElement;
      return h("div", {
        "class": [namespace('__select'), namespace("--" + this.size), (_this$form9 = this.form) != null && _this$form9.disabled || this.disabled ? null : namespace('--outline-hover'), (_this$form10 = this.form) != null && _this$form10.disabled || this.disabled ? namespace('--disabled') : null, this.isFocus ? namespace('--outline') : null, this.errorMessage ? namespace('--validation-error-border') : null],
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len4 = arguments.length, attrs = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
              attrs[_key4 - 1] = arguments[_key4];
            }

            _this8.handleClick.apply(_this8, [$event].concat(attrs));
          }
        })
      }, [this.renderPrependIcon(), this.multiple ? this.renderTags() : this.renderInput(), this.renderClearIcon(), this.renderAppendIcon(), this.renderArrowIcon()]);
    }
  },
  render: function render() {
    var _this9 = this;

    var h = arguments[0];
    var id = this.id;
    return h("div", {
      "class": [namespace(), 'm--box'],
      "on": _extends({}, {
        "touchstart": function touchstart($event) {
          for (var _len5 = arguments.length, attrs = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
            attrs[_key5 - 1] = arguments[_key5];
          }

          (function (e) {
            return e.stopPropagation();
          }).apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h(FormItem, {
      "ref": "formItem",
      "attrs": {
        "label": this.label,
        "value": this.value,
        "rules": this.rules
      },
      "on": _extends({}, {
        'error-message-change': this.handleErrorMessageChange
      })
    }, [h(Popover, {
      "class": namespace('__popover'),
      "attrs": {
        "select-cover": true,
        "trigger": "manual",
        "y": 6,
        "sameWidth": true,
        "defaultStyle": false
      },
      "ref": "popover",
      "scopedSlots": {
        trigger: this.renderSelect
      },
      "on": _extends({}, {
        "open": function open($event) {
          for (var _len6 = arguments.length, attrs = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
            attrs[_key6 - 1] = arguments[_key6];
          }

          (function () {
            return _this9.$emit('open');
          }).apply(void 0, [$event].concat(attrs));
        },
        "opened": function opened($event) {
          for (var _len7 = arguments.length, attrs = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
            attrs[_key7 - 1] = arguments[_key7];
          }

          (function () {
            return _this9.$emit('opened');
          }).apply(void 0, [$event].concat(attrs));
        },
        "close": function close($event) {
          for (var _len8 = arguments.length, attrs = new Array(_len8 > 1 ? _len8 - 1 : 0), _key8 = 1; _key8 < _len8; _key8++) {
            attrs[_key8 - 1] = arguments[_key8];
          }

          (function () {
            return _this9.$emit('close');
          }).apply(void 0, [$event].concat(attrs));
        },
        "closed": function closed($event) {
          for (var _len9 = arguments.length, attrs = new Array(_len9 > 1 ? _len9 - 1 : 0), _key9 = 1; _key9 < _len9; _key9++) {
            attrs[_key9 - 1] = arguments[_key9];
          }

          (function () {
            return _this9.$emit('closed');
          }).apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h("label", {
      "attrs": {
        "for": id
      },
      "class": [namespace('__options'), namespace("--" + this.size + "-options")],
      "on": _extends({}, {
        "touchstart": function touchstart($event) {
          for (var _len10 = arguments.length, attrs = new Array(_len10 > 1 ? _len10 - 1 : 0), _key10 = 1; _key10 < _len10; _key10++) {
            attrs[_key10 - 1] = arguments[_key10];
          }

          (function (e) {
            return e.stopPropagation();
          }).apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h(Scroller, {
      "ref": "scroller",
      "attrs": {
        "height": 200
      }
    }, [this.slots()])])])])]);
  }
});
export var _SelectComponent = SelectPlugin;
export default SelectPlugin;