buefy 0.9.26 → 0.9.28

package/dist/components/autocomplete/index.js

@@ -0,0 +1,1620 @@
+/*! Buefy v0.9.28 | MIT License | github.com/buefy/buefy */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Autocomplete = {}));
+})(this, (function (exports) { 'use strict';
+
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+        _defineProperty(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r || "default");
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : String(i);
+  }
+  function _typeof(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+  function _toArray(arr) {
+    return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+  }
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+    return arr2;
+  }
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  function _createForOfIteratorHelper(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (!it) {
+      if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+        if (it) o = it;
+        var i = 0;
+        var F = function () {};
+        return {
+          s: F,
+          n: function () {
+            if (i >= o.length) return {
+              done: true
+            };
+            return {
+              done: false,
+              value: o[i++]
+            };
+          },
+          e: function (e) {
+            throw e;
+          },
+          f: F
+        };
+      }
+      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    var normalCompletion = true,
+      didErr = false,
+      err;
+    return {
+      s: function () {
+        it = it.call(o);
+      },
+      n: function () {
+        var step = it.next();
+        normalCompletion = step.done;
+        return step;
+      },
+      e: function (e) {
+        didErr = true;
+        err = e;
+      },
+      f: function () {
+        try {
+          if (!normalCompletion && it.return != null) it.return();
+        } finally {
+          if (didErr) throw err;
+        }
+      }
+    };
+  }
+
+  /**
+   * Get value of an object property/path even if it's nested
+   */
+  function getValueByPath(obj, path) {
+    return path.split('.').reduce(function (o, i) {
+      return o ? o[i] : null;
+    }, obj);
+  }
+
+  /**
+   * Merge function to replace Object.assign with deep merging possibility
+   */
+  var isObject = function isObject(item) {
+    return _typeof(item) === 'object' && !Array.isArray(item);
+  };
+  var mergeFn = function mergeFn(target, source) {
+    var deep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (deep || !Object.assign) {
+      var isDeep = function isDeep(prop) {
+        return isObject(source[prop]) && target !== null && target.hasOwnProperty(prop) && isObject(target[prop]);
+      };
+      var replaced = Object.getOwnPropertyNames(source).map(function (prop) {
+        return _defineProperty({}, prop, isDeep(prop) ? mergeFn(target[prop], source[prop], deep) : source[prop]);
+      }).reduce(function (a, b) {
+        return _objectSpread2(_objectSpread2({}, a), b);
+      }, {});
+      return _objectSpread2(_objectSpread2({}, target), replaced);
+    } else {
+      return Object.assign(target, source);
+    }
+  };
+  var merge = mergeFn;
+  function removeElement(el) {
+    if (typeof el.remove !== 'undefined') {
+      el.remove();
+    } else if (typeof el.parentNode !== 'undefined' && el.parentNode !== null) {
+      el.parentNode.removeChild(el);
+    }
+  }
+  function createAbsoluteElement(el) {
+    var root = document.createElement('div');
+    root.style.position = 'absolute';
+    root.style.left = '0px';
+    root.style.top = '0px';
+    root.style.width = '100%';
+    var wrapper = document.createElement('div');
+    root.appendChild(wrapper);
+    wrapper.appendChild(el);
+    document.body.appendChild(root);
+    return root;
+  }
+  function isVueComponent(c) {
+    return c && c._isVue;
+  }
+  function toCssWidth(width) {
+    return width === undefined ? null : isNaN(width) ? width : width + 'px';
+  }
+  function isCustomElement(vm) {
+    return 'shadowRoot' in vm.$root.$options;
+  }
+
+  var config = {
+    defaultContainerElement: null,
+    defaultIconPack: 'mdi',
+    defaultIconComponent: null,
+    defaultIconPrev: 'chevron-left',
+    defaultIconNext: 'chevron-right',
+    defaultLocale: undefined,
+    defaultDialogConfirmText: null,
+    defaultDialogCancelText: null,
+    defaultSnackbarDuration: 3500,
+    defaultSnackbarPosition: null,
+    defaultToastDuration: 2000,
+    defaultToastPosition: null,
+    defaultNotificationDuration: 2000,
+    defaultNotificationPosition: null,
+    defaultTooltipType: 'is-primary',
+    defaultTooltipDelay: null,
+    defaultTooltipCloseDelay: null,
+    defaultSidebarDelay: null,
+    defaultInputAutocomplete: 'on',
+    defaultDateFormatter: null,
+    defaultDateParser: null,
+    defaultDateCreator: null,
+    defaultTimeCreator: null,
+    defaultDayNames: null,
+    defaultMonthNames: null,
+    defaultFirstDayOfWeek: null,
+    defaultUnselectableDaysOfWeek: null,
+    defaultTimeFormatter: null,
+    defaultTimeParser: null,
+    defaultModalCanCancel: ['escape', 'x', 'outside', 'button'],
+    defaultModalScroll: null,
+    defaultDatepickerMobileNative: true,
+    defaultTimepickerMobileNative: true,
+    defaultTimepickerMobileModal: true,
+    defaultNoticeQueue: true,
+    defaultInputHasCounter: true,
+    defaultTaginputHasCounter: true,
+    defaultUseHtml5Validation: true,
+    defaultDropdownMobileModal: true,
+    defaultFieldLabelPosition: null,
+    defaultDatepickerYearsRange: [-100, 10],
+    defaultDatepickerNearbyMonthDays: true,
+    defaultDatepickerNearbySelectableMonthDays: false,
+    defaultDatepickerShowWeekNumber: false,
+    defaultDatepickerWeekNumberClickable: false,
+    defaultDatepickerMobileModal: true,
+    defaultTrapFocus: true,
+    defaultAutoFocus: true,
+    defaultButtonRounded: false,
+    defaultSwitchRounded: true,
+    defaultCarouselInterval: 3500,
+    defaultTabsExpanded: false,
+    defaultTabsAnimated: true,
+    defaultTabsType: null,
+    defaultStatusIcon: true,
+    defaultProgrammaticPromise: false,
+    defaultLinkTags: ['a', 'button', 'input', 'router-link', 'nuxt-link', 'n-link', 'RouterLink', 'NuxtLink', 'NLink'],
+    defaultImageWebpFallback: null,
+    defaultImageLazy: true,
+    defaultImageResponsive: true,
+    defaultImageRatio: null,
+    defaultImageSrcsetFormatter: null,
+    defaultBreadcrumbTag: 'a',
+    defaultBreadcrumbAlign: 'is-left',
+    defaultBreadcrumbSeparator: '',
+    defaultBreadcrumbSize: 'is-medium',
+    customIconPacks: null
+  };
+
+  var FormElementMixin = {
+    props: {
+      size: String,
+      expanded: Boolean,
+      loading: Boolean,
+      rounded: Boolean,
+      icon: String,
+      iconPack: String,
+      // Native options to use in HTML5 validation
+      autocomplete: String,
+      maxlength: [Number, String],
+      useHtml5Validation: {
+        type: Boolean,
+        default: function _default() {
+          return config.defaultUseHtml5Validation;
+        }
+      },
+      validationMessage: String,
+      locale: {
+        type: [String, Array],
+        default: function _default() {
+          return config.defaultLocale;
+        }
+      },
+      statusIcon: {
+        type: Boolean,
+        default: function _default() {
+          return config.defaultStatusIcon;
+        }
+      }
+    },
+    data: function data() {
+      return {
+        isValid: true,
+        isFocused: false,
+        newIconPack: this.iconPack || config.defaultIconPack
+      };
+    },
+    computed: {
+      /**
+       * Find parent Field, max 3 levels deep.
+       */
+      parentField: function parentField() {
+        var parent = this.$parent;
+        for (var i = 0; i < 3; i++) {
+          if (parent && !parent.$data._isField) {
+            parent = parent.$parent;
+          }
+        }
+        return parent;
+      },
+      /**
+       * Get the type prop from parent if it's a Field.
+       */
+      statusType: function statusType() {
+        var _ref = this.parentField || {},
+          newType = _ref.newType;
+        if (!newType) return;
+        if (typeof newType === 'string') {
+          return newType;
+        } else {
+          for (var key in newType) {
+            if (newType[key]) {
+              return key;
+            }
+          }
+        }
+      },
+      /**
+       * Get the message prop from parent if it's a Field.
+       */
+      statusMessage: function statusMessage() {
+        if (!this.parentField) return;
+        return this.parentField.newMessage || this.parentField.$slots.message;
+      },
+      /**
+       * Fix icon size for inputs, large was too big
+       */
+      iconSize: function iconSize() {
+        switch (this.size) {
+          case 'is-small':
+            return this.size;
+          case 'is-medium':
+            return;
+          case 'is-large':
+            return this.newIconPack === 'mdi' ? 'is-medium' : '';
+        }
+      }
+    },
+    methods: {
+      /**
+       * Focus method that work dynamically depending on the component.
+       */
+      focus: function focus() {
+        var el = this.getElement();
+        if (el === undefined) return;
+        this.$nextTick(function () {
+          if (el) el.focus();
+        });
+      },
+      onBlur: function onBlur($event) {
+        this.isFocused = false;
+        this.$emit('blur', $event);
+        this.checkHtml5Validity();
+      },
+      onFocus: function onFocus($event) {
+        this.isFocused = true;
+        this.$emit('focus', $event);
+      },
+      getElement: function getElement() {
+        var el = this.$refs[this.$data._elementRef];
+        while (isVueComponent(el)) {
+          el = el.$refs[el.$data._elementRef];
+        }
+        return el;
+      },
+      setInvalid: function setInvalid() {
+        var type = 'is-danger';
+        var message = this.validationMessage || this.getElement().validationMessage;
+        this.setValidity(type, message);
+      },
+      setValidity: function setValidity(type, message) {
+        var _this = this;
+        this.$nextTick(function () {
+          if (_this.parentField) {
+            // Set type only if not defined
+            if (!_this.parentField.type) {
+              _this.parentField.newType = type;
+            }
+            // Set message only if not defined
+            if (!_this.parentField.message) {
+              _this.parentField.newMessage = message;
+            }
+          }
+        });
+      },
+      /**
+       * Check HTML5 validation, set isValid property.
+       * If validation fail, send 'is-danger' type,
+       * and error message to parent if it's a Field.
+       */
+      checkHtml5Validity: function checkHtml5Validity() {
+        if (!this.useHtml5Validation) return;
+        var el = this.getElement();
+        if (el === undefined) return;
+        if (!el.checkValidity()) {
+          this.setInvalid();
+          this.isValid = false;
+        } else {
+          this.setValidity(null, null);
+          this.isValid = true;
+        }
+        return this.isValid;
+      }
+    }
+  };
+
+  var mdiIcons = {
+    sizes: {
+      'default': 'mdi-24px',
+      'is-small': null,
+      'is-medium': 'mdi-36px',
+      'is-large': 'mdi-48px'
+    },
+    iconPrefix: 'mdi-'
+  };
+  var faIcons = function faIcons() {
+    var faIconPrefix = config && config.defaultIconComponent ? '' : 'fa-';
+    return {
+      sizes: {
+        'default': null,
+        'is-small': null,
+        'is-medium': faIconPrefix + 'lg',
+        'is-large': faIconPrefix + '2x'
+      },
+      iconPrefix: faIconPrefix,
+      internalIcons: {
+        'information': 'info-circle',
+        'alert': 'exclamation-triangle',
+        'alert-circle': 'exclamation-circle',
+        'chevron-right': 'angle-right',
+        'chevron-left': 'angle-left',
+        'chevron-down': 'angle-down',
+        'eye-off': 'eye-slash',
+        'menu-down': 'caret-down',
+        'menu-up': 'caret-up',
+        'close-circle': 'times-circle'
+      }
+    };
+  };
+  var getIcons = function getIcons() {
+    var icons = {
+      mdi: mdiIcons,
+      fa: faIcons(),
+      fas: faIcons(),
+      far: faIcons(),
+      fad: faIcons(),
+      fab: faIcons(),
+      fal: faIcons(),
+      'fa-solid': faIcons(),
+      'fa-regular': faIcons(),
+      'fa-light': faIcons(),
+      'fa-thin': faIcons(),
+      'fa-duotone': faIcons(),
+      'fa-brands': faIcons()
+    };
+    if (config && config.customIconPacks) {
+      icons = merge(icons, config.customIconPacks, true);
+    }
+    return icons;
+  };
+  var getIcons$1 = getIcons;
+
+  var script$2 = {
+    name: 'BIcon',
+    props: {
+      type: [String, Object],
+      component: String,
+      pack: String,
+      icon: String,
+      size: String,
+      customSize: String,
+      customClass: String,
+      both: Boolean // This is used internally to show both MDI and FA icon
+    },
+    computed: {
+      iconConfig: function iconConfig() {
+        var allIcons = getIcons$1();
+        return allIcons[this.newPack];
+      },
+      iconPrefix: function iconPrefix() {
+        if (this.iconConfig && this.iconConfig.iconPrefix) {
+          return this.iconConfig.iconPrefix;
+        }
+        return '';
+      },
+      /**
+      * Internal icon name based on the pack.
+      * If pack is 'fa', gets the equivalent FA icon name of the MDI,
+      * internal icons are always MDI.
+      */
+      newIcon: function newIcon() {
+        return "".concat(this.iconPrefix).concat(this.getEquivalentIconOf(this.icon));
+      },
+      newPack: function newPack() {
+        return this.pack || config.defaultIconPack;
+      },
+      newType: function newType() {
+        if (!this.type) return;
+        var splitType = [];
+        if (typeof this.type === 'string') {
+          splitType = this.type.split('-');
+        } else {
+          for (var key in this.type) {
+            if (this.type[key]) {
+              splitType = key.split('-');
+              break;
+            }
+          }
+        }
+        if (splitType.length <= 1) return;
+        var _splitType = splitType,
+          _splitType2 = _toArray(_splitType),
+          type = _splitType2.slice(1);
+        return "has-text-".concat(type.join('-'));
+      },
+      newCustomSize: function newCustomSize() {
+        return this.customSize || this.customSizeByPack;
+      },
+      customSizeByPack: function customSizeByPack() {
+        if (this.iconConfig && this.iconConfig.sizes) {
+          if (this.size && this.iconConfig.sizes[this.size] !== undefined) {
+            return this.iconConfig.sizes[this.size];
+          } else if (this.iconConfig.sizes.default) {
+            return this.iconConfig.sizes.default;
+          }
+        }
+        return null;
+      },
+      useIconComponent: function useIconComponent() {
+        return this.component || config.defaultIconComponent;
+      }
+    },
+    methods: {
+      /**
+      * Equivalent icon name of the MDI.
+      */
+      getEquivalentIconOf: function getEquivalentIconOf(value) {
+        // Only transform the class if the both prop is set to true
+        if (!this.both) {
+          return value;
+        }
+        if (this.iconConfig && this.iconConfig.internalIcons && this.iconConfig.internalIcons[value]) {
+          return this.iconConfig.internalIcons[value];
+        }
+        return value;
+      }
+    }
+  };
+
+  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      const options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      let hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              const originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              const existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
+  }
+
+  /* script */
+  const __vue_script__$2 = script$2;
+
+  /* template */
+  var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"icon",class:[_vm.newType, _vm.size]},[(!_vm.useIconComponent)?_c('i',{class:[_vm.newPack, _vm.newIcon, _vm.newCustomSize, _vm.customClass]}):_c(_vm.useIconComponent,{tag:"component",class:[_vm.customClass],attrs:{"icon":[_vm.newPack, _vm.newIcon],"size":_vm.newCustomSize}})],1)};
+  var __vue_staticRenderFns__$2 = [];
+
+    /* style */
+    const __vue_inject_styles__$2 = undefined;
+    /* scoped */
+    const __vue_scope_id__$2 = undefined;
+    /* module identifier */
+    const __vue_module_identifier__$2 = undefined;
+    /* functional template */
+    const __vue_is_functional_template__$2 = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+      __vue_inject_styles__$2,
+      __vue_script__$2,
+      __vue_scope_id__$2,
+      __vue_is_functional_template__$2,
+      __vue_module_identifier__$2,
+      false,
+      undefined,
+      undefined,
+      undefined
+    );
+
+    var Icon = __vue_component__$2;
+
+  var script$1 = {
+    name: 'BInput',
+    components: _defineProperty({}, Icon.name, Icon),
+    mixins: [FormElementMixin],
+    inheritAttrs: false,
+    props: {
+      value: [Number, String],
+      type: {
+        type: String,
+        default: 'text'
+      },
+      lazy: {
+        type: Boolean,
+        default: false
+      },
+      passwordReveal: Boolean,
+      iconClickable: Boolean,
+      hasCounter: {
+        type: Boolean,
+        default: function _default() {
+          return config.defaultInputHasCounter;
+        }
+      },
+      customClass: {
+        type: String,
+        default: ''
+      },
+      iconRight: String,
+      iconRightClickable: Boolean,
+      iconRightType: String
+    },
+    data: function data() {
+      return {
+        newValue: this.value,
+        newType: this.type,
+        newAutocomplete: this.autocomplete || config.defaultInputAutocomplete,
+        isPasswordVisible: false,
+        _elementRef: this.type === 'textarea' ? 'textarea' : 'input'
+      };
+    },
+    computed: {
+      computedValue: {
+        get: function get() {
+          return this.newValue;
+        },
+        set: function set(value) {
+          this.newValue = value;
+          this.$emit('input', value);
+        }
+      },
+      rootClasses: function rootClasses() {
+        return [this.iconPosition, this.size, {
+          'is-expanded': this.expanded,
+          'is-loading': this.loading,
+          'is-clearfix': !this.hasMessage
+        }];
+      },
+      inputClasses: function inputClasses() {
+        return [this.statusType, this.size, {
+          'is-rounded': this.rounded
+        }];
+      },
+      hasIconRight: function hasIconRight() {
+        return this.passwordReveal || this.loading || this.statusIcon && this.statusTypeIcon || this.iconRight;
+      },
+      rightIcon: function rightIcon() {
+        if (this.passwordReveal) {
+          return this.passwordVisibleIcon;
+        } else if (this.iconRight) {
+          return this.iconRight;
+        }
+        return this.statusTypeIcon;
+      },
+      rightIconType: function rightIconType() {
+        if (this.passwordReveal) {
+          return 'is-primary';
+        } else if (this.iconRight) {
+          return this.iconRightType || null;
+        }
+        return this.statusType;
+      },
+      /**
+      * Position of the icon or if it's both sides.
+      */
+      iconPosition: function iconPosition() {
+        var iconClasses = '';
+        if (this.icon) {
+          iconClasses += 'has-icons-left ';
+        }
+        if (this.hasIconRight) {
+          iconClasses += 'has-icons-right';
+        }
+        return iconClasses;
+      },
+      /**
+      * Icon name (MDI) based on the type.
+      */
+      statusTypeIcon: function statusTypeIcon() {
+        switch (this.statusType) {
+          case 'is-success':
+            return 'check';
+          case 'is-danger':
+            return 'alert-circle';
+          case 'is-info':
+            return 'information';
+          case 'is-warning':
+            return 'alert';
+        }
+      },
+      /**
+      * Check if have any message prop from parent if it's a Field.
+      */
+      hasMessage: function hasMessage() {
+        return !!this.statusMessage;
+      },
+      /**
+      * Current password-reveal icon name.
+      */
+      passwordVisibleIcon: function passwordVisibleIcon() {
+        return !this.isPasswordVisible ? 'eye' : 'eye-off';
+      },
+      /**
+      * Get value length
+      */
+      valueLength: function valueLength() {
+        if (typeof this.computedValue === 'string') {
+          return Array.from(this.computedValue).length;
+        } else if (typeof this.computedValue === 'number') {
+          return this.computedValue.toString().length;
+        }
+        return 0;
+      }
+    },
+    watch: {
+      /**
+      * When v-model is changed:
+      *   1. Set internal value.
+      *   2. Validate it if the value came from outside;
+      *      i.e., not equal to computedValue
+      */
+      value: function value(_value) {
+        var _this = this;
+        var fromOutside = this.computedValue != _value; // eslint-disable-line eqeqeq
+        this.newValue = _value;
+        if (fromOutside) {
+          // validation must wait for DOM updated
+          this.$nextTick(function () {
+            !_this.isValid && _this.checkHtml5Validity();
+          });
+        }
+      },
+      type: function type(_type) {
+        this.newType = _type;
+      }
+    },
+    methods: {
+      /**
+      * Toggle the visibility of a password-reveal input
+      * by changing the type and focus the input right away.
+      */
+      togglePasswordVisibility: function togglePasswordVisibility() {
+        var _this2 = this;
+        this.isPasswordVisible = !this.isPasswordVisible;
+        this.newType = this.isPasswordVisible ? 'text' : 'password';
+        this.$nextTick(function () {
+          _this2.focus();
+        });
+      },
+      iconClick: function iconClick(emit, event) {
+        var _this3 = this;
+        this.$emit(emit, event);
+        this.$nextTick(function () {
+          _this3.focus();
+        });
+      },
+      rightIconClick: function rightIconClick(event) {
+        if (this.passwordReveal) {
+          this.togglePasswordVisibility();
+        } else if (this.iconRightClickable) {
+          this.iconClick('icon-right-click', event);
+        }
+      },
+      onInput: function onInput(event) {
+        if (!this.lazy) {
+          var value = event.target.value;
+          this.updateValue(value);
+        }
+      },
+      onChange: function onChange(event) {
+        if (this.lazy) {
+          var value = event.target.value;
+          this.updateValue(value);
+        }
+      },
+      updateValue: function updateValue(value) {
+        this.computedValue = value;
+        !this.isValid && this.checkHtml5Validity();
+      }
+    }
+  };
+
+  /* script */
+  const __vue_script__$1 = script$1;
+
+  /* template */
+  var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"control",class:_vm.rootClasses},[(_vm.type !== 'textarea')?_c('input',_vm._b({ref:"input",staticClass:"input",class:[_vm.inputClasses, _vm.customClass],attrs:{"type":_vm.newType,"autocomplete":_vm.newAutocomplete,"maxlength":_vm.maxlength},domProps:{"value":_vm.computedValue},on:{"input":_vm.onInput,"change":_vm.onChange,"blur":_vm.onBlur,"focus":_vm.onFocus}},'input',_vm.$attrs,false)):_c('textarea',_vm._b({ref:"textarea",staticClass:"textarea",class:[_vm.inputClasses, _vm.customClass],attrs:{"maxlength":_vm.maxlength},domProps:{"value":_vm.computedValue},on:{"input":_vm.onInput,"change":_vm.onChange,"blur":_vm.onBlur,"focus":_vm.onFocus}},'textarea',_vm.$attrs,false)),(_vm.icon)?_c('b-icon',{staticClass:"is-left",class:{'is-clickable': _vm.iconClickable},attrs:{"icon":_vm.icon,"pack":_vm.iconPack,"size":_vm.iconSize},nativeOn:{"click":function($event){return _vm.iconClick('icon-click', $event)}}}):_vm._e(),(!_vm.loading && _vm.hasIconRight)?_c('b-icon',{staticClass:"is-right",class:{ 'is-clickable': _vm.passwordReveal || _vm.iconRightClickable },attrs:{"icon":_vm.rightIcon,"pack":_vm.iconPack,"size":_vm.iconSize,"type":_vm.rightIconType,"both":""},nativeOn:{"click":function($event){return _vm.rightIconClick($event)}}}):_vm._e(),(_vm.maxlength && _vm.hasCounter && _vm.type !== 'number')?_c('small',{staticClass:"help counter",class:{ 'is-invisible': !_vm.isFocused }},[_vm._v(" "+_vm._s(_vm.valueLength)+" / "+_vm._s(_vm.maxlength)+" ")]):_vm._e()],1)};
+  var __vue_staticRenderFns__$1 = [];
+
+    /* style */
+    const __vue_inject_styles__$1 = undefined;
+    /* scoped */
+    const __vue_scope_id__$1 = undefined;
+    /* module identifier */
+    const __vue_module_identifier__$1 = undefined;
+    /* functional template */
+    const __vue_is_functional_template__$1 = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+      __vue_inject_styles__$1,
+      __vue_script__$1,
+      __vue_scope_id__$1,
+      __vue_is_functional_template__$1,
+      __vue_module_identifier__$1,
+      false,
+      undefined,
+      undefined,
+      undefined
+    );
+
+    var Input = __vue_component__$1;
+
+  var script = {
+    name: 'BAutocomplete',
+    components: _defineProperty({}, Input.name, Input),
+    mixins: [FormElementMixin],
+    inheritAttrs: false,
+    props: {
+      value: [Number, String],
+      data: {
+        type: Array,
+        default: function _default() {
+          return [];
+        }
+      },
+      field: {
+        type: String,
+        default: 'value'
+      },
+      keepFirst: Boolean,
+      clearOnSelect: Boolean,
+      openOnFocus: Boolean,
+      customFormatter: Function,
+      checkInfiniteScroll: Boolean,
+      keepOpen: Boolean,
+      selectOnClickOutside: Boolean,
+      clearable: Boolean,
+      maxHeight: [String, Number],
+      dropdownPosition: {
+        type: String,
+        default: 'auto'
+      },
+      groupField: String,
+      groupOptions: String,
+      iconRight: String,
+      iconRightClickable: Boolean,
+      appendToBody: Boolean,
+      type: {
+        type: String,
+        default: 'text'
+      },
+      confirmKeys: {
+        type: Array,
+        default: function _default() {
+          return ['Tab', 'Enter'];
+        }
+      },
+      selectableHeader: Boolean,
+      selectableFooter: Boolean
+    },
+    data: function data() {
+      return {
+        selected: null,
+        hovered: null,
+        headerHovered: null,
+        footerHovered: null,
+        isActive: false,
+        newValue: this.value,
+        newAutocomplete: this.autocomplete || 'off',
+        ariaAutocomplete: this.keepFirst ? 'both' : 'list',
+        isListInViewportVertically: true,
+        hasFocus: false,
+        style: {},
+        _isAutocomplete: true,
+        _elementRef: 'input',
+        _bodyEl: undefined,
+        // Used to append to body
+        timeOutID: null
+      };
+    },
+    computed: {
+      computedData: function computedData() {
+        var _this = this;
+        if (this.groupField) {
+          if (this.groupOptions) {
+            var newData = [];
+            this.data.forEach(function (option) {
+              var group = getValueByPath(option, _this.groupField);
+              var items = getValueByPath(option, _this.groupOptions);
+              newData.push({
+                group: group,
+                items: items
+              });
+            });
+            return newData;
+          } else {
+            var tmp = {};
+            this.data.forEach(function (option) {
+              var group = getValueByPath(option, _this.groupField);
+              if (!tmp[group]) tmp[group] = [];
+              tmp[group].push(option);
+            });
+            var _newData = [];
+            Object.keys(tmp).forEach(function (group) {
+              _newData.push({
+                group: group,
+                items: tmp[group]
+              });
+            });
+            return _newData;
+          }
+        }
+        return [{
+          items: this.data
+        }];
+      },
+      isEmpty: function isEmpty() {
+        if (!this.computedData) return true;
+        return !this.computedData.some(function (element) {
+          return element.items && element.items.length;
+        });
+      },
+      /**
+       * White-listed items to not close when clicked.
+       * Add input, dropdown and all children.
+       */
+      whiteList: function whiteList() {
+        var whiteList = [];
+        whiteList.push(this.$refs.input.$el.querySelector('input'));
+        whiteList.push(this.$refs.dropdown);
+        // Add all children from dropdown
+        if (this.$refs.dropdown !== undefined) {
+          var children = this.$refs.dropdown.querySelectorAll('*');
+          var _iterator = _createForOfIteratorHelper(children),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var child = _step.value;
+              whiteList.push(child);
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+        if (this.$parent.$data._isTaginput) {
+          // Add taginput container
+          whiteList.push(this.$parent.$el);
+          // Add .tag and .delete
+          var tagInputChildren = this.$parent.$el.querySelectorAll('*');
+          var _iterator2 = _createForOfIteratorHelper(tagInputChildren),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var tagInputChild = _step2.value;
+              whiteList.push(tagInputChild);
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+        return whiteList;
+      },
+      /**
+       * Check if exists default slot
+       */
+      hasDefaultSlot: function hasDefaultSlot() {
+        return !!this.$scopedSlots.default;
+      },
+      /**
+       * Check if exists group slot
+       */
+      hasGroupSlot: function hasGroupSlot() {
+        return !!this.$scopedSlots.group;
+      },
+      /**
+       * Check if exists "empty" slot
+       */
+      hasEmptySlot: function hasEmptySlot() {
+        return !!this.$slots.empty;
+      },
+      /**
+       * Check if exists "header" slot
+       */
+      hasHeaderSlot: function hasHeaderSlot() {
+        return !!this.$slots.header;
+      },
+      /**
+       * Check if exists "footer" slot
+       */
+      hasFooterSlot: function hasFooterSlot() {
+        return !!this.$slots.footer;
+      },
+      /**
+       * Apply dropdownPosition property
+       */
+      isOpenedTop: function isOpenedTop() {
+        return this.dropdownPosition === 'top' || this.dropdownPosition === 'auto' && !this.isListInViewportVertically;
+      },
+      newIconRight: function newIconRight() {
+        if (this.clearable && this.newValue) {
+          return 'close-circle';
+        }
+        return this.iconRight;
+      },
+      newIconRightClickable: function newIconRightClickable() {
+        if (this.clearable) {
+          return true;
+        }
+        return this.iconRightClickable;
+      },
+      contentStyle: function contentStyle() {
+        return {
+          maxHeight: toCssWidth(this.maxHeight)
+        };
+      }
+    },
+    watch: {
+      /**
+       * When dropdown is toggled, check the visibility to know when
+       * to open upwards.
+       */
+      isActive: function isActive(active) {
+        var _this2 = this;
+        if (this.dropdownPosition === 'auto') {
+          if (active) {
+            this.calcDropdownInViewportVertical();
+          } else {
+            // Timeout to wait for the animation to finish before recalculating
+            this.timeOutID = setTimeout(function () {
+              _this2.calcDropdownInViewportVertical();
+            }, 100);
+          }
+        }
+        this.$nextTick(function () {
+          _this2.$emit('active', active);
+        });
+      },
+      /**
+       * When checkInfiniteScroll property changes scroll event should be removed or added
+       */
+      checkInfiniteScroll: function checkInfiniteScroll(_checkInfiniteScroll) {
+        if ((this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) === false) return;
+        var list = this.$refs.dropdown.querySelector('.dropdown-content');
+        if (_checkInfiniteScroll === true) {
+          list.addEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+          return;
+        }
+        list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+      },
+      /**
+       * When updating input's value
+       *   1. Emit changes
+       *   2. If value isn't the same as selected, set null
+       *   3. Close dropdown if value is clear or else open it
+       */
+      newValue: function newValue(value) {
+        this.$emit('input', value);
+        // Check if selected is invalid
+        var currentValue = this.getValue(this.selected);
+        if (currentValue && currentValue !== value) {
+          this.setSelected(null, false);
+        }
+        // Close dropdown if input is clear or else open it
+        if (this.hasFocus && (!this.openOnFocus || value)) {
+          this.isActive = !!value;
+        }
+      },
+      /**
+       * When v-model is changed:
+       *   1. Update internal value.
+       *   2. If it's invalid, validate again.
+       */
+      value: function value(_value) {
+        this.newValue = _value;
+      },
+      /**
+       * Select first option if "keep-first
+       */
+      data: function data() {
+        var _this3 = this;
+        // Keep first option always pre-selected
+        if (this.keepFirst) {
+          this.$nextTick(function () {
+            if (_this3.isActive) {
+              _this3.selectFirstOption(_this3.computedData);
+            } else {
+              _this3.setHovered(null);
+            }
+          });
+        } else {
+          if (this.hovered) {
+            // reset hovered if list doesn't contain it
+            var hoveredValue = this.getValue(this.hovered);
+            var data = this.computedData.map(function (d) {
+              return d.items;
+            }).reduce(function (a, b) {
+              return [].concat(_toConsumableArray(a), _toConsumableArray(b));
+            }, []);
+            if (!data.some(function (d) {
+              return _this3.getValue(d) === hoveredValue;
+            })) {
+              this.setHovered(null);
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      /**
+       * Set which option is currently hovered.
+       */
+      setHovered: function setHovered(option) {
+        if (option === undefined) return;
+        this.hovered = option;
+      },
+      /**
+       * Set which option is currently selected, update v-model,
+       * update input value and close dropdown.
+       */
+      setSelected: function setSelected(option) {
+        var _this4 = this;
+        var closeDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        var event = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+        if (option === undefined) return;
+        this.selected = option;
+        this.$emit('select', this.selected, event);
+        if (this.selected !== null) {
+          if (this.clearOnSelect) {
+            var input = this.$refs.input;
+            input.newValue = '';
+            input.$refs.input.value = '';
+          } else {
+            this.newValue = this.getValue(this.selected);
+          }
+          this.setHovered(null);
+        }
+        closeDropdown && this.$nextTick(function () {
+          _this4.isActive = false;
+        });
+        this.checkValidity();
+      },
+      /**
+       * Select first option
+       */
+      selectFirstOption: function selectFirstOption(computedData) {
+        var _this5 = this;
+        this.$nextTick(function () {
+          var nonEmptyElements = computedData.filter(function (element) {
+            return element.items && element.items.length;
+          });
+          if (nonEmptyElements.length) {
+            var option = nonEmptyElements[0].items[0];
+            _this5.setHovered(option);
+          } else {
+            _this5.setHovered(null);
+          }
+        });
+      },
+      keydown: function keydown(event) {
+        var key = event.key; // cannot destructure preventDefault (https://stackoverflow.com/a/49616808/2774496)
+        // prevent emit submit event
+        if (key === 'Enter') event.preventDefault();
+        // Close dropdown on Tab & no hovered
+        if (key === 'Escape' || key === 'Tab') {
+          this.isActive = false;
+        }
+        if (this.confirmKeys.indexOf(key) >= 0) {
+          // If adding by comma, don't add the comma to the input
+          if (key === ',') event.preventDefault();
+          // Close dropdown on select by Tab
+          var closeDropdown = !this.keepOpen || key === 'Tab';
+          if (this.hovered === null) {
+            // header and footer uses headerHovered && footerHovered. If header or footer
+            // was selected then fire event otherwise just return so a value isn't selected
+            this.checkIfHeaderOrFooterSelected(event, null, closeDropdown);
+            return;
+          }
+          this.setSelected(this.hovered, closeDropdown, event);
+        }
+      },
+      selectHeaderOrFoterByClick: function selectHeaderOrFoterByClick(event, origin) {
+        this.checkIfHeaderOrFooterSelected(event, {
+          origin: origin
+        });
+      },
+      /**
+       * Check if header or footer was selected.
+       */
+      checkIfHeaderOrFooterSelected: function checkIfHeaderOrFooterSelected(event, triggerClick) {
+        var closeDropdown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+        if (this.selectableHeader && (this.headerHovered || triggerClick && triggerClick.origin === 'header')) {
+          this.$emit('select-header', event);
+          this.headerHovered = false;
+          if (triggerClick) this.setHovered(null);
+          if (closeDropdown) this.isActive = false;
+        }
+        if (this.selectableFooter && (this.footerHovered || triggerClick && triggerClick.origin === 'footer')) {
+          this.$emit('select-footer', event);
+          this.footerHovered = false;
+          if (triggerClick) this.setHovered(null);
+          if (closeDropdown) this.isActive = false;
+        }
+      },
+      /**
+       * Close dropdown if clicked outside.
+       */
+      clickedOutside: function clickedOutside(event) {
+        var target = isCustomElement(this) ? event.composedPath()[0] : event.target;
+        if (!this.hasFocus && this.whiteList.indexOf(target) < 0) {
+          if (this.keepFirst && this.hovered && this.selectOnClickOutside) {
+            this.setSelected(this.hovered, true);
+          } else {
+            this.isActive = false;
+          }
+        }
+      },
+      /**
+       * Return display text for the input.
+       * If object, get value from path, or else just the value.
+       */
+      getValue: function getValue(option) {
+        if (option === null) return;
+        if (typeof this.customFormatter !== 'undefined') {
+          return this.customFormatter(option);
+        }
+        return _typeof(option) === 'object' ? getValueByPath(option, this.field) : option;
+      },
+      /**
+       * Check if the scroll list inside the dropdown
+       * reached it's end.
+       */
+      checkIfReachedTheEndOfScroll: function checkIfReachedTheEndOfScroll() {
+        var list = this.$refs.dropdown.querySelector('.dropdown-content');
+        var footerHeight = this.hasFooterSlot ? list.querySelectorAll('div.dropdown-footer')[0].clientHeight : 0;
+        if (list.clientHeight !== list.scrollHeight && list.scrollTop + list.parentElement.clientHeight + footerHeight >= list.scrollHeight) {
+          this.$emit('infinite-scroll');
+        }
+      },
+      /**
+       * Calculate if the dropdown is vertically visible when activated,
+       * otherwise it is openened upwards.
+       */
+      calcDropdownInViewportVertical: function calcDropdownInViewportVertical() {
+        var _this6 = this;
+        this.$nextTick(function () {
+          /**
+           * this.$refs.dropdown may be undefined
+           * when Autocomplete is conditional rendered
+           */
+          if (_this6.$refs.dropdown === undefined) return;
+          var rect = _this6.$refs.dropdown.getBoundingClientRect();
+          _this6.isListInViewportVertically = rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+          if (_this6.appendToBody) {
+            _this6.updateAppendToBody();
+          }
+        });
+      },
+      /**
+       * Arrows keys listener.
+       * If dropdown is active, set hovered option, or else just open.
+       */
+      keyArrows: function keyArrows(direction) {
+        var sum = direction === 'down' ? 1 : -1;
+        if (this.isActive) {
+          var data = this.computedData.map(function (d) {
+            return d.items;
+          }).reduce(function (a, b) {
+            return [].concat(_toConsumableArray(a), _toConsumableArray(b));
+          }, []);
+          if (this.hasHeaderSlot && this.selectableHeader) {
+            data.unshift(undefined);
+          }
+          if (this.hasFooterSlot && this.selectableFooter) {
+            data.push(undefined);
+          }
+          var index;
+          if (this.headerHovered) {
+            index = 0 + sum;
+          } else if (this.footerHovered) {
+            index = data.length - 1 + sum;
+          } else {
+            index = data.indexOf(this.hovered) + sum;
+          }
+          index = index > data.length - 1 ? data.length - 1 : index;
+          index = index < 0 ? 0 : index;
+          this.footerHovered = false;
+          this.headerHovered = false;
+          this.setHovered(data[index] !== undefined ? data[index] : null);
+          if (this.hasFooterSlot && this.selectableFooter && index === data.length - 1) {
+            this.footerHovered = true;
+          }
+          if (this.hasHeaderSlot && this.selectableHeader && index === 0) {
+            this.headerHovered = true;
+          }
+          var list = this.$refs.dropdown.querySelector('.dropdown-content');
+          var querySelectorText = 'a.dropdown-item:not(.is-disabled)';
+          if (this.hasHeaderSlot && this.selectableHeader) {
+            querySelectorText += ',div.dropdown-header';
+          }
+          if (this.hasFooterSlot && this.selectableFooter) {
+            querySelectorText += ',div.dropdown-footer';
+          }
+          var element = list.querySelectorAll(querySelectorText)[index];
+          if (!element) return;
+          var visMin = list.scrollTop;
+          var visMax = list.scrollTop + list.clientHeight - element.clientHeight;
+          if (element.offsetTop < visMin) {
+            list.scrollTop = element.offsetTop;
+          } else if (element.offsetTop >= visMax) {
+            list.scrollTop = element.offsetTop - list.clientHeight + element.clientHeight;
+          }
+        } else {
+          this.isActive = true;
+        }
+      },
+      /**
+       * Focus listener.
+       * If value is the same as selected, select all text.
+       */
+      focused: function focused(event) {
+        if (this.getValue(this.selected) === this.newValue) {
+          this.$el.querySelector('input').select();
+        }
+        if (this.openOnFocus) {
+          this.isActive = true;
+          if (this.keepFirst) {
+            // If open on focus, update the hovered
+            this.selectFirstOption(this.computedData);
+          }
+        }
+        this.hasFocus = true;
+        this.$emit('focus', event);
+      },
+      /**
+       * Blur listener.
+       */
+      onBlur: function onBlur(event) {
+        this.hasFocus = false;
+        this.$emit('blur', event);
+      },
+      onInput: function onInput() {
+        var currentValue = this.getValue(this.selected);
+        if (currentValue && currentValue === this.newValue) return;
+        this.$emit('typing', this.newValue);
+        this.checkValidity();
+      },
+      rightIconClick: function rightIconClick(event) {
+        if (this.clearable) {
+          this.newValue = '';
+          this.setSelected(null, false);
+          if (this.openOnFocus) {
+            this.$refs.input.$el.focus();
+          }
+        } else {
+          this.$emit('icon-right-click', event);
+        }
+      },
+      checkValidity: function checkValidity() {
+        var _this7 = this;
+        if (this.useHtml5Validation) {
+          this.$nextTick(function () {
+            _this7.checkHtml5Validity();
+          });
+        }
+      },
+      updateAppendToBody: function updateAppendToBody() {
+        var dropdownMenu = this.$refs.dropdown;
+        var trigger = this.$parent.$data._isTaginput ? this.$parent.$el : this.$refs.input.$el;
+        if (dropdownMenu && trigger) {
+          // update wrapper dropdown
+          var root = this.$data._bodyEl;
+          root.classList.forEach(function (item) {
+            return root.classList.remove(item);
+          });
+          root.classList.add('autocomplete');
+          root.classList.add('control');
+          if (this.expandend) {
+            root.classList.add('is-expandend');
+          }
+          var rect = trigger.getBoundingClientRect();
+          var top = rect.top + window.scrollY;
+          var left = rect.left + window.scrollX;
+          if (!this.isOpenedTop) {
+            top += trigger.clientHeight;
+          } else {
+            top -= dropdownMenu.clientHeight;
+          }
+          this.style = {
+            position: 'absolute',
+            top: "".concat(top, "px"),
+            left: "".concat(left, "px"),
+            width: "".concat(trigger.clientWidth, "px"),
+            maxWidth: "".concat(trigger.clientWidth, "px"),
+            zIndex: '99'
+          };
+        }
+      }
+    },
+    created: function created() {
+      if (typeof window !== 'undefined') {
+        document.addEventListener('click', this.clickedOutside);
+        if (this.dropdownPosition === 'auto') {
+          window.addEventListener('resize', this.calcDropdownInViewportVertical);
+        }
+      }
+    },
+    mounted: function mounted() {
+      if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+        var list = this.$refs.dropdown.querySelector('.dropdown-content');
+        list.addEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+      }
+      if (this.appendToBody) {
+        this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown);
+        this.updateAppendToBody();
+      }
+    },
+    beforeDestroy: function beforeDestroy() {
+      if (typeof window !== 'undefined') {
+        document.removeEventListener('click', this.clickedOutside);
+        if (this.dropdownPosition === 'auto') {
+          window.removeEventListener('resize', this.calcDropdownInViewportVertical);
+        }
+      }
+      if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+        var list = this.$refs.dropdown.querySelector('.dropdown-content');
+        list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+      }
+      if (this.appendToBody) {
+        removeElement(this.$data._bodyEl);
+      }
+      clearTimeout(this.timeOutID);
+    }
+  };
+
+  /* script */
+  const __vue_script__ = script;
+
+  /* template */
+  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"autocomplete control",class:{ 'is-expanded': _vm.expanded }},[_c('b-input',_vm._b({ref:"input",attrs:{"type":_vm.type,"size":_vm.size,"loading":_vm.loading,"rounded":_vm.rounded,"icon":_vm.icon,"icon-right":_vm.newIconRight,"icon-right-clickable":_vm.newIconRightClickable,"icon-pack":_vm.iconPack,"maxlength":_vm.maxlength,"autocomplete":_vm.newAutocomplete,"use-html5-validation":false,"aria-autocomplete":_vm.ariaAutocomplete},on:{"input":_vm.onInput,"focus":_vm.focused,"blur":_vm.onBlur,"icon-right-click":_vm.rightIconClick,"icon-click":function (event) { return _vm.$emit('icon-click', event); }},nativeOn:{"keydown":[function($event){return _vm.keydown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.keyArrows('up')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.keyArrows('down')}]},model:{value:(_vm.newValue),callback:function ($$v) {_vm.newValue=$$v;},expression:"newValue"}},'b-input',_vm.$attrs,false)),_c('transition',{attrs:{"name":"fade"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive && (!_vm.isEmpty || _vm.hasEmptySlot || _vm.hasHeaderSlot || _vm.hasFooterSlot)),expression:"isActive && (!isEmpty || hasEmptySlot || hasHeaderSlot || hasFooterSlot)"}],ref:"dropdown",staticClass:"dropdown-menu",class:{ 'is-opened-top': _vm.isOpenedTop && !_vm.appendToBody },style:(_vm.style)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive),expression:"isActive"}],staticClass:"dropdown-content",style:(_vm.contentStyle)},[(_vm.hasHeaderSlot)?_c('div',{staticClass:"dropdown-item dropdown-header",class:{ 'is-hovered': _vm.headerHovered },attrs:{"role":"button","tabindex":"0"},on:{"click":function($event){return _vm.selectHeaderOrFoterByClick($event, 'header')}}},[_vm._t("header")],2):_vm._e(),_vm._l((_vm.computedData),function(element,groupindex){return [(element.group)?_c('div',{key:groupindex + 'group',staticClass:"dropdown-item"},[(_vm.hasGroupSlot)?_vm._t("group",null,{"group":element.group,"index":groupindex}):_c('span',{staticClass:"has-text-weight-bold"},[_vm._v(" "+_vm._s(element.group)+" ")])],2):_vm._e(),_vm._l((element.items),function(option,index){return _c('a',{key:groupindex + ':' + index,staticClass:"dropdown-item",class:{ 'is-hovered': option === _vm.hovered },attrs:{"role":"button","tabindex":"0"},on:{"click":function($event){$event.stopPropagation();return _vm.setSelected(option, !_vm.keepOpen, $event)}}},[(_vm.hasDefaultSlot)?_vm._t("default",null,{"option":option,"index":index}):_c('span',[_vm._v(" "+_vm._s(_vm.getValue(option, true))+" ")])],2)})]}),(_vm.isEmpty && _vm.hasEmptySlot)?_c('div',{staticClass:"dropdown-item is-disabled"},[_vm._t("empty")],2):_vm._e(),(_vm.hasFooterSlot)?_c('div',{staticClass:"dropdown-item dropdown-footer",class:{ 'is-hovered': _vm.footerHovered },attrs:{"role":"button","tabindex":"0"},on:{"click":function($event){return _vm.selectHeaderOrFoterByClick($event, 'footer')}}},[_vm._t("footer")],2):_vm._e()],2)])])],1)};
+  var __vue_staticRenderFns__ = [];
+
+    /* style */
+    const __vue_inject_styles__ = undefined;
+    /* scoped */
+    const __vue_scope_id__ = undefined;
+    /* module identifier */
+    const __vue_module_identifier__ = undefined;
+    /* functional template */
+    const __vue_is_functional_template__ = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__ = /*#__PURE__*/normalizeComponent(
+      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+      __vue_inject_styles__,
+      __vue_script__,
+      __vue_scope_id__,
+      __vue_is_functional_template__,
+      __vue_module_identifier__,
+      false,
+      undefined,
+      undefined,
+      undefined
+    );
+
+    var Autocomplete = __vue_component__;
+
+  var use = function use(plugin) {
+    if (typeof window !== 'undefined' && window.Vue) {
+      window.Vue.use(plugin);
+    }
+  };
+  var registerComponent = function registerComponent(Vue, component) {
+    Vue.component(component.name, component);
+  };
+
+  var Plugin = {
+    install: function install(Vue) {
+      registerComponent(Vue, Autocomplete);
+    }
+  };
+  use(Plugin);
+
+  exports.BAutocomplete = Autocomplete;
+  exports["default"] = Plugin;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));