Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit88153b8

Browse files
author
Filip Hric
committed
improve search and keyboard events
1 parent56bce62 commit88153b8

File tree

4 files changed

+55
-22
lines changed

4 files changed

+55
-22
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"vue-socket.io-extended":"^5.0.0-alpha.5",
6161
"vue-tsc":"^0.34.9",
6262
"vue3-click-away":"^1.1.0",
63+
"vue3-keypress":"^4.0.1",
6364
"vuedraggable":"^4.1.0"
6465
},
6566
"devDependencies": {

‎src/App.vue‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
11
<template>
2-
<div
3-
tabindex="-1"
4-
@keydown.meta.k="toggleSearch(!state.showSearch)"
5-
@keyup.f2="toggleTools(!state.showTools)"
6-
@keyup.esc="
7-
toggleTools(false);
8-
toggleSearch(false);
9-
"
10-
>
11-
<Searchv-if="state.showSearch" />
12-
<Navbar />
13-
<Notification />
14-
<Toolsv-show="state.showTools" />
15-
<router-view />
16-
<Footer />
17-
</div>
2+
<Searchv-if="state.showSearch" />
3+
<Navbar />
4+
<Notification />
5+
<Toolsv-if="state.showTools" />
6+
<router-view />
7+
<Footer />
188
</template>
199

2010
<script setup lang="ts">
11+
import {useKeypress }from'vue3-keypress'
2112
import {useStore }from'@/store/store';
2213
importNavbarfrom'@/components/Navbar.vue';
2314
importNotificationfrom'@/components/Notification.vue';
@@ -45,4 +36,31 @@ if (trelloToken && trelloTokenValid) {
4536
const userId=JSON.parse(userData).sub;
4637
state.user(userId);
4738
}
39+
40+
useKeypress({
41+
keyEvent:'keydown',
42+
keyBinds: [
43+
{
44+
keyCode:113,// f2
45+
success() {
46+
toggleTools(!state.showTools)
47+
},
48+
},
49+
{
50+
keyCode:75,// k
51+
success() {
52+
toggleSearch(!state.showSearch)
53+
},
54+
modifiers: ['metaKey'],
55+
},
56+
{
57+
keyCode:27,// esc
58+
success() {
59+
toggleSearch(false);
60+
toggleTools(false)
61+
},
62+
},
63+
],
64+
})
65+
4866
</script>

‎src/components/Search.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,27 @@
44
style="background-color:rgba(30,41,59,0.5)"
55
>
66
<divclass="shadow-lg">
7+
<divclass="mb-1 text-xs text-gray-200">
8+
Search cards
9+
</div>
710
<input
811
ref="search"
912
v-model="searchQuery"
1013
v-click-away="onClickAway"
1114
type="text"
12-
class="px-3 w-96 h-16 text-2xl bg-white border-b-2 border-slate-300 outline-none"
15+
class="px-3 w-96 h-14 text-2xl bg-white border-b-2 border-slate-300 outline-none"
1316
data-cy="search-input"
1417
@keyup="triggerSearch"
1518
>
1619
<div
1720
v-for="result in searchResults"
1821
:key="result.id"
1922
data-cy="result-item"
20-
class="py-3 px-3 w-96 h-16 text-xl bg-white border-slate-600 border-b-1"
23+
class="flex w-96 h-12 text-xl bg-white border-slate-600 border-b-1"
2124
>
2225
<a
2326
:href="`/board/${result.boardId}?card=${result.id}`"
24-
class="block w-full h-full"
27+
class="place-self-center py-3 px-3 w-full h-full"
2528
>
2629
{{ result.name }}
2730
</a>
@@ -38,11 +41,11 @@ import { storeToRefs } from 'pinia';
3841
const { searchCard, toggleSearch }=useStore();
3942
const { searchResults }=storeToRefs(useStore());
4043
const triggerSearch= ()=> {
41-
if (!searchQuery.value.length) {
42-
searchResults.value= [];
44+
if (searchQuery.value?.length) {
45+
searchCard(searchQuery.value);
4346
}
4447
else {
45-
searchCard(searchQuery.value);
48+
searchResults.value= [];
4649
}
4750
};
4851

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp