@meve/ui/es/auto-complete/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Input from '../input';
import Popover from '../popover';
import Ripple from '../ripple';
import Scroller from '../scroller';
import { KeyboardActiveMixin } from '../utils/mixins/keyboardActive';
import { debounce, isEmpty, range } from '../utils/shared';
import { props } from './props';
import { createNamespace } from '../utils/create';
import { createChildrenMixin } from '../utils/mixins/relation';









import { createLockMixin } from '../context/lock';

var _createNamespace = createNamespace('auto-complete'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var AutoCompletePlugin = createComponent({
  mixins: [KeyboardActiveMixin, createLockMixin('locked'), createChildrenMixin('form', {
    parentKey: 'form',
    childrenKey: 'formComponents'
  })],
  props: props,
  directives: {
    Ripple: Ripple
  },
  data: function data() {
    return {
      enterOptions: false,
      forbidOpen: false,
      keyboardDisabled: false,
      scrollerHeight: 0,
      keyboardActiveIndex: 0,
      keyboardLastIndex: 0,
      locked: false
    };
  },
  watch: {
    options: {
      handler: function handler() {
        this.keyboardLastIndex = this.options.length ? this.options.length - 1 : 0;
        this.keyboardActiveIndex = range(this.keyboardActiveIndex, 0, this.keyboardLastIndex);
        this.resizeScroller();
      },
      immediate: true
    }
  },
  mounted: function mounted() {
    this.resizeScroller = debounce(this.resizeScroller);
  },
  methods: {
    // expose
    reset: function reset() {
      this.$refs.input.reset();
      this.resetValidation();
    },
    // expose
    validate: function validate() {
      this.$refs.input.validate();
    },
    // expose
    resetValidation: function resetValidation() {
      this.$refs.input.resetValidation();
    },
    resizeScroller: function resizeScroller() {
      var _this$$refs$popover;

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

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

      if (!this.validateTrigger.includes(trigger)) {
        return;
      }

      this.$nextTick(function () {
        _this.validate();
      });
    },
    // expose
    focus: function focus() {
      this.$refs.input.focus();
    },
    // expose
    blur: function blur() {
      this.$refs.input.blur();
    },
    // expose
    open: function open() {
      if (!this.options.length || this.forbidOpen || this.$refs.popover.show) {
        return;
      }

      this.$refs.popover.open();
      this.keyboardActiveIndex = 0;
      this.keyboardDisabled = false;
      this.resizeScroller();
      this.$refs.scroller.scrollToTop();
    },
    // expose
    close: function close() {
      var _this$$refs$popover2, _this$$refs$popover3;

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

      (_this$$refs$popover3 = this.$refs.popover) == null ? void 0 : _this$$refs$popover3.close();
      this.keyboardDisabled = true;
    },
    lockOnce: function lockOnce() {
      var _this2 = this;

      this.locked = true;
      setTimeout(function () {
        _this2.locked = false;
      });
    },
    // implement for KeyboardActiveMixin
    handleKeydownEnter: function handleKeydownEnter(keyboardActiveIndex) {
      if (!this.$refs.popover.show) {
        return;
      }

      this.lockOnce();
      var value = this.options[keyboardActiveIndex].value;
      this.$emit('input', value);
      this.$emit('select', value);
      this.nextTickValidateWithTrigger('onSelect');
      setTimeout(this.close);
    },
    // implement for KeyboardActiveMixin
    handleKeydownArrow: function handleKeydownArrow() {
      if (!this.$refs.popover.show) {
        return;
      }

      var optionTop = this.$refs["option-" + this.keyboardActiveIndex].offsetTop;
      var optionHeight = this.$refs["option-" + this.keyboardActiveIndex].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
    handleKeydownEscape: function handleKeydownEscape() {
      if (!this.$refs.popover.show) {
        return;
      }

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

      this.$emit('focus', event);

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

      isEmpty(this.value) ? this.close() : this.open();
    },
    handleBlur: function handleBlur(event) {
      this.$emit('blur', event);

      if (this.enterOptions) {
        return;
      }

      this.close();
    },
    handleOptionClick: function handleOptionClick(option) {
      var _this3 = this;

      this.$emit('input', option.value);
      this.$emit('select', option.value);
      this.nextTickValidateWithTrigger('onSelect');
      this.forbidOpen = true;
      this.close();
      setTimeout(function () {
        _this3.forbidOpen = false;
      });
    },
    handleInput: function handleInput(value) {
      this.$emit('input', value);
      isEmpty(value) ? this.close() : this.open();
    },
    handleChange: function handleChange(value) {
      this.$emit('change', value);
    },
    handleClear: function handleClear(value) {
      this.$emit('clear', value);
    },
    handleMouseenter: function handleMouseenter() {
      this.enterOptions = true;
    },
    handleMouseleave: function handleMouseleave() {
      this.enterOptions = false;
    },
    handleOptionMouseenter: function handleOptionMouseenter(index) {
      this.keyboardActiveIndex = index;
    },
    renderOptions: function renderOptions() {
      var _this$$refs$input,
          _this4 = this;

      var h = this.$createElement;
      return h("label", {
        "attrs": {
          "for": (_this$$refs$input = this.$refs.input) == null ? void 0 : _this$$refs$input.id
        },
        "class": [namespace('__options'), namespace("--" + this.size + "-options")],
        "on": _extends({}, {
          "mouseenter": function mouseenter($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            _this4.handleMouseenter.apply(_this4, [$event].concat(attrs));
          },
          "mouseleave": function mouseleave($event) {
            for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
              attrs[_key2 - 1] = arguments[_key2];
            }

            _this4.handleMouseleave.apply(_this4, [$event].concat(attrs));
          }
        })
      }, [h(Scroller, {
        "ref": "scroller",
        "attrs": {
          "height": 200
        }
      }, [this.options.map(function (option, index) {
        return h("div", {
          "ref": "option-" + index,
          "class": [namespace('__option'), namespace("--" + _this4.size + "-option"), index === _this4.keyboardActiveIndex ? namespace('--active') : null],
          "directives": [{
            name: "ripple",
            value: true
          }],
          "on": _extends({}, {
            "mouseenter": function mouseenter($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 _this4.handleOptionMouseenter(index);
              }).apply(void 0, [$event].concat(attrs));
            },
            "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];
              }

              (function (e) {
                return _this4.handleOptionClick(option, index, e);
              }).apply(void 0, [$event].concat(attrs));
            }
          })
        }, [option.label]);
      })])]);
    },
    renderInput: function renderInput() {
      var _this5 = this;

      var h = this.$createElement;
      return h(Input, {
        "ref": "input",
        "attrs": {
          "value": this.value,
          "label": this.label,
          "type": this.type,
          "textarea": this.textarea,
          "rows": this.rows,
          "maxlength": this.maxlength,
          "clearable": this.clearable,
          "resize": this.resize,
          "validateTrigger": this.validateTrigger,
          "rules": this.rules,
          "placeholder": this.placeholder,
          "size": this.size,
          "readonly": this.readonly,
          "disabled": this.disabled
        },
        "scopedSlots": {
          'prepend-icon': function prependIcon() {
            return _this5.slots('prepend-icon');
          },
          'append-icon': function appendIcon() {
            return _this5.slots('append-icon');
          }
        },
        "on": _extends({}, {
          "input": function input($event) {
            for (var _len5 = arguments.length, attrs = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
              attrs[_key5 - 1] = arguments[_key5];
            }

            _this5.handleInput.apply(_this5, [$event].concat(attrs));
          },
          "change": function change($event) {
            for (var _len6 = arguments.length, attrs = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
              attrs[_key6 - 1] = arguments[_key6];
            }

            _this5.handleChange.apply(_this5, [$event].concat(attrs));
          },
          "clear": function clear($event) {
            for (var _len7 = arguments.length, attrs = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
              attrs[_key7 - 1] = arguments[_key7];
            }

            _this5.handleClear.apply(_this5, [$event].concat(attrs));
          },
          "focus": function focus($event) {
            for (var _len8 = arguments.length, attrs = new Array(_len8 > 1 ? _len8 - 1 : 0), _key8 = 1; _key8 < _len8; _key8++) {
              attrs[_key8 - 1] = arguments[_key8];
            }

            _this5.handleFocus.apply(_this5, [$event].concat(attrs));
          },
          "blur": function blur($event) {
            for (var _len9 = arguments.length, attrs = new Array(_len9 > 1 ? _len9 - 1 : 0), _key9 = 1; _key9 < _len9; _key9++) {
              attrs[_key9 - 1] = arguments[_key9];
            }

            _this5.handleBlur.apply(_this5, [$event].concat(attrs));
          },
          "click": function click($event) {
            for (var _len10 = arguments.length, attrs = new Array(_len10 > 1 ? _len10 - 1 : 0), _key10 = 1; _key10 < _len10; _key10++) {
              attrs[_key10 - 1] = arguments[_key10];
            }

            _this5.handleClick.apply(_this5, [$event].concat(attrs));
          }
        })
      });
    }
  },
  render: function render() {
    var _this6 = this;

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

          (function (e) {
            return e.stopPropagation();
          }).apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h(Popover, {
      "class": namespace('__popover'),
      "attrs": {
        "auto-complete-cover": true,
        "trigger": "manual",
        "y": 6,
        "sameWidth": true,
        "defaultStyle": false
      },
      "ref": "popover",
      "scopedSlots": {
        trigger: this.renderInput
      },
      "on": _extends({}, {
        "open": function open($event) {
          for (var _len12 = arguments.length, attrs = new Array(_len12 > 1 ? _len12 - 1 : 0), _key12 = 1; _key12 < _len12; _key12++) {
            attrs[_key12 - 1] = arguments[_key12];
          }

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

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

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

          (function () {
            return _this6.$emit('closed');
          }).apply(void 0, [$event].concat(attrs));
        }
      })
    }, [this.renderOptions()])]);
  }
});
export var _AutoCompleteComponent = AutoCompletePlugin;
export default AutoCompletePlugin;