chore(docs): add documentation on the directive

Signed-off-by: Maksim Sukharev <[email protected]>

docs/directives/keystroke.md

@@ -0,0 +1,85 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+```js static
+import Keystroke from '@nextcloud/vue/dist/Directives/Keystroke.js'
+```
+
+Allows to use keyboard shortcuts in the application.
+Extended version of [VueUse onKeyStroke](https://vueuse.org/core/onKeyStroke/)
+
+```vue
+<template>
+	<div class="container">
+		<h3>Use `WSAD` keys to move the ball</h3>
+		<div v-key-stroke:w="moveUp"
+			 v-key-stroke:s="moveDown"
+			 v-key-stroke:a="moveLeft"
+			 v-key-stroke:d="moveRight"
+			 class="square">
+			<div class="circle" :style="circlePosition" ></div>
+		</div>
+		<p>position: {{ circleX }} / {{ circleY }}</p>
+		<h3>Use Ctrl + F to focus input</h3>
+		<input ref="input" v-key-stroke:f.ctrl.stop.prevent="focusInput" />
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				circleX: 50,
+				circleY: 50
+			}
+		},
+		computed: {
+			circlePosition() {
+				return {
+					left: this.circleX + 'px',
+					top: this.circleY + 'px'
+				}
+			}
+		},
+		methods: {
+			moveUp() {
+				this.circleY = Math.max(0, this.circleY - 10)
+			},
+			moveDown() {
+				this.circleY = Math.min(170, this.circleY + 10)
+			},
+			moveLeft() {
+				this.circleX = Math.max(0, this.circleX - 10)
+			},
+			moveRight() {
+				this.circleX = Math.min(170, this.circleX + 10)
+			},
+			focusInput() {
+				this.$refs.input.focus()
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	p {
+		margin: 8px;
+	}
+	.square {
+		position: relative;
+		width: 200px;
+		height: 200px;
+		outline: 4px solid black;
+	}
+
+	.circle {
+		position: absolute;
+		width: 30px;
+		height: 30px;
+		background-color: red;
+		border-radius: 50%;
+	}
+</style>
+```

styleguide.config.js

@@ -99,6 +99,10 @@ module.exports = async () => {
 						name: 'Focus',
 						content: 'docs/directives/focus.md',
 					},
+					{
+						name: 'KeyStroke',
+						content: 'docs/directives/keystroke.md',
+					},
 					{
 						name: 'Linkify',
 						content: 'docs/directives/linkify.md',

styleguide/global.requires.js

@@ -10,6 +10,7 @@ import { EmojiSkinTone, emojiSearch, emojiAddRecent, getCurrentSkinTone, setCurr
 import usernameToColor from '../src/functions/usernameToColor/index.js'
 import Tooltip from './../src/directives/Tooltip/index.js'
 import Focus from './../src/directives/Focus/index.js'
+import KeyStroke from './../src/directives/KeyStroke/index.js'
 import Linkify from './../src/directives/Linkify/index.js'
 
 import axios from '@nextcloud/axios'
@@ -170,4 +171,5 @@ window.usernameToColor = usernameToColor
 // Directives
 Vue.directive('Tooltip', Tooltip)
 Vue.directive('Focus', Focus)
+Vue.directive('KeyStroke', KeyStroke)
 Vue.directive('Linkify', Linkify)