summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/HelloWorld.vue60
-rw-r--r--src/components/Searcher.vue143
-rw-r--r--src/components/Sugestion.vue27
3 files changed, 170 insertions, 60 deletions
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c544cb..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
1<template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <p>
5 For a guide and recipes on how to configure / customize this project,<br>
6 check out the
7 <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 </p>
9 <h3>Installed CLI Plugins</h3>
10 <ul>
11 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15 </ul>
16 <h3>Essential Links</h3>
17 <ul>
18 <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
19 <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
20 <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
21 <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
22 <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
23 </ul>
24 <h3>Ecosystem</h3>
25 <ul>
26 <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
27 <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
28 <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
29 <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
30 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
31 </ul>
32 </div>
33</template>
34
35<script>
36export default {
37 name: 'HelloWorld',
38 props: {
39 msg: String
40 }
41}
42</script>
43
44<!-- Add "scoped" attribute to limit CSS to this component only -->
45<style scoped>
46h3 {
47 margin: 40px 0 0;
48}
49ul {
50 list-style-type: none;
51 padding: 0;
52}
53li {
54 display: inline-block;
55 margin: 0 10px;
56}
57a {
58 color: #42b983;
59}
60</style>
diff --git a/src/components/Searcher.vue b/src/components/Searcher.vue
new file mode 100644
index 0000000..4a252a0
--- /dev/null
+++ b/src/components/Searcher.vue
@@ -0,0 +1,143 @@
1<template>
2 <div id="searcher">
3 <input type="text" v-model='search' ref='input' @keydown="hotkeys" placeholder="Search!">
4 <Sugestion
5 v-for="sugestion in sugestions"
6 :key="sugestion[0]"
7 :command="sugestion[1]"
8 :class="{selected: sugestion[0] === current[0]}"
9 />
10 </div>
11</template>
12
13<script>
14import CommandsService from '@/services/CommandsService'
15import Sugestion from '@/components/Sugestion.vue'
16
17export default {
18 data() {
19 return {
20 commands: CommandsService,
21 search: '',
22 sugestions: [],
23 current: []
24 }
25 },
26
27 methods: {
28 set_sugestions() {
29 const sugestions = []
30 let is_current_set = false
31
32 Object.entries(this.commands).forEach((element) => {
33 if(element[0].startsWith(this.search)) {
34 sugestions.push(element)
35 if(!is_current_set){
36 this.current = element
37 is_current_set = true;
38 }
39 }
40 });
41 this.sugestions = sugestions
42 },
43
44 change_current(a=1) {
45 let index = this.sugestions.findIndex(element => element===this.current)
46 let new_current = this.sugestions[index+a]
47
48 if (new_current) this.current = new_current
49 else this.current = this.sugestions[0]
50 },
51
52 execute_current() {
53 let out = this.current[1]()
54
55 if(out instanceof Object) {
56 this.search = ''
57 this.commands = out
58 }
59 },
60
61 hotkeys(e) {
62 switch(e.code) {
63 case 'Escape':
64 this.$emit('close')
65 break
66 case 'ArrowDown':
67 e.preventDefault()
68 this.change_current(1)
69 break
70 case 'ArrowUp':
71 e.preventDefault()
72 this.change_current(-1)
73 break
74 case 'Tab':
75 e.preventDefault()
76 this.change_current(1)
77 break
78 case 'Enter':
79 this.execute_current()
80 e.preventDefault()
81 break
82 case 'ShiftLeft':
83 this.commands = CommandsService
84 break
85 }
86 },
87 },
88
89 watch: {
90 search() {
91 this.set_sugestions()
92 },
93
94 commands() {
95 this.set_sugestions()
96 }
97 },
98
99 computed: {
100
101 },
102
103 components: {
104 Sugestion
105 },
106
107 created() {
108 this.set_sugestions()
109
110 this.$nextTick(function () {
111 this.$refs.input.focus()
112 })
113 }
114}
115</script>
116
117<style scoped>
118 #searcher {
119 position: absolute;
120 width: 30%;
121 height: 80%;
122 top: 50%;
123 left: 50%;
124 background-color: #202020;
125 padding: 20px;
126 border-radius: 10px;
127 transform: translate(-50%, -50%);
128 }
129
130 #searcher input {
131 width: 100%;
132 margin-bottom: 20px;
133 padding: 10px;
134 padding-right: 0px;
135 height: 20px;
136 border: none;
137 background-color: #303030;
138 }
139
140 .selected {
141 background-color: #505050;
142 }
143</style>
diff --git a/src/components/Sugestion.vue b/src/components/Sugestion.vue
new file mode 100644
index 0000000..cfbcd93
--- /dev/null
+++ b/src/components/Sugestion.vue
@@ -0,0 +1,27 @@
1<template>
2 <div class="sugestion">
3 <span>{{command.name}}</span>
4 </div>
5</template>
6
7<script>
8export default {
9 props: {
10 command: Function
11 }
12
13}
14</script>
15
16<style scoped>
17 .sugestion {
18 width: 100%;
19 margin-left: auto;
20 margin-right: auto;
21 background-color: #303030;
22
23 margin-top: 10px;
24 padding: 5px;
25 padding-right: 0px;
26 }
27</style> \ No newline at end of file
generated by cgit v1.2.3 (git 2.45.2) at 2024-11-22 17:28:58 +0000