Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@undecaf/vue-hotkey
Advanced tools
Readme
This directive, v-hotkey
, transforms hotkey keystrokes to an event on a target element or to
a function call. It offers the following features:
v-hotkey
can also target
an inner element, determined by a CSS selector.v-hotkey
is placed. Thus, hotkey mappings appear and disappear automatically together
with the elements they are placed on.Ctrl
, Alt
, Shift
and Meta
with a character or a
special key value.
Multiple hotkeys can be mapped to the same action.keydown
event overhead is very low and practically independent of the number
of hotkeys (in this example,
over 800 hotkeys are defined).An online example demonstrating v-hotkey
for plain HTML and Vue Material components
is available here
(example source code).
As a module:
$ npm install @undecaf/vue-hotkey
or
$ yarn add @undecaf/vue-hotkey
Included as <script>
:
<script src="https://cdn.jsdelivr.net/npm/@undecaf/vue-hotkey/dist/directives.min.js"></script>
import hotkey from 'vue-hotkey'
Vue.use(hotkey)
v-hotkey
requires a configuration object, or a string or an array (sets the keys
property).
Unspecified options get default values.
The configuration object supports the following properties:
Name | Type | Description | Default |
---|---|---|---|
enabled | Boolean | Enables the directive if truthy. | true |
keys | String or Array<String> | Hotkey(s) in the format [Ctrl+][Shift+][Alt+][Meta+]key_value .Plain characters should have at least one Ctrl , Alt or Meta modifier in order to avoid conflicts with input elements (see this example for an exception). Shift is irrelevant for plain characters as they are matched case-insensitively.Hotkeys will override browser shortcuts if possible. | none, must be specified |
action | String or Event or Function | An event name, an Event object, or a function to be called.The function receives the target element as argument, and this references the surrounding Vue component's vm . | 'click' |
selector | String | The first element matching this selector (starting with the element on which v-hotkey is placed) becomes the target for action . | '*' |
priority | Number | Priority in relation to other hotkey configurations. If the same hotkey has been mapped several times then the configuration with the highest priority wins. | 0 |
Property changes after binding are taken into account.
Hotkeys that click an HTML button and a Vue Material Button:
<button v-hotkey="'alt+Enter'" @click="...">Submit</button>
<md-button v-hotkey="['ctrl+s', 'Alt+S']" @click="...">Save</md-button>
No target
is required for <md-button>
since this component resolves to the target
(a <button>
) anyway.
Toggling a checkbox value:
<div>
<input
type="checkbox"
v-model="details"
v-hotkey="{ keys: 'Ctrl+D', action: () => $nextTick(() => details = !details) }">
<label>Show details (Ctrl-D to toggle)</label>
</div>
Please note that action: details = !details
would lead to an infinite render loop, and
action: el => el.checked = !el.checked
would not toggle variable details
.
Entering search text after a leading /
(inspired by the Vuetify homepage):
<md-field v-hotkey="{ keys: '/', action: el => el.focus(), selector: 'input' }">
<label>Search ("/" to focus)</label>
<md-input type="text" />
</md-field>
Plain-character hotkeys are disabled automatically on inputs and contenteditable elements so that they can be entered in these elements.
v-hotkey
could have been placed also on <md-input>
, omitting the selector
because <md-input>
resolves to <input>
.
Multiple v-hotkey
directives can be placed on the same element if a unique argument is appended
to each directive:
<md-dialog
v-hotkey:1="{ keys: 'ctrl+s', selector: '.save-btn' }"
v-hotkey:2="{ keys: 'ctrl+x', selector: '.exit-btn' }">
...
<md-button class="save-btn">Save</md-button>
<md-button class="exit-btn">Exit</md-button>
...
</md-dialog>
Although the inner structure of the Vue Material confirms component is not exposed we can still map hotkeys to the buttons:
<md-dialog-confirm
v-hotkey:1="{ keys: 'N', selector: '.md-dialog-actions button' }"
v-hotkey:2="{ keys: 'Y', selector: '.md-dialog-actions button ~ button' }"
md-content="Press Y or N to confirm or to reject"
md-confirm-text="Yes"
md-cancel-text="No" />
If the Vue Material dialog is showing then Ctrl-S
clicks
the Save
button in the dialog; otherwise Ctrl-S
clicks the Save
button in the surrounding component:
<template>
<md-dialog>
...
<md-button v-hotkey="{ keys: 'ctrl+s', priority: 1 }">Save</md-button>
...
</md-dialog>
...
<md-button v-hotkey="'ctrl+s'">Save</md-button>
</template>
Software: MIT
Documentation: CC-BY-SA 4.0
FAQs
A flexible Vue hotkey directive
The npm package @undecaf/vue-hotkey receives a total of 90 weekly downloads. As such, @undecaf/vue-hotkey popularity was classified as not popular.
We found that @undecaf/vue-hotkey demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.