https://github.com/vaadin-component-factory/keyboard-shortcut-manager
A modern library for managing keyboard shortcuts in a Vaadin application.
https://github.com/vaadin-component-factory/keyboard-shortcut-manager
Last synced: 24 days ago
JSON representation
A modern library for managing keyboard shortcuts in a Vaadin application.
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/keyboard-shortcut-manager
- Owner: vaadin-component-factory
- License: apache-2.0
- Created: 2022-02-16T01:23:47.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T08:17:42.000Z (about 1 year ago)
- Last Synced: 2024-11-05T08:39:05.172Z (7 months ago)
- Language: TypeScript
- Homepage: https://keyboard-shortcut-manager.netlify.app/
- Size: 1.06 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VCF Keyboard Shortcut Manager
[](https://www.npmjs.com/package/@vaadin-component-factory/keyboard-shortcut-manager) [](https://vaadin.com/directory/component/vaadin-component-factorykeyboard-shortcut-manager)
A modern library for managing keyboard shortcuts in a [Vaadin](https://vaadin.com) application (or any framework).
- Dispatch custom events from keyboard shortcuts.
- Bind multiple keyboard commands to a single event listener.
- Easily create simple keyboard shortcut help dialog/popup.
- Compatible with web components and [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
- Implemented in [TypeScript](https://www.typescriptlang.org/).
This is a wrapper for the [Tinykeys](https://github.com/jamiebuilds/tinykeys) library.
[DEMO ↗](https://keyboard-shortcut-manager.netlify.com/demo/)
[API ↗](https://keyboard-shortcut-manager.netlify.com/)
## Install
```sh
npm i @vaadin-component-factory/keyboard-shortcut-manager
```
## Usage
Create an array of `KeyboardShortcut` definitions:
```ts
const shortcuts: KeyboardShortcut = [
{
keyBinding: 'Control+Shift+?',
handler: 'help-dialog',
description: 'Opens the help dialog.'
}
];
```
Then create a `KeyboardShortcutManager` instance and `subscribe` your shortcuts to activate them:
```ts
const ksm = new KeyboardShortcutManager({ shortcuts, helpDialog: true });
ksm.subscribe();
```
## Keybinding Syntax
Refer to the following links for more information on the keybinding syntax:
- [Keys and Codes](https://github.com/jamiebuilds/tinykeys#commonly-used-keys-and-codes)
- [Keybinding Syntax](https://github.com/jamiebuilds/tinykeys#keybinding-syntax)
## Publish the component to NPM
```
npm login
git commit -a -m "v${version}"
npm version ${version}
npm publish --registry https://registry.npmjs.org/
git reset HEAD~2
git commit -a -m "v${version}"
git push
git push origin v${version}
```
## License
Apache-2.0 License