Skip to content

Commit 6364bea

Browse files
microcipcipmicrocipcip
committed
docs(useKey): Adding useKey docs
1 parent 8463d11 commit 6364bea

File tree

4 files changed

+181
-37
lines changed

4 files changed

+181
-37
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ Vue.use(VueCompositionAPI)
7272
- [`useIntersection`](./src/functions/useIntersection/stories/useIntersection.md) — tracks intersection of target element with an ancestor element.
7373
[![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)
7474
[![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--advanced-demo)
75-
- [`useKey`](./src/functions/useKey/stories/useKey.md) — executes a handler when a keyboard key is used.
75+
- [`useKey`](./src/functions/useKey/stories/useKey.md) — executes a handler when a keyboard key is pressed.
7676
[![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usekey--demo)
7777
- [`useLocation`](./src/functions/useLocation/stories/useLocation.md) — tracks bar navigation location state.
7878
[![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-uselocation--demo)

‎src/functions/useKey/stories/UseKeyDemo.vue‎

Lines changed: 62 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,77 @@
11
<template>
2-
<table class="table is-fullwidth">
3-
<thead>
4-
<tr>
5-
<th>Prop</th>
6-
<th>Value</th>
7-
</tr>
8-
</thead>
9-
<tbody>
10-
<tr>
11-
<td>isPressed</td>
12-
<td>{{ isPressed }}</td>
13-
</tr>
14-
<tr>
15-
<td>keyPressCount</td>
16-
<td>{{ keyPressCount }}</td>
17-
</tr>
18-
<tr>
19-
<td colspan="2">
20-
<button class="button is-primary" @click="start" v-if="!isTracking">
21-
Start tracking key press
22-
</button>
23-
<button class="button is-danger" @click="stop" v-else>
24-
Stop tracking key press
25-
</button>
26-
</td>
27-
</tr>
28-
</tbody>
29-
</table>
2+
<div>
3+
<div class="canvas">
4+
<div class="canvas__target" :style="canvasTargetPos">🐱‍👤</div>
5+
</div>
6+
<br />
7+
<button class="button is-primary" @click="start" v-if="!isTracking">
8+
Start tracking key press
9+
</button>
10+
<button class="button is-danger" @click="stop" v-else>
11+
Stop tracking key press
12+
</button>
13+
</div>
3014
</template>
3115

3216
<script lang="ts">
3317
import Vue from 'vue'
34-
import { watch, ref } from '@src/api'
18+
import { ref } from '@src/api'
3519
import { useKey } from '@src/vue-use-kit'
20+
import { computed } from '@vue/composition-api'
21+
22+
const add = (coord: { value: number }) => () => (coord.value = coord.value + 4)
23+
const sub = (coord: { value: number }) => () => (coord.value = coord.value - 4)
3624
3725
export default Vue.extend({
3826
name: 'UseKeyDemo',
3927
setup() {
40-
const keyPressCount = ref(0)
41-
const { isPressed, isTracking, start, stop } = useKey('g')
28+
const x = ref(0)
29+
const y = ref(0)
30+
31+
const arrowUp = useKey('ArrowUp', sub(y))
32+
const arrowDown = useKey('ArrowDown', add(y))
33+
const arrowLeft = useKey('ArrowLeft', sub(x))
34+
const arrowRight = useKey('ArrowRight', add(x))
35+
36+
const isTracking = ref(true)
37+
const start = () => {
38+
isTracking.value = true
39+
arrowUp.start()
40+
arrowDown.start()
41+
arrowLeft.start()
42+
arrowRight.start()
43+
}
4244
43-
watch(isPressed, isPress => isPress && keyPressCount.value++)
45+
const stop = () => {
46+
isTracking.value = false
47+
arrowUp.stop()
48+
arrowDown.stop()
49+
arrowLeft.stop()
50+
arrowRight.stop()
51+
}
4452
45-
return { keyPressCount, isPressed, isTracking, start, stop }
53+
const canvasTargetPos = computed(() => ({
54+
transform: `translate(-50%, -50%) translate(${x.value}px, ${y.value}px)`
55+
}))
56+
57+
return { canvasTargetPos, isTracking, start, stop }
4658
}
4759
})
4860
</script>
61+
62+
<style scoped>
63+
.canvas {
64+
position: relative;
65+
width: 100%;
66+
height: 200px;
67+
background: #f1f1f1;
68+
}
69+
70+
.canvas__target {
71+
position: absolute;
72+
top: 50%;
73+
left: 50%;
74+
transform: translate(-50%, -50%);
75+
font-size: 30px;
76+
}
77+
</style>

‎src/functions/useKey/stories/useKey.md‎

Lines changed: 117 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# useKey
22

3-
Vue function that executes a handler when a keyboard key is used.
3+
Vue function that executes a handler when a keyboard key is pressed.
44

55
## Reference
66

@@ -18,6 +18,121 @@ Vue function that executes a handler when a keyboard key is used.
1818

1919
## Usage
2020

21+
Example where se use the `callback` and when pressing the key without
22+
releasing **it will update the value continuously**.
23+
2124
```html
22-
<template></template>
25+
<template>
26+
<div>
27+
<p>isPressed {{ isPressed }}</p>
28+
<p>keyPressCount {{ keyPressCount }}</p>
29+
<div>
30+
<button @click="start" v-if="!isTracking">
31+
Start tracking key press
32+
</button>
33+
<button @click="stop" v-else>
34+
Stop tracking key press
35+
</button>
36+
</div>
37+
</div>
38+
</template>
39+
40+
<script lang="ts">
41+
import Vue from 'vue'
42+
import { ref } from '@src/api'
43+
import { useKey } from 'vue-use-kit'
44+
45+
export default Vue.extend({
46+
name: 'UseKeyDemo',
47+
setup() {
48+
const keyPressCount = ref(0)
49+
50+
// Increase value continuously when 'a' key is kept pressed
51+
const handleKey = () => keyPressCount.value++
52+
53+
const { isPressed, isTracking, start, stop } = useKey('a', handleKey)
54+
return { keyPressCount, isPressed, isTracking, start, stop }
55+
}
56+
})
57+
</script>
58+
```
59+
60+
Example where se use the `callback` and when pressing the key
61+
**it will update the value only on keyUp**.
62+
63+
```html
64+
<template>
65+
<div>
66+
<p>isPressed {{ isPressed }}</p>
67+
<p>keyPressCount {{ keyPressCount }}</p>
68+
<div>
69+
<button @click="start" v-if="!isTracking">
70+
Start tracking key press
71+
</button>
72+
<button @click="stop" v-else>
73+
Stop tracking key press
74+
</button>
75+
</div>
76+
</div>
77+
</template>
78+
79+
<script lang="ts">
80+
import Vue from 'vue'
81+
import { ref } from '@src/api'
82+
import { useKey } from 'vue-use-kit'
83+
84+
export default Vue.extend({
85+
name: 'UseKeyDemo',
86+
setup() {
87+
const keyPressCount = ref(0)
88+
89+
// Increase value when 'a' key is released
90+
const handleKey = e => {
91+
if (e.type === 'keyup') keyPressCount.value++
92+
}
93+
94+
const { isPressed, isTracking, start, stop } = useKey('a', handleKey)
95+
return { keyPressCount, isPressed, isTracking, start, stop }
96+
}
97+
})
98+
</script>
99+
```
100+
101+
Example where we `watch` the `isPressed` value and when pressing
102+
the key without releasing **it will update the value only once**.
103+
104+
```html
105+
<template>
106+
<div>
107+
<p>isPressed {{ isPressed }}</p>
108+
<p>keyPressCount {{ keyPressCount }}</p>
109+
<div>
110+
<button @click="start" v-if="!isTracking">
111+
Start tracking key press
112+
</button>
113+
<button @click="stop" v-else>
114+
Stop tracking key press
115+
</button>
116+
</div>
117+
</div>
118+
</template>
119+
120+
<script lang="ts">
121+
import Vue from 'vue'
122+
import { watch, ref } from '@src/api'
123+
import { useKey } from 'vue-use-kit'
124+
125+
export default Vue.extend({
126+
name: 'UseKeyDemo',
127+
setup() {
128+
const keyPressCount = ref(0)
129+
const { isPressed, isTracking, start, stop } = useKey('a')
130+
131+
// Increase value when 'a' key is pressed
132+
watch(isPressed, isPress => isPress && keyPressCount.value++)
133+
134+
return { keyPressCount, isPressed, isTracking, start, stop }
135+
}
136+
})
137+
</script>
23138
```

‎src/functions/useKey/useKey.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type UseKeyFilter = string | ((event: KeyboardEvent) => boolean)
44

55
export function useKey(
66
filter: UseKeyFilter,
7-
callback = (event: KeyboardEvent) => ``,
7+
callback: any = () => ``,
88
runOnMount = true
99
) {
1010
const isTracking = ref(false)

0 commit comments

Comments
 (0)