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> |