diff --git a/docs/content/1.getting-started/4.shortcuts.md b/docs/content/1.getting-started/4.shortcuts.md index 45fc8688..7f326541 100644 --- a/docs/content/1.getting-started/4.shortcuts.md +++ b/docs/content/1.getting-started/4.shortcuts.md @@ -48,6 +48,65 @@ defineShortcuts({ ``` +### `usingInput` + +Prop: `usingInput?: string | boolean` + +By default, `usingInput` is `false`, meaning it will only trigger when no input is focused. When set to `true`, the shortcut will also trigger when any input is focused. + +For a more advanced behavior, `usingInput` can be set to the name of an input, so it only triggers when focusing this specific input. + +```vue + + + +``` +_`enter` shortcut will only trigger when `queryInput` is focused._ + +### `whenever` + +Prop: `whenever?: WatchSource[]` + +`whenever` allows to add constraints on the shortcut triggering behavior. This array can contain `Ref`, `ComputedRef` or `() => Boolean`. + +```ts +defineShortcuts({ + meta_k: { + usingInput: true, + handler: () => { isOpen.value = !isOpen.value } + }, + escape: { + usingInput: true, + whenever: [isOpen], + handler: () => { isOpen.value = false } + } +}) +``` +_`escape` shortcut will only trigger when `isOpen` is `true`._ + +### Simple shortcut + +In case the shortcut does not need any config, it can be written as a function. + +```ts +defineShortcuts({ + '?': () => openHelpModal() +}) +``` + ## `useShortcuts` To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable. @@ -61,3 +120,4 @@ const { metaSymbol } = useShortcuts() {{ metaSymbol }} ``` +_`metaSymbol` will display either `⌘` on MacOS or `Ctrl` on any other OS_