@gitlab/ui/dist/components/base/token_selector/token_selector.js

GitLab UI Components

import { uniqueId } from 'lodash';
import GlTokenContainer from './token_container';
import GlTokenSelectorDropdown from './token_selector_dropdown';
import { tokensValidator } from './helpers';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) 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.");
}

var script = {
  name: 'GlTokenSelector',
  componentId: uniqueId('token-selector'),
  components: {
    GlTokenContainer: GlTokenContainer,
    GlTokenSelectorDropdown: GlTokenSelectorDropdown
  },
  model: {
    prop: 'selectedTokens',
    event: 'input'
  },
  props: {
    dropdownItems: {
      type: Array,
      // All items need to have an `id` key
      validator: tokensValidator,
      required: false,
      default: function _default() {
        return [];
      }
    },
    allowUserDefinedTokens: {
      type: Boolean,
      required: false,
      default: false
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    hideDropdownWithNoItems: {
      type: Boolean,
      required: false,
      default: false
    },
    containerClass: {
      type: String,
      required: false,
      default: ''
    },
    autocomplete: {
      type: String,
      required: false,
      default: 'off'
    },
    ariaLabelledby: {
      type: String,
      required: false,
      default: null
    },
    placeholder: {
      type: String,
      required: false,
      default: null
    },
    // Used for custom `v-model`
    selectedTokens: {
      type: Array,
      // All tokens need to have an `id` key
      validator: tokensValidator,
      required: true
    }
  },
  data: function data() {
    return {
      inputText: '',
      inputFocused: false,
      dropdownIsOpen: false,
      focusedDropdownItem: null,
      triggerTokenFocusNextBackspace: true,
      rootElClasses: '',
      dropdownEventHandlers: {
        handleUpArrow: function handleUpArrow() {},
        handleDownArrow: function handleDownArrow() {},
        handleHomeKey: function handleHomeKey() {},
        handleEndKey: function handleEndKey() {}
      },
      resetFocusedDropdownItem: function resetFocusedDropdownItem() {},
      focusOnToken: function focusOnToken() {}
    };
  },
  computed: {
    filteredDropdownItems: function filteredDropdownItems() {
      var _this = this;

      return this.dropdownItems.filter(function (dropdownItem) {
        return _this.selectedTokens.findIndex(function (token) {
          return token.id === dropdownItem.id;
        }) === -1;
      });
    },
    dropdownHasNoItems: function dropdownHasNoItems() {
      return !this.filteredDropdownItems.length;
    },
    userDefinedTokenCanBeAdded: function userDefinedTokenCanBeAdded() {
      return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
    },
    hideDropdown: function hideDropdown() {
      if (this.userDefinedTokenCanBeAdded) {
        return false;
      }

      if (this.hideDropdownWithNoItems && this.dropdownHasNoItems) {
        return true;
      }

      return false;
    }
  },
  watch: {
    inputText: function inputText(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.$emit('text-input', newValue);
        this.resetFocusedDropdownItem();

        if (newValue !== '') {
          this.triggerTokenFocusNextBackspace = false;
        } else {
          this.triggerTokenFocusNextBackspace = true;
        }

        if (this.hideDropdown) {
          this.closeDropdown();
        } else if (newValue !== '') {
          this.openDropdown();
        }
      }
    }
  },
  methods: {
    handleFocus: function handleFocus(event) {
      this.$emit('focus', event);
      this.openDropdown();
      this.inputFocused = true;
      this.focusOnToken();

      if (this.inputText === '') {
        this.triggerTokenFocusNextBackspace = true;
      }
    },
    handleBlur: function handleBlur(event) {
      var _this2 = this;

      this.$emit('blur', event);
      this.inputFocused = false; // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
      // Workaround is to:
      // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
      // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event

      this.$nextTick(function () {
        var _event$relatedTarget, _event$relatedTarget$;

        if (!((_event$relatedTarget = event.relatedTarget) === null || _event$relatedTarget === void 0 ? void 0 : (_event$relatedTarget$ = _event$relatedTarget.closest) === null || _event$relatedTarget$ === void 0 ? void 0 : _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
          _this2.closeDropdown();
        }
      });
    },
    handleEnter: function handleEnter() {
      if (this.userDefinedTokenCanBeAdded) {
        this.addToken();
      } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
        this.addToken(this.focusedDropdownItem);
      }
    },
    handleEscape: function handleEscape() {
      this.inputText = '';
      this.closeDropdown();
    },
    handleBackspace: function handleBackspace(event) {
      if (this.inputText !== '' || !this.selectedTokens.length) {
        return;
      } // Prevent triggering the browser back button


      event.preventDefault();

      if (this.triggerTokenFocusNextBackspace) {
        this.$refs.textInput.blur();
        this.focusOnToken(this.selectedTokens.length - 1);
      } else {
        this.triggerTokenFocusNextBackspace = true;
      }
    },
    handleInputClick: function handleInputClick() {
      // Open the dropdown if the user clicks an already focused input
      if (this.inputFocused && this.inputText === '' && !this.dropdownIsOpen) {
        this.openDropdown();
      }
    },
    handleContainerClick: function handleContainerClick(event) {
      // Bail if token is clicked
      var target = event.target;

      if ((target === null || target === void 0 ? void 0 : target.closest('.gl-token')) !== null || this.inputFocused) {
        return;
      }

      this.focusTextInput();
    },
    addToken: function addToken() {
      var dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
      var token = dropdownItem !== null ? dropdownItem : {
        id: uniqueId('user-defined-token'),
        name: this.inputText
      };
      this.$emit('input', [].concat(_toConsumableArray(this.selectedTokens), [token]));
      this.inputText = '';
      this.closeDropdown();
      this.$emit('token-add', token);
    },
    removeToken: function removeToken(token) {
      this.$emit('input', this.selectedTokens.filter(function (selectedToken) {
        return selectedToken.id !== token.id;
      }));
      this.$emit('token-remove', token);
    },
    cancelTokenFocus: function cancelTokenFocus() {
      this.focusTextInput();
    },
    closeDropdown: function closeDropdown() {
      this.dropdownIsOpen = false;
      this.resetFocusedDropdownItem();
    },
    openDropdown: function openDropdown() {
      if (this.hideDropdown) {
        return;
      }

      this.dropdownIsOpen = true;
    },
    focusTextInput: function focusTextInput() {
      this.$refs.textInput.focus();
    },
    // Register methods passed as props from child components
    registerDropdownEventHandlers: function registerDropdownEventHandlers(dropdownEventHandlers) {
      this.dropdownEventHandlers = dropdownEventHandlers;
    },
    registerResetFocusedDropdownItem: function registerResetFocusedDropdownItem(resetFocusedDropdownItem) {
      this.resetFocusedDropdownItem = resetFocusedDropdownItem;
    },
    registerFocusOnToken: function registerFocusOnToken(focusOnToken) {
      this.focusOnToken = focusOnToken;
    }
  }
};

/* 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',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input form-control form-control-plaintext gl-inset-border-1-gray-400! gl-cursor-text! gl-py-2! gl-px-3!",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass],on:{"click":_vm.handleContainerClick}},[_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"register-focus-on-token":_vm.registerFocusOnToken},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
var token = ref.token;
return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',{ref:"textInput",staticClass:"gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-py-2 gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey($event)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}})]},proxy:true}],null,true)})],1),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
var dropdownItem = ref.dropdownItem;
return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}}],null,true),model:{value:(_vm.focusedDropdownItem),callback:function ($$v) {_vm.focusedDropdownItem=$$v;},expression:"focusedDropdownItem"}})],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__ = __vue_normalize__(
    { 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
  );

export default __vue_component__;