Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wobsoriano/v-hotkey3
Vue 3.2.x directive for binding hotkeys to components.
https://github.com/wobsoriano/v-hotkey3
hotkey vue
Last synced: 2 months ago
JSON representation
Vue 3.2.x directive for binding hotkeys to components.
- Host: GitHub
- URL: https://github.com/wobsoriano/v-hotkey3
- Owner: wobsoriano
- License: mit
- Created: 2022-12-13T20:38:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-13T23:02:04.000Z (about 2 years ago)
- Last Synced: 2024-05-01T16:36:49.276Z (8 months ago)
- Topics: hotkey, vue
- Language: JavaScript
- Homepage:
- Size: 82 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-hotkey3
Vue 3.2.x directive for binding hotkeys to components.
Though not a fork, this package is a direct copy of [v-hotkey](https://github.com/Dafrok/v-hotkey) made to work with Vue 3 (until this [PR](https://github.com/Dafrok/v-hotkey/pull/48) probably gets merged).
## Install
```bash
pnpm add v-hotkey3
```
## Usage
```ts
import { createApp } from 'vue'
import HotkeyPlugin from 'v-hotkey3'
const app = createApp(App)
app.use(HotkeyPlugin)
```
```vue
import { ref } from 'vue'
const show = ref(true)
const toggle = () => (show.value = !show.value)
const show = () => (show.value = true)
const hide = () => (show.value = false)
const keymap = {
// 'esc+ctrl' is OK.
'ctrl+esc': toggle,
'enter': {
keydown: hide,
keyup: show
}
}
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
```
## Composable
```vue
import { ref } from 'vue'
import { useHotkey } from 'v-hotkey3'
const show = ref(true)
useHotkey({
'ctrl+esc': () => {
show.value = !show.value
},
'enter': {
keydown() {
show.value = false
},
keyup() {
show.value = true
}
}
})
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
```
## Event Handler
- keydown (as default)
- keyup
## Key Combination
Use one or more of following keys to fire your hotkeys.
- ctrl
- alt
- shift
- command (MacOS)
- windows (Windows)
## Modifiers
### prevent
Add the prevent modifier to the directive to prevent default browser behavior.
```vue
Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
```
### stop
Add the stop modifier to the directive to stop event propagation.
```vue
Enter characters in editable areas doesn't trigger any hotkeys.
```
## Key Code Alias
The default key code map is based on US standard keyboard.
This ability to provide their own key code alias for developers who using keyboards with different layouts. The alias name must be a **single character**.
### Definition
```ts
import { createApp } from 'vue'
import HotkeyPlugin from 'v-hotkey3'
const app = createApp(App)
app.use(HotkeyPlugin, {
'①': 49 // the key code of character '1'
})
```
### Template
```vue
import { computed } from 'vue'
function foo() {
console.log('Hooray!')
}
const keymap = {
'①': foo
}
```
## License
MIT