Installazione
Installazione
npm install @pzeta/vue-scorciatoie
Peer dependencies
La libreria richiede Vue 3.5+ e @vueuse/core 11+ come peer dependencies:
{
"peerDependencies": {
"@vueuse/core": "^11.0.0",
"vue": "^3.5.0"
}
}
Installa le peer se non già presenti nel progetto:
npm install vue @vueuse/core
Setup minimo
@pzeta/vue-scorciatoie non richiede registrazione di un plugin Vue: i composable e i componenti sono import-ready e usano un singleton interno per condividere lo state tra tutte le istanze.
Registrare scorciatoie globali
import { useShortcuts } from '@pzeta/vue-scorciatoie'
useShortcuts([
{
id: 'salva',
key: 's',
ctrl: true,
description: 'Salva il record corrente',
handler: () => salvaRecord(),
},
])
Il listener keydown su window viene registrato lazily alla prima chiamata di useShortcuts. Le scorciatoie passate in initialShortcuts sono rimosse automaticamente al dispose dello scope corrente (tipicamente onUnmounted del componente).
Aggiungere la Command Palette
<script setup lang="ts">
import { CommandPalette, useCommandPalette } from '@pzeta/vue-scorciatoie'
useCommandPalette([
{
id: 'apri-anagrafica',
label: 'Apri anagrafica',
category: 'Navigazione',
handler: () => router.push('/anagrafica'),
},
])
</script>
<template>
<CommandPalette />
<!-- resto dell'app -->
</template>
CommandPalette si registra automaticamente sul tasto Ctrl+K (Windows/Linux) o Cmd+K (macOS) tramite useMagicKeys di @vueuse/core. Il componente usa <Teleport to="body"> ed è quindi indipendente dalla posizione nel template.
Import disponibili
import {
// Componenti
CommandPalette,
// Composables
useShortcuts,
useCommandPalette,
useOS,
detectOS,
// Tipi
type Shortcut,
type Command,
type ShortcutConfig,
type UseShortcutsReturn,
type UseCommandPaletteReturn,
type OSPlatform,
} from '@pzeta/vue-scorciatoie'