app/assets/javascripts/super_sidebar/components/global_search/command_palette/fake_search_input.vue


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

<script>
import { COMMON_HANDLES, SEARCH_SCOPE_PLACEHOLDER } from './constants';

export default {
  name: 'FakeSearchInput',
  props: {
    userInput: {
      type: String,
      required: true,
    },
    scope: {
      type: String,
      required: true,
      validator: (value) => COMMON_HANDLES.includes(value),
    },
  },
  computed: {
    placeholder() {
      return SEARCH_SCOPE_PLACEHOLDER[this.scope];
    },
  },
};
</script>

<template>
  <div class="gl-display-flex gl-pointer-events-none fake-input">
    <span class="gl-opacity-0" data-testid="search-scope">{{ scope }}&nbsp;</span>
    <span
      v-if="!userInput"
      data-testid="search-scope-placeholder"
      class="gl-text-gray-500 gl-pointer-events-none"
      >{{ placeholder }}</span
    >
  </div>
</template>

<style scoped>
.fake-input {
  top: 12px;
  left: 33px;
}
</style>