14
14
<p >Save</p >
15
15
<div >
16
16
<img alt =" " src =" ../public/cmd.svg" v-if =" os === 'macos'" />
17
- <img alt =" " src =" ../public/ctrl.svg" v-if =" os === 'linux' || os === 'windows'" />
17
+ <img
18
+ alt =" "
19
+ src =" ../public/ctrl.svg"
20
+ v-if =" os === 'linux' || os === 'windows'" />
18
21
<img alt =" " src =" ../public/enter.svg" />
19
22
</div >
20
23
</div >
28
31
@keydown =" onKeyDown"
29
32
class =" keybind-input"
30
33
ref =" keybindInput"
31
- tabindex =" 0"
32
- >
34
+ tabindex =" 0" >
33
35
<span class =" key" v-if =" keybind.length === 0" >Click here</span >
34
36
<template v-else >
35
37
<span
36
38
:key =" index"
37
39
class =" key"
38
40
:class =" { modifier: isModifier(key) }"
39
- v-for =" (key, index) in keybind"
40
- >
41
+ v-for =" (key, index) in keybind" >
41
42
{{ keyToDisplay(key) }}
42
43
</span >
43
44
</template >
47
48
</template >
48
49
49
50
<script setup lang="ts">
50
- import { invoke } from ' @tauri-apps/api/core' ;
51
- import { onMounted , onUnmounted , reactive , ref } from ' vue' ;
52
- import { platform } from ' @tauri-apps/plugin-os' ;
53
- import { useRouter } from ' vue-router' ;
51
+ import { invoke } from " @tauri-apps/api/core" ;
52
+ import { onMounted , onUnmounted , reactive , ref } from " vue" ;
53
+ import { platform } from " @tauri-apps/plugin-os" ;
54
+ import { useRouter } from " vue-router" ;
54
55
55
56
const activeModifiers = reactive <Set <string >>(new Set ());
56
57
const isKeybindInputFocused = ref (false );
57
58
const keybind = ref <string []>([]);
58
59
const keybindInput = ref <HTMLElement | null >(null );
59
60
const lastBlurTime = ref (0 );
60
- const os = ref (' ' );
61
+ const os = ref (" " );
61
62
const router = useRouter ();
62
63
const keyboard = useKeyboard ();
63
64
64
65
const keyToDisplayMap: Record <string , string > = {
65
- ' ' : ' Space' ,
66
- Alt: ' Alt' ,
67
- AltLeft: ' Alt L' ,
68
- AltRight: ' Alt R' ,
69
- ArrowDown: ' ↓ ' ,
70
- ArrowLeft: ' ← ' ,
71
- ArrowRight: ' → ' ,
72
- ArrowUp: ' ↑ ' ,
73
- Control: ' Ctrl' ,
74
- ControlLeft: ' Ctrl L' ,
75
- ControlRight: ' Ctrl R' ,
76
- Enter: ' ↵ ' ,
77
- Meta: ' Meta' ,
78
- MetaLeft: ' Meta L' ,
79
- MetaRight: ' Meta R' ,
80
- Shift: ' ⇧ ' ,
81
- ShiftLeft: ' ⇧ L' ,
82
- ShiftRight: ' ⇧ R' ,
66
+ " " : " Space" ,
67
+ Alt: " Alt" ,
68
+ AltLeft: " Alt L" ,
69
+ AltRight: " Alt R" ,
70
+ ArrowDown: " ↓ " ,
71
+ ArrowLeft: " ← " ,
72
+ ArrowRight: " → " ,
73
+ ArrowUp: " ↑ " ,
74
+ Control: " Ctrl" ,
75
+ ControlLeft: " Ctrl L" ,
76
+ ControlRight: " Ctrl R" ,
77
+ Enter: " ↵ " ,
78
+ Meta: " Meta" ,
79
+ MetaLeft: " Meta L" ,
80
+ MetaRight: " Meta R" ,
81
+ Shift: " ⇧ " ,
82
+ ShiftLeft: " ⇧ L" ,
83
+ ShiftRight: " ⇧ R" ,
83
84
};
84
85
85
86
const modifierKeySet = new Set ([
86
- ' Alt' , ' AltLeft' , ' AltRight' ,
87
- ' Control' , ' ControlLeft' , ' ControlRight' ,
88
- ' Meta' , ' MetaLeft' , ' MetaRight' ,
89
- ' Shift' , ' ShiftLeft' , ' ShiftRight'
87
+ " Alt" ,
88
+ " AltLeft" ,
89
+ " AltRight" ,
90
+ " Control" ,
91
+ " ControlLeft" ,
92
+ " ControlRight" ,
93
+ " Meta" ,
94
+ " MetaLeft" ,
95
+ " MetaRight" ,
96
+ " Shift" ,
97
+ " ShiftLeft" ,
98
+ " ShiftRight" ,
90
99
]);
91
100
92
101
const isModifier = (key : string ): boolean => {
@@ -99,7 +108,7 @@ const keyToDisplay = (key: string): string => {
99
108
100
109
const updateKeybind = () => {
101
110
const modifiers = Array .from (activeModifiers ).sort ();
102
- const nonModifiers = keybind .value .filter (key => ! isModifier (key ));
111
+ const nonModifiers = keybind .value .filter (( key ) => ! isModifier (key ));
103
112
keybind .value = [... modifiers , ... nonModifiers ];
104
113
};
105
114
@@ -118,7 +127,7 @@ const onKeyDown = (event: KeyboardEvent) => {
118
127
event .preventDefault ();
119
128
const key = event .code ;
120
129
121
- if (key === ' Escape' ) {
130
+ if (key === " Escape" ) {
122
131
if (keybindInput .value ) {
123
132
keybindInput .value .blur ();
124
133
}
@@ -128,48 +137,53 @@ const onKeyDown = (event: KeyboardEvent) => {
128
137
if (isModifier (key )) {
129
138
activeModifiers .add (key );
130
139
} else if (! keybind .value .includes (key )) {
131
- keybind .value = keybind .value .filter (k => isModifier (k ));
140
+ keybind .value = keybind .value .filter (( k ) => isModifier (k ));
132
141
keybind .value .push (key );
133
142
}
134
-
143
+
135
144
updateKeybind ();
136
145
};
137
146
138
147
const saveKeybind = async () => {
139
- console .log (' New:' , keybind .value );
140
- const oldKeybind = await invoke <string []>(' get_keybind' );
141
- console .log (' Old:' , oldKeybind );
142
- await invoke (' save_keybind' , { keybind: keybind .value });
148
+ console .log (" New:" , keybind .value );
149
+ const oldKeybind = await invoke <string []>(" get_keybind" );
150
+ console .log (" Old:" , oldKeybind );
151
+ await invoke (" save_keybind" , { keybind: keybind .value });
143
152
};
144
153
145
154
onMounted (() => {
146
155
os .value = platform ();
147
156
148
- keyboard .down (' all' , (event ) => {
149
- const isMacSaveCombo = os .value === ' macos' &&
150
- (event .code === ' MetaLeft' || event .code === ' MetaRight' ) &&
151
- event .key === ' Enter' ;
152
-
153
- const isOtherOsSaveCombo = os .value !== ' macos' &&
154
- (event .code === ' ControlLeft' || event .code === ' ControlRight' ) &&
155
- event .key === ' Enter' ;
156
-
157
- if ((isMacSaveCombo || isOtherOsSaveCombo ) && ! isKeybindInputFocused .value ) {
157
+ keyboard .down (" all" , (event ) => {
158
+ const isMacSaveCombo =
159
+ os .value === " macos" &&
160
+ (event .code === " MetaLeft" || event .code === " MetaRight" ) &&
161
+ event .key === " Enter" ;
162
+
163
+ const isOtherOsSaveCombo =
164
+ os .value !== " macos" &&
165
+ (event .code === " ControlLeft" || event .code === " ControlRight" ) &&
166
+ event .key === " Enter" ;
167
+
168
+ if (
169
+ (isMacSaveCombo || isOtherOsSaveCombo ) &&
170
+ ! isKeybindInputFocused .value
171
+ ) {
158
172
event .preventDefault ();
159
173
saveKeybind ();
160
174
}
161
175
});
162
176
163
- keyboard .down (' Escape' , (event ) => {
177
+ keyboard .down (" Escape" , (event ) => {
164
178
const now = Date .now ();
165
179
if (! isKeybindInputFocused .value && now - lastBlurTime .value > 100 ) {
166
180
event .preventDefault ();
167
- router .push (' / ' );
181
+ router .push (" / " );
168
182
}
169
183
});
170
184
});
171
185
</script >
172
186
173
187
<style scoped lang="scss">
174
- @use ' ~/assets/css/settings.scss' ;
175
- </style >
188
+ @use " ~/assets/css/settings.scss" ;
189
+ </style >
0 commit comments