All files / app/assets/javascripts/ide/components/shared tokened_input.vue

0% Statements 0/14
0% Branches 0/7
0% Functions 0/9
0% Lines 0/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107                                                                                                                                                                                                                     
<script>
import { GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
 
export default {
  components: {
    GlIcon,
  },
  props: {
    placeholder: {
      type: String,
      required: false,
      default: __('Search'),
    },
    tokens: {
      type: Array,
      required: false,
      default: () => [],
    },
    value: {
      type: String,
      required: false,
      default: '',
    },
  },
  data() {
    return {
      backspaceCount: 0,
    };
  },
  computed: {
    placeholderText() {
      return this.tokens.length ? '' : this.placeholder;
    },
  },
  watch: {
    tokens() {
      this.$refs.input.focus();
    },
  },
  methods: {
    onFocus() {
      this.$emit('focus');
    },
    onBlur() {
      this.$emit('blur');
    },
    onInput(evt) {
      this.$emit('input', evt.target.value);
    },
    onBackspace() {
      if (!this.value && this.tokens.length) {
        this.backspaceCount += 1;
      } else {
        this.backspaceCount = 0;
        return;
      }
 
      Iif (this.backspaceCount > 1) {
        this.removeToken(this.tokens[this.tokens.length - 1]);
        this.backspaceCount = 0;
      }
    },
    removeToken(token) {
      this.$emit('removeToken', token);
    },
  },
};
</script>
 
<template>
  <div class="filtered-search-wrapper">
    <div class="filtered-search-box">
      <div class="tokens-container list-unstyled">
        <div v-for="token in tokens" :key="token.label" class="filtered-search-token">
          <button
            class="selectable btn-blank"
            type="button"
            @click.stop="removeToken(token)"
            @keyup.delete="removeToken(token)"
          >
            <div class="value-container rounded">
              <div class="value">{{ token.label }}</div>
              <div class="remove-token inverted">
                <gl-icon :size="16" name="close" />
              </div>
            </div>
          </button>
        </div>
        <div class="input-token">
          <input
            ref="input"
            :placeholder="placeholderText"
            :value="value"
            type="search"
            class="form-control filtered-search"
            @input="onInput"
            @focus="onFocus"
            @blur="onBlur"
            @keyup.delete="onBackspace"
          />
        </div>
      </div>
    </div>
  </div>
</template>