VShortcut - Vue Shortcut Directive

VShortcut es una directiva personalizada para Vue 3 que permite vincular combinaciones de teclas (shortcuts) a eventos en elementos HTML mediante la biblioteca Mousetrap.

Instalación

npm i @aldoivan10/v-shortcut

pnpm add @aldoivan10/v-shortcut

Luego, importa e instala la directiva en tu proyecto Vue:

import { createApp } from "vue"
import { VShortcut } from "@aldoivan10/v-shortcut"

const app = createApp(App)
app.use(VShortcut)

Uso

Directiva v-shortcut

Puedes usar la directiva v-shortcut en cualquier elemento HTML para asociar combinaciones de teclas con eventos.

<template>
    <button
        v-shortcut="['ctrl+s']"
        @shortcut="onSave"
    >
        Guardar
    </button>
</template>

<script setup>
    onSave(evt) {
        console.log("Shortcut activated:", evt)
    }
</script>

En este ejemplo, al presionar Ctrl + S, se ejecutará el método onSave.

Modificadores

• prevent: Evita el comportamiento predeterminado del evento de teclado.
• click: Simula un clic en el elemento al activar el shortcut.

<template>
    <button
        v-shortcut.prevent.click="['ctrl+shift+p']"
        @click="sayHello"
    >
        Clic Simulado
    </button>
</template>

<script setup>
    function sayHello() {
        console.log("Hello world")
    }
</script>

API

| Propiedad | Tipo | Descripción | | --------- | :----------------------------------: | :-----------------------------------------------------: | | value | string | string[] | Atajo(s) para lanzar el evento | | modifiers | {prevent?: boolean, click?: boolean} | Opciones para modificar el comportamiento del shortcut. |

Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.