arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 02:40:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(define-shortcuts): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-25 19:22:44 +02:00
parent fb8e6a6a66
commit 9edb23080d
1 changed files with 3 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/content/2.composables/define-shortcuts.md
View File

@@ -20,7 +20,7 @@ defineShortcuts({
``` ```
- Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`. - Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`.
- The composable uses Vue's `useEventListener` to handle keydown events. - The composable uses VueUse's [`useEventListener`](https://vueuse.org/core/useEventListener/) to handle keydown events.
- For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API documentation. Note that the key should be written in lowercase. - For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API documentation. Note that the key should be written in lowercase.
::tip{to="/components/kbd"} ::tip{to="/components/kbd"}
@@ -35,6 +35,7 @@ Define keyboard shortcuts for your application.
- `config`: An object where keys are shortcut definitions and values are either handler functions or shortcut configuration objects. - `config`: An object where keys are shortcut definitions and values are either handler functions or shortcut configuration objects.
- `options`: Optional configuration for the shortcuts behavior. - `options`: Optional configuration for the shortcuts behavior.
- `chainDelay`: The delay between key presses to consider the shortcut as chained. Default is `250`.
#### Shortcut Definition #### Shortcut Definition
@@ -55,7 +56,7 @@ Shortcuts are defined using the following format:
- `escape`: Triggers on Esc key - `escape`: Triggers on Esc key
- `enter`: Triggers on Enter key - `enter`: Triggers on Enter key
- `arrowleft`, `arrowright`, `arrowup`, `arrowdown`: Trigger on respective arrow keys - `arrowleft`, `arrowright`, `arrowup`, `arrowdown`: Trigger on respective arrow keys
- etc.
#### Shortcut Configuration #### Shortcut Configuration
Each shortcut can be defined as a function or an object with the following properties: Each shortcut can be defined as a function or an object with the following properties:
@@ -73,24 +74,6 @@ interface ShortcutConfig {
- `true`: Shortcut triggers even when any input is focused - `true`: Shortcut triggers even when any input is focused
- `string`: Shortcut only triggers when the specified input (by name) is focused - `string`: Shortcut only triggers when the specified input (by name) is focused
#### ShortcutsOptions
The `options` parameter allows you to configure the behavior of the shortcuts. It has the following properties:
```ts
interface ShortcutsOptions {
repeat?: boolean
trigger?: 'keydown' | 'keyup'
capture?: boolean
passive?: boolean
}
```
- `repeat`: If `true`, the shortcut will trigger repeatedly while the key is held down. Default is `false`.
- `trigger`: Specifies whether the shortcut should trigger on 'keydown' or 'keyup' events. Default is 'keydown'.
- `capture`: If `true`, the event listener will be set to capture phase. Default is `false`.
- `passive`: If `true`, indicates that the function specified by listener will never call preventDefault(). Default is `false`.
## Examples ## Examples
### Basic usage ### Basic usage