diff options
Diffstat (limited to 'src/components/searcher/Searcher.vue')
-rw-r--r-- | src/components/searcher/Searcher.vue | 41 |
1 files changed, 9 insertions, 32 deletions
diff --git a/src/components/searcher/Searcher.vue b/src/components/searcher/Searcher.vue index f8dd51f..e74600a 100644 --- a/src/components/searcher/Searcher.vue +++ b/src/components/searcher/Searcher.vue | |||
@@ -1,7 +1,8 @@ | |||
1 | <template> | 1 | <template> |
2 | <div id="searcher"> | 2 | <div class="searcher"> |
3 | <input | 3 | <input |
4 | type="text" | 4 | type="text" |
5 | class="w-full bg-gray-800 p-2 mb-4" | ||
5 | v-model='search' | 6 | v-model='search' |
6 | ref='input' | 7 | ref='input' |
7 | @keydown="hotkeys" | 8 | @keydown="hotkeys" |
@@ -13,7 +14,7 @@ | |||
13 | v-for="sugestion in sugestions" | 14 | v-for="sugestion in sugestions" |
14 | :key="sugestion[0]" | 15 | :key="sugestion[0]" |
15 | :sugestion="sugestion" | 16 | :sugestion="sugestion" |
16 | :class="{selected: sugestion[0] === current[0]}" | 17 | :class="{'bg-gray-800': sugestion[0] === current[0]}" |
17 | /> | 18 | /> |
18 | </div> | 19 | </div> |
19 | </template> | 20 | </template> |
@@ -72,7 +73,11 @@ export default { | |||
72 | 73 | ||
73 | hotkeys(e) { | 74 | hotkeys(e) { |
74 | switch(e.code) { | 75 | switch(e.code) { |
75 | case 'Escape': | 76 | case 'Escape': |
77 | e.preventDefault() | ||
78 | this.close() | ||
79 | break | ||
80 | case 'Delete': | ||
76 | e.preventDefault() | 81 | e.preventDefault() |
77 | this.close() | 82 | this.close() |
78 | break | 83 | break |
@@ -127,31 +132,3 @@ export default { | |||
127 | } | 132 | } |
128 | } | 133 | } |
129 | </script> | 134 | </script> |
130 | |||
131 | <style scoped> | ||
132 | #searcher { | ||
133 | position: absolute; | ||
134 | width: 30%; | ||
135 | height: 80%; | ||
136 | top: 50%; | ||
137 | left: 50%; | ||
138 | background-color: #202020; | ||
139 | padding: 20px; | ||
140 | border-radius: 10px; | ||
141 | transform: translate(-50%, -50%); | ||
142 | } | ||
143 | |||
144 | #searcher input { | ||
145 | width: 100%; | ||
146 | margin-bottom: 20px; | ||
147 | padding: 10px; | ||
148 | padding-right: 0px; | ||
149 | height: 20px; | ||
150 | border: none; | ||
151 | background-color: #303030; | ||
152 | } | ||
153 | |||
154 | .selected { | ||
155 | background-color: #505050; | ||
156 | } | ||
157 | </style> | ||