Skip to content

Commit

Permalink
Update Readme and package version
Browse files Browse the repository at this point in the history
  • Loading branch information
Simolation committed Feb 15, 2023
1 parent 80ec7d3 commit 0d2a053
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 6 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Simon Osterlehner
Copyright (c) 2023 Simon Osterlehner

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
32 changes: 29 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,19 +81,19 @@ With `:propagate="true"` the event will be passed to the parent listeners as wel

```html
<template>
<Hotkey :keys="['ctrl', 's']" :propagate="true" @hotkey="action">
<Hotkey :keys="['ctrl', 's']" propagate @hotkey="action">
<!-- any content -->
</Hotkey>
</template>
```

##### Enable or Disable the hotkey

When the hotkey should not be usable, it can easily be disabled by setting `:enabled="false"`.
When the hotkey should not be usable, it can easily be disabled by setting `disabled`.

```html
<template>
<Hotkey :keys="['ctrl', 's']" :enabled="false" @hotkey="action">
<Hotkey :keys="['ctrl', 's']" disabled @hotkey="action">
<!-- any content -->
</Hotkey>
</template>
Expand All @@ -116,6 +116,18 @@ It will prevent the hotkey when the currently focused HTML element is of the spe
</template>
```

##### Key check

Only call a function when the hotkey is pressed. Can be used for special on-click actions based on a hotkey.

```html
<template>
<Hotkey :keys="['alt']" v-slot="{ keyCheck }">
<button @click="keyCheck(onClick)">Click</button>
</Hotkey>
</template>
```

### Use as a hook

When there is no specific element tied to the hotkey, it can be used as a hook with `useHotkey()`:
Expand Down Expand Up @@ -166,3 +178,17 @@ useHotkey(
["radio", "div"]
);
```

##### Key check function

The excluded elements can be specified with the hook as well. The default is again `input` and `textarea`.

```ts
const { keyCheckFn } = useHotkey({ ... });

const doSomething = keyCheckFn((name: string, count: number) => {
// do anything when the hotkey is pressed when doSomething is called
})

doSomething("myProps", 123);
```
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@simolation/vue-hotkey",
"version": "1.1.10",
"version": "2.0.0",
"repository": "https://github.com/Simolation/vue-hotkey.git",
"author": "Simon Osterlehner <[email protected]>",
"license": "MIT",
Expand Down
2 changes: 1 addition & 1 deletion src/components/HotKey.vue
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default defineComponent({
props.excludedElements
);
const keyCheck = keyCheckFn((action: (...params: any[]) => any) =>
const keyCheck = keyCheckFn((action: (...params: any[]) => any | void) =>
action()
);
Expand Down

0 comments on commit 0d2a053

Please sign in to comment.